Floorplan for Home Assistant


I use Unraid as well. This is what I have in the panels file:

<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>


@shire210 What dir do you have mapped in to docker config for HA?
I have /mnt/user/appdata/home-assistant -> /config


You seem to be mixing up filesystem and url paths. The filesystem path of /config/www is equivalent to the url path of http://hass/local.

If you place your floorplan files at \config\www\custom_ui\floorplan, then you would set your floorplan,.yaml to:

name: Test Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css


@NotoriousBDG spot on thank you!! that fixed it. Now I can start putting my actual floorplan in

Thanks all for the help!


I had this work in progess. The highlighted white area show that light for that area is ON .


Just clarifying for anyone else hung up on their text not displaying:

Using Inkscape to modify your floorplan.svg file:

  • To write text into your diagram and make it static (for a label): Yes, convert the Object (text data) into Path data (vector image)

  • To get your text to display/update dynamically from a sensor (for a sensor readout): Copy the text object from the example svg file and paste it into your svg file. I’m not sure what setting carries over during that process.

  • Also make sure that any object or path you would like as text is also on the top layer. Layer > Layer to Top

Another snag I ran into (unrelated to the above…):
Just in case anybody else is getting Expected <block end>, but found ‘<block mapping start>’ in their log file after enabling the warnings: option (in \HASSIO\config\floorplan.yaml).

Indenting everything in floorplan.yaml fixed that error.

Update (also unrelated to the above…):
If anybody is wondering how to convert a BRUH Multisensor into a binary sensor for use with template_last_motion, add these lines to your setup:

# binary_sensor (This is required for "template_last_motion" to work for some reason)
#  https://home-assistant.io/docs/z-wave/entities/#binary-sensor
  - platform: template
        value_template: >-
          {%- if is_state('sensor.sn1_pir', "motion detected") -%}
          {%- else -%}
          {%- endif -%}
        value_template: >-
          {%- if is_state('sensor.sn2_pir', "motion detected") -%}
          {%- else -%}
          {%- endif -%}


Hello, I am new here. Recently, I have been trying to deal with the floorplan. Unfortunately, I can not cope with switching on the light. As you can see in the film, when I click the mouse on the bulb, an additional window appears, where you can additionally turn on the light.
The question is, what and in which file should I add, so that immediately after pressing on the bulb, the light will light without this additional window.


I believe you need to add the service toggle. Here is an example of what mine looks like, one click turns it on a another click turns it off.

- name: Lights
     - switch.andrews_bedroom_switch
     - switch.arellys_room_light_switch
     - switch.dining_room_switch
     - light.master_bedroom_Level
     - switch.small_hallway_switch
     - switch.entrance_light_switch
     - light.andrews_closet
     - light.livingroom_dimmer_level
     - switch.livingroom_fan_switch
     - state: 'on'
       class: 'light-on'
     - state: 'off'
       class: 'light-off'
    domain: homeassistant
    service: toggle


what do you use for CSS to change the highlighting - interested in moving from 2D to 3D

nice job btw!


What software did you use to create the 3D image?


Hi @jaburges… The highlighted area is a SVG element that is mapped with the entity_id of each light corresponding to each area. The color is set in the css file when the state is on and off respectively.


I used floorplanner.com website to make the 3D image of the house.


Thanks. Do you use the free version? It doesn’t seem to export to SVG for the free one… Not gonna pay for a foorplan app obviously.

Do you guys know a good tool for some nicer looking plans? Now using Sweet Home 3D, but it doesn’t produce the best looking plans.


very nice site. But how to export in SVG?


I don’t think you do, you just export the image and map that in whatever svg software you are using, for instance Inkscape.


I import the JPG in the inkscape and then file export SVG?


After making the flooplan on the website, I used inkscape software to import the SVG images on the floorplan where each SVG is mapped to the corresponding entity that you want to display/control.


cool - i thought there was some super fancy 3D lighting effect.
Love floorplanner.com (in fact that is what inspired me to try the 3D view)



Ok now I get it.

Import the JPG in inkscape as base image and on top of it add SVG objects/icon and give the entity_id.

I added my first lamp: if I go with the mouse and click on it it works perfectly, on the contrary if I use touch (both on tablet-pc or android smartphone) the touch is not working/giving the toggle command

ANyone knows why?


how to display a temperature from a sensor in inkscape?