Créer son FloorPlan 3D

Bonjour à tous,

Je vous avais dit que je ferai un tuto pour Floorplan 3D. Le voici.
Tout d’abord il vous faudra 2 logiciels, 3 pour les puristes

  • Sweethome3D pour créer votre maison (téléchargement ici)
  • GIMP → pour retravailler les images de votre maison (téléchargement ici)
  • Sketchup (version en ligne maintenant) pour créer vos meubles et les importer dans Sweethome3D, bien que vous puissiez utiliser les bibliothèques de meubles gratuites.
    Je ne vais pas ici vous détailler l’utilisation de Sweethome3D, c’est très simple et intuitif.
    Concernant Gimp nous verrons comment travailler les images, pour notre besoin uniquement.
    Sketchup demande un peu plus de prise en main, à vous de voir si vous voulez vous penchez dessus.

Maintenant passons aux choses sérieuses :
Plusieurs étapes :

  1. Création de votre maison avec Sweethome3D
  2. Création des photos
  3. Création des pièces allumées
  4. Paramétrage de HomeAssistant.

C’est parti.

  1. Création de votre maison
    1.1. Création de votre plan
    Le mieux est de partir d’un plan.
    Vous le scannez et ensuite vous l’importer dans Sweethome3D.
    Une fois vos murs créés et vos meubles ajoutés, il faut créer des photos :
  • 1 photo maison éteinte
  • 1 photo pour chaque pièce où vous avez une ampoule / un interrupteur domotisé
    Attention : il vous faudra créer une photo par lumière pour le jeu d’éclairage. J’ai également fait des photos par combinaison possible.
    Prenons pour exemple 3 lampes dans la même pièce : L1, L2 et L3.
    Il faudra donc une photo pour :
    L1, L2, L3 puis également pour L1 + L2, L1+L3, L2+L3 et enfin L1 + L2 +L3. Nous les nommerons ici, pour l’exemple :
    L1L3.png L1L2.png L2L3.png
    1.2. Création des photos
    Créer dans la « vue 3D » un point de vue.

Désélectionner tous vos points lumineux.
Activer le / les points lumineux correspondant à votre photo
Toujours le même exemple, vous souhaitez faire L2 + L3 → désactivez tous les points lumineux sauf L2 et L3

  • Choisissez un horaire correspondant à une période sombre (ex : soleil couchant) mais pas totalement la nuit. → garder le même jour et la même heure pour vos différentes photos.
  • Mettez en qualité maximale si vous souhaitez un rendu avec les ombres.
  1. Création des zones pour Floorplan
  • Importation des photos dans Gimp
    o Un simple glisser déposer suffit pour importer les photos
  • Application d’un canal alpha sur tous les calques
    o Bouton droit

image

  • Sélection d’une zone (une pièce par exemple)

image

  • Inversion de la sélection
    image

  • Suppression de la sélection (il ne vous reste plus que la pièce normalement)
    o Touche « suppr »

  • Export du calque au format png
    o Attention à votre calque sélectionné lors de l’export

  1. Utilisation pour Floorplan3D
    3.1. Installation de Floorplan
    Je vous laisse regarder les tutos d’installation, rien d’extraordianire la dessus.
    Dans le fichier config, dans la partie « resources » :

image

3.2. Utilisation du mode Yaml
3.2.1. Création du Dashboard
Créer un dashboard vide dans votre répertoire « config » nommez le : « ui-lovelace-floorplan.yaml » (pour l’exemple)
Puis dans votre fichier « config » en mode yaml :

  dashboards:  
    floorplan-yaml: #Doit contenir un tiret
       mode: yaml
       filename: ui-lovelace-floorplan.yaml
       title: Maison
       icon: hass:eye
       show_in_sidebar: true
       require_admin: false

3.2.2. Mode basique
Passons maintenant à la configuration du Dashboard « ui-lovelace-floorplan.yaml »
Tout va se baser sur la carte « picture-elements »
Voici la base de votre Dashboard :

 title: Floorplan
 views:
   - path: floorplan2
     panel: true
     icon: hass:home
     tittle: Carte
     cards:
       - type: picture-elements
         image: /local/floorplan/images/maison-eteinte.png
         elements:

Ensuite il faudra ajouter les éléments :

          - type: image
            entity: light.couloir
            state_image:
              "on": /local/floorplan/images/couloir-on.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 #si entité non detectable, on affiche l’url

3.2.3. Mode « condition »
Si vous souhaitez effectuer des affichages en fonction de vos lampes allumées et sans trop de travail sur les photos :
Reprenons notre exemple (avec L1, L2 et L3)
Allumage de L1 et L2 en même temps :

          - type: conditional
            condition: and
            conditions:
              - entity: light.L1
                state: "on"
              - entity: light.L3
                state: "off"
              - entity: light.L2
                state: "on"
            elements:
              - type: image
                image: /local/floorplan/images/test/L1L2.png

3.2.4. Ajout de sensors
Pour ajouter des sensors (température chez moi)

          - type: state-label
            entity: sensor.temperature1
            style:
              top: 24% #A déterminer en fonction de l’emplacement que vous souhaitez
              left: 63% #A déterminer en fonction de l’emplacement que vous souhaitez
              color: "#000"
              border-radius: 50%
              text-align: center
              background-color: "rgba(255, 255, 255, 0.3)"
              font-size: 10px
              font-weight: bold

3.2.5. Ajout des icones pour les lampes

          - type: state-icon
            entity: light.couloir
            style: 
              left: 71%
              top: 42%

Et pour les plus « fous » :
3.2.6. Affichage de la télé en live

- type: custom:now-playing-poster
            entity: media_player.chromecast_varambon
            style:
              width: 6%
              top: 31%
              left: 48%
              transform: rotate(12deg) skewX(13deg)

Une fois ce mode installé un petit soft vous aidera à modifier l’image émise en vous fournissant les options css de manière automatique.

Je vous rajoute l’image de chez moi, si vous avez d’autres questions :

12 « J'aime »

Merci pour ce tutoriel !
Ça donne envie… Même si je vais y passer des heures

1 « J'aime »

Petite astuce qui a fonctionné chez moi et qui évite de faire 2^n - 1 images et conditions pour chaque pièce avec plusieurs sources de lumière :

  1. Générer un rendu par source de lumière avec sh3d (pas besoin de faire chaque combinaison)
  2. Dans Gimp, ouvrir l’image avec toutes les lumières éteintes
  3. Fichier > Ouvrir en tant que calques… > Sélectionner une image avec une source de lumière
  4. Dans la vue des calques, sélectionner le mode « Différence »
  5. Fusionner les calques (clic droit sur un calque > Aplatir l’image)
  6. Couleurs > Couleur vers alpha…
  7. Choisir la couleur noir puis Valider
  8. Exporter l’image.
  9. Faire de même pour les autres lumières

Normalement ça conne quelque chose comme ça :

Quand les images avec transparence se superposent, ça rend surprenamment bien et on peut les gérer individuellement dans la carte.

4 « J'aime »

Bonjour,
J’aurais a peut pres la meme configuration que vous.
serez-t il possible d’avoir le code yaml pour base de mon projet ?


image

1 « J'aime »

Hello à tous !

Le projet avance !!
Comment je pourrais ajouter un iframe sur Floorplan ?

Facile :

Par contre attention http/https ça pose parfois souci

Pas d’erreur !
mais pas d’affichage ! ;(

Ok, donc tu veux une iframe DANS une carte …
Là avec ça :

The panels are listed in the sidebar

Donc il te faut plutot faire

type: iframe
url: https://www.meteo60.fr/radars/animation-radar-france-simple.gif

Merci pour ton aide,
J’avais essayer avec des tuto sur d’autres pages mais la je bute,j’ai une erreur me je ne vois pas laquel !

Le mieux c’est quand même de partager le code de la carte… Là on voit pas le type de la partie principale

type: picture-elements
image: local/Floorplan/Plan_Maison_nuit.png
elements:
  - type: image
    entity: light.barrette_d_eclairage_a_led
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': local/Floorplan/new/Balise_led_ipn_on-1.png
      'off': local/Floorplan/new/transparent.png
  - type: image
    entity: light.balise_led_salon
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': local/Floorplan/new/Balise_led_Salon_on-1.png
      'off': local/Floorplan/new/transparent.png
  - type: image
    entity: light.balise_led_porte_cave
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': local/Floorplan/new/Balise_led_ines_on-1.png
      'off': local/Floorplan/new/transparent.png
  - type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.barrette_d_eclairage_a_led
    style:
      left: 60%
      top: 64%
    tap_action:
      action: toggle
  - type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.balise_led_salon
    style:
      left: 42%
      top: 53%
    tap_action:
      action: toggle
  - type: state-icon
    icon: mdi:lightbulb
    icon_color: yellow
    entity: light.balise_led_porte_cave
    style:
      left: 60%
      top: 44%
    tap_action:
      action: toggle
  - type: state-icon
    icon: mdi:window-open
    icon_color: yellow
    entity: cover.volet_salon_gauche
    style:
      left: 50%
      top: 85%
    tap_action:
      action: toggle
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_temperature
    style:
      left: 34%
      top: 25%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_humidity
    style:
      left: 34%
      top: 28%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_pressure
    style:
      left: 34%
      top: 31%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_power
    style:
      left: 34%
      top: 34%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_temperature
    style:
      left: 56%
      top: 25%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_humidity
    style:
      left: 56%
      top: 28%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_pressure
    style:
      left: 56%
      top: 31%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_power
    style:
      left: 56%
      top: 34%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_temperature
    style:
      left: 48%
      top: 54%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_humidity
    style:
      left: 48%
      top: 57%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_pressure
    style:
      left: 48%
      top: 60%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_power
    style:
      left: 48%
      top: 63%
      font-size: 12px
  - type: state-icon
    entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_1b0df106_on_off
    icon: mdi:door
    style:
      left: 40%
      top: 29%
      transform: translate(-50%, -50%) scale(1.5, 1.5)
 

Tu peux pas mettre une iframe dans cette carte, voilà la liste des entités autorisées

ok pas de soucis ,
vais creer un 2eme dashboard avec des cartes du coup !

Salut,

Si tu veux mettre les température et autre sur ton image, il faut utiliser le type « state-label ».
Tu trouveras un exemple dans mon tuto au dessus.

J’espère que çà t’aidera.

Bonne journée !

Alors y as tu passé des heures ?
:stuck_out_tongue:

C pour integrer la meteo type windy, mais ce n’est pas faisable ma expliquer Pulpy.
Je rajoute donc un dashboard avec une carte meteo + graph temp…
image

Non, pas eu le courage de m’y coller réellement. Mais les vacances arrivent :wink: et tout le reste de la domotique fonctionne aux petits oignons … donc il ne me reste plus que ça !

La je cherche pour reduire la taille de ces cartes
image

Il faut savoir que les éléments sont « cliquables » et ouvrent le graph de base. A moins que tu ne veuilles voir en permanence la courbe, l’affichage de la donnée en live + ouverture de la courbe peut être une solution.

A toi de voir.