Toggle light via type: image

Configuration
1

Hi all,

I’m fighing now since a whil with a (I think) pretty simple task.I built up a 3D floorplan.
I am using pictures to indicate the state of my lights.
Now I want to be able to click or tap at these pictures / areas of the floorplan to toggle the corresponding light.

But I can’t get it to run. I alway get the classical popup of the entity when clicking / tapping the area.
Any ideas how to solve this?
Would I have to use a template switch for the switch.xxx entity of the area?

Here’s the code so far:

type: picture-elements
elements:
  - entity: sensor.time_of_day
    image: /local/floorplan/Background.svg
    state_image:
      mittag: /local/floorplan/EG_12Uhr.svg
      morgen: /local/floorplan/EG_9Uhr.svg
      abend: /local/floorplan/EG_18Uhr.svg
      nacht: /local/floorplan/EG_Dark.svg
    style:
      left: 50%
      top: 65%
      width: 100%
    tap_action:
      action: none
    type: image
  - entity: switch.essbereich_licht_shelly_switch_0
    state_image:
      'on': /local/floorplan/Esszimmer_LichtAn_hell_1.png
      'off': /local/floorplan/Esszimmer_LichtAus_hell_1.png
    tap-action:
      action: toggle
    style:
      top: '-36.5%'
      left: '-2.2%'
      scale: 26.5%
      width: 100%
    type: image
image: /local/floorplan/Background.svg
style: |
  svg {
  height: calc(100vh - 120px) !important;
  width: auto !important;

Thanks in advance!!

2

Hi. You are using picture-elements but this category is for ha-floorplan

You should post in configuration,

3

Thanks for the hint.
Moved it to configuration (I hope :sweat_smile:)