Merci pour l’astuce
Ce que je veux dire par masque, c’est que j’ai une map maison éteinte
et si je veux allumer le couloir, j’ai une map avec le rajout (masque) du couloir allumé (la diff entre deux images)
et si je veux allumer le couloir, j’ai une map avec le rajout (masque) du couloir allumé (la diff entre deux images)
C’est exactement ce que va faire ton code…
Tu affiche le fond de carte (ta première image) :
cards:
- type: picture-elements
image: /local/floorplan/images/maison_eteinte.png
et par dessus, tu affiches tes masques (techniquement on s’en fiche c’est une image comme une autre). La seule différence, c’est que tu affiches l’image ON QUE si le couloir est allumé.
- type: image
entity: light.couloir
state_image:
'on': /local/floorplan/images/couloir_gimp.png
'off': /local/floorplan/images/couloir.png
unavailable: /local/floorplan/images/couloir.png
(perso les images pour off et unavailable, je vire)
Idem pour la chambre, puis la cuisine etc.
Et tout au dessus (pour qu’il soit accessibles) tu mettras les boutons, label etc
Moi je les vire pas, je mets un pixel transparent. Ca permet de garder en memoire la possibilite de 
Par contre, la on parle d’une lumiere mais tu peux faire ^pareil avec autre chose. Par exemple mettre le couloir en rouge si le detecteur incendie detecte quelquechose…
Thierry, quand je vois ton image de maison eteinte c’est pour ca que j’ai expliqué au dessus les parametre de nuit avec une grande lumiere au dessus. Ca permet d’eviter d’avoir le soleil dedans
Oui le pixel unique ça marche aussi. Le seul truc c’est que ça fait des cartes d’1 km de long. Pour la mémoire je confie ça à la doc…
Oui, j’ai bien vu ton explication … sauf que j’avais déjà tout fait !
Je le referrais quand j’aurai résolu mes problèmes et intégré toutes les manips :
-
le pixel transparent me donne une couleur rouge ! (pb)
Pourtant le transparent est transparent (récupéré ici https://png-pixel.com/ ) -
intégrer toutes les zones (facile, en cours)
-
sectoriser les zone (je veux que la zone de clic couloir soit limitée au couloir)
le reste viendra plus tard selon mon imagination … très fertile !
En l’état ça c’est mort (juste sur la zone). Pour faire un truc approchant il te faut une 3ème image, qu’il faut superposer sur la zone couloir (et gérer la position en fonction des zoom etc) pour qu’elle serve de bouton. Mais ça sera forcément un rectangle, donc ça va déborder.
J’ai résolu ma dominante rouge. J’ai du recharger l’image transparente via un autre site et renommer le fichier dans la config (va savoir pourquoi, il ne rechargeait pas la nouvelle image !)
Si j’ai bien compris, on est juste sur de l’affichage. Ca fonctionne, mais c’est bien dommage qu’on ne puisse pas cliquer sur les zones ! 
J’ai bien avancé, grace à vos conseils et aux codes yaml de ce topic.
Reste quelques problèmes:
- Quelque soit l’icone sur laquelle je clique, c’est le dernier déclaré qui réagit
- L’attribut current_temperature n’est pas reconnu => cela m’affiche auto pour l’entité climate.rez_de_chaussee au lieu de la température courante
EDIT: il faut créer un sensor relatif à l’attribut de l’entité que vous voulez affiché.
=> création du sensor.temperature_courante_rdc dans le fichier netatmo.yaml
temperature_courante_rdc:
value_template: "{{ state_attr('climate.rez_de_chaussee', 'current_temperature') }}"
dashboards:
floorplan-yaml:
mode: yaml
filename: ui-lovelace-floorplan.yaml
title: Maison3D
icon: hass:eye
show_in_sidebar: true
require_admin: false
views:
- theme: Backend-selected
title: Maison3D
type: panel
badges: []
cards:
- type: picture-elements
image: /local/floorplan/images/maison_eteinte.png
elements:
- type: image
entity: light.lumiere_plafond_couloir_light
state_image:
'on': /local/floorplan/images/couloir_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.lumiere_plafond_couloir_light
tap_action:
action: toggle
style:
top: 35%
left: 60%
- type: image
entity: light.lumiere_plafond_chambre_light
state_image:
'on': /local/floorplan/images/chambre_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.lumiere_plafond_chambre_light
tap_action:
action: toggle
style:
top: 47%
left: 68%
- type: image
entity: light.lumiere_haut_escalier_light
state_image:
'on': /local/floorplan/images/haut_escalier_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.lumiere_haut_escalier_light
tap_action:
action: toggle
style:
top: 19%
left: 48%
- type: image
entity: light.lumiere_plafond_entree_meuble_hifi_light
state_image:
'on': /local/floorplan/images/entree_meuble_hifi_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.lumiere_plafond_entree_meuble_hifi_light
tap_action:
action: toggle
style:
top: 37%
left: 47%
- type: image
entity: light.lumiere_plafond_salle_a_manger_2_2_light
state_image:
'on': /local/floorplan/images/salle_a_manger_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.lumiere_plafond_salle_a_manger_2_2_light
tap_action:
action: toggle
style:
top: 63%
left: 29%
- type: image
entity: light.lumiere_plafond_bureau_2_2_light
state_image:
'on': /local/floorplan/images/bureau2_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.lumiere_plafond_bureau_2_2_light
tap_action:
action: toggle
style:
top: 29%
left: 53%
- type: image
entity: light.ruban_led_1_light
state_image:
'on': /local/floorplan/images/veranda_gimp.png
'off': /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: light.ruban_led_1_light
tap_action:
action: toggle
style:
top: 80%
left: 48%
- type: image
entity: select.harmony_hub_activities
state_image:
TV FREE: /local/floorplan/images/TV_gimp.png
power_off: /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: select.harmony_hub_activities
tap_action:
action: none
style:
top: 40%
left: 24%
- type: image
entity: select.harmony_hub_activities
state_image:
Cinema Zapitti: /local/floorplan/images/ecran_salon_gimp.png
power_off: /local/floorplan/images/toto.png
unavailable: /local/floorplan/images/toto.png
style:
top: 50%
left: 50%
width: 90%
- type: state-icon
entity: select.harmony_hub_activities
tap_action:
action: none
style:
top: 40%
left: 22%
- type: state-badge
entity: sensor.temperature_courante_rdc
tap_action:
action: none
style:
top: 39%
left: 63%
text-align: center
font-weight: bold
font-size: 2px;
je vois un rond bleu qui tourne sur ton image. Si une image est indisponible, c’est possible que tu n’arrives plus a cliquer sur quoique ce soit.
Oui, j’ai un rond bleu, depuis que j’ai intégré les deux sensors. Mais ils existent bien;
je vérifierai pour l’image. Mais cela ne résoud pas mon problème .
Je suis dans mon bureau, lumière allumée, et ma femme dans la chambre. ça fonctionne, pas de rond bleu.
Mais, où que je clique, j’ai la dernière icone qui réagit
J’ai eu ce soucis mais j’arrive pas a me rappeler ce que j’avais et comment le reparer…
En fait si…C’etait a cause de mon trans.png (ton toto.png.)
Si tu veux je t’envoies le mien par mail.
Envoie un mail en message direct et je m’occupe de ca avant de me coucher (je vais aller regarder ma serie un peu)
Fait. Bonne nuit
Repondu 
En esperant que ce soit ca…
Bonjour Merci pour ce tuto , j’ai réussi a faire mon intégration par contre j’ai un décalage des images ( elles font toute le même format et taille généré par Gimp)
title: Floorplan
views:
- path: floorplan2
panel: true
icon: hass:home
tittle: Carte
cards:
- type: picture-elements
image: /local/floorplan/images/OFF.png
elements:
- type: image
entity: light.sourcing_creation_eb_e27_a60_rgbw_light
state_image:
"on": /local/floorplan/images/Sl.png #si entité sur « on » on affiche l’url
"off": /local/floorplan/images/transparent.png #si entité sur « off » on affiche l’url
"unavailable": /local/floorplan/images/transparent.png
- type: state-icon
entity: light.sourcing_creation_eb_e27_a60_rgbw_light
tap_action:
action: toggle
style:
top: 35%
left: 60%
1 « J'aime »
Merci… mais c’est pas ça
Par contre, je peux influer avec le width: 2%
Mais si je mets 2% partout, les icones sont clickables parttout, mais les images des pièces allumées ne s’affichent pas …
Il me faut résoudre cette équation. Tous mes éléments sont inclus avec la même trame
- type: image
entity: light.lumiere_plafond_bureau_2_2_light
state_image:
'on': /local/floorplan/images/bureau2_gimp.png
'off': /local/floorplan/images/trans.png
unavailable: /local/floorplan/images/trans.png
style:
top: 50% #position centrale pour tous les masques et l'image de fond (maison éteinte)
left: 50% #position centrale pour tous les masques et l'image de fond (maison éteinte)
width: 90% #taille identique pour tous les masques et l'image de fond (maison éteinte)
- type: state-icon
entity: light.lumiere_plafond_bureau_2_2_light
tap_action:
action: toggle
style:
top: 29% # position de la lumière du bureau (pour cet exemple)
left: 53% # position de la lumière du bureau (pour cet exemple)
width: 3% # taille de la zone de click
Je l’aurai un jour, je l’aurai !
J’ai une solution: intégrer des images masque circonscrites à la zone éclairée (ex: le bureau) et jouer sur le top/left pour bien positionner le masque sur l’image de la maison éteinte.
Mais ça va être fastidieux.
essaie avec
top: 50%
left : 50%
Non, ca doit etre juste un petit truc qu’on voit pas.
Essaye de mettre dans l’ordre dans ton yaml:
les images en haut et les icones en bas (c’est comme ca chez moi, peut etre que ca vient de la…)
