I have the following picture-element that works as a floorplan style “show rooms with motion” thing. It’s been working fine for years, but a recent update seems to have changed the behaviour of state_filter. It now generates style="filter: opacity(0%) opacity(30%);
when the entity is on, instead of style="filter: opacity(30%);
as it (presumably) used to. Have I missed something in the breaking changes?
- type: picture-elements
image: /local/floorplan/flat.png
elements:
- image: /local/floorplan/livingroom.png
type: image
entity: binary_sensor.livingroom_motion
state_filter:
'on': opacity(30%)
filter: opacity(0%)
tap_action: none
style:
transform: 'translate(0%,0%)'
top: 0
hold_action: none
Never mind, I’m having a moment. The behaviour has changed, but it’s as simple as moving the filter lines to the state_filter eg:
- type: picture-elements
image: /local/floorplan/flat.png
elements:
- image: /local/floorplan/livingroom.png
type: image
entity: binary_sensor.livingroom_motion
state_filter:
'on': opacity(30%)
'off': opacity(0%)
tap_action: none
style:
transform: 'translate(0%,0%)'
top: 0
hold_action: none
I noticed the exact same issue. Mine is for a sensor with a lot of states and I didn’t want to itemize every possible state with an opacity, so I used filter: opacity(0)
. That was working great to hide the image for all but a few of the states I needed it to display for, until I updated to 0.117.x (maybe 0.116.x, but I didn’t notice it until I was on 0.117.x).
When I was experimenting with it I discovered that when a state_filter
was active the lower opacity value of the state_filter
or filter
was being used instead of just the state_filter
value. That effectively meant every state_image
was invisible when active instead of visible. Based on what you said, the merging of filter
and state_filter
is now additive rather than overriding. I assume this is a bug that deserves to be fixed.
In my case I resolved with a transparent default image and removing all the opacity
settings from the filter
and state_filter
. It was cleaner than itemizing every possible state with an opacity value of 0 or 1. I literally have at least 16 state on that sensor, but only 4 need to show the image element.
This whole opacity manipulation was just a workaround for the real issue of not wanting a default “broken image” when an image isn’t specified. I get that not displaying anything when the image is missing could be confusing for people that forget to set the image and don’t know why they can’t see anything, but maybe it could use a keyword like image: hide
instead of a filename and not render the element unless a state_image
is being displayed. Hiding the image element would be ideal, rather than having it transparent, so that the area isn’t clickable when not shown.