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.