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​

Welcome!

Next - Picture-elements cards

Fitbit Card

Last modified 2yr ago