Floorplan for Home Assistant

I believe there is currently an issue with custom state cards…

hey I posted the solution above and Andrey is working on a fix…

1 Like

@Ross_Davey I added the info below to the doco on GitHub. Let me know if it helps in getting your floorplan to show as a state card…

To allow the above file to be served by Home Assistant, add it to the frontend section of your Home Assistant configuration:

    - /local/custom_ui/state-card-floorplan.html

Thank you Pkozul

I have this in place already and its working as a custom panel

Im still having issues with it showing blank on as a state card

Hitting a bit of a dead end here :frowning: Can someone point me in the right direction?

I’m trying to improvise a way to use dimmable lights on my floorplan. To achieve this I’m looking at adding two seperate icons for each light. The first to toggle the light when pushed, the second to show the default popup for dimmable light which includes a slider for the level.

I can get both of them working seperately but not together.
If I want to show the info popup I can leave the action blank in my floorplan.yaml

    - name: Lights
         - light.lamp_2_level
         - light.lamp_3_level
        - state: 'on'
          class: 'light-on'
        - state: 'off'
          class: 'light-off'

This info popup shows a lot of useless info like node id, value id, entity id’s etc but at least it has a slider so it will have to do)

Alternativly I can specify an action which toggles the light

    - name: Lights
         - light.lamp_2_level
         - light.lamp_3_level
        - state: 'on'
          class: 'light-on'
        - state: 'off'
          class: 'light-off'
        - service: toggle
          domain: homeassistant 

But in both scenarios I need to assign id = light.lamp_2_level to the icon in the svg.
How can I use two seperate icons both related to the same light but specifying a different action?

Or alternatively, have any of you implemented a better way of handling dimmable lights in your floorplan?


Hi @Cpete. Can you check my post in the other thread and give that a go?

Make sure to grab the latest floorplan file from the ‘camera-images’ branch:


How are you getting text to word wrap in an area? I have a sensor that can generate a long text message and would like it to wrap within a certain area. I have tried the flow thing built in to Inkscape, but that doesn’t actually show the message in the defined area. I worked on this most of the night and it is driving me absolutely bonkers.

@atomicpapa check here and the messages below:

1 Like

Thank you! I got it up and running!

1 Like

I’m having trouble with the lights. When I press they often don’t respond. I believe it’s the double click issue previously mentioned because sometimes I see them flicker on-off. Some lights are worse than others.
Is this still a problem? Any solution?

@ ferges

This was made with https://home.by.me , a cool & free web application


Nice. I will have a play!

How do you export to SVG from home.by.me?

wow, any chance you can share your code?

I just made a screenshot and used that *png as the background in my SVG file… worked like a charm!


Sure - what exactly do you need?


Just a little heads up regarding the configuration:
If you use the customize frontend editor to change some other entity, the content of the floorplan.yaml is written into the customize.yaml file. (The !include floorplan.yaml line is replaced with the actual content from floorplan.yaml)
I spent 4 hours yesterday trying to figure out why any changes I did in floorplan.yaml never got applied.
So you’ve been warned :slight_smile:

The floorplan related files, just wondering how to align everything on the image as you did…

Hey, anyone here who can help me. Been at this for 1.5 hours and still not understanding where the issue is…

I´m getting thiss errror

2017-11-08 21:13:47 ERROR (Thread-2) [homeassistant.util.yaml] mapping values are not allowed here
in “/home/username/.homeassistant/floorplan.yaml”, line 4, column 11

>  name: Floorplan
>  image: /home/username/.homeassistant/www/custom_ui/floorplan/floorplan.svg
>  stylesheet: /home/username/.homeassistant/www/custom_ui/floorplan/floorplan.css
>     - name: Lights
>       entities:
>         - light.hallway
>         - light.kitchen
>         - light.bedroom
>         - switch.fhlampa
>         - switch.fvlampa
>       states:
>         - state: 'on'
>           class: 'light-on'
>         - state: 'off'
>           class: 'light-off'
>       action:
>         domain: homeassistant
>         service: toggle

Try adding:


below stylesheet and above - name at the same indentation level as “stylesheet”