Multiple picture elements with tap_action not working

Hi all,
I am a bit ashamed to bother you all, because I feel I ve missed sth very basic.
Anyways this is my problem i cannot seem to solve:
I am working on a floorplan based on the guide by Aaron Godfrey. All works fine until I try to implement more than one image/toggle. they work just fine when only one is in there.
Moreinfo: lovelace with yaml, the view is a horizontal stack with two conditional cards (for levels of my house, and their I include the picture elements cards for each level.
This is my code for one of those levels where the problem shows

type: picture-elements
elements:

# keuken
  - type: image
    entity: group.keuken
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/bbfloorplan/keukenaan810cut.png
      'off': /local/bbfloorplan/keukenuit810cut.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: group.keuken
    tap_action:
      action: toggle
    image: /local/bbfloorplan/square-png-fluo2.png
    style:
      top: 71%
      left: 35%
      width: 10%
#salon
  - type: image
    entity: group.salon
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/bbfloorplan/salonaan810cut.png
      'off': /local/bbfloorplan/salonuit810cut.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: group.salon
    tap_action:
      action: toggle
    image: /local/bbfloorplan/square-png-fluo.png
    style:
      top: 71%
      left: 55%
      width: 10%
    # Floor Toggle
  - type: service-button
    title: 1e verdieping
    service: input_select.select_next
    service_data:
      entity_id: input_select.floorplan_floor
    style:
      top: 15%
      left: 5%
      background: "#eaeaea"
      border-radius: 50%
image: 'XXXXXXXXXXXXXXXXXXXXX/local/bbfloorplan/810.png'

I just don’t see my error, missing a header/definition??

thx for the help!!
Kjoere

Next day, still no solution… I tried switching the order and it looks like only the last one in code order works.

Adding a service button:

> - type: service-button
> 
>     title: Toggle salon
> 
>     style:
> 
>       top: 75%
> 
>       left: 60%
> 
>       opacity: 100%
> 
>     service: homeassistant.toggle
> 
>     service_data:
> 
>       entity_id: group.salon

gives no issues, but ofcourse it is unacceptably ugly

Strange… the search goes on …

Hey Kjoere!

I just had a look at your card, and noticed that the image /local/bbfloorplan/salonaan810cut.png resp. salonuit810cut.png are placed after (i.e. on top of) the square-png-fluo2.png. This causes it to block interaction. You should put all the click-irrelevant images with “width: 100%” on top of your code, so they are the lowest on the z-axis.

Try this:

type: picture-elements
elements:

#base
  - type: image
    entity: group.keuken
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/bbfloorplan/keukenaan810cut.png
      'off': /local/bbfloorplan/keukenuit810cut.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: group.salon
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/bbfloorplan/salonaan810cut.png
      'off': /local/bbfloorplan/salonuit810cut.png
    style:
      top: 50%
      left: 50%
      width: 100%
#keuken
  - type: image
    entity: group.keuken
    tap_action:
      action: toggle
    image: /local/bbfloorplan/square-png-fluo2.png
    style:
      top: 71%
      left: 35%
      width: 10%
#salon
  - type: image
    entity: group.salon
    tap_action:
      action: toggle
    image: /local/bbfloorplan/square-png-fluo.png
    style:
      top: 71%
      left: 55%
      width: 10%
#Floor Toggle
  - type: service-button
    title: 1e verdieping
    service: input_select.select_next
    service_data:
      entity_id: input_select.floorplan_floor
    style:
      top: 15%
      left: 5%
      background: "#eaeaea"
      border-radius: 50%
image: '/local/bbfloorplan/810.png'

Dear M1ke,

Thank you so so so much! I am so greatful mate. Never knew that the order was that important.
Afterwards it all sounds logical, but that is ofcourse afterwards.
I honestly think I would not have found think on my own.
Thanks a million, you legend mate!!
Kjoere

1 Like

Yeah, fantastic! No problem mate, always happy to help :smiley: