@bighead85 I use the same code as you but can’t get °C showing. @Rune_Pedersen did you get anywhere with °C?
All I have done is added some text to my svg and the corresponding sensor and thereafter added text for my sensor and used the text-template.
Mine is working fine with that text template.
#Sensors
- name: temp_Sensors
entities:
- sensor.inside_temp
- sensor.outside_temperature
- sensor.outside_temperature_max
- sensor.outside_temperature_min
- sensor.flat_day1_temperature_max
- sensor.flat_day1_temperature_min
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}°C'
Then as an example of my SVG
<text
xml:space="preserve"
style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.76111126px;line-height:1.25;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
width="59.396969"
height="25.455845"
x="135.87383"
y="19.166546"
id="sensor.inside_temp"
inkscape:label="#inside_temp_result"><tspan
y="19.166546"
x="135.87383"
id="tspan12"
sodipodi:role="line">Inside</tspan></text>
I did have issues in inkscape with setting text directly (kept giving flowroot) but i manually edited the first one then copy and pasted after than.
I am using SSL as well with no issues and actually have 2 instances of floorplan now running. 1 is truly a floorplan as intended, the other is a mock of a magic mirror (with raspberry pi) which i intend to display in kiosk from an pi Zero W. (Chrome working fine on desktop but Firefox desktop fails to load both floorplans)
Yes mine is working with the code he provided[quote=“bachoo786, post:1202, topic:17394, full:true”]
@bighead85 I use the same code as you but can’t get °C showing. @Rune_Pedersen did you get anywhere with °C?
All I have done is added some text to my svg and the corresponding sensor and thereafter added text for my sensor and used the text-template.
[/quote]
same here just added a class to style it
- name: temp_Sensors
entities:
- sensor.temperature_158d0001f2396a
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}°C'
class_template: 'return "room-temps";'
in my SVG i added a text box with xxx written in it…not sure if 3 characters needed but helps me space everything.
I’m hoping for a bit of help here. I’ve had no problem starting to set this up using pkozuls instructions, but my floorplan.svg image is not cooperating. I can get 1 or 2 things to be clickable but the rest do nothing. Can someone check my github
Looks like you need to add “actions” for the other groups in the floorplan.yaml file. You have an action for your lights, which I would assume are the ones you can get to be clickable. You need to tell floorplan to perform an action when you click on the element.
Sorry, floorplan.yaml was still mostly stuff from the install template, if updated it. It’s the lights I’m focused on; the first one (piano.lamp) works, but small.lamp does not. in the floorplan.svg code they’re formatted the same so I don’t see why one works and not the other. The media player has actions as well and doesn’t work. Frustrating.
edit: Does it have something to do with the way the floorplan.svg is drawn? I tried to add icons (in svg format) from the free sources that others used but that never worked so my current testing ground are just simple shapes drawn on.
edit2: Also, could it be the floorplan.yaml spacing. I know yaml gets finicky about that but I went through and checked; all 2 spaces .
What is the best way to have multiple floors now?
I just tried @ryanrdetzel solution, but I get this error:
Uncaught ReferenceError: svg is not defined
URL: https://XXX.duckdns.org/local/custom_ui/floorplan/ha-floorplan.html
Line: 166, column: 53
Error: {}
I have 5 layers. 4 floors + buttons.
Is there no activity developmentwise on floorplan now?
means you can replace a potentially long list of binary sensors in the front end with a single image that updates in real time using color represent states
I am facing the Error loading stylesheet issue. What did you do to fix it?
I have a very tall floorplan, width is 1080px and height is 4500px. I’m trying to get it to take up the width of the page, and allow me to scroll down the page to see the rest. I’m using it on a phone, as a custom panel. How can I get it to display in it’s native size without it being auto resized by the height of the page? I’ve been playing with the css for hours and I’ve gotten nowhere.
And how do I get floorplan to stop replacing my text, for lights it’s changing my text in the svg from kitchen to on or off. I have it set to change the text color to show if the light is on or off, I don’t want it to change the text at all.
text_template: '${(entity.state === "armed_away") ? "Armed away" : "Disarmed"}'
I want to make floorplan a little nicer for eyes, but I have no idea how to make it work. This line only works for Armed away, but anything else is Disarmed, even armed_home or pending. 
I just want to rename 4 state texts to something else (to my native language, but I use english here for easy understand).
armed_away -> Armed away
armed_home -> Armed home
disarmed -> Disarmed
pending -> Pending
Since I’m not an expert I can’t find out what is the correct syntax for floorplan, and couldn’t find good templates in google. Can someone help me in this?
Since I’m not the only one with issues using floorplan on mobile/touch devices while pan_zoom is enabled, I’ve created a fix. I’m not a web dev by trade, so it’s really just thrown together. This was a huge barrier to using floorplan in my case, so I had to try something.
I’ve created a pull request for the fix that I threw together here: https://github.com/pkozul/ha-floorplan/pull/59
I haven’t found (yet) any issues with my fix, but I give no warranties. If anyone wants to make the changes manually, it’s fairly simple–just copy the changes from the pull request. The change to svg-pan-zoom can be safely ignored.
As a bonus, the fix also adds pinch to zoom support for touch devices.
@Bottesford How did you resolve the issue in your earlier post of being able to see both the rectangle and the image that the image_template added at the same time. The image_template is obviously working in my case becasue it’s adding the image but my original rectangle is still there as well. All rectangles are at the root level of the svg tag also.
Have you got it working? Yes, it could be the way it’s drawn. If it’s inside a group in the svg file it may not be clickable. Yes, if you have done anything wrong i the floorplan.yaml it also could make errors. But I can’t access your link to check your github repository.
If you don’t use the full with of your screen, you can try with changing the percent view in floorplan.html ( change to ex 200 %):
<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>
<dom-module id="ha-panel-floorplan">
<template>
<style include="ha-style">
.container-fullscreen {
height: calc(100%);
vertical-align: top;
position: relative;
}
But if you use the full with, the picture won’t get bigger.
Great work! It worked perfectly 
I apply a css class to it which sets the stroke to none. So for example for showing the status of a room with an image I add the empty rectangle and then set hide the rectangle and show the image like this:
name: Room occupation state icon
entities:
- input_select.room_occupation_smallbathroom
- input_select.room_occupation_livingroom
- input_select.room_occupation_kitchen
- input_select.room_occupation_backhall
- input_select.room_occupation_bedroom
- input_select.room_occupation_babyroom
- input_select.room_occupation_bathroom
class_template: return "placeholder_no_stroke";
image_template: 'return "/local/custom_ui/floorplan/images/room_occupation/" + entity.state + ".svg";'
Then in my floorplan.css:
.placeholder_no_stroke {
stroke: none !important;
}Floorplan noob here. This is a fantastic extension but I’m having a couple of issues with configuration. Upgrading to a newer version of Floorplan resolves some of them but upgrading to the latest version breaks my configuration. What is the latest version I should be using for vanilla Floorplan? In the main Github repository, it’s 1.0.6 but I’m on 1.0.7.4 and most things are working (I think I’ve seen a 1.0.7.5 discussed in this forum and will try that next). In the quick-start and fully kiosk repositories, it’s 1.0.7.51 but upgrading to that seems to break my configuration (I get a blank page). Thanks in advance!