Hi all,
Just wanted to share some info about how to get multiple floorplans showing. A few weeks back Ron (ronvl) got this working. Below are relevant sections from the emails:
Multiple floorplans
I managed to get 2 floorplans showing in my setup.
- Create a virtual (dummy) entitiy for each floorplan:
binary_sensors.yaml
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: Groundfloor
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: Upstairs
- Get Home Assistant to display the entities as custom state cards:
customize.yaml
binary_sensor.groundfloor:
custom_ui_state_card: floorplan
config: !include groundfloor.yaml
binary_sensor.upstairs:
custom_ui_state_card: floorplan
config: !include upstairs.yaml
- Configure each floorplan:
groundfloor.yaml
name: Ground Floor
image: /local/custom_ui/floorplan/groundfloor.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion
groups:
- name: Cameras
entities:
- camera.hair_salon
- camera.hallway
- camera.driveway
- camera.front_yard
upstairs.yaml
name: Upstairs
image: /local/custom_ui/floorplan/upstairs.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion
groups:
- name: Sensors
entities:
- sensor.melbourne_now
text_template: '${entity.state ? entity.state : "unknown"}'
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 10)
return "temp-low";
- Add the floorplans to a group so they appear in the Home Assistant front end:
groups.yaml
zones:
name: Zones
entities:
- switch.doorbell
- sensor.template_last_motion
- binary_sensor.groundfloor
- binary_sensor.upstairs
That’s all. You can include as many floorplans as you want, and they all share the same code so there’s no need to create additional copies of the actual code files. You just need to create a separate configuration for each floorplan.
If you want to have multiple floorplans as custom panels instead of custom state cards, then you can configure your custom panels as follows:
panel_custom.yaml
- name: groundfloor
sidebar_title: Ground Floor
sidebar_icon: mdi:home
url_path: groundfloor
config: !include groundfloor.yaml
- name: upstairs
sidebar_title: Upstairs
sidebar_icon: mdi:home
url_path: upstairs
config: !include upstairs.yaml
You will have to copy the panels/floorplan.html
file, once for each floorplan. So, you end up with the following custom panel files:
panels/groundfloor.html panels/upstairs.html
In each of those custom panels, make sure to change the id
and is
properties such that you replace floorplan
with groundfloor
or upstairs
. This needs to be done in two places within each file. I have shown one example below.
panels/groundfloor.html
<dom-module id="ha-panel-groundfloor">
................
................
................
</dom-module>
<script>
Polymer({
is: 'ha-panel-groundfloor',
If anyone tries this, let me know how it goes. I can then add it to the doco on GitHub once we know it works as described,