Floorplan for Home Assistant

[pkozul (Petar Kozul)]

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

2. 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

3. 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";

4. 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,

[IKROWNI (James)]

Sweet beans! Thanks for this man. Just what I was asking for I do believe.

[teachingbirds (Isabella Gross Alström)]

Will try later today!

[teachingbirds (Isabella Gross Alström)]

I opened it directly in chrome, not Inkscape, and it was fine, but not in Hass in Chrome. I did find that if I removed this css-property: “vector-effect: non-scaling-stroke !important;” it rendered fine, so I did so and it didn’t seem to affect anything else so far.

[pkozul (Petar Kozul)]

Glad to hear that you got it working. I added that bit of CSS to support better display in the Microsoft Edge browser (on Windows mobile), but it’s one of things where you fix it for one scenario, and then inadvertently affect another

[teachingbirds (Isabella Gross Alström)]

Yeah, multiple browser support is a bitch

[CoMPaTech (Tom)]

Found the individual notes in the post already, but this should make it pretty clear and straight forward for anyone to follow. Recommend adding that to the repo as well

Question though, can’t get custom-state-card to work … it only shows it as a sensor, doesn’t replace show the svg’s until I click on the sensor (should be something small) but I think I spotted people adding multiple floors under the state card, is that possible?

[ronvl (Ron)]

yes I managed to set it up but due to a new job I haven’t had much time to extent it to cover 4 floors and the outside buildings…

I have the floor plans set up as seperate panels to show them on a wall mounted tablet per floor and I have them in cards as that is just nicer to display on my handy/tablet

[CCOSTAN]

what tablet are you using on the wall? That’s my next step in this process.

[ronvl (Ron)]

cheap android tablets as it only has to display the floor plan and hass

[CCOSTAN]

I need more info… I’m considering the new Fire tablets for 50 bucks. Not sure if I can get away with something cheaper. I’ve noticed that my old iPads won’t run the new Floorplan code so I didn’t know how ‘cheap’ I could go.

Do your tablets go to sleep and wake up on motion?

[Corey_Johnson]

I have a Fire 7" HD that I bought last year. I run WallPanel on it. The Floorplan works fine on it.

WallPanel for Android [Formerly HomeDash]

WallPanel is an browser app to display ‘dashboard’ type webpages such as HADashboard or HASS on a device, which may make good use of older tablets/devices you want to use for home automation dashboards. The difference between this and kiosk apps or pinning a web page is the app is providing remote control/home automation features (eg, you can remotely control the URL that’s being displayed, or get feedback on motion on the camera). P.S. An iOS version is in development with the same API This pr…

[12-hak]

Can anyone let me know how to make state condition of one entity based on another entity

Ie. change class if another sensor is on (such as movement detection will go red if alarm entity is on and green if not.

[CCOSTAN]

Got the Fire Tablet. Had to rework a lot of the floorplan since monitor to 7 inch tablet is much different. Here’s my work in progress.

Next update will be in the form of a blog post.

[pkozul (Petar Kozul)]

Got the same tablet. Will have to try that as well. Good work!

BTW, are you using HTTPS? Also, have you tried using the floorplan on your tablet while outside your home network?

[CCOSTAN]

Hi @pkozul, I am using SSL. No issues… works perfect. I haven’t tried the tablet outside the network but I’ve hit Floorplan on my IOS and other devices outside the network without issues.

My new issue I am running into is with the Kitchen and Living room groups. groups doesn’t seem to toggle the lights on and off… Have you done any groups yet?

BTW: For the fire tablet - download wallpanel to run floorplan.

[pkozul (Petar Kozul)]

OK, HA groups are now supported, so if you already have your entities defined as groups within HA, then you can simply include those groups in your floorplan config rather than include a potentially huge list of individual entities.

  - name: Light Groups
    entities:
      - group.office_lights
      - group.hallway_lights
      - group.kitchen_lights
      - group.outdoor_pool_lights
      - group.outdoor_front_lights

    states:
      - state: 'on'
        class: 'room-on'
      - state: 'off'
        class: 'room-off'

Also, the floorplan is a bit smarter now in that it will log error messages if any specified groups do not exist within HA. It also logs errors if the SVG file doesn’t contain any of the elements it is supposed to. Error handling of other scenarios will be added where appropriate, which will make it easier to find any typos or other issues that may not be obvious.

Latest version is now ready on GitHub.

[pkozul (Petar Kozul)]

A bit of experimental functionality added. If you want your floorplan to support panning and zooming, simply add pan_zoom: to your floorplan config:

      name: Floorplan
      image: /local/custom_ui/floorplan/floorplan.svg
      stylesheet: /local/custom_ui/floorplan/floorplan.css
      pan_zoom:

You also need to grab the file www/custom_ui/floorplan/svg-pan-zoom.min.js and include it in the floorplan HTML file:

www/custom_ui/floorplan/ha-floorplan.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="svg-pan-zoom.min.js"></script>

The GitHub repo has been updated to reflect all of this.

If you try this for yourself, let me know how it goes.

[pkozul (Petar Kozul)]

Great… I can confirm that HA and floorplan are working fine on my Amazon Fire tablet. I am running HA with HTTPS, and am able to access it all from a remote location without issue. All good!

[dlg]

This looks amazing. As a feature suggestion for the future (also mention on HAD thread), it would be amazing if this were integrated into HADashboard too.