3D Floorplan Card
This simple card displays a 3D floorplan and overlays black boxes to create the effect of lights turning on and off in the selected rooms.
Floorplan.png
763KB
Binary
Floorplan
hallway.png
2KB
Binary
Hallway overlay
kitchen.png
2KB
Binary
Kitchen overlay
living_room.png
4KB
Binary
Livingroom overlay
Change the pictures and sensors to your own.
ui-lovelace.yaml
- type: picture-elements
image: /local/Floorplan.png
elements:
- type: image
tap_action: toggle
entity: light.kitchen
image: /local/Floorplan/kitchen.png
state_filter:
"off": opacity(50%)
"on": opacity(1%)
style:
top: 80%
left: 27.25%
width: 39.75%
- type: image
tap_action: toggle
entity: light.hallway
image: /local/Floorplan/hallway.png
state_filter:
"off": opacity(50%)
"on": opacity(1%)
style:
top: 73.7%
left: 70.5%
width: 43.75%
- type: image
tap_action: toggle
entity: light.living_room
image: /local/Floorplan/living_room.png
state_filter:
"off": opacity(50%)
"on": opacity(1%)
style:
top: 36.25%
left: 50%
width: 85%
The 3D floorplan was made using the free website http://www.sweethome3d.com
The black boxes were cut out using the free software from https://www.gimp.org
Copy link