Créer son FloorPlan 3D

Repondu :ok_hand:
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 :slight_smile:
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…)

C’était ça !!!
Merci :+1:
Ca fonctionne . Reste à rajouter tous les goodies de commande !

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 :sweat_smile: la prochaine fois j’utiliserai un éditeur avancé ça m’apprendra a le fair en live :face_with_open_eyes_and_hand_over_mouth:

Merci a toi en tout cas :grin: