Picture-element: cannot click multiple icon-state

Configuration Frontend
1

hi,

Capture1
Capture1963×560 250 KB

now i have added 3 icons as you can see (just to make sure i got things right).

the problem i am facing: i can only click the lower-left icon, nothing happens when i click on the other two. if i keep any single icon by itself in the code, it works.

type: picture-elements
image: local\floorplan\ROOMS_PNG\floorplan.png
elements:
  - type: image
    entity: switch.ty0226087770039f8fb579_2
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local\floorplan\ROOMS_PNG\bedroom1.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: state-icon
    entity: switch.ty0226087770039f8fb579_2
    style:
      left: 76%
      top: 30%
      width: 100%
    tap_action:
      action: toggle
  - type: image
    entity: switch.ty8014125540f520eb1719
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\livingroom-spotlights.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: state-icon
    entity: switch.ty8014125540f520eb1719
    tap_action:
      action: toggle
    style:
      left: 100%
      top: 70%
      width: 100%
  - type: image
    entity: switch.ty8014125540f520eb1719_3
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\livingroom-lights.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: state-icon
    entity: switch.ty8014125540f520eb1719_3
    tap_action:
      action: toggle
    style:
      left: 80%
      top: 70%
      width: 100%
1 Like
2

to anyone having the same issue.

how i solved this: i re-arranged my code to have images first, then i had all the state-icons.

code:

type: picture-elements
image: local\floorplan\ROOMS_PNG\floorplan.png
elements:
  - type: image
    entity:
      - switch.ty0226087770039f902b10_2
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\hall2.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity:
      - switch.ty0226087770039f902b10
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\hall1.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity:
      - switch.ty8633086640f520eb19dd
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\bathroom2.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity:
      - switch.ty0660728870039f905cb7_2
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\bedroom2.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity:
      - switch.ty0660728870039f905cb7
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\bedroom2.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity:
      - switch.ty5227015170039f8ff1ce
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\bathroom1.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity:
      - switch.ty5227015170039f901c0b_3
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\kitchen.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity: switch.ty8014125540f520eb1719
    style:
      left: 50%
      top: 50%
      width: 100%
      opacity: 50%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\livingroom-spotlights.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: image
    entity: switch.ty8014125540f520eb1719_3
    style:
      left: 50%
      top: 50%
      width: 100%
      opacity: 50%
    tap_action:
      action: none
    state_image:
      'on': local\floorplan\ROOMS_PNG\livingroom-lights.png
      'off': local\floorplan\ROOMS_PNG\trans.png
  - type: state-icon
    entity: switch.ty5227015170039f901c0b_3
    style:
      left: 65%
      top: 70%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.ty8014125540f520eb1719_3
    tap_action:
      action: toggle
    style:
      left: 80%
      top: 70%
      width: 100%
  - type: state-icon
    entity: switch.ty0226087770039f8fb579_2
    style:
      left: 76%
      top: 30%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.ty8014125540f520eb1719
    tap_action:
      action: toggle
    style:
      left: 100%
      top: 70%
      width: 100%
  - type: state-icon
    entity: switch.ty5227015170039f8ff1ce
    tap_action:
      action: toggle
    style:
      left: 105%
      top: 17%
      width: 100%
  - type: state-icon
    entity: switch.ty0660728870039f905cb7
    tap_action:
      action: toggle
    style:
      left: 122%
      top: 22%
      width: 100%
  - type: state-icon
    entity: switch.ty0660728870039f905cb7_2
    tap_action:
      action: toggle
    style:
      left: 128%
      top: 22%
      width: 100%
  - type: state-icon
    entity: switch.ty0226087770039f902b10_2
    tap_action:
      action: toggle
    style:
      left: 109%
      top: 45%
      width: 100%
  - type: state-icon
    entity: switch.ty0226087770039f902b10
    tap_action:
      action: toggle
    style:
      left: 120%
      top: 54%
      width: 100%
  - type: state-icon
    entity: switch.ty8633086640f520eb19dd
    tap_action:
      action: toggle
    style:
      left: 135%
      top: 54%
      width: 100%
1 Like
3

Awesome, I experienced this issue. Had been moving the code multiple times. Your answer fixed my issue.

Thanks!

4

i am glad someone needed that :slight_smile: