Floorplan dash switch help

Hi.

I have created a floor plan dashboard and managed to get all of the lights working via switches within the floorplan.

My issue is this. If I press anywhere other than on one of the icons I have created, it brings up a huge switch in the middle of the screen for one of the lamps. It is the last switch in the code so not sure if that helps deduce the issue.

Also, the light for the lounge not only reacts slowly on the floorplan image but there is a huge delay in it actually turning on/off


Here is the code and you will see the lamp in question is at the bottom of the code

type: picture-elements
image: local/Images/Floorplan/GFNight.png
elements:
  - type: image
    entity: switch.3g_wifi_switch_wifi_ble_switch_1
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Kitchenspots.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: switch.3g_wifi_switch_wifi_ble_switch_2
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Dining.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: switch.3g_wifi_switch_wifi_ble_switch_3
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Kitchen1.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: switch.cabinet_lights_switch_1
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Cabinet.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: light.utility
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Utility.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: light.lounge
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Lounge.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: switch.hall_switch_1
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Hall.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: switch.downstairs_toilet
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/WC.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: light.lamp
    style:
      left: 50%
      top: 50%
      width: 0%
    state_image:
      'on': local/Images/Floorplan/Loungelamp.png
      'off': local/Images/Floorplan/Hometransparent.png
  - type: image
    entity: light.small_lamp
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Roundlamp.png
      'off': local/Images/Floorplan/Hometransparent.png

Thanks

Tell Home Assistant what to do when tab a element by for example setup a tab action.

  - type: image
    entity: light.small_lamp
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/Images/Floorplan/Roundlamp.png
      'off': local/Images/Floorplan/Hometransparent.png
    tap_action:
      action: toggle

Not sure what that means

Managed to get it to stop wanting to control the lamp from anywhere by reducing the 100% to 0% but now it’s another entity causing a problem.

Anyone know what the width is referring to?

Then change the other entities…
If you set the width to 100%, it will cover your whole floorplan.

If you don’t wan’t this;

afbeelding

Use this:

Sadly that does not work

I actually have that action further down in the code

 - type: state-icon
    entity: light.small_lamp
    tap_action:
      action: toggle
    style:
      left: 74%
      top: 20%
      '--mdc-icon-size': 15px
      '--paper-item-icon-color': white