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%
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…)
Toujours le même problème malheureusement…
views:
- path: floorplan2
icon: mdi:home-floor-1
tittle: Carte
title: 1er Etage
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
'off': /local/floorplan/images/transparent.png
unavailable: /local/floorplan/images/transparent.png
style:
top: 50%
left: 50%
- type: state-icon
entity: light.sourcing_creation_eb_e27_a60_rgbw_light
tap_action:
action: toggle
style:
top: 35%
left: 60%
Content que ca fonctionne Thierry
Jibay, tu as essayé de refaire tes images? j’ai eu le meme soucis pour une des miennes, je l’ai refait au moins 5 fois pour y arriver…
Oui j’ai essayé de refaire les Images dans différente résolution cela reste dans le coin en bas à gauche sachant que les images ont bien la même taille
J’ai même essayer le code en conditionnal au cas où mais sans plus de succès
views:
- path: floorplan2
icon: mdi:floor-plan
tittle: Carte
title: 1er Etage
panel: true
cards:
- type: picture-elements
full_height: true
image: /local/floorplan/images/OFF.png
style: null
elements:
- type: conditional
conditions:
- entity: light.sourcing_creation_eb_e27_a60_rgbw_light
state: 'on'
elements:
- type: image
image: /local/floorplan/images/Fl.png
- type: state-icon
entity: light.sourcing_creation_eb_e27_a60_rgbw_light
tap_action:
action: toggle
style:
top: 60%
left: 60%
je t’ai MP pour te proposer mon aide…
j’ai mis width à 90% pour mes images, sauf l’image de base (va savoir pourquoi, ça fonctionne)
Jibay, ca ca fonctionne chez moi avec tes images:
views:
- theme: Backend-selected
title: Home
type: panel
badges: []
cards:
- type: picture-elements
full_height: true
image: /local/floor2/fond.png
elements:
- type: image
entity: input_boolean.test_2
tap_action:
action: none
state_image:
'on': /local/floor2/allume.png
'off': /local/floorplan/images de base/trans.png
unavailable: /local/floorplan/images de base/trans.png
style:
top: 50%
left: 50%
width: 100%
Toujours le même probleme cela viens donc certainement de ha-floorplan qui interprète mal tout ça …
verifies bien ton indention ou teste sur un autre dashboard
L’indent est bonne ( Vérification Via Lovelace UI) et j’ai déjà vérifié sur différent lovelace.
attention l’indention peut etre bonne mais te specifier les parametres sur le mauvais truc si elle n’est pas correcte…
cards:
- type: picture-elements
full_height: true
image: /local/floor2/fond.png
elements:
- type: image
entity: input_boolean.test_2
tap_action:
action: none
state_image:
'on': /local/floor2/allume.png
'off': /local/floorplan/images de base/trans.png
unavailable: /local/floorplan/images de base/trans.png
style:
top: 50%
left: 50%
width: 100%
c’est different de ca bien que correcte sous lovelace
cards:
- type: picture-elements
full_height: true
image: /local/floor2/fond.png
elements:
- type: image
entity: input_boolean.test_2
tap_action:
action: none
state_image:
'on': /local/floor2/allume.png
'off': /local/floorplan/images de base/trans.png
unavailable: /local/floorplan/images de base/trans.png
style:
top: 50%
left: 50%
width: 100%
Effectivement je comprend ce que tu veux dire :
Par contre la taille c’est réduite sans explication
cards:
- type: picture-elements
image: /local/floorplan/images/OFF.png
elements:
- type: image
entity: light.sourcing_creation_eb_e27_a60_rgbw_light
tap_action:
action: none
state_image:
'on': /local/floorplan/images/Sl.png
'off': /local/floorplan/images/Transparent.png
unavailable: /local/floorplan/images/Transparent.png
style:
top: 50%
left: 50%
widht: 100%
tu as fait une faute a width…
Ah, effectivement cela marche mieux d’un coup la prochaine fois j’utiliserai un éditeur avancé ça m’apprendra a le fair en live
Merci a toi en tout cas