Cameron, just to confirm, are your sensors and switches showing the correct states on the floorplan (using colours)?
In terms of the action that is invoked when clicking on an enitity, the built-in HA ‘more info’ popup is displayed for that entity type.
If your camera shape represents a ‘camera’ entity, the ‘more info’ popup will show the live camera feed. If the camera shape represents a ‘switch’ entity, then the ‘more info’ popup will show an on/off slider control, etc, etc,
No there are no colours for on or off just the grey shape.
But when i hover over the shape the outer rim of the shape shows blue.
oh and the camera popup does not happen.
Edit- Sorry the camera shape is a binary_sensor of the motion sense, but the camera picture is
camera.garage_camera. is it possible to have two shapes ontop of each other.
Cameron, can you try the latest code? I may have the found the issue.
Perfection.
That’s the on/off state working great thanks.
This looks fantastic! Would be good if there was a way to ‘fullscreen’ it? I can imagine this would look great on a tablet on the wall…
Good suggestion. I originally implemented this as a custom panel:
It would then be accessible via the sidebar on the left, in the same way as Map, Lookbook, History, etc.
So, yes, that would give you full screen mode.
I will write up some doco on how to do this.
Oh that would be great! I might have to have a stab at this over the weekend…
You can also grab the material design icons as svgs
To get the floorplan working in full screen mode (as a custom panel), you need to do the following:
Copy the HTML file to this location:
<path_to_home_assistant>/panels/floorplan.html
In the HTML file, change line 6 to this:
<dom-module id="ha-panel-floorplan">
And change line 24 to this:
is: 'ha-panel-floorplan',
In the HTML file’s onReady() function, you need to create the this.stateObj JSON object and copy your existing floorplan config, which means it needs to be ‘hard coded’ for now (until HA adds support for supplying these as attributes via the custom panel config - as we can already do for custom state cards):
onReady() {
if (!this.stateObj) {
this.stateObj = {
attributes: {
floorplan_image: "/local/custom_ui/floorplan/floorplan.svg",
password: "<some_password_here>",
stylesheet: "/local/custom_ui/floorplan/floorplan.css",
color_on: "#F8B9BE",
color_off: "#C4EDB1",
track_duration: 10,
last_motion_entity: "sensor.template_last_motion",
entities: [
"camera.front_door",
"light.kitchen",
"switch.doorbell",
"binary_sensor.front_hallway",
"binary_sensor.back_hallway",
"binary_sensor.kitchen",
"binary_sensor.master_bedroom",
"binary_sensor.theatre_room"
]
}
};
}
To get HA to display the panel, add the following to your HA configuration:
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
And that’s it. After restarting HA, you should see a new ‘Floorplan’ menu item in the left sidebar. Selecting that menu item will display the floorplan such that it takes up the entire available space on the right. Collapsing the left sidebar will give you full screen mode.
As I mentioned above, it would be great if HA allowed you to configure the floorplan options within the panel_custom section of the config. I will raise this as a suggestion. If that gets implemented, then we can remove the ‘hard coded’ JSON object from the HTML file.
In any case, at least this is a working solution. With very minimal effort, you can get your floorplan displaying as a custom panel.
OK, another update regarding custom panels. I figured out how to avoid any hard-coding of configuration.
In the HA config for your custom panel(s), you can now include the same floorplan configuration as used for state cards (simply copy/paste it). For example, in configuration.yaml, use the custom panel’s config section to add the floorlplan configuration (the config section is already supported out of the box by HA - allowing you to add any extra configuration to your custom panels):
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config:
floorplan_image: /local/custom_ui/floorplan/floorplan.svg
password: <some password_here>
stylesheet: /local/custom_ui/floorplan/floorplan.css
color_on: '#F8B9BE'
color_off: '#C4EDB1'
track_duration: 10
last_motion_entity: sensor.template_last_motion
entities:
- camera.front_door
- light.kitchen
- switch.doorbell
- binary_sensor.front_hallway
- binary_sensor.back_hallway
- binary_sensor.kitchen
All you need to do then, as per my previous message, is to to copy the HTML file to the right location for custom panels:
<path_to_home_assistant>/panels/floorplan.html
Then just two changes need to be made, to convert the state card to a panel.
On lines 6 and 7, simply comment out the first line, and uncomment the second:
<!--dom-module id="state-card-floorplan"-->
<dom-module id="ha-panel-floorplan">
Same thing for lines 25 and 26. Simply comment out the first line, and uncomment the second:
//is: 'state-card-floorplan',
is: 'ha-panel-floorplan',
Make sure to grab the latest HTML file from GitHub, as it contains the changes I just described.
Let me know how you go with it…
Nested SVG elements now work fine. I imported some camera SVG images into my floorplan SVG, and they are nested two levels deep, within groups. You can see them below. Hovering over a camera shows its info, and clicking it opens a popup with the live video stream.
This is brilliant, thanks for this!
Not sure if I did something wrong or not. I have it added to the side panel and can select it but there are not scroll bars or HA bar at the top of the screen and if I hide the side panel I cannot get it back.
Nope, you’ve done everything right. Looks like there is a bit more to get this working better.
Can you replace the dom-module section at the very top of the custom panel HTML file with the following? Is that working OK now?
<dom-module id="ha-panel-floorplan">
<template>
<style include="ha-style">
</style>
<app-header-layout has-scrolling-region>
<app-header fixed>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>Floorplan</div>
</app-toolbar>
</app-header>
<div class="flex content">
<div id="floorplan" />
</div>
</app-header-layout>
</template>
</dom-module>
That did it! Wow, I love it!
Excellent. So do you think you’ll use the floorplan as a custom panel (i.e. full screen) or as an entity card embedded within the front end?
Right now I have it as both. One serves as a quick, at-a-glance and the other is a full screen interactive display on one of my tablets.
Would I need to scale my image/SVG down to make it fit better on the screen?
As a custom panel, is it extending past the bottom of the screen? I currently have it like that on my laptop screen. Will see if there’s a way to keep the entire SVG visible on screen.
In the loadFloorPlan() function, can you add the code below:
svg.style.position = 'absolute';
Put it just after these two lines:
svg.style.height = '100%';
svg.style.width = '100%';
If that gets your floorplan displaying within the bounds of your screen, I will add this to the code base in GitHub. Let me know how it goes.
What did you guys use to make the svg’s? I’ve got a decent floorplan of my house I can copy but need to redraw it as an svg.