When I had that problem it was because of a typo in floorplan.css
Look at the examples and you will see a CSS entry with “transform-origin: center” in it. Before the opening braces of that section you have to list the entity ids for the fans. But you have to put a back slash before the first fullstop
So if you had entities of fan.lounge and fan.kitchen the first line of that section would be:
#fan\.lounge, #fan\.kitchen {
That was my issue anyway. Hope it helps.
Hi, Ross_Davey,
Sure, have a look. For every type of sensor I’d like to know how many of are ON or OFF, I introduced a sensor that is counting how many entities of that type are in a specific state, and its output is displayed on top of a pendant.
Lets take LIGHTS for example:
- platform: template
sensors:
number_of_lights_on:
value_template: >-
{% for state in states if ( 'light' in state.entity_id and state.domain in ['light','switch'] and state.state == 'on' ) -%}
{% if loop.last -%}
{{ loop.index - 1}}
{%- endif %}
{% else %}
0
{%- endfor %}
… or MOTION SENSORS if you need:
- platform: template
sensors:
number_of_motion_sensors_on:
value_template: >-
{% for state in states if ( 'eye' in state.entity_id and state.domain in ['sensor','binary_sensor'] and state.state == 'on' ) -%}
{% if loop.last -%}
{{ loop.index }}
{%- endif %}
{% else %}
0
{%- endfor %}
Here I’m looking for the eye keyword, because all my motion sensors are Fibaro FGMS-001 which look like “The Eye of Sauron” … 
… and I’ve named them kitchen_eye, bedroom_eye, bathroom_eye …
SMARTMEDIA and Smoculetz are both my accounts, so you can reply to either one.
Hope it helps, have a nice day !
I’ve been keeping it simple as I learn - fantastic thing Floorplan!! Shame my drawing skills aren’t up to it.
edit: Getting a bit more fleshed out, and tidied up. I’ve some empty spaces to fill
Still very much a work in progress. I’ve got media players to do and I want to enhance the motion sensors, but here’s where I’m at. Light pinky/orangey/whatever that is = room with lights on, red = room with motion.
I also want to work on the SVG layout itself to have one portrait for mobile devices and one landscape for desktop. Is there a decent solution to that yet that doesn’t involve duplicating a bunch of stuff? The last post I saw was this… Floorplan for Home Assistant
Playing around with how to show multiple floors on the tablet. I would like them all on one page but it’s too crowded so I’m trying a button to switch.
UNO!
anyway… how do you get that to work, as I like that! a lot
I’ll have to make more automations, sensors, and gadgets to fill the rest of the space!
Great experience putting this together, learned loads! Thanks a million for it!
If you want to see how it’s done.
You have to have groups/layers in your SVG named page0 through page9 and then actions named show.page0, show.page1, etc. There is a show.toggle which will just cycle through all available pages.
How did you connect to your leaf? I’ve been looking around one I’ve found is the following: https://github.com/glynhudson/leaf-python-mqtt
Is there another direction you took? I’m curious to know. Thanks!
The images in the tutorial are broken can someone fix cant learn visual tool without images.
Thanks
I actually wrote a custom script to do it which simulates the android app.
I didn’t know this MQTT version existed actually, that’s a good find! I’ll probably move over to this
I really love zou idea… Mine is to take my real pictures on my room and show things like that. Yould you mind to share your project?
I just submitted a fix for the images. The fix needs to be merged into the main branch before you see it. Images are available here though if you are eager to get started: https://github.com/pkozul/ha-floorplan/tree/master/tutorial_images
I’m just starting to play around with floorplan. Where is it that I can change the background color?
Try to be specific please, when asking things in life … when would you like to change the background color ?, by what action ?, to what end ?, even if there are more than one possible answer, put them all here, because one situation could ask for a change in one file, other, elsewhere.
I have made a basic Floor plan of my main floor area. The walls are a gray in color over the basic white back ground. I would like to change the back ground to black or something darker.
In floorplan.css set background-color: in the svg section.
In my floorplan.css I have set (thanks to @firstof9 ) :
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
so the color changes with the theme.
Thanks. That did it.
Thanks for that.