Floorplan for Home Assistant

pkozul · May 9, 2017, 5:41am

EDIT: New version now available…

The new version is now available at the following repo. It’s got a bunch of improvements and new features. You can now use the floorplan as both a state card and as a custom panel.

Hi there,

I recently managed to get a floorplan view of my binary sensors working within HA. I created a GitHub repo for the code and added some doco:

https://github.com/pkozul/ha-floorplan-state-card

Below is what it looks like in action:

Might be useful for others out there. It means you can replace a potentially long list of binary sensors in the front end with a single image that updates in real time using colours to represent states. Also has hover-over text to display more info for each sensor.

For now, this handles binary sensors, but I can imagine this being expanded to include other types of components as HA evolves and more ideas are generated.

Have fun!

Cheers,
Pete

CommonBlob · May 9, 2017, 11:46am

This looks really neat and a great idea. Good job!

Corey_Johnson · May 9, 2017, 11:50am

I am just getting started with this (drawing floorplan & setting ‘ids’)… Will this work with switches too or only binary sensors? i.e. switch.lrlights or light.lrlamp_level_14_0

I was thinking of adding certain shapes to indicate lamps/lights to have a visual indication of on/off.

teachingbirds · May 9, 2017, 12:38pm

How hard would it be to make a larger version of this and include many more sensors? I’m thinking mapping out door magnet sensors, maybe temperature but also things like lights and other stuff you have?
I would like to help with this if needed, because this is exactly the thing I want!

cameron · May 9, 2017, 1:31pm

Great job!

I am having trouble with making the SVG file and the path.

<path id="binary_sensor.front_hallway" d="M650 396 c0 -30 4 -34 31 -40 17 -3 107 -6 200 -6 l169 0 0 40 0 40
-200 0 -200 0 0 -34z"/>

is this the way?

beanian · May 9, 2017, 2:59pm

I have the exact same idea, using it to represent about 18 sensors and the lights for each room. I paid a guy on fiverr to convert my jpg of my floorplan into SVG format. Hopefully i can use that as a starting point

rpitera · May 9, 2017, 3:16pm

I think this should actually be in the Share Your Projects category - would you mind if I changed it?

Corey_Johnson · May 9, 2017, 3:24pm

I created everything (only added a couple of sensors to get started) but am not getting the map/floorplan.

pkozul · May 9, 2017, 7:38pm

I don’t see why it wouldn’t work with switches. Currently, the code checks if an entity’s state is ‘on’, and implies it’s ‘off’ otherwise. Give it a try and add your switches.

I will also add some switches and test it myself. I can add support for it in case it doesn’t work for some reason.

pkozul · May 9, 2017, 7:43pm

I don’t think it would be difficult to create larger versions. At the end of the day, as long as it’s SVG files that contain shapes with the correct ids, it should work fine. You could always split up your image into multiple SVGs if it gets too big and too busy visually. Give it a go and let me know how it turns out.

Thanks for offering your help. Feel free to offer suggestions. Thanks!

pkozul · May 9, 2017, 7:43pm

No problem. Feel free to move the thread to the Share Your Projects category.

pkozul · May 9, 2017, 7:47pm

Hi Corey,

While developing this, I was using Google Chrome to test things out. If something doesn’t work, best is to hit F12 to view the developer tools .Then hit F5 to reload the web page. Look at the Console tab in the developer tools to see if any errors are being logged. Let me know if you see anything there.

Also, would you be able to send me your configuration related to the floorplan state card, and the SVG image as well? I can then test it on my machine.

pkozul · May 9, 2017, 8:00pm

Yep, that looks like the correct way to assign an id to your shape in Inkscape (make sure to click the Set button after you enter the id).

What exactly are you having trouble with?

Corey_Johnson · May 9, 2017, 8:12pm

Here is the results from Chrome… definitely seems to have an issue. I’ll send my config in a few.

fabaff · May 9, 2017, 8:16pm

Another option would be to transform this into a Custom Panels or bring it into Home Assistant “officially” (like Map or Configuration in the sidebar). It looks like that the heavy lifting is already done and you seem to be familiar with the used technology

Corey_Johnson · May 9, 2017, 8:36pm

/home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.svg (currently only 1 sensor listed) I used Boxy SVG but may retry with Inkscape:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="-99 -128 925 733" xmlns="http://www.w3.org/2000/svg">
  <path d="M 36.609 334.347 L 36.609 501.251 L 484.615 501.251 L 484.615 334.347 L 36.609 334.347 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 518.459 185.546 H 674.487 V 500.103 H 518.459 V 185.546 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 250 186.681 L 250 334.36 L 517.312 334.36 L 517.312 186.681 L 250 186.681 Z" style="fill: rgb(216, 216, 216);"/>
  <path id="binary_sensor.multisensor1_sensor_9_0" d="M 206.404 124.57 L 206.404 333.624 L 247.705 333.624 L 247.705 124.57 L 206.404 124.57 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 295.937 124.007 H 398.158 V 183.757 H 295.937 V 124.007 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 228.225 -85.208 H 397.997 V 122.859 H 228.225 V -85.208 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 36.609 -19.488 H 227.239 V 123.657 H 36.609 V -19.488 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 36.609 124.715 L 36.609 333.2 L 205.256 333.2 L 205.256 124.715 L 36.609 124.715 Z" style="fill: rgb(216, 216, 216);"/>
  <path d="M 224.69 502.397 L 224.69 551.729 L 517.633 551.729 L 517.633 502.397 L 224.69 502.397 Z" style="fill: rgb(216, 216, 216);"/>
  <rect transform="matrix(1, 0, 0, 0.999999, -491.854309, -130.746732)" style="fill: rgb(216, 216, 216);" x="977.641" y="465.376" width="30.081" height="57.547"/>
  <rect style="fill: rgb(216, 216, 216);" x="485.786" y="393.482" width="31.389" height="107.246"/>
  <rect x="161.434" y="126.677" width="43.16" height="35.313"/>
  <rect x="250.368" y="165.913" width="43.16" height="17.003"/>
  <rect x="249.061" y="298.009" width="43.16" height="35.313"/>
  <rect style="fill: rgb(216, 216, 216);" x="249.061" y="125.369" width="45.776" height="37.928"/>
  <path d="M 467.477 151.785 L 467.477 177.943 L 508.021 177.943 L 508.021 151.785 L 467.477 151.785 Z" style="fill: rgb(216, 216, 216);" transform="matrix(1, 0, 0, 1.000001, 0, 7.588885)"/>
  <path d="M 45.032 465.416 H 68.574 V 490.266 H 45.032 V 465.416 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 173.858 465.416 L 197.4 465.416 L 197.4 490.266 L 173.858 490.266 L 173.858 465.416 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 385.734 388.251 L 423.663 388.251 L 423.663 424.873 L 385.734 424.873 L 385.734 388.251 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 275.872 502.037 L 299.414 502.037 L 299.414 526.887 L 275.872 526.887 L 275.872 502.037 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 478.593 161.989 L 502.135 161.989 L 502.135 186.839 L 478.593 186.839 L 478.593 161.989 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 103.887 209.726 L 141.816 209.726 L 141.816 246.348 L 103.887 246.348 L 103.887 209.726 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 324.264 249.617 L 347.806 249.617 L 347.806 274.467 L 324.264 274.467 L 324.264 249.617 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 431.509 248.309 L 455.051 248.309 L 455.051 273.159 L 431.509 273.159 L 431.509 248.309 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 215.71 247.001 L 239.252 247.001 L 239.252 271.851 L 215.71 271.851 L 215.71 247.001 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 236.636 133.216 L 260.178 133.216 L 260.178 158.066 L 236.636 158.066 L 236.636 133.216 Z" style="fill: rgb(253, 253, 253);"/>
  <path d="M 46.995 296.7 L 70.536 296.7 L 70.536 321.55 L 46.995 321.55 L 46.995 296.7 Z" style="fill: rgb(253, 253, 253);"/>
</svg>

From configuration.yaml:

  zones:
   view: yes
   name: Zones
   entities:
     - group.layout

####GROUPS
  Layout:
   name: Zones
   entities:
     - sensor.template_last_motion
     - binary_sensor.floorplan

From customize.yaml:

binary_sensor.floorplan:
  custom_ui_state_card: floorplan
  floorplan_image: /local/custom_ui/floorplan/floorplan.svg
  password: *****
  track_duration: 10
  color_on: '#F8B9BE'
  color_off: '#C4EDB1'
  color_other: '#E0E0E0'
  last_motion_entity: sensor.template_last_motion
  entities:
    - binary_sensor.multisensor1_sensor_9_0

From binary_sensors.yaml:

- platform: mqtt
  state_topic: "dummy/floorplan/sensor"
  name: "Floorplan"

And I created/copied /home/homeassistant/.homeassistant/www/custom_ui/state-card-floorplan.html as well.

cameron · May 9, 2017, 8:52pm

It’s working now had saved it in Inkscape as floorplan.svg (Inkscape svg ) but before saved it as (basic svg ) and it did not work . I must say that I had to close the browser to refresh the HA web page for it to work.

pkozul · May 9, 2017, 8:54pm

Corey,

The errors in Google Chrome are related to the HTML file and SVG file not being found. Which version of HA are you using?

To originally get custom state cards working, I used this information to get me started:

https://home-assistant.io/developers/frontend_creating_custom_ui/

I also tried this example:

https://github.com/andrey-git/home-assistant-custom-ui

In your case, I cannot see why the HTML and SVG files are not found by the HA web sevrer.

Your actual config looks OK, so I don’t think you need to do anything else in terms of changing it, or recreating your SVG. The issue seems related to file locations, permissions, or something else along those lines.

Did your HA directory already contain a www directory beneath it? Are you running it on a Raspberry Pi?

pkozul · May 9, 2017, 8:55pm

Hi Cameron. Thanks for sharing. Do you have the floorplan now working with your sensors in HA? Care to share a screenshot?

cameron · May 9, 2017, 8:58pm

Yes they are working nicely. Thanks My zones are a bit boring at the moment.