I use inkscape for the svg works perfectly fine for me.
~Cheers
Inkscape works much better with those id’s for mee, thanks for the tip. Does anyone use shadows in the svg file. Home Assistant shows them as “dead” images? any tips on that?
1 Like
I don’t know about svg shadows but I tried to use css box shadows which did not work.
~Cheers
Can anyone shed some light on what might be the issue here?
Floorpla.yaml:
name: Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
These options are optional
warnings: # enable warnings (to find out why things might ot be working correctly)
pan_zoom: # enable experimental panning / zooming
hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
date_format: DD-MMM-YYYY # Date format to use in hover-over text
groups:
- name: Lights
entities:
- light.living_room_lights
- light.dining_room_lights
- light.kitchen_lights
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant # This optional parameter allows you to use other services such as homeassistant.toggle like here.
service: toggle
- name: Alarm Panel
entities:
- alarm_control_panel.1st_floor
states:
- state: 'armed_away'
class: 'alarm-armed'
- state: 'armed_home'
class: 'alarm-armed'
- state: 'disarmed'
class: 'alarm-disarmed'
- name: Binary sensors
entities:
- binary_sensor.z01_front_door
- binary_sensor.z02_front_window_1
- binary_sensor.z03_front_window_2
- binary_sensor.z04_back_door
states:
- state: 'off'
class: 'info-background'
- state: 'on'
class: 'warning-background'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 10Those 404 errors in the second screenshot indicate that the browser cannot load the javascript files from the web server.
You need to create a lib folder under the www/custom_ui/floorplan/ directory and copy the 3 javascript files from git into it.
Thanks.
I got it a few min’s ago.
Is it not documented?
It does appear to be missing from the README. I’ll create a PR for that on Github.
It is mentioned further up this thread - somewhere in the 646 messages 
That’s where I found out.
Do I need to worry about the following entries in the console?
paper-drawer-panel is deprecated. Please use app-layout instead! frontend-7d59999….html:5
Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
Thanks again for the help.
Sorry for the delay. Yes, you should be able to ignore those warnings for now.
No worries, been up and running.
Appreciate the help.
Thanks.
I’m trying to implement Skycons from Dark Sky (with animations, if possible) in my floorpan, but I’m having trouble finding the elements (or any elements, really) using JS. I’m guessing that has something to do with how the whole panel is loaded, any thoughts on how I can find the right element to load the skycon into?
- name: dark_sky_icon
entities:
- sensor.dark_sky_icon
image_template: '
var skycons = new Skycons({"color": "white"});
skycons.add("floorplan", entity.state);
skycons.play();
return "";
'Blockquote A short question. I would like to show the status of an object (e.g. if the light bulb is on or off) by changing the color of an the icon. However, I would also like to display some text nearby with the brightness level (an attribute). How do I link one entity ID to two objects? Thanks.
One option is to create a new template sensor/entity id in HASS and link the new sensor to the SVG text. However, I don’t want a clutter in the entity list.
@pkozul Any update on this? It would be really useful to have. Thanks.
1 Like
Hello!
Is there any chance of working toward making this a baked in add on for Hass.IO?
I think it would be an amazing built-in addition to it and would make the entire installation experience much more user friendly for those new to Hassio.
Kind Regards,
- Mario
1 Like
This would require Floorplan to be pulled into HA core.
That would be nice!
I recently migrated to Hass.io from a traditional docker install.
My floorplan is still working fine after the migration.
1 Like
Pulling into the core of Hass.io is exactly what is needed, I think. It would make for a much more robust setup right out of the box. I think it would also be a big help in getting those on HA to migrate over to Hass.io as well. It seems many are unwilling because all the add-ons are not there yet.
That, and this is something that provides a lot of “wow factor” once it is all set up and going. We are visual creatures by nature anyhow. 
1 Like
You can still use floorplan with hass.io though.
The www dir with the custom floorplan files just lives in the HA config dir.
1 Like
I imported most of my old configuration files and directories into my hass,io setup. My floorplan still worked without any modification.
1 Like
Odd, it would not build for me in Hass.io. I will have to try again. It would still be a great thing to just have it all as an add on though.
Hi there.
Firstly, thank you so much for your work on this. Its fantastic!
I implemented your idea about the animated weather icons but have run into a bit of trouble and wonder if you had any ideas on where i went wrong?
I have managed to get the picture to load, but it doesn’t want to stay within its boundaries, instead sits dynamically around the screen (moves when window changes, doesn’t stick in one spot).
Weirdly, when you hover over the object that is the placeholder it also displays the weather details.
I have edited the SVG files to have the B in the viewbox.
Help?
I am trying to figure out the same thing but for a lock. Were you able to get this resolved?