Excellent. So do you think you’ll use the floorplan as a custom panel (i.e. full screen) or as an entity card embedded within the front end?
Right now I have it as both. One serves as a quick, at-a-glance and the other is a full screen interactive display on one of my tablets.
Would I need to scale my image/SVG down to make it fit better on the screen?
As a custom panel, is it extending past the bottom of the screen? I currently have it like that on my laptop screen. Will see if there’s a way to keep the entire SVG visible on screen.
In the loadFloorPlan() function, can you add the code below:
svg.style.position = 'absolute';
Put it just after these two lines:
svg.style.height = '100%';
svg.style.width = '100%';
If that gets your floorplan displaying within the bounds of your screen, I will add this to the code base in GitHub. Let me know how it goes.
What did you guys use to make the svg’s? I’ve got a decent floorplan of my house I can copy but need to redraw it as an svg.
I used Inkscape and I believe that’s the one most people use (it’s free). You can create your floorplan SVG from scratch, and/or import some existing SVGs (such as icons to represent your cameras, switches, etc.).
Some useful info:
http://wiki.inkscape.org/wiki/index.php/Drawing_a_Floor_Plan
And a video:
4 Likes
Hi I love this, tried my own setup got it working perfectly one question is it possible to have different colours for different entities. Also would be great to displaying temperature/ humidity readings
Wow this is super cool, I can see a ton of uses for this not just a floor plan.
I agree, if sensor values could be overlayed somehow then would open up a lot of possibilities.
Thank you for your code and example, I will give it a try
1 Like
Yes, I’ve been thinking about allowing more control over the display/behaviour of each entity. I think I will enhance the configuration, so that each entity will have its own set of options.
As for temperature and humidity, I guess they should appear as text somewhere on the image, possibly with some colour as well to indicate the level. Maybe we could use SVG <text> elements for this. So, for example, on your floorplan SVG, you could create <text> elements for your temp and humidity readings, and the text could then get automatically updated to reflect the current states in HA. Would that sound like a good option?
3 Likes
I’m glad I moved this into Share Your Projects; it really seems to be taking off!
3 Likes
HA is so well designed and flexible, it was just begging to move in this direction 
1 Like
One thing I have had problems with the cache on all browsers and I use the iOS app and the Electron desktop app. These don’t have a cache clear so every time I redesign the floorplan.svg I have to clear the cache.
Excuse me if im missing something obvious, but is there a way to get a sensor working with this that isnt binary? I have a motion sensor that is not “on” or “off”.
This is an awesome addition though 
Hi there CommonBob. What are the two states of your binary sensor? Currently, the code supports ‘on’ and ‘open’ as the ‘on’ states, for example.
I am working on a new version that will allow you to control a lot more of the behaviour via configuration. It will be flexible enough so you can add different states yourself, and define how they should be displayed, etc.
2 Likes
I like the sound of that.
Just wanted to share my most recent floorplan. Thank you to everyone for pitching ideas and sources.
6 Likes
@Corey_Johnson I hope you don’t have those pink and green carpets at home 
Just kidding; you’ve created an amazing SVG floorplan. Thanks for sharing.
@pkozul Very nice work! You are awesome! Thanks for this addon. It was one feature that I missed in HA when I switched from Domoticz one year ago. Since I’m very conservative (and lazy) I’m still with 0.36.1 but going to upgrade just to test this. Thanks again!
1 Like
Really nice Corey. Great work.
Just a quick update. To support just about any type of HA entity, I’ve done a bit of a rewrite. I’ve been learning quite a bit along the way myself, so always looking to improve it.
I have the new version running on my machine, but want to do some more testing before putting it up on GitHub. With this new version, you will be able to configure just about everything yourself. Below is an example showing what I have in my setup:
binary_sensor.floorplan:
custom_ui_state_card: floorplan
image: /local/custom_ui/floorplan/floorplan.svg
password: <some_password_here>
stylesheet: /local/custom_ui/floorplan/floorplan.css
last_motion_entity: sensor.template_last_motion
groups:
- name: Sensors
entities:
- sensor.melbourne_now
- name: Switches
entities:
- switch.doorbell
states:
- state: 'on'
fill: '#F8D2B9'
- state: 'off'
fill: '#B9BFF8'
- name: Binary sensors
entities:
- binary_sensor.front_hallway
- binary_sensor.hair_salon
- binary_sensor.back_hallway
- binary_sensor.kitchen
states:
- state: 'on'
fill: '#F8B9BE'
- state: 'off'
fill: '#C4EDB1'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 10
- name: Cameras
entities:
- camera.hallway
- camera.driveway
- camera.front_yard
- camera.front_door
As you can see, the new style of config lets you create groups of entities, so you can define bahviours at a group level. You can create as many groups as you want, and split up your entities into whichever groups you want, as long you want them to share the same colours, transitions, etc. I have my binary sensors in the same group, as I want them all to show the same ‘on’ and ‘off’’ colours, but you can easily split them into multiple groups to have different colouring schemes.
Also, the new version supports SVG <text> elements, so you can now display any textual information on your floorlplan (i.e. weather, as in my example).
Below is what my floorplan looks like, using the new version and the config I showed above:
Will let you know when this is on GitHub, and when I’ve updated the documentation, etc.
BTW, on more thing I would like to add to the new version is the ability to (optionally) specify which CSS classes to apply to different states. Currently, the code changes the fill colour based on an entity’s state, but it would be good to use CSS to change the appearance, as you can do a lot more with it, and you have plenty of flexibility in managing this yourself.
And another nice thing with the new version. The same HTML file can be reused for both custom panels and state cards, so no need to copy it and make those few changes. A single file is now used, for those who want to display the floorplan in both places.
9 Likes
Trying the new HTML file and use the updated Yaml, but I’m getting an error online 165 in the HTML file, any ideas are my doing something wrong.