Good stuff. Hope you find it useful and let me know if you have any further ideas for enhancement.
1 Like
Good suggestions. I originally created this as a custom panel (available via the sidebar), but I really wanted it embedded into the main user interface like all other state cards.
No probs. I will look at bringing it into HA officially in the near future.
4 Likes
It already had the directory due to some images that I used for profile pics. I am not on a Raspberry. I’m on a HP G7 running Ubuntu 16.04.
I saw the other links, do I need to do anything from this page as well (http: development: 1) ?
Just to determine whether the issue is related to this floorplan functionality or not, could you try getting any of the custom state cards working in your HA?
https://github.com/andrey-git/home-assistant-custom-ui
As for the other links, I don’t believe you need to change anything for this to work. I just included them to give some background info.
Also, which version of HA are you running?
I found the problem, I was referencing a second sensor that was not in the layout. I now have the SVG but have not got the existing (true) sensor to work, but this gives me something to tinker with! Thank you very much @pkozul!
I went back and added my motion sensors and my lights/groups. Only the motion sensors are indicated (red/green) on the SVG but the lights are recorded by Last Motion… hmmm.
I also noticed a difference in the rendering of the SVG, In HASS it appears as above but the actual image is saved as:
I have tested the floorplan functionality with switches and it works. I added my front doorbell to the configuration and when it rings, its shape changes colour on the floorplan.
I have updated the documentation on GitHub to mention switches as one of the supported components.
Corey, can you comment out (or even delete) these two lines in the HTML file? Lines 122 and 127. Both lines contain this code:
shape.style.fill = this.colorOther;
I added that code to set a grey background for my floorplan, but this may not be needed for yours.
Let me know if that makes your floorplan appear as expected.
Corey, you can even omit the ‘last motion’ sensor for now, until you get the rest of it working. Just remove the following line from the floorplan configuration:
last_motion_entity: sensor.template_last_motion
So, you’re saying the motion sensors are working OK on the floorplan, but your lights are not being shown? I don’t have any lights in my setup, so I haven’t had a chance to look into it. Nevertheless, I can try and get it working for you. Might need to enhance the code to cater for it. Let me know what sort of lights you have, and then I’ll be able to see which states apply to them.
Removing the style.fill worked so now I see the original SVG in HASS. The last_motion_entity is tracking the motion & switches/lights so I believe it is working fine.
I’ve been doing all this from my laptop so on a whim I checked from my phone. One of my group.lights worked but then no others on my android phone (using Chrome) but I did not get the same response from my laptop running Chrome… A real head scratcher.
Examples of my lights/switches as ‘states’:
- binary_sensor.multisensor1_sensor_9_0
- binary_sensor.server_sensor_18_0
- group.bedroom_lights
- group.ceiling_fan_light
- group.dining_room
- group.kitchen
- light.back_porch_light
- light.bedroomlamp_level_17_0
- light.front_porch_light
- light.hall_light_1
- light.hall_light_2
- light.tablelamp_level_15_0
- light.lrlamp_level_14_0
and I have them listed in binary_sensors.yaml as:
template_last_motion:
friendly_name: 'Last Motion'
value_template: >
{%- set sensors = [states.binary_sensor.multisensor1_sensor_9_0, states.binary_sensor.server_sensor_18_0, states.group.bedroom_lights, states.group.ceiling_fan_light, states.group.dining_room, states.group.kitchen, states.light.back_porch_light, states.light.bedroomlamp_level_17_0, states.light.front_porch_light, states.light.hall_light_1, states.light.hall_light_2, states.light.lrlamp_level_14_0, states.light.tablelamp_level_15_0] %}
{% for sensor in sensors %}
{% if as_timestamp(sensor.last_changed) == as_timestamp(sensors | map(attribute='last_changed') | max) %}
{{ sensor.name }}
{% endif %}
{% endfor %}I use my laptop and Google Chrome for development, but I frequently test everything out on my Windows Phone. There were some special cases to cater for, but the results are now consistent across both. I don’t have an Android phone, so cannot really test on that platform.
BTW, I occasionally use this web site to test out on various mobile device simulators:
I just tried on the HTC ONE and all worked fine.
Just to rule out any errors, can you check if the Chrome developer tools console shows any errors?
Wow, lots… it appears to be repeating the last 2 entries.
I think I should recreate the SVG using Inkscape. I think some of my problems lie with Boxy SVG.
Looks like the SVG file doesn’t contain some ids that your configuration has defined. Can you check if there is a shape with id="group.ceiling_fan_light" in your SVG file?
<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);"
id="group.ceiling_fan_light"
inkscape:label="#group.ceiling_fan_light" />
Uninstalled and re-installed Chrome and now it appears to be fine… Sheesh. Sorry for wasting any of your time but maybe it will save someone later.
Good progress. So you have it all working now, as you expected?
BTW, I am removing this field entirely from the floorplan functionality:
color_other: '#E0E0E0'
There is no need to force any background colour, and it’s up to each person to decide on their own background colours on their floorplans.
I have updated the code and documentation on GitHub.
1 Like
Yes!!! I may still re-create from the beginning in Inkscape and take a little more time for scale & such and then add door sensors and camera (online/offline) representations.
I will save my files then download your updated ones.
Thank you thank you! I had inquired to such a tool many months ago. This & you are awesome!
Excellent! You and Cameron have been the first people to try this out ‘in the real world’, so thanks to you guys for giving it a go.
For now, we only have support for on/off states (sensors, switches, state groups, etc.) but I sometimes wonder what else can be added to make this graphical functionality even richer.
For example, imagine adding cameras to the floorplan, and when you click or hover over one of them, a popup appears showing the video feed from that camera.
Same deal with other components. Imagine an alarm panel displayed on the floorplan, and when you click or hover over it, a popup appears showing a full-blown state card allowing you to control the panel, arm/disarm, etc.
In other words, maybe the floorplan model can be used as a shortcut for displaying the standard state cards that already exist in HA.
Lots of food for thought…
3 Likes
I also recreated my house floorplan using Inkscape, and wanted to make sure the ‘vanilla’ Inskscape version of the SVG file works nicely with the floorplan functionality.
Along the way, I made another enhancement. There is now a new option to specify the stylesheet (CSS file) to use for styling the floorplan. In the GitHub repo, I have created a sample CSS file that you can use to change the appearance of the ‘last motion’ entity. For now, it simply adds a grey border of 1px thickness. Using an external CSS file means there is much more flexibility for everyone (you can choose how you want the ‘last motion’ entity to appear), and make the actual code more flexible to adapt to other components moving forward.
The new stylesheet option is shown below (last line). You can specify any CSS file you want, and it’s totally optional.
homeassistant:
customize:
binary_sensor.floorplan:
custom_ui_state_card: floorplan
floorplan_image: /local/custom_ui/floorplan/floorplan.svg
password: <password_goes_here>
stylesheet: /local/custom_ui/floorplan/floorplan.css
1 Like
I have got this set up and working perfect
Is there any way to only set a color for on and not off? I tried color_off : ‘#00ffffff’ but it seemed to crash the component 
I also changed this line in the html:
if (entity.state.toLowerCase() === 'on') { shape.style.fill = this.colorOn;
to
if (entity.state.toLowerCase() === ‘on’ || entity.state.toLowerCase() === ‘open’) {
shape.style.fill = this.colorOn;
this was to cater for my alarm sensors which all have open and closed values instead of the on & off values
4 Likes