I do have a question.
I’m trying out your tutorial but when I have a light off, it’s not being shown as it should (the off image is being shown with full with instead of being put on the place it should be).
My guess would be the ordering of your elements is causing it to get covered up by another image. It’s really hard to say without seeing the images and more of your picture-elements yaml.
I used SweetHome 3D to create the image with the lights on and created the photo 1540x558.
To create the overlays with the lights off I took the same steps to create the image with the lights on, only then with the lights turned to 0%.
Then I used Gimp (lasso tool) to cut out the different dark parts of the house.
Are those 2 images the exact same that you are using? If so it will not work like you want. The image you have with the lights off needs to be exactly the same size as the main image with the lights on. It should be the same size with the rest of the image being transparent.
Ohhhh I didn’t understand it like that.
I thought I had to cut the part out but now I understand that you have to cut the rest out and make it transparent.
Thanks I will try that in a bit!
Any idea why the transparent square with the red border isn’t showing?
Great work! You may want to try adding a gaussian blur around the edges of the image with the lights off to make the darker areas blend better into the lit areas.
Still struggling a bit with creating the lights off images (see image below with the lights off, you can see the lights from the image below (with all the lights on) coming through).
But for now I’m kind of satisfied.
Seems that the light coming from the image below (with the lights on) is being caused by the blur I added.
When I replace the dark images with the ones I haven’t applied the blur to, it’s a lot better.
It is tricky when you have multiple lights in a single room. That’s the primary reason each room only has one light that can be clicked which controls the entire room in my floorplan.
Since you only have one room like this the other thing you could do is multiple renders with one light on and 2 off, 2 lights on and 1 off, etc. That would create a lot of extra work though, so if you are happy with what you’ve got I would stick with that!
cris, i can code but i cant work with gimp, im trying to lasso etc, but i cant get it to work, do you have a quick tutorial for this, i dunno how to setup the layers for it to work.
I’m not the right person to write a tutorial about Gimp since I don’t know the program as well, but I can tell you what I did.
First I added a transparant layer to the images with the lights off, and then I used the lasso tool to cut everything out except the part I need to create the dark image.
After that I exported the image as png and that can be used to create the overlay.
Your great work has inspired and instructed me to do a 3D floor plan for my apartment. Thank you very much.
I and my daughter now enjoy to control the apartment with this new awesome 3D model
I noticed that in your youtube clip, you’ve showed the back door opened in when door contact sensor reported open status. So I also want to do it for my floor plan. However, it will happen that we will have 4 images for different status of 1 room, including: light on & door open, light off & door open, light on & door closed, light off & door closed. So I am thinking about how to code it into ui-lovelace.yaml to display correct status of light and door. Could you please share me your experience about that? Thank you very much.
I use 4 images for the various states for when the backdoor is open (both lights on, no lights on, kitchen light on and mud room light off, kitchen light off mud room light on). I’m using conditional elements to handle that. Here’s a snippet for which image I show based on the back door sensor status:
The door closed is the default state of the floorplan so I am using the normal way documented in the blog post for showing the lights on or off in the kitchen or mud room.
I am trying to figure out how to use a state label to be displayed when a window is open, but disappear when the window is closed. I can get the state-label to say “On” if the window is open, or “Off” if it is shut. I would like it to say, “Bedroom Window Open.” and nothing for “Off”. Any ideas?
So studying this for a couple of nights now, I am not sure a state label is available the way I want it, or at least the way I want to do it. It looks like under the conditional element, you can use other “elements” but I can’t even get the “Title” to work with the state-labels. I can get the prefix and suffix to work. But I can’t seem to change the label from “On” to “Open”.
Sorry it took me so long to respond, it’s been a busy few weeks. I played around with my own floorplan and came up with a solution for you. The first thing I want to point out in your example is that title refers to the tooltip when your cursor hovers over the entity, so that will not change the title.
You were on the right track using the prefix.
- type: state-label
entity: binary_sensor.back_door_contact
title: "This is a tooltip for the back door contact sensor"
prefix: "Backdoor "
style:
top: 84%
left: 5%
--iron-icon-stroke-color: "#969696"
border-radius: 50%
text-align: center
background-color: "rgba(255, 255, 255, 0.3)"
The above code renders this on my floorplan (note in the screenshot my cursor was hovering over the entity):
When the back door is opened it changes to Backdoor Open just like you wanted it to be displayed. In order for the state to show as Closed/Open instead of on/off you will need to customize the entity and change the Device Class to opening. To do this, go to the Configuration page then scroll down and click on Customizations. On this page select your entity from the Entity dropdown. Then click on the pencil icon next to Device Class dropdown. Finally, select “opening” from the dropdown then click Save.
Thank you.
