Problem with picture-elements Card: Image Not Updating for One Entity

Configuration Frontend
1

Hi everyone,I’m having trouble with my Home Assistant dashboard configuration using the picture-elements card. I have set up a visual floor plan where images should update based on the state of two light entities. Here’s the issue:

  • Entities: light.esszimmer_4 and light.balkon_4
  • Expected Behavior: The image should change when the state of either light is toggled via the state-icon.
  • Issue:
    • The image updates correctly when I toggle light.balkon_4.
    • However, when I toggle light.esszimmer_4, the image does not update, although the light state changes as expected.

Here’s the full YAML configuration I’m using:

type: picture-elements
image: local/FloorPlan/floorBase.png
elements:
  - type: image
    entity: light.esszimmer_4
    state_image:
      'on': local/FloorPlan/floorEsszimmer.png
      'off': local/FloorPlan/floorBase.png
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none

  - type: image
    entity: light.balkon_4
    state_image:
      'on': local/FloorPlan/floorBalkon.png
      'off': local/FloorPlan/floorBase.png
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none

  - type: state-icon
    entity: light.esszimmer_4
    style:
      left: 30%
      top: 66%
      opacity: 100%
    tap_action:
      action: toggle

  - type: state-icon
    entity: light.balkon_4
    style:
      left: 16%
      top: 50%
      opacity: 100%
    tap_action:
      action: toggle

What I’ve Tried:

  • Verified that both light entities change state correctly in the Home Assistant UI.
  • Checked that the image paths are correct and accessible.
  • Removed the state-icon and image elements individually to test functionality, which works when isolated.

Additional Context:

  • I’m using the latest version of Home Assistant.
  • The issue is consistent across different browsers and devices.

I’m looking for any insights or suggestions on why the image for light.esszimmer_4might not be updating when both elements are included. Any help would be greatly appreciated!Thank you! This format gives a clear picture of your setup and the specific problem you’re encountering, making it easier for others to provide targeted assistance.

2

Hi @3tra

Have any of the image files changed but retained the same name? If so then, this could be a caching problem.

Try putting ?v=1 after each .png in the file names. so, local/FloorPlan/floorEsszimmer.png?v=1.

3

Are both of your images directly on top of each other? Sounds like maybe the first image is just completely covered by the second, or is it supposed to be composited with transparency?

4

I found the issue! The problem was that I forgot to include mix-blend-mode: lighten in the style section of my image elements.

- type: image
    entity: light.esszimmer_4
    state_image:
      'on': local/FloorPlan/floorEsszimmer.png
      'off': local/FloorPlan/floorBase.png
    style:
      left: 50%
      top: 50%
      width: 100%
      mix-blend-mode: lighten
    tap_action:
      action: none

thanks for your help.