Dashboard map with fade icons

Configuration Frontend
1

Hi! I made a map that gave me insight into my lighting. Now I have blue buttons at the top left. But when a light comes on, these buttons light up. This is not the intention. Does anyone know how to solve this?
I made new images where the lighting comes out from under the walls. Unfortunately, this was not allowed to be the solution.

ive some images here:

Scherm­afbeelding 2024-08-23 om 09.01.21
Scherm­afbeelding 2024-08-23 om 09.01.211920×1085 83.3 KB

Scherm­afbeelding 2024-08-23 om 09.01.12
Scherm­afbeelding 2024-08-23 om 09.01.121920×1145 80.8 KB

thank you!

Ofso some code:

kiosk_mode:
  hide_header: true
views:
  - title: Floorplan
    type: panel
    path: first
    badges: []
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/map/3D/Basis.png
            panel: true
            elements:
              - type: image
                entity: light.verlichting_gang_beneden_ikea_light_2
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.verlichting_gang_beneden_ikea_light_2’].attributes.hs_color
                    ?
                    states[‘light.verlichting_gang_beneden_ikea_light_2’].attributes.hs_color[0]
                    : 0) + "deg)"}
                  opacity: >-
                    ${states[‘light.verlichting_gang_beneden_ikea_light_2’].state
                    === 'on' ?
                    (states[‘light.verlichting_gang_beneden_ikea_light_2’].attributes.brightness
                    / 255) : '0'}
                state_image:
                  'on': /local/map/3D/bg-halletje.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.keukenblad
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.keukenblad’].attributes.hs_color ?
                    states[‘light.keukenblad’].attributes.hs_color[0] : 0) +
                    "deg)"}
                  opacity: >-
                    ${states[‘light.keukenblad’].state === 'on' ?
                    (states[‘light.keukenblad’].attributes.brightness / 255) :
                    '0'}
                state_image:
                  'on': /local/map/3D/bg-keukenblad2.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.hal
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" + (states[‘light.hal’].attributes.hs_color
                    ? states[‘light.hal’].attributes.hs_color[0] : 0) + "deg)"}
                  opacity: >-
                    ${states[‘light.hal’].state === 'on' ?
                    (states[‘light.hal’].attributes.brightness / 255) : '0'}
                state_image:
                  'on': /local/map/3D/bg-hal-vide.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.keuken_raam
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.keuken_raam’].attributes.hs_color ?
                    states[‘light.keuken_raam’].attributes.hs_color[0] : 0) +
                    "deg)"}
                  opacity: >-
                    ${states[‘light.keuken_raam’].state === 'on' ?
                    (states[‘light.keuken_raam’].attributes.brightness / 255) :
                    '0'}
                state_image:
                  'on': /local/map/3D/bg-keukenverlichting-raam.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.woonkamer
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.woonkamer’].attributes.hs_color ?
                    states[‘light.woonkamer’].attributes.hs_color[0] : 0) +
                    "deg)"}
                  opacity: >-
                    ${states[‘light.woonkamer’].state === 'on' ?
                    (states[‘light.woonkamer’].attributes.brightness / 255) :
                    '0'}
                state_image:
                  'on': /local/map/3D/bg-woonkamer.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.eethoek
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.eethoek’].attributes.hs_color ?
                    states[‘light.eethoek’].attributes.hs_color[0] : 0) +
                    "deg)"}
                  opacity: >-
                    ${states[‘light.eethoek’].state === 'on' ?
                    (states[‘light.eethoek’].attributes.brightness / 255) : '0'}
                state_image:
                  'on': /local/map/3D/bg-eetkamer.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: switch.switch_wc_beneden_switch
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘switch.switch_wc_beneden_switch’].attributes.hs_color
                    ?
                    states[‘switch.switch_wc_beneden_switch’].attributes.hs_color[0]
                    : 0) + "deg)"}
                  opacity: >-
                    ${states[‘switch.switch_wc_beneden_switch’].state === 'on' ?
                    (states[‘switch.switch_wc_beneden_switch’].attributes.brightness
                    / 255) : '0'}
                state_image:
                  'on': /local/map/3D/bg-wclamp.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.hal_bg_licht
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.hal_bg_licht’].attributes.hs_color ?
                    states[‘light.hal_bg_licht’].attributes.hs_color[0] : 0) +
                    "deg)"}
                  opacity: >-
                    ${states[‘light.hal_bg_licht’].state === 'on' ?
                    (states[‘light.hal_bg_licht’].attributes.brightness / 255) :
                    '0'}
                state_image:
                  'on': /local/map/3D/bg-bg-hala8.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: scene.alle_verlichting_uit
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" + (states[‘scene.alle_verlichting_uit 
                    ’].attributes.hs_color ? states[‘scene.alle_verlichting_uit 
                    ’].attributes.hs_color[0] : 0) + "deg)"}
                  opacity: >-
                    ${states[‘scene.alle_verlichting_uit’].state === 'on' ?
                    (states[‘scene.alle_verlichting_uit’].attributes.brightness
                    / 255) : '0'}
                state_image:
                  'on': /local/map/bg-alleverlichting-uit.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: light.staande_lamp_licht
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘light.staande_lamp_licht’].attributes.hs_color ?
                    states[‘light.staande_lamp_licht’].attributes.hs_color[0] :
                    0) + "deg)"}
                  opacity: >-
                    ${states[‘light.staande_lamp_licht’].state === 'on' ?
                    (states[‘light.staande_lamp_licht’].attributes.brightness /
                    255) : '0'}
                state_image:
                  'on': /local/map/3D/bg-staandelamp.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: scene.nachtstand
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘scene.nachtstand’].attributes.hs_color ?
                    states[‘light.staande_lamp_licht’].attributes.hs_color[0] :
                    0) + "deg)"}
                  opacity: >-
                    ${states[‘scene.nachtstand’].state === 'on' ?
                    (states[‘scene.nachtstand’].attributes.brightness / 255) :
                    '0'}
                state_image:
                  'on': /local/map/bg-staandelamp.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: image
                entity: scene.ochtend_routine
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" + (states[‘scene.alle_verlichting_uit 
                    ’].attributes.hs_color ? states[‘scene.alle_verlichting_uit 
                    ’].attributes.hs_color[0] : 0) + "deg)"}
                  opacity: >-
                    ${states[‘scene.ochtend_routine’].state === 'on' ?
                    (states[‘scene.ochtend_routine’].attributes.brightness /
                    255) : '0'}
                state_image:
                  'on': /local/map/bg-alleverlichting-uit.png
                  'off': /local/map/3D/Basis.png
                tap_action:
                  action: none
              - type: state-icon
                entity: light.verlichting_gang_beneden_ikea_light_2
                style:
                  left: 33%
                  top: 40%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.keukenblad
                style:
                  left: 28%
                  top: 75%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.hal
                style:
                  left: 47%
                  top: 49%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.keuken_raam
                style:
                  left: 17%
                  top: 67%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.woonkamer
                style:
                  left: 74%
                  top: 38%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.eethoek
                style:
                  left: 57%
                  top: 60%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: switch.switch_wc_beneden_switch
                style:
                  left: 33%
                  top: 50%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.hal_bg_licht
                style:
                  left: 48%
                  top: 35%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: light.staande_lamp_licht
                style:
                  left: 86%
                  top: 54%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: scene.alle_verlichting_uit
                style:
                  left: 15%
                  top: 25%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: scene.nachtstand
                style:
                  left: 11%
                  top: 12%
                  opacity: 0
                tap_action:
                  action: toggle
              - type: state-icon
                entity: scene.ochtend_routine
                style:
                  left: 16%
                  top: 8%
                  opacity: 0
                tap_action:
                  action: toggle
    visible:
      - user: 16c0348433a64d018390dd5149b80784
    layout: {}
2

Hi Tim

FYI: you can just paste images into a message instead of linking to an external cloud storage.

1 Like
3

Thank you! Did not know that :slight_smile: