Change behaviour of Picture Element Card back to how it worked before 2021.9.0

Since one of the last updates, the behaviour of my Picture Elements Card has changed:

I use a picture of my floorplan to switch lights and various other things.

When I now click on an “action area” (e.g. my living room) it not only toggles the lights, but also overlays that “action area” with an eliptical “shaded” area (i.e. slightly darker than before - effectively a grey transparent circle).

When I click into another room, the living room is OK again, but now that eliptical shape appears in the new room.

Can you please remove this “feature” or make it optional?

I have noticed the same issue. Clicking in a picture elements sometimes shows a transparent gray ellipse. This just started with the 2021.9.0 release.

Any news on this?

I guess it is was it is - no change!

Looks ugly in my opinion!

I found a solution to this problem:

add in the style of your state image:

pointer-events: none

like the following example:

elements:
  - entity: light.plafond_salon
    hold_action: none
    state_image:
      'off': /local/home/transparent_square.png
      'on': /local/home/salon.png
      unavailable: /local/home/salon_unavailable.png
    style:
      left: 50%
      top: 50%
      width: 100%
      pointer-events: none
    tap_action: none
    type: image

and if you use transparent image for the clickable area add this to the style:

opacity: 0%

like the following example:

elements:
  - entity: light.plafond_salon
    image: /local/home/transparent_square.png
    style:
      border-color: '#e5e5e5'
      border-style: solid
      border-width: 0px
      height: 55px
      left: 28.25%
      top: 67%
      width: 55px
      opacity: 0%
    tap_action:
      action: toggle
    type: image

That did the trick for me, hope it helps you !

3 Likes