3D Floorplan Card

Last updated 4 months ago

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