I am a happy user!!!
off to create the first floor and attic 
1 Like
What i did:
- I created the basic layout of my house in floorplanner.com.
- Made a screenshot of the layout (the export of floorplanner.com is very low)
- Imported the screenshot in Inkscape. (create layers <-- search youtube for more info)
- Look up the icons you need at https://materialdesignicons.com/
- Right click the icon you need
- save the icon as a compressed svg
- Import the saved svg in Inkscape (Ctrl + i)
- Repeat 4 to 7 for every icon
- Positions the icons and give them the names of the entities of home-assistant!
Thats all folks!!
5 Likes
Just adding my work in progress to the inspirational mix! Really Great project! I was able to add input_booleans, Covers and climates. Really amazing!
Source files can be found in my Repo.
5 Likes
Anyone any luck with showing the status of webcams/cameras?
Mine stay without the entity class…
I too would love to have your file! I almost finished recreating your styling in Inkscape, but then Inkscape crashed and of course, I did not save it…
@Bram_Kragten and @john1 here is my file. I’ve removed some of the effects which are not supported by SVG… I hope it still works!
1 Like
Thanks! I’ll look into it tonight!
@pkozul Would it be possible to have tabs on the top of the panel, the same as the States panel, so I can have a tab for every floor? Does HASS support this? And could you point me in the right direction? Not at home in the HASS front end…
2 Likes
I am struggling to get floorpan to work and have been trying for the last 2 days without success. I am new to Home Assistant and have done a clean installation of Hassbian on a Raspberry.
- Do I copy the files of the repo into the “/srv/homeassistant/” or “/home/homeassistant/.homeassistant” directories?
- There are no “www” directories. Do I create the same directory structure as the repo?
- Could anyone please provide me with a basic configuration.yaml, floorplan.svg, floorpan.css, files etc. with some instructions on what directories needs to be created and where these files needs to be placed. I would truly appreciate any assistance. It is not out of laziness, I have tried to follow the instructions on GitHub and have not been successful.
- When browsing I am using Safari version 9.0.3
I am sure that if I can get a minimalist setup working and be able to view the svg file, I could take it further.
Hi @Fezile
My setup is with “Option 2: Floorplan custom panel”. I hope the next figure will answer your questions 1 and 2. It is the directory tree of folders and files of this component:
As you can see, three files are in the last folder (floorplan) and examples for these can be found in the Github’s repository that you can download.
The file floorplan.yaml should be placed in /home/homeassistant/.homeassistant directory. There is also an example in github. For the custom panel it is also needed a file in its corresponding folder as you can see here:
And again there is an example file in github.
Finally, the part inside configuration.yaml
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
I hope I have remembered everything. I don’t know for the “Custom State Card” option, but for the “Custom panel” it is pretty easy. Good luck and ask if you get stuck!
One super important tip I learned is to make sure ALL IDs are lowercase. pretty much make sure all device names in HASS and floorplan are lowercase to avoid a ton of troubleshooting and frustration.
1 Like
floorplan.yaml (548 Bytes)
I have done as you indicated but the floor plan does not display.
- In floorplan.yaml should the path “/local” remain /local/custom_ui/floorplan/floorplan.svg.
- I have included below the floorplan.yaml to check if this is correct. The floorplan.yaml and floorplan.svg have been edited to only contain the ID “binary_sensor.front_hallway”.
floorplan.yaml
name: Demo Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
groups:
- name: Binary sensors
entities:
- binary_sensor.front_hallway
states:
- state: 'off'
class: 'info-background'
- state: 'on'
class: 'warning-background'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 10That’s what I have, “local” is replaced by HA with “www” … this is my floorplan.yaml …
name: Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion
groups:
- name: Sensors
entities:
- sensor.avglroomtemp
Remember tho’ the actual files must be in /home/homeassistant/.homeassistant/www/custom_ui/floorplan/ ie where the github specifies 
I have the same paths as you and @keithh666
Have you mentioned your version of Home Assistant? I think you should have > 0.42
Other than that, I cannot point you in any direction. I have very little knowledge of software development. Sorry!
I’m not sure what the difference between safari and chrome are but it works on chrome.
I have downloaded Chrome and it works now. It does not work however when using Safari.
Thank you to everyone who have assisted and guided me to getting it to work.
1 Like
Many, many thanks! It is starting to look like something!
Made a few small changes, and not everything is to my liking yet, but all seems to be working!
3 Likes
No worries glad you got it working, it’s an awesome addition to HA 
1 Like
Would you mind posting your SVG or AI file? Love your image, I use AI as well would be great to use as a template.
I used this SVG file Floorplan for Home Assistant
When I’m done I do plan to share all the CSS and SVG.
2 Likes