I hope someone might be able to point me in the right direction please…
I’ve set up a floorplan using the picture elements card, which works really well except for one thing:
If I click outside of the clickable lights I’ve defined, I get a large round white highlight over the base picture I’ve used.
This:
becomes this (with the large white oval):
I’ve noticed that if I remove everything except for a single picture, it doesn’t happen… as soon as I add one of the aditional pictures of a room for a lights state, it does.
Only in browsers (firefox and edge), it doesn’t happen in the HA app on my android phone.
The whole card’s YAML is:
type: picture-elements
image: /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-All_off.png
elements:
- type: image
entity: light.conservatory_light
tap_action: none
hold_action: none
state_image:
'on': /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Conservatory_on.png
'off': /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Conservatory_off.png
unavailable: /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Conservatory_off.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.livingroom_light
tap_action: none
hold_action: none
state_image:
'on': >-
/local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Living_on_feathered.png
'off': >-
/local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Living_off_feathered.png
unavailable: >-
/local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Living_off_feathered.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.stairs_light
tap_action: none
hold_action: none
state_image:
'on': /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Stairs_on.png
'off': /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Stairs_off.png
unavailable: /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Stairs_off.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.tall_light
tap_action: none
hold_action: none
state_image:
'on': /local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Tall_on_feathered.png
'off': >-
/local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Tall_off_feathered.png
unavailable: >-
/local/Floorplan/Ground-2024_09_01-2000-Ceiling_on-Tall_off_feathered.png
style:
top: 50%
left: 50%
width: 100%
- type: image
entity: light.conservatory_light
tap_action:
action: toggle
state_image:
'on': /local/Floorplan/Transparent_square.png
'off': /local/Floorplan/Transparent_square.png
unavailable: /local/Floorplan/Transparent_square.png
style:
top: 37%
left: 26%
- type: image
entity: light.livingroom_light
tap_action:
action: toggle
state_image:
'on': /local/Floorplan/Transparent_square.png
'off': /local/Floorplan/Transparent_square.png
unavailable: /local/Floorplan/Transparent_square.png
style:
top: 54%
left: 77.5%
- type: image
entity: light.stairs_light
tap_action:
action: toggle
state_image:
'on': /local/Floorplan/Transparent_square.png
'off': /local/Floorplan/Transparent_square.png
unavailable: /local/Floorplan/Transparent_square.png
style:
top: 19%
left: 80.75%
- type: image
entity: light.tall_light
tap_action:
action: toggle
state_image:
'on': /local/Floorplan/Transparent_square.png
'off': /local/Floorplan/Transparent_square.png
unavailable: /local/Floorplan/Transparent_square.png
style:
top: 51.5%
left: 54.75%
Is there something I’ve missed or done incorreclty somehow?
One other small thing I’ve found is that the HA app on my android phone doesnt seem to have kept up with some changes I’ve made to the pictures that are part of this. If it were a browser clearing/refreshing its cache would probably sort it, but I can’t find a way to do similar in the app. Clearing its cache doesnt make it pull through the current pictures…
Thanks a lot