3D Floorplan Card

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​

Welcome!

Next - Picture-elements cards

Fitbit Card

Last modified 1yr ago

Copy link