Floorplan for Home Assistant

Third party integrations Floorplan
303

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.

  1. 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
  1. 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
  1. 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";
  1. 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,