Hello @henrikrox,
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.
Hi @fahr,
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.
Very nicely done!
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:
## Back Door Sensor
- type: conditional
conditions:
- entity: light.kitchen
state: 'on'
- entity: switch.mud_room_light
state: 'on'
elements:
- type: image
entity: binary_sensor.back_door_contact
tap_action: none
hold_action: none
state_image:
"on": /local/floorplan/first_floor_kitchen_and_mud_room_lights_on_back_door_open.png
"off": /local/floorplan/transparent_square.png
style:
top: 50%
left: 50%
width: 100%
- type: conditional
conditions:
- entity: light.kitchen
state: 'off'
- entity: switch.mud_room_light
state: 'off'
elements:
- type: image
entity: binary_sensor.back_door_contact
tap_action: none
hold_action: none
state_image:
"on": /local/floorplan/first_floor_lights_off_back_door_open.png
"off": /local/floorplan/transparent_square.png
style:
top: 50%
left: 50%
width: 100%
- type: conditional
conditions:
- entity: light.kitchen
state: 'off'
- entity: switch.mud_room_light
state: 'on'
elements:
- type: image
entity: binary_sensor.back_door_contact
tap_action: none
hold_action: none
state_image:
"on": /local/floorplan/first_floor_mud_room_lights_on_back_door_open.png
"off": /local/floorplan/transparent_square.png
style:
top: 50%
left: 50%
width: 100%
- type: conditional
conditions:
- entity: light.kitchen
state: 'on'
- entity: switch.mud_room_light
state: 'off'
elements:
- type: image
entity: binary_sensor.back_door_contact
tap_action: none
hold_action: none
state_image:
"on": /local/floorplan/first_floor_kitchen_lights_on_back_door_open.png
"off": /local/floorplan/transparent_square.png
style:
top: 50%
left: 50%
width: 100%
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.
Thank you very much @fahr !
I changed to use conditional elements as you advised for both state changing of sensors and switches and it worked perfectly.
Hope to see more of your great works on 3D floor plan 
Thank you.
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”.
- type: conditional
conditions:
entity: binary_sensor.zds_backdoor
state: "on"
elements: state-label
title: "Backdoor Open"
style:
top: 60%
left: 87%
--iron-icon-stroke-color: "#969696"
border-radius: 50%
text-align: center
background-color: "rgba(255, 255, 255, 0.3)"
One thing I have considered is going back and adding the text to the png files, and building conditional elements based off of that.
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.
Hi… I followed your tutorial on your blog, most of it is working, however i am having trouble on the toggle part. I have 2 lights currently automated on my main floor. (Living room and outside porch lights). So I created 3 images.
The porch lights turning off and on seems to be working ok, however when i turn on and off the porch lights, it seem to have some impact on the living room image. I double checked the config and it seems to be ok for my eyes. Can someone please check and let me know if anything I am doing wrong?
Whenever i click the living lights transparent square it is turning on and off, but the overlay off image is not showing up, however when i turn on/off the outside light, it is toggling the on/off overlay of the living room along with the outside overlay image
Config:
cards:
- elements:
- entity: light.living_lights
hold_action: none
state_image:
'off': /local/fp/living_room_lights_off.png
'on': /local/fp/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: light.outside_lights
hold_action: none
state_image:
'off': /local/fp/porch_lights_off.png
'on': /local/fp/transparent_square.png
style:
left: 50%
top: 50%
width: 100%
tap_action: none
type: image
- entity: light.living_lights
image: /local/fp/transparent_square.png
style:
border: 5px solid red
left: 67%
top: 55%
tap_action:
action: toggle
type: image
- entity: light.outside_lights
image: /local/fp/transparent_square.png
style:
border: 3px solid red
left: 0%
top: 56%
tap_action:
action: toggle
type: image
- entity: light.outside_lights
image: /local/fp/transparent_square.png
style:
border: 3px solid red
left: 6%
top: 73%
tap_action:
action: toggle
type: image
image: /local/fp/first_floor_lights_on.png
type: picture-elements
icon: 'mdi:floor-plan'
panel: true
path: floor-plan
title: FloorPlan
Could you describe the unexpected behavior you are experiencing in more detail? I copy/pasted your config and downloaded your images into my HA instance. After changing the entity ids to match my own toggling the living room and outside lights seems to work fine, regardless of which one I click.
You may also want to update your living room off to include the grass outside the window since the lights off is still showing the window illumination 
Hi Fahr
Thanks for your reply. Actually the behavior i was facing was the following.
Precond: My configuration is living room definition is first and then the outside lights
Behavior: When I click the living room first it turns on/off fine. Then when i click outside that also works fine, but when I come back again and click on the living room, it was turning on/off the light itself, but the layer (off image) was not appearing on living room. When i click on outside light, it was bringing the off image on the living room.
This behavior was happening and I thought of switching the order of my overlay and the toggle (ie: outside light first and living room second), Then the same behavior but in this case it is reverse (ie: outside light off layer was not appearing when i click on the outside lights. Instead it was showing the off image only when i clicked on the living room).
Having said that, this morning I was trying to capture a video for you to show the behavior, but now everything seems to be working fine. I have not changed anything. It is very weird but somehow working fine. I will keep monitoring and let you know in case this behavior comes up again.
Again thanks for your post on this 3D floorplan, it helped a lot.
It’s time for me to add some more stuff like sensors and temperature etc.
BTW good catch on the illumination of window haha… I will try to polish up the renderings further to capture the knitty gritty.
I’m glad it’s working as expected now! Good luck with the rest of your floor plan, it’s looking good!
Help me understand, I drew a 3D plan, I set everything up. one thing confuses me, I have the main picture 1232x1096. and on the plan it decreases to 492x438. I just can’t stretch it. if you set “panel: true” then it stretches horizontally to the full width, respectively flies in height down the screen
I believe without using panel: true it will resize it to fit in a single column, which is why it shrinks. The view will need to set panel to true to fill the width. The docs state:
Setting panel true sets the view to panel mode. In this mode the first card is rendered full-width, other cards in the view will not be rendered.
I’m not sure I understand what you mean by flies in height. Do you mean you have to scroll down to see the entire image? If this is the case and undesired, you could try to add some transparent space on the left and right sides and shrink the floorplan layer down until you can get the height to fit the way you desire.
Thank you. I’m used your instruction for create floorplan 
Hi there I have a nice 3D floorplan and was wondering if it is possible to do what I want.
I would like to dim the image based on the brightness attribute of the light in the room…
Unfortunately, I can’t think of a good way to do this. You could create several renders with the light on at certain percentages than use the lovelace-card-templater to change the image based on the percentage or brightness level, although I haven’t really tried that out.
I tried using a background-color style for the image that set the transparency based on the light brightness, but since the on/off images fill the browser window it makes the entire image semi-transparent instead of just the dark room.
If you can remember how you set the background-color style for the image based on the light brightness could you let me know. My images do not fill the browser window as they are just small overlays that go over the off image.
title: Floorplan
path: floorplan
panel: true
cards:
- type: "custom:card-templater"
entities:
- "light.living_room"
card:
type: picture-elements
image: /local/floorplan/first_floor_lights_on.png
elements:
- type: image
entity: light.living_room
tap_action: none
hold_action: none
state_image:
"on": /local/floorplan/transparent_square.png
"off": /local/floorplan/first_floor_living_room_lights_off.png
style:
top: 50%
left: 50%
width: 100%
background-color_template: "rgba(255, 255, 255, {{ 0.3 if state_attr('light.living_room','brightness') < 100 else 0 }})"
Note that the logic for the background-color isn’t exactly right, but the idea is you can use state attributes to change the last number which represents the transparency. If you have an attribute that reports the percentage brightness then you could just multiply it by .01 to get the right number for the alpha transparency. e.g. background-color_template: "rgba(255, 255, 255, {{ state_attr('light.living_room','brightness') * .01 }})"
Thanks a million, will spin it up on my dev unit and see if I can get it working.