Floorplan for Home Assistant

Third party integrations Floorplan
1061

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>

1 Like
1062

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

1063

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
3 Likes
1064

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

Thanks all for the help!

1 Like
1065

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

image
image1599×799 278 KB

8 Likes
1067

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
binary_sensor:
  - platform: template
    sensors:
      sn1_pir:
        value_template: >-
          {%- if is_state('sensor.sn1_pir', "motion detected") -%}
          true
          {%- else -%}
          false
          {%- endif -%}
      sn2_pir:
        value_template: >-
          {%- if is_state('sensor.sn2_pir', "motion detected") -%}
          true
          {%- else -%}
          false
          {%- endif -%}
2 Likes
1069

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.

1070

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
  entities:
     - 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
  states:
     - state: 'on'
       class: 'light-on'
     - state: 'off'
       class: 'light-off'
  action:
    domain: homeassistant
    service: toggle
3 Likes
1071

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

nice job btw!

1074

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

1075

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.

1076

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

1077

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.

1078

very nice site. But how to export in SVG?

1079

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

1080

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

1081

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.

1083

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)

thanks

1084

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?

1085

how to display a temperature from a sensor in inkscape?

1 Like