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
1
- type: picture-elements
2
image: /local/Floorplan.png
3
elements:
4
5
- type: image
6
tap_action: toggle
7
entity: light.kitchen
8
image: /local/Floorplan/kitchen.png
9
state_filter:
10
"off": opacity(50%)
11
"on": opacity(1%)
12
style:
13
top: 80%
14
left: 27.25%
15
width: 39.75%
16
17
- type: image
18
tap_action: toggle
19
entity: light.hallway
20
image: /local/Floorplan/hallway.png
21
state_filter:
22
"off": opacity(50%)
23
"on": opacity(1%)
24
style:
25
top: 73.7%
26
left: 70.5%
27
width: 43.75%
28
29
- type: image
30
tap_action: toggle
31
entity: light.living_room
32
image: /local/Floorplan/living_room.png
33
state_filter:
34
"off": opacity(50%)
35
"on": opacity(1%)
36
style:
37
top: 36.25%
38
left: 50%
39
width: 85%
Copied!
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
Last modified 1yr ago
Copy link