Floorplan for Home Assistant

Hi there,

From what I understand, you’re thinking of a set of tabs within the floorplan state card? When I get some time, I will look into how that could be done.

As an alternative, I know at least one other person who has several floorplans in his setup, as he wanted to shows all 3 floors/areas of his house. He ended up creating a separate floorplan state card for each. Not sure if he put them within the same view group (i.e. tab) or whether they appear as separate tabs in HA.

1 Like

Yea I was hoping to for example click an empty area in my office from the overview and then get taken to a different view of just that room.

I’m using floorplan as a panel, not a state card, don’t know if that makes a difference. What I would like is the same structure as the states panel. I don’t know if you can reuse the tabs from the states panel?

Like this:

4 Likes

Did you find out why the line thickness was different? Mine is getting so thick lines, I can barely see my icons and stuff. Theyr’e just rendering like a big mess. When I open my svg directly this doesn’t happen.

It was something to do with scale vs line thinkness tags against the path in the svg xml.
I think that Inkscape and chrome don’t render svg the same.

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,

12 Likes

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

1 Like

Will try later today!

1 Like

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.

1 Like

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

Yeah, multiple browser support is a bitch :grin:

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 :slight_smile:

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?

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

4 Likes

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

1 Like

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

1 Like

I need more info… :slight_smile: 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?

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

3 Likes

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.

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. :slight_smile:

2 Likes

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?