Créer son FloorPlan 3D

Home Assistant - Tutoriels & Partages Intégration
102

Allez à mon tour de poser une p’tite question…
Avec le récap de @zglurb sur les calques, et puis comme j’ai vu que je pouvais faire la même chose (sources lumineuses version dégradée) avec mes legos, je me suis amusé à refaire un truc:
1 fond + un calque lumière + 1 icone

type: picture-elements
image: /local/images/test/light0.png
elements:
  - type: image
    tap_action:
      action: none
    entity: light.lustre
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'off': /local/images/empty.png
      'on': /local/images/test/lightsam.png
  - type: icon
    icon: mdi:ceiling-light-multiple
    entity: light.lustre
    tap_action:
      action: toggle
    style:
      top: 45%
      left: 86%
      width: 100%

Le rendu est sympa sur PC et tablette (quasi les même résolutions/taille d’écrans)

image
image594×548 58.7 KB

image
image592×548 61.8 KB

Mais ça laisse toujours un souci en version mobile
image

L’icone prends trop de place (en proportion et à mon gout) et ça décale tout
Le fait d’avoir 2 images de même taille (fond + calque) règle à mon sens tous les soucis de positions/tailles relatives… mais ça reste perfectible.

Vous avez fait comment ?

1 « J'aime »
103

J’ai créé deux maps différentes, l’une pour la version desktop / tablette, l’autre pour version mobile.
C’est plus chiant, ça demande de maintenir deux versions, mais cela fonctionne :slight_smile:

104

:sweat:A ce moment là je me prive de la version mobile… C’est déjà ultra pénible de maintenir 1 version (j’ai 3 niveaux à la maison + le jardin)

105

Oui, c’est difficilement maintenable, à moins de mettre en place des variables dont les valeurs dépendent du support (mobile et tablette).
Parce que, outre la taille des icones, tu as aussi la taille des textes !

106

Oui le texte aussi, c’est galère !
Un bout de solution c’est de passer par un thème séparé pour figer la taille des polices, mais c’est pas beaucoup plus dynamique

107

Plutôt sympa le rendu en mode légos :slight_smile:

Perso j’ai généré des images adaptées au téléphone, puis d’autres pour tablette et enfin pour PC.
Et ensuite je passe par du grid et mediaquery:

display: grid
mediaquery:
  "(max-width: 800px)":
    grid-template-columns: 100%
    grid-template-rows: 100%
    grid-gap: 0px
    grid-template-areas: |
      " Plan "
  "(max-width: 1200px)":
    grid-template-columns: 100%
    grid-template-rows: 100%
    grid-gap: 0px
    grid-template-areas: |
      "Plan"
  "(min-width: 1200px)":
    grid-template-columns: 100%
    grid-template-rows: auto
    grid-gap: 0px
    grid-template-areas: |
      "Plan"

Capture d’écran 2023-02-09 152238
Capture d’écran 2023-02-09 152238753×835 40.6 KB

Même si je suis en mode panel, le grid de la card est prit en compte :

type: custom:state-switch
entity: mediaquery
view_layout:
  grid-area: Plan
states:
  '(max-width: 800px)':
    type: picture-elements
    image: /local/Floorplan/iphone/v2/Maison_off.png
    card_mod:
      style: |
        ha-card {
        border-radius: 0px;
    elements:
      - type:....
...
  '(max-width: 1200px)':
    type: picture-elements
    image: /local/Floorplan/tab/Maison_off.png
    card_mod:
      style: |
        ha-card {
        border-radius: 0px;
    elements:
      - type:....
...
  '(min-width: 1200px)':
    type: picture-elements
    image: /local/Floorplan/computer/Maison_off.png
    card_mod:
      style: |
        ha-card {
        border-radius: 0px;
    elements:
      - type:....

Du coup en fonction de l’appareil j’ai des images différentes qui s’affiche…
Je ne sais pas si je suis très clair dans mes explications :slight_smile:

108

J’ai déjà joué avec les grid et les template donc j’ai les notions de principes

Si j’essaye de reformuler :

  • Tu arrives à déterminer dynamiquement la taille de l’affichage (via mediaquery) et en fonction des 3 cas que tu as identifié (800, 1200 1200min), tu as 3 zones superposées
  • Le switch te permet de n’afficher qu’une seule des 3 zones, construire à partir d’images de tailles adaptée à l’origine.

Correct (ou pas trop faux) ?

Oui j’aime assez aussi, par contre c’est long à générer, à redécouper, aligner … C’est pour ça que je voudrais limiter toute cette partie là

109

Complètement juste!

Le plus long c’était de trouver la bonne résolution d’image pour chaque device.
J’y suis allé à taton en créant une image sans lumière et en jouant sur la résolution lors de la création d’image sous SH3D.
Ensuite copie de l’image dans HA, puis vérification puis rectification jusqu’a obtenir le bon résultat
Une fois validé, je génère toutes les images puis calques sans découpage ni redimensionnement.

L’avantage c’est que tout est accessible depuis un dashboard
L’inconvénient c’est que le code peut vite devenir très trèèès trèèèèès long.

Voila le rendu de mon plan sur PC :

Capture d’écran 2023-02-09 153910
Capture d’écran 2023-02-09 1539101837×818 44.2 KB

110

Clair et puis 3 fois quasi identique sauf le chemin

111

C’est pas possible de le mettre en variable, le chemin ?
image: /local/Floorplan/tab/Maison_off.png
=>
image: /local/Floorplan/(((variable_chemin)))//Maison_off.png
ou variable_chemin = tab, iphone ou maison ?
je connais pas la syntaxe pou rintégrer cette dite variable :slight_smile:

112

C’est pas aussi simple, il faut quand même 3 fois les grids à la fin, ça soit 3 copié/collé
Passer par une custom:auto-entities mais c’est encore plus lourd.
Decluttering-card aussi mais pas user friendly.

113

Je suis fan de vos Dashboards, mais avant de me lancer dans un truc que je suspecte extrèmement chronophage, je voulais vous poser à tous une question:

Que est l’usage réel que font les occupants de vos maison de ces dashboard à base de plan ?

Chez nous (Moi, 1 femme et 3 enfants de 7, 10 et 12ans), les dashboards « normaux » sont assez peu utilisés à part par moi, la plupart des interactions avec la domotique se font à la voix- (via alexa). La plupart d’entre nous préfèrent dire éteint les lumières qu’attraper un téléphone ou une tablette pour le faire.
Et les usages « obligatoires » par dashboard sont plutôt sur du monitoring… donc pas vraiment adaptés.
Je viens à peine de finir ça:

image
image1042×1229 67.5 KB

et je me rend compte qu’il n’y a quasi que moi qui m’en sert…

Par contre c’est clair que vos plans 3D ça claque !! Et ça donne vraiment envie…

Bref je me cherche une bonne raison de sacrifier mes prochaines nuits :rofl:

114

Si on fait le ratio entre le temps passé et l’usage réel, c’est pas à l’avantage des dashboards. Ici toute la partie interaction (Moi et ma femme) se fait essentiellement avec la voix aussi (GH, ça marche furieusement bien quand même), quand le reste ne s’autogère pas

Mais bon il reste le coté Fun/Geek/Frime … et ça n’a pas de prix

5 « J'aime »
115

Le fun, c’est le principal intérêt.
La 3D, c’est aussi pour faire évoluer son habitation :
Quand j’ai fait mes travaux chez moi, ainsi que mon extension d’étage, j’avais tout intégré, jusqu’à scanner les carrelages pour bien choisir les couleurs, bien positionner l’escalier et le couloir du haut, etc …
Mais pour en revenir à HA, ce qui est WAF, ce sont les automatisations et la voix.
D’ailleurs, faut que je me lance dans la liaison HA => GH pou rpiloter tout à la voix !

1 « J'aime »
116

Actuellement je n’ai pas de tablette au mur. Mais le jour ou ce sera le cas, ca permet par exemple de piloter quelques trucs sans utiliser alexa (si panne d’internet), allumer certaines lumieres si les interrupteur perdent le reseau (mijia et mes lampes awox sont pas tres compatibles)

Le suivi de conso elec pour ma femme (si j’arrive a avoir le consentement d’enedis), le suivi des devoirs de mon fils sur pronote bref, y’a quelques trucs qui peuvent servir sur le dashboard mais c’est sur que c’est plus pour nous que pour la famille :stuck_out_tongue:

1 « J'aime »
117

Juste pour le fun, la nouvelle version (encore en cours de travail du rdc de la maison)
Il me reste à trouver un moyen de faire un rendu plus sympa encore de la tv ( le gros meuble noir, je voudrais un truc genre flash/variation lumineuse comme en vrai quand on regarde de loin une fenêtre), accentuer le mode nuit et le kiosque à faire aussi (l’éclair)
Un peu de travail sur les icon / icon-state : le rendu est mieux sur mobile que mes images détourées et ça devrait aller (et en plus ça me demandera moins de travail)
amin3D-rdc

3 « J'aime »
118

Super sympa bravo!!
Comment tu fais ton détourage ?

119

Par exemple pour les volets/fenêtres, je fais un rendu avec juste les pièces dédiées

rdc_volets
rdc_volets1920×1080 103 KB

, puis les rendus complets avec les positions fermés 50% et 100%…

Du coup, avec les calques, je peux avoir la sélection inverse ultra facilement des volets/fenêtres et les supprimer sur les images complètes.
Au final j’ai juste les images volets/fenêtres mais avec les ombres (ce que le rendu par pièces dédiées ne permet pas)

volet_cuisine_050
volet_cuisine_0501920×1080 31.7 KB

volet_cuisine_100
volet_cuisine_1001920×1080 27 KB

120

hum, tu travail tes plans sous SH3D ?
Du coup tu masques tout sauf tes ouvrants si j’ai bien compris

121

Non, studio v2, il faut aimer les legos (et accepter de temps en temps les compromis par rapport aux dimensions/echelles réelles)
https://www.bricklink.com/v3/studio/download.page
Mais je trouve le rendu meilleur

1 « J'aime »