thanks!
sure, here is a part of my code:
- title: Plan
icon: mdi:floor-plan
id: tab_plan
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:plan-coordinates
- type: picture-elements
image: /local/lovelace/ground_off.jpg?v=1
elements:
- type: image
tap_action: none
hold_action: none
entity: light.table_left
state_image:
"on": /local/lovelace/table_left.png?v=1
"off": /local/lovelace/_empty.png?v=2
style:
transform: none
left: 0%
top: 0%
- type: image
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.table_left
image: /local/lovelace/_round_button.png?v=2
/local/lovelace/ground_off.jpg is just a jpg with the whole floorplan, lights off.
/local/lovelace/table_left.png is a transparent png with only the left lamp and part of the floor/table that shoud be lighten up when this light goes on.
/local/lovelace/_empty.png an empty png just as the placeholder [not sure if needed, but added that anyway]
/local/lovelace/_round_button.png small png with semi-transparent circle for buttons
the addition of ?v=… is for bypassing the cache [every time I change the pictures, I increase the number next to it so homeassistant force-reads new graphic files and doesn’t use them from the browser cache]
pictures for “light on” are masked in photoshop, so png contains only what is needed for each lamp, something like:
