Just thought I’d share mine, have been tweaking it for a while. Circles are lights that I can toggle on/off with a click. There are windows, doors, garage doors,motion sensors. Car is tracked with automatic and disappears when I am out. Front motion comes from ring doorbell. Clicking on cameras brings up feed. Clicking on blue satellite icon brings up current weather radar image. Lock is an august deadbolt; clicking locks it (but won’t unlock for security reasons). Indoor environmental data comes either from Elk keypads, the Nest, or from ESP8266 modules with DHT22 sensors (plus some extra air quality sensors). Refrigerator icons turn red when the doors are open. Dog icon shows last time dog food bin was opened to feed dog. The greens shield icons just show if all doors/windows on each level are all closed (turns red if anything is open). I have this running on several kindle fires (7 HD) using Fully Kiosk app. Elk M1G security data comes in via ISY interface. Some sensors are Z-wave through the wink.
How do you make a “button” on the stairs to another floor? Can you link to another .svg or do you hide/show layers?
I’m currently switching from Domoticz to home assistant and would like to duplicate my floorplan.
All lights are dimmable
Current functionality = Click/tap light to switch on (to whatever % it was set previously)
Hold down to show the slider menu to adjust brightness levels.
Is this slider popup for dimming something HA Floorplan can do as well? In the screenshots posted above it seems to be on/off only?
I really appreciate @Steffen_Pohl 's floorplan. So I decide to make one single-room with 3D view. Here’s a semi-draft.
I use two pillows to show temperature and humidity. A live moon phase sits at upper left corner. When it is daytime, the outside background will turn white and cover the moon.
There are still many things to wrap. Monitor’s screen is supposed to show the game title or picture PS4 is loading. More animation will add. No extra button I want to add since automation finishes many jobs.
Hi SmartMedia
Can you or someone on here explain the programming for the pendants? Id love to use this approach in my floorplan.
Can you share your files so I can see how you’ve done it?
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?