Floorplan and picture-elements issue

Configuration
1

hello, I do not know how to solve I explain: I have my floorplan with picture_element, for example I have created the lights of various rooms, eg. I created room nr.1 then nr.2 then nr.3 etc so if I turn on room nr. 3 that is the last in chronological order I cannot interact with the number 1 or the number ne 2.

`
icon: mdi:floor-plan
panel: true
id: floorplan
cards:

  • type: picture-elements
    image: /local/DARK.png
    elements:

################ luci cubi ##############################
- type: custom:color-lite-card
entity: switch.ingresso_cubi
# tap_action:
# action: none
image:
/local/CUBION.png
style:
top: 50%
left: 50%
width: 100%

  - type: state-icon
    entity: switch.ingresso_cubi
    state_color: true
    icon: mdi:lightbulb-outline
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 18%
      left: 68%
      border: 'solid 3px rgba(100,100,100,0.3)'
      border-radius: 20px
      color: 'white'
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-active-color': yellow
      '--paper-item-icon-color': grey
      '--grey-icon-height': 2vw
      '--grey-icon-width': 2vw

################ LED GIARDINO #############################

  - type: custom:color-lite-card
    entity: switch.sonoff_10008dfd5d
    tap_action:
      action: none    
    image:
      /local/GIARDINO.png   
    style:
      top: 50%
      left: 50%
      width: 100%  

  - type: state-icon
    entity: switch.sonoff_10008dfd5d
    state_color: true
    icon: phu:light-strip
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 31%
      left: 10%
      border: 'solid 3px rgba(100,100,100,0.3)'
      border-radius: 20px
      color: 'white'
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-active-color': yellow
      '--paper-item-icon-color': grey
      '--grey-icon-height': 2vw
      '--grey-icon-width': 2vw

############ LUCI ESTERNE PERRIMETRO ###################

  - type: custom:color-lite-card
    entity: switch.sonoff_10010fa681
    tap_action:
      action: none    
    image:
      /local/PERIMETRO-GIARDINO.png   
    style:
      top: 50%
      left: 50%
      width: 100%  

  - type: state-icon
    entity: switch.sonoff_10010fa681
    state_color: true
    icon: mdi:lightbulb-outline
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 43%
      left: 28%
      border: 'solid 3px rgba(100,100,100,0.3)'
      border-radius: 20px
      color: 'white'
      transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
      '--paper-item-icon-active-color': yellow
      '--paper-item-icon-color': grey
      '--grey-icon-height': 2vw
      '--grey-icon-width': 2vw

`

Screenshot_2021-12-16-11-17-49-588_com.android.chrome
Screenshot_2021-12-16-11-17-49-588_com.android.chrome1920×864 87.3 KB

sorry for the phyto but I took a screenshot from my phone

2

I have the same problem.
I have tried to change the order of element without success.

I follow the topic

3

Hi guys
Ciao ragazzi

It seems you are having an issue with the order of your code.

Using the ‘custom:color-lite-card’ you are adding an image on top of your initial (background) image. I assume it is partly transparent.
You should see this as a new layer. Whatever is underneath, cannot be reached by clicking it, although it will be visible if the new layer is transparent in that particular area.

What you should do is first add all code for staking images (custom:color-lite-card) and program the code for all the interactive objects (e.g. state-icon) after this.

I hope this helps.

4

great it works! I followed your advice, before I had, for a matter of order, the code of the various rooms grouped together, eg. bathroom: temperature sensor, light switch, window sensor etc., now I have moved all the state-icons to the end of the page, and it works I can activate all the lights. thank you

5

Glad I could help!
Maybe if you mark the topic as ‘Solved’ others, facing the same issue, will more likely find their way to the solution.