Lovelace 086.2 picture-elements card tap action (toggle) not working

Configuration Frontend
1

Hi All,

I am following the guide here for 3D floorplans:
https://sharethelove.io/picture-elements-cards/3d-floorplan

I have the main floorplan image and separate mattes for each room.
I can see that the opacity of the matte changes when the entity is toggled from a separate UI in other browser tab, but I cannot tap on the rooms to toggle - just does not work.

E.g. if I toggle light.kitchen_pendant I can see the change from this:
image

to this:
image

But the same will not happen when I click on the kitchen area on the card.

Here is the config:

type: picture-elements
width: 100%
image: /local/lovelace/images/floorplans/Home_Ground_Floor.png
elements:
  - type: image
    action: call-service
    service: light.toggle
    entity: light.kitchen_pendant
    image: >-
      /local/lovelace/images/floorplans/Home_Ground_Floor_Kitchen_Matte.png
    state_filter:
      'off': opacity(70%)
      'on': opacity(1%)
    style:
      top: 50%
      left: 50%
      width: 100%

Any help much appreciated!

2

I think it should be tap_action:

Here is what I have that seems to work:

      - type: image
        entity: light.cabinet_lights
        image: /local/Kitchen.jpg
        tap_action:
          action: toggle
1 Like
3

Nice. Thanks.

Quite correct on the typo in my example. I had tried the syntax from the previously linked site, which is:

  - type: image
    tap_action: toggle
    entity: light.kitchen
    image: /local/Floorplan/kitchen.png

This was not working, so I was attempting (and failing ;)) to use service instead.
Your syntax to separate the tap_action and action type is working great.

Now I checked against the official docs I can see that there too.
I guess the syntax changed since that site was created.

Thanks