Hello !
I’m using a touch screen to display my floorplan :
If I touch an Icon, everything works like it’s supposed to, I can toggle the lights and switches, but if I’m touching anywhere else on the screen, a popup of the last light added to the plan will appear:
I think my code is very simple and I can’t find someone with the same problem,or something to define the touch area of each icon, I’m very new to this so I must be missing something, if someone can help it would be awesome, thanks for reading.
type: picture-elements
elements:
- type: image
entity: light.plafond_salon
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.plafond_salon.png
'off': /local/plan/transparent.png
- type: image
entity: light.plafond_cusine
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.plafond_cuisine.png
'off': /local/plan/transparent.png
- type: image
entity: switch.0xa4c13819570aa71b_right
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/switch.0xa4c13819570aa71b_right.png
'off': /local/plan/transparent.png
- type: image
entity: switch.0xa4c13819570aa71b_left
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/switch.0xa4c13819570aa71b_left.png
'off': /local/plan/transparent.png
- type: image
entity: light.3spots_suite
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.3spots_suite.png
'off': /local/plan/transparent.png
- type: image
entity: light.relais_4_l1
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/switch.0xa4c13897ff3595ae_l1.png
'off': /local/plan/transparent.png
- type: image
entity: switch.0x842712fffe51833b
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/switch.0x842712fffe51833b.png
'off': /local/plan/transparent.png
- type: image
entity: light.sonoff_evier
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.sonoff_evier.png
'off': /local/plan/transparent.png
- type: image
entity: light.spot_bureau_gauche
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.spot_bureau_droite.png
'off': /local/plan/transparent.png
- type: image
entity: light.spot_bureau_droite
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.spot_bureau_droite.png
'off': /local/plan/transparent.png
- type: image
entity: light.hue_infuse_ceiling_1
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.hue_infuse_ceiling_1.png
'off': /local/plan/transparent.png
- type: image
entity: light.hue_infuse_ceiling_1_2
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.hue_infuse_ceiling_1_2.png
'off': /local/plan/transparent.png
- type: image
entity: light.neon_du_bureau_2
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.neon_du_bureau_2.png
'off': /local/plan/transparent.png
- type: image
entity: light.tete_de_lit
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/plan/light.tete_de_lit.png
'off': /local/plan/transparent.png
- type: image
entity: light.h6159_5a37
style:
top: 50%
left: 50%
width: 100%
height: auto
state_image:
'on': /local/plan/light.h6159_5a37.png
'off': /local/plan/transparent.png
- type: custom:browser-control-card
hide_fullscreen: false
hide_screenlock: true
hide_zoom: true
hide_refresh: false
no_padding: false
small_buttons: true
card_mod:
style: |
ha-card {
--primary-text-color: white;
--secondary-text-color: white;
--ha-card-border-width: 0px;
text-align: -webkit-center;
margin-bottom: -0px;
background-color : transparent;
margin-top: 0px;
}
style:
top: 5%
left: 5%
width: 50%
- type: custom:button-card
state:
- value: 'off'
color: white
styles:
card:
- background-color: transparent
icon:
- animation:
- rotating 6s linear infinite
- value: 'on'
color: orange
styles:
card:
- background-color: transparent
icon:
- animation:
- rotating 1s linear infinite
style:
top: 43%
left: 38%
width: 3%
tap_action:
action: toggle
entity: switch.0x3c2ef5fffebd810a
icon: mdi:fan
name: ' '
- type: icon
icon: mdi:cctv
entity: camera.camera_jardin_hd_stream
camera_image: camera.camera_jardin_hd_stream
style:
top: 72%
left: 77%
- type: icon
icon: mdi:keyboard-backspace
tap_action:
action: navigate
navigation_path: /lovelace
style:
top: 85%
left: 51%
- type: state-icon
entity: light.sonoff_couloir_sdb
tap_action:
action: toggle
style:
top: 39%
left: 36%
- type: state-icon
entity: light.plafond_salon
icon: phu:ceiling-aurelle
tap_action:
action: toggle
style:
top: 62%
left: 48%
- type: state-icon
entity: light.plafond_cusine
icon: phu:ceiling-aurelle
tap_action:
action: toggle
style:
top: 43%
left: 48%
- type: state-icon
entity: light.relais_4_l1
tap_action:
action: toggle
style:
top: 50%
left: 33%
- type: state-icon
entity: light.3spots_suite
icon: phu:ceiling-fugato-three-alt
tap_action:
action: toggle
style:
top: 72%
left: 66%
- type: state-icon
entity: light.bseed_2btn_entree_right
icon: phu:ceiling-cher-semiflush
tap_action:
action: toggle
style:
top: 31%
left: 55%
- type: state-icon
entity: light.bseed_2btn_entree_left
tap_action:
action: toggle
style:
top: 25%
left: 65%
- type: state-icon
entity: light.sonoff_evier
tap_action:
action: toggle
style:
top: 40%
left: 43%
- type: state-icon
entity: light.spot_bureau_gauche
tap_action:
action: toggle
style:
top: 52%
left: 16%
icon: phu:spot-bulb-top
- type: state-icon
entity: light.spot_bureau_droite
tap_action:
action: toggle
style:
top: 48%
left: 17%
icon: phu:spot-bulb-top
- type: state-icon
entity: light.hue_infuse_ceiling_1
tap_action:
action: toggle
style:
top: 62%
left: 21%
icon: phu:ceiling-infuse
- type: state-icon
entity: light.hue_infuse_ceiling_1_2
tap_action:
action: toggle
style:
top: 40%
left: 24%
icon: phu:ceiling-infuse
- type: state-icon
entity: light.neon_du_bureau_2
tap_action:
action: toggle
style:
top: 72%
left: 21%
icon: phu:light-strip
- type: state-icon
entity: light.tete_de_lit
tap_action:
action: toggle
style:
top: 75%
left: 70%
icon: phu:light-strip
- type: state-icon
entity: light.h6159_5a37
style:
top: 54%
left: 22%
tap_action:
action: toggle
hold_action: none
icon: phu:light-strip
image: /local/plan/pp/mezonoff.png
card_mod:
style: |
ha-card {
--primary-text-color: white;
--secondary-text-color: white;
height: auto;
width: auto;
background-color : transparent;
position: relative
}