Thanks! Got it!
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.
- 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,
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 
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?
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 
1 Like
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?
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.
2 Likes