I don’t have a lot of smart devices yet.
When clicking on the light, the whole room picture is adjusting.
Not sure if you are asking a question for help or just letting us know it is working?
It is working. I’m sharing.
But I’m struggling to do combinations, like if two lights are on, I have to adjust 2 images plus the common part where the 2 lights cross, not easy but it is worth it I believe.
But no question, no 
Nice. For where two images cross try reducing the opacity of both to say 65% so they blend together better.
It is not that easy.
Let me take an exemple for you, on my ground floor, I’ve the dining room and the living room that are not split by a wall, so there are 3 cases:
- dining room light is on and cast some light in the living room
- living room light is on and cast some light in the dining room
- both are on and the common part is supposed to be brighter
I can’t really use the opacity as it needs to cover the basic plan with all lights off.
There is also the TV in the living room where I did an image when it is on or off
As it is close to a wall and some windows, there is the reflection of the TV in the windows if it is on and it is included in my “on image”.
But, if the light is also on, then the light of the TV is not showing in the windows because it is not as bright as the light so I have to do an “TV is on but light is also” image to cope with that case.
At first I wanted to do a rendering with various light colors as well.
But I gave up, first because the rendering is taking a lot of time, then because we almost never select another color than warm white and finally because I’m already in a lot of troubles with all my combinations
EDIT: Maybe I’m too perfectionist and should simplify the combinations, maybe I will.
Yeah I found it gets too hard to always show every combination. So for lamps I have a seperate icon that is used to toggle the state and also to show the state. If all other lights in the room are off you can see the lamp on but once the main room light is on that obscures any lamps. Before I commited everything to floorplan I used Gimp to mock the whole thing up in layers. This allowed me to easily work out the best opacity and which room light worked best on top. Sometimes I even cut bits of the light on image away to make things blend better. Good luck with it, please share your final version!
Wanted to share what my “floorplan” setup looks like. I took mine in a bit of a different direction. It is always a work in progress bit am happy with it so far. Buttons are responsive to state changes, airflow CSS animations are responsive, power usage for lightest usage items listed, water flow turns pipes blue when water pump is running, room temp/humidity sensor, tent temp/humidity sensor, EC values, pH monitoring and water temp are all displayed, and plant growth stage changes based on an input dropdown not shown here. There’s a lot more going on underneath as far as animations and control goes but this gives the idea of what the “floorplan” looks like.
2 Likes
Hi, noob question
I’ve generated my svg files based on this tutorial
Only problem is I’m not getting the floorplan displayed on the lovelace ui, just the entities are listed (like on default dashboard)
What could I be missing here?
configuration.yml
#floorplan dashboard
lovelace:
mode: storage
# Add yaml dashboards
dashboards:
lovelace-yaml:
mode: yaml
title: Floorplan Test
icon: mdi:floor-plan
show_in_sidebar: true
filename: lovelace/config.yaml
config.yml
views:
- title: Floorplan Test
path: floorplan
icon: 'mdi:floor-plan'
theme: lovelace-blue-blur
panel: true
cards:
- type: 'custom:floorplan-card'
style: >
ha-card {
max-width: 150vh;
margin: 0 auto;
background: none;
box-shadow: none;
}
config:
image: '/local/floorplan/floorplan_optimized.svg'
stylesheet: '/local/floorplan/floorplan.css'
rules:
2 Likes
Hi. Firstly you should enable logging to see any errors Usage - Floorplan for Home Assistant
Then type into your address bar
YOUR-HA-URL:8123/local/floorplan/floorplan_optimized.svg and you should see your SVG. If not then you have an error in your path.
Edit: in your post you have used both .yaml and .yml so just check you have that consistent in your actual setup.
1 Like
Some great uses of a bunch of different techniques. Well done!
Thanks for the logs advise and yes I actually missed the part with .yml extension (the background is showing up now but still needs more fixes)
What’s the best practice for the lights area generated with sweethome? Do I still need to crop out the dark areas like this tutorial does (not using floorplan addon)
Not sure I understand your question. Have a look at the examples in the docs and in this thread for the various ways you can show yours lights are on
Sorry, what i meant was wouldn’t the light overlay images just stack on other layers depending on the entity state?
For example these 2 layers:
- Room 1 light
- Room 2 light
If room 1 light is already on, then room 2 light is turned on. Then only room 2 light would be visible because dark areas are not cropped out?
Sorry yes you were correct. Take each room and generate a lights on image. Crop the images so you have one for each room. Accurately place each of those over the base lights-off image and then assign a suitable ID and then add an appropriate state_action rule and voila you will have an awesome floorplan!
Based on what you show above it should be very straight forward as you don’t have light spilling from one room to another. (It is achievable to have overlapping light images but it requires tweaking opacity and some more editing to get a nice realistic effect)
i try this but it does not work. can you show the full yaml config?
is it work under type: ‘‘custom:floorplan-card’’ or picture-elements ?
Hi, do you mind sharing the yaml/css codes for the buttons?
I’d like the buttons to change colors/opacity if the entities are on/off
My buttons are SVG circles with a PNG image grouped with it.
.lamp-off, .lamp-off * {
opacity: 0.5 !important;
stroke-opacity: 0 !important;
}
.lamp-on, .lamp-on * {
stroke: #03A9F4 !important;
opacity: 1 !important;
stroke-opacity: 1 !important;
}
1 Like
Unmade beds…
1 Like
I just started using home assistant a week or two ago, so I am not as cool as the rest of you - but I did happen to have a scan of the floorplan that my house had when I purchased it so at least there is that.
I had to invert / rotate the image of the layout as it was a general layout for my house model, and mine is mirrored. I do plan on cleaning up the diagram at some point, but for now it works!
PS: The round images are “whats playing” on the speakers, with the grey one being white noise 
I am not sure I like the look and may change the icon to not be dynamic. Havent decided yet
1 Like
