Tableau de bord Home Assistant 3D isométrique : le guide complet pour créer un dashboard vivant

La domotique doit savoir se faire oublier pour être efficace. C’est d’ailleurs un excellent indicateur pour savoir où vous en êtes dans votre voyage domotique : si votre système parvient à anticiper une grande partie de votre quotidien en arrière-plan, c’est que vous avez bien travaillé et que vous touchez à la perfection.

Mais cela n’empêche pas de s’offrir un outil de supervision de qualité. Pour une commande ponctuelle, pour en mettre plein la vue à vos visiteurs, ou simplement pour explorer de nouveaux horizons.

Franchement, vous n’avez pas envie, vous aussi, d’un tableau de bord comme celui-ci pour votre domotique ?

Cela fait des années que j’ai ce projet d’un tableau de bord design et dynamique, fonctionnel et interactif, affiché sur une tablette murale. L’énorme travail abattu par les équipes de Home Assistant sur les tableaux de bord (vue en sections, grille responsive, nouvelles cartes) a été l’un des déclencheurs.

Mais clairement, le vrai déclic est venu de l’IA générative. Les générateurs d’images savent désormais transformer une simple photo de votre maison en maquette 3D isométrique, puis la décliner de jour, de nuit, sous la pluie ou sous la neige sans changer le cadrage et moins de temps qu’il ne faut pour le dire. C’était la pièce manquante du puzzle !

Dans ce guide complet et pas à pas, je vous livre les techniques et astuces que j’utilise, fruits de plusieurs semaines de recherche et développement au domo-lab. Avec cette méthode, une soirée suffit pour créer votre premier tableau de bord 3D isométrique, puis enchaîner avec le reste de la maison.

Prérequis

Côté Home Assistant

• Une instance Home Assistant récente (2026.x) pour profiter pleinement de la vue en sections. Ce guide a été construit sur la version 2026.9.
• L’application Studio Code Server (anciennement « add-on ») pour éditer confortablement vos fichiers YAML.
• HACS (facultatif mais conseillé) pour aller plus loin dans la personnalisation avec des extensions comme card-mod.

---

Côté création graphique

• Un accès à un générateur d’images IA capable d’éditer une photo : Gemini (modèles Nano Banana Pro / Nano Banana 2) ou ChatGPT (GPT Image). Un abonnement payant est vivement conseillé : meilleure résolution, quotas plus larges et surtout, meilleure fidélité à la photo d’origine.
• Un éditeur d’images gérant les calques : GIMP (open source et gratuit) ou Photoshop, pour la retouche, l’alignement et la création des calques.
• Une photo de qualité de votre maison (vue de 3/4),ou de la pièce à modéliser.

Étape 1 : La donnée pilote votre projet

Avant de vous lancer tête baissée dans la génération d’images, pensez projet. C’est la donnée qui est maîtresse : posez-vous cinq minutes et réfléchissez à votre tableau de bord avant de faire quoi que ce soit.

Faites l’inventaire de vos entités

Première question : quels périphériques de votre domotique pourront piloter l’image ? Une lumière, une prise, une porte de garage, un portail, un volet, un capteur… Imaginez ce que vous aimeriez voir s’animer, puis identifiez l’entité qui vous permettra d’y parvenir.

Classez ensuite chaque entité dans l’une de ces trois familles :

Famille	Rôle sur le dashboard	Exemples
Ambiance	Change l’image de fond tout entière	sun.sun, entité météo, détecteur de pluie, température extérieure
Objet	Ajoute ou retire un élément précis (calque)	Portes de garage, éclairages extérieurs, portail, volets
Information	S’affiche à côté de l’image, dans des cartes	Consommation, température intérieure, alarme

Ce tri est la clé de tout le reste : les entités d’ambiance alimenteront le template sensor, les entités d’objet deviendront des calques.

Construisez votre storyboard dans le tableur

Couchez vos scénarios sur papier ou, mieux, dans le tableur de conception que j’ai développé.

---

Il vous servira de storyboard et vous évitera de vous perdre au moment d’écrire le code. Il est organisé en onglets qui suivent ce guide :

• Paramètres : vos chemins de fichiers et conventions de nommage, saisis une seule fois.
• Inventaire : vos entités, leurs états possibles et leur famille.
• Fonds : la matrice moment × météo. Le mot-clé, le nom de fichier et la ligne YAML correspondante se génèrent automatiquement.
• Calques : chaque élément animé, son état déclencheur et sa variante jour/nuit.
• Combinatoire : le nombre d’images à produire selon l’approche choisie (vous allez vite comprendre pourquoi c’est important).
• Référentiel météo : la correspondance entre les états météo de Home Assistant et vos ambiances.
• Journal des prompts et Checklist pour suivre la production.

💡 faites en sorte que le mot-clé soit aussi le nom du fichier image. L’état nuit_pluie affichera nuit_pluie.webp. Cette convention rend le code lisible et presque impossible à casser.

Bon, j’avoue que j’ai clairement sorti ma casquette pro de chef de projet sur ce coup-là, mais j’ai tellement tâtonné pour parvenir au résultat attendu que tout cela vous sera d’une aide précieuse.

Cet outil est totalement optionnel et gratuit. Si vous savez où vous allez, vous pouvez vous en passer, mais si vous voulez structurer votre projet, je vous recommande de l’utiliser pour avoir un suivi précis de votre avancement.

Étape 2 : L’architecture de l’image, le choix qui conditionne tout

C’est probablement la partie la plus délicate de ce guide, car tout repose sur cette image. C’est elle qui sera le cœur de vos tableaux de bord. Après de nombreux essais, la bonne approche est selon moi de consacrer une partie du tableau de bord à l’image, plutôt que de faire de toute l’image une interface cliquable couverte d’actionneurs. Ce que l’on voit beaucoup sur la toile.

La vue en sections s’y prête parfaitement : une section accueille l’image, qui s’anime en fonction de l’état de vos capteurs, et les commandes vivent dans les sections voisines.

Pour animer l’image, votre étude préparatoire doit prévoir toutes les combinaisons : conditions météo, moment de la journée, état des garages, éclairages la nuit…

Le piège de l’explosion combinatoire

Nous touchons ici à un point d’architecture crucial. Si l’on intègre toutes ces conditions (météo + moment de la journée + garages + lumières) dans un seul et même template, on tombe dans le piège de l’explosion combinatoire. Il faudrait générer une image pour nuit_pluie_garage_gauche_lumiere_porche, une autre pour jour_neige_garage_droit, et ainsi de suite.

Faisons le calcul avec l’exemple de ce guide : 2 moments × 4 météos × 2 garages × 2 éclairages, chacun ouvert/fermé ou allumé/éteint :

• Une image par combinaison : 2 × 4 × 2⁴ = 128 images à générer.
• Fond + calques : 8 fonds + 6 calques = 14 images.

L’onglet Combinatoire du tableur fait d’ailleurs ce calcul pour vous, avec vos propres entités.

Option A : une image par combinaison

La logique « une image = une situation » reste envisageable si vous avez peu d’éléments animés. Elle ne demande aucune retouche, mais il faut la penser en amont, produire chaque image avec méthode et prévoir de gros blocs de code YAML en conséquence.

Option B : un fond et des calques (recommandée)

Pour conserver un système performant et facile à maintenir, on sépare la logique en deux niveaux :

1. Le fond global (moment + météo), géré par un template sensor.
2. Les éléments indépendants (garages, lumières…), gérés par des calques transparents superposés dans la carte picture-elements.

	Option A : une image par combinaison	Option B : fond + calques
Nombre d’images	Explose avec chaque entité ajoutée	Croît de façon linéaire
Retouche	Aucune	GIMP ou Photoshop requis
Code YAML	Un template géant	Un template simple + des calques
Ajouter un élément	Tout régénérer	Un seul calque à créer
Idéal pour	1 ou 2 éléments animés	Une maison complète

L’option B demande de maîtriser un outil de retouche, elle est plus compliquée à mettre en oeuvre, mais c’est elle qui vous permettra de faire évoluer votre tableau de bord sans tout recommencer. C’est celle que je détaille dans la suite.

Étape 3 : Générer le visuel 3D isométrique avec l’IA

C’est là que la magie opère. Un prompt bien construit vous permettra d’obtenir la représentation 3D isométrique de votre maison qui trônera dans votre domotique.

La photo de départ, fondation de tout

Tout commence par une photo de votre maison ou de la pièce à modéliser. C’est le point de départ obligatoire, et sa qualité conditionne directement le résultat :

• Prenez-la de trois quarts (légèrement de biais) : c’est l’angle le plus proche de la vue isométrique.
• Cadrez l’ensemble de la façade et les éléments à animer (garages, portail, éclairages).
• Évitez le contre-jour et les ombres dures : un ciel voilé est idéal.
• Utilisez la résolution maximale de votre appareil. Une vue de drone fait des merveilles si vous en avez l’occasion.

Joignez ensuite cette photo à votre prompt.

Le prompt de base

Rédigez vos prompts en anglais : les résultats sont généralement meilleurs. Voici ma base de départ, à adapter à votre maison :

Transform the attached photo of my house into a highly detailed 3D isometric
miniature diorama.

FIDELITY: keep the exact architecture, proportions, roof shape, number and
position of windows, doors and garage doors, and the surrounding elements
(driveway, garden, fences, trees). Do not add or remove any building element.

CAMERA: true isometric view, front three-quarter angle, the whole property
visible and centered, nothing cropped, generous empty margin around the model.

STYLE: clean stylized 3D render, soft global illumination, smooth matte
materials, subtle ambient occlusion, premium architectural model look.

LIGHTING: bright sunny day, soft shadows. All exterior and interior lights OFF.
All garage doors, gates and shutters CLOSED.

BACKGROUND: plain uniform dark background (#1C1C1C), no sky, no horizon.
The diorama sits on a thin square ground base with clean edges.

NO text, NO labels, NO people, NO cars, NO watermark.
Landscape 16:9, maximum resolution.

💡 Pourquoi tout fermer et tout éteindre ? Les fonds doivent représenter l’état « au repos » de la maison. Ce sont les calques qui ajouteront ensuite une porte ouverte ou une lumière allumée. Une lampe allumée « cuite » dans le fond ne pourrait plus jamais s’éteindre à l’écran.

Optionnel mais conseillé : préparez l’IA avant de proceder à la generation

J’ai remarqué qu’en entraînant l’IA en amont, le résultat étant encore meilleur sur des maisons parfois complexes à comprendre/reproduire. Pour cela, je vous propose ce prompt additionnel qui permet de demander à l’IA d’analyser la photo et de vous restituer sa compréhension de l’image. Ainsi, vous pouvez ajuster le tir avant même de passer à la génération de l’image.

Analyze the attached photos of my house. Do NOT generate any image yet.

Write a precise, numbered HOUSE SHEET with:

1. Overall shape and footprint, number of storeys, attached buildings.

2. Roof: type, number of slopes, material, color, chimneys, skylights.

3. Walls: materials and colors per facade.

4. For EACH visible facade: number and position of windows (left to right,

   per floor), doors, shutters type (roller / swing / none), their color.

5. Garage: number of doors, door type (sectional / roller / swing), position.

6. Plot: gate type (sliding / swing / none), fences, low walls, driveway,

   paths, terrace, pool, pergola, awning, garden elements, trees.

7. Every exterior light fixture you can see and its exact position.

8. Anything unclear or not visible in the photos: list it as a question. 

Si l’IA pose des questions en retour, répondez-lui ! Si des points ne sont pas justes, rectifiez en expliquant à l’IA ce qu’elle devrait comprendre à la place. Votre resultat n’en sera que meilleur.

Les prompts de déclinaison des ambiances

Une fois l’image de jour validée, produisez les autres ambiances à partir d’elle. Chaque prompt insiste sur un point : ne rien changer d’autre que la lumière et la météo.

# Base commune à ajouter en tête de chaque déclinaison
Use the attached image as the strict reference. Keep the IDENTICAL composition,
camera angle, framing, scale, image size and the exact position of every object.
Only change what is described below.

# Nuit, ciel clair
Clear night: deep blue ambient light, soft moonlight, stars feel.
All exterior and interior lights stay OFF, windows dark.

# Jour nuageux
Overcast day: soft diffuse grey light, no hard shadows, muted colors.

# Jour de pluie
Rainy day: heavy grey overcast light, visible falling rain, wet reflective
ground, small puddles on the driveway and terrace.

# Neige
Snowy day: fresh snow covering roofs, ground, hedges and trees, cold soft light,
light falling snowflakes. Keep the driveway lightly covered.

Pour les ambiances de nuit sous la pluie ou la neige, partez de l’image de jour correspondante et appliquez le prompt de nuit.

Les prompts d’état pour les calques

Pour créer les calques, vous avez besoin d’une version de l’image où l’élément est « actif » :

# Éclairage extérieur allumé (à partir de l'image de nuit)
Same image. Only turn ON the porch light above the front door: warm 2700K light,
soft realistic halo on the wall and on the ground. Nothing else changes.

# Porte de garage ouverte (à partir de l'image de jour ET de l'image de nuit)
Same image. Only the LEFT garage door is fully open, the garage interior is
visible. Nothing else changes.

Les prompts de correction

L’IA a tendance à dériver : caméra qui bouge, fenêtre qui disparaît, voiture qui apparaît. Corrigez-la sans hésiter, elle mémorise vos exigences au fil de la conversation :

You moved the camera. Revert to the exact framing and angle of the reference image.
You removed the right window on the first floor. Put it back exactly as in the photo.
Keep exactly the same image size and aspect ratio as the reference image.
Remember this style and framing: I will ask for more variations of this model.

Mon prompt est une base de départ sérieuse, mais attendez-vous à quelques allers-retours. Selon la qualité de votre photo, l’IA a besoin d’être guidée pour trouver le bon résultat, puis pour le reproduire sur d’autres tableaux de bord.

La méthode « en étoile » pour garder un cadrage parfait

Dernier conseil, et non des moindres : générez toujours vos déclinaisons à partir de l’image de référence, jamais à la chaîne (jour → nuit → nuit pluie → nuit neige…). Chaque génération introduit une petite dérive, et ces dérives s’additionnent.

1. Produisez et validez l’image de jour ensoleillé : c’est votre référence.
2. Générez chaque ambiance en rejoignant cette même référence.
3. Conservez chaque prompt utilisé dans l’onglet Journal des prompts du tableur. Le jour où vous créerez un deuxième tableau de bord, vous gagnerez un temps précieux.

Étape 4 : Le post-traitement et la création des calques

Si vous avez choisi l’option A, il vous reste à enchaîner les prompts pour créer chaque image, une par une. Si vous avez opté pour les calques, place à la retouche !

Vous n’avez besoin que des images de base (jour, nuit, pluie, neige…). Le reste n’est qu’une question de calques créés au pixel près pour venir se superposer à l’image de fond. Ces calques sont transparents et ne contiennent que les éléments d’animation : lumière allumée et son halo, porte de garage ouverte, portail, volets…

Uniformisez toutes les images

Les générateurs renvoient parfois des images de tailles légèrement différentes. Avant toute chose, ramenez-les toutes à la même dimension dans Photoshop ou GIMP.

Alignez au pixel près grâce au mode « Différence »

1. Ouvrez l’image de fond (nuit_clair), puis ajoutez la variante « porche allumé » en tant que calque (Fichier > Ouvrir en tant que calques).
2. Passez le calque supérieur en mode de fusion Différence.
3. Tout ce qui est identique devient noir. Seule la zone modifiée (la lumière) reste visible.
4. Si des contours apparaissent partout, l’image a bougé : décalez le calque avec les flèches du clavier jusqu’à ce que tout redevienne noir.
5. Repassez le calque en mode Normal.

Détourez l’élément avec precision

1. Ajoutez un masque de calque noir (transparence totale) sur la variante ou effectuer un detourage precis avec votre outil de retouche.
2. Vigilance particulière sur les elements lumineux, ce sont les plus complexes a gérer : la lampe, son halo, la porte ouverte.
3. Gardez le masque serré. Plus la zone est réduite, moins on remarquera que le calque vient d’une autre ambiance (sol sec sous un fond pluvieux, par exemple).

Pour les lumières, utilisez plutôt l’outil gomme en jouant sur la taille et la dureté de l’outil pour obtenir quelque chose de cohérent.

La règle d’or : exporter en pleine taille

Masquez le fond et exportez uniquement le calque, sans jamais le recadrer, au format WebP (ou PNG) avec transparence. Votre calque fait exactement la même taille que le fond, avec 99 % de pixels transparents.

C’est ce qui rend l’intégration triviale : pas de coordonnées à calculer, chaque calque se pose à top: 50%, left: 50%, width: 100% et tombe pile au bon endroit.

💡 Jour ou nuit ? Une porte de garage ouverte ne ressemble pas à la même chose de jour et de nuit. Prévoyez deux calques (garage_gauche_ouvert_jour et garage_gauche_ouvert_nuit). Pour une lumière, seul le calque de nuit est utile. L’onglet Calques du tableur liste ces variantes.

Nommez et rangez vos fichiers

Tout ce qui est placé dans /config/www est accessible via le chemin /local/ sur vos tableaux de bord. Adoptez une arborescence claire :

/config/www/dashboard/maison/
├── fonds/
│   ├── jour_clair.webp
│   ├── jour_nuageux.webp
│   ├── jour_pluie.webp
│   ├── jour_neige.webp
│   ├── nuit_clair.webp
│   ├── nuit_nuageux.webp
│   ├── nuit_pluie.webp
│   └── nuit_neige.webp
└── calques/
    ├── garage_gauche_ouvert_jour.webp
    ├── garage_gauche_ouvert_nuit.webp
    ├── garage_droit_ouvert_jour.webp
    ├── garage_droit_ouvert_nuit.webp
    ├── porche_allume_nuit.webp
    └── jardin_allume_nuit.webp

💡 Exportez en WebP qualité 80 à 85. Une image de 2048 px pèse alors quelques centaines de Ko, contre plusieurs Mo en PNG. Votre tablette vous remerciera.

Étape 5 : Les packages YAML, une obligation structurelle

Si vous n’utilisez pas encore les packages YAML, il est plus que temps de vous y mettre avec ce projet.

Les packages permettent de découper votre configuration à volonté, sans polluer le fichier configuration.yaml, qui ne devrait contenir que la configuration globale. Créez un fichier package par tableau de bord : tout ce qui le concerne (template sensor, entrées de forçage…) est réuni au même endroit, facile à lire, à sauvegarder et à dupliquer.

Activez sans plus attendre les packages en suivant notre guide pas à pas.

---

Étape 6 : Le template sensor Jinja2, le chef d’orchestre

Vos images sont prêtes : place à la conception du template sensor. C’est lui qui observe vos capteurs et renvoie en permanence le mot-clé de l’ambiance à afficher.

Listez vos déclencheurs

Replongez dans vos notes de départ (onglet Inventaire de l’outil) pour lister les capteurs qui, par leur état, composeront votre représentation graphique :

1. L’entité système sun.sun pour le moment de la journée.
2. Une entité météo pour la pluie ou, mieux encore, un détecteur de pluie local pour plus de précision. [Lien interne : capteur de pluie Zigbee]
3. La température extérieure, pour distinguer la pluie de la neige.
4. Et ainsi de suite selon votre projet.

La règle d’or : du plus spécifique au plus général

Traitez toujours les conditions les plus complexes en premier, puis descendez jusqu’aux plus simples. Un bloc if / elif s’arrête à la première condition vraie : si « pluie » est testée avant « neige », une pluie verglaçante à 0 °C affichera toujours de la pluie, et votre image de neige ne sortira jamais.

Chaque combinaison aboutit à un état : le mot-clé choisi dans votre tableur. C’est cet état qu’attendra la carte de votre tableau de bord à l’étape suivante.

Le package complet

Voici le contenu du package YAML à stocker dans /config/packages/dashboard_maison.yaml. Adaptez les identifiants d’entités à votre installation et ajustez selon vos besoins, cette configuration n’est pas figée, c’est votre base de départ :

# =====================================================================
# Package : Dashboard Maison 3D isométrique
# Rôle    : calcule l'ambiance (moment + météo) affichée en fond d'image
# =====================================================================

# --- Forçage manuel : tests, démonstrations, soirée entre amis ---------
input_select:
  dashboard_maison_forcage:
    name: "Dashboard Maison - Forçage ambiance"
    icon: mdi:palette-swatch-outline
    options:
      - auto            # fonctionnement normal, piloté par les capteurs
      - jour_clair
      - jour_nuageux
      - jour_pluie
      - jour_neige
      - nuit_clair
      - nuit_nuageux
      - nuit_pluie
      - nuit_neige
    initial: auto       # repasse en mode auto à chaque redémarrage

# --- Le chef d'orchestre ----------------------------------------------
template:
  - sensor:
      - name: "Dashboard Maison Ambiance"
        unique_id: dashboard_maison_ambiance
        icon: mdi:home-lightning-bolt-outline
        state: >
          {# 0. Un forçage manuel est-il actif ? #}
          {% set forcage = states('input_select.dashboard_maison_forcage') %}
          {% if forcage not in ['auto', 'unknown', 'unavailable'] %}
            {% set etat = forcage %}
          {% else %}

            {# 1. Moment de la journée #}
            {% set moment = 'jour' if is_state('sun.sun', 'above_horizon') else 'nuit' %}

            {# 2. Collecte des indicateurs météo #}
            {% set meteo_ha = states('weather.forecast_maison') %}
            {% set pluie_locale = is_state('binary_sensor.detecteur_pluie', 'on') %}
            {# 10 °C par défaut si le capteur est indisponible : évite une fausse neige #}
            {% set temp_ext = states('sensor.temperature_exterieure') | float(10) %}

            {# 3. Du plus spécifique au plus général : l'ordre est crucial #}
            {% if meteo_ha in ['snowy', 'snowy-rainy']
                  or (pluie_locale and temp_ext <= 1) %}
              {% set meteo = 'neige' %}
            {% elif pluie_locale
                  or meteo_ha in ['rainy', 'pouring', 'lightning-rainy', 'hail'] %}
              {% set meteo = 'pluie' %}
            {% elif meteo_ha in ['cloudy', 'fog', 'lightning', 'windy-variant'] %}
              {% set meteo = 'nuageux' %}
            {% else %}
              {# sunny, clear-night, partlycloudy, windy, exceptional : ciel clair #}
              {% set meteo = 'clair' %}
            {% endif %}

            {% set etat = moment ~ '_' ~ meteo %}
          {% endif %}
          {{ etat }}

Rechargez la configuration (Outils de développement > YAML > Entités de modèle et Entrées de sélection) ou redémarrer Home Assistant, et l’entité sensor.dashboard_maison_ambiance apparaît avec un état du type jour_clair.

💡 Le forçage, votre meilleur allié. L’input_select vous permet de tester chaque image sans attendre qu’il neige, et de faire défiler les ambiances devant vos invités. Effet garanti. Pensez à ajouter chaque nouvelle ambiance à la liste des options : le tableur génère ces lignes pour vous.

Testez votre template en direct

Avant d’enregistrer ou en cas de probleme, collez le contenu du bloc state dans Outils de développement > Modèle. Le résultat s’affiche en temps réel, et vous verrez immédiatement si une condition ne se comporte pas comme prévu.

Bonus : ajoutez le crépuscule

Envie d’une ambiance « golden hour » au lever et au coucher du soleil ? Remplacez la détection du moment par l’élévation du soleil :

{# Au-dessus de 6° : jour / entre -6° et 6° : crépuscule / en dessous : nuit #}
{% set elevation = state_attr('sun.sun', 'elevation') | float(0) %}
{% set moment = 'jour' if elevation > 6 else ('crepuscule' if elevation > -6 else 'nuit') %}

Attention : cela ajoute 4 images de fond et les options correspondantes dans l’input_select. Le calculateur du tableur vous montre l’impact avant de vous lancer.

Étape 7 : La carte picture dynamique

Vous avez généré vos visuels et composé les différentes combinaisons dans votre template sensor. Vous disposez maintenant des mots-clés attendus selon chaque situation. Si vous avez suivi mes conseils d’organisation, ils sont notés dans votre tableur. Il ne reste plus qu’à les intercepter pour les lier à la bonne image.

Sans calques : la carte picture-entity

Pour l’option A, ou pour démarrer simplement, la carte picture-entity suffit. Elle affiche une image différente selon l’état de l’entité :

type: picture-entity
entity: sensor.dashboard_maison_ambiance
show_name: false
show_state: false
# Image affichée si l'état ne correspond à aucune entrée ci-dessous
image: /local/dashboard/maison/fonds/jour_clair.webp
state_image:
  jour_clair: /local/dashboard/maison/fonds/jour_clair.webp
  jour_nuageux: /local/dashboard/maison/fonds/jour_nuageux.webp
  jour_pluie: /local/dashboard/maison/fonds/jour_pluie.webp
  jour_neige: /local/dashboard/maison/fonds/jour_neige.webp
  nuit_clair: /local/dashboard/maison/fonds/nuit_clair.webp
  nuit_nuageux: /local/dashboard/maison/fonds/nuit_nuageux.webp
  nuit_pluie: /local/dashboard/maison/fonds/nuit_pluie.webp
  nuit_neige: /local/dashboard/maison/fonds/nuit_neige.webp
tap_action:
  action: none   # l'image est décorative, pas de popup au clic

Avec calques : la carte picture-elements

Pour l’option B, on passe à picture-elements, qui empile des éléments sur l’image. Les éléments sont dessinés dans l’ordre de la liste : le premier est au fond, le dernier au premier plan.

type: picture-elements
# Image de base obligatoire pour la carte, masquée par le fond dynamique
image: /local/dashboard/maison/fonds/jour_clair.webp
elements:

  # ---------- NIVEAU 1 : le fond, piloté par le template sensor ----------
  - type: image
    entity: sensor.dashboard_maison_ambiance
    image: /local/dashboard/maison/fonds/jour_clair.webp
    state_image:
      jour_clair: /local/dashboard/maison/fonds/jour_clair.webp
      nuit_pluie: /local/dashboard/maison/fonds/nuit_pluie.webp
      # ... une ligne par ambiance : même liste que la carte picture-entity
      # (colonne 3 de l'onglet « YAML généré » du tableur, indentation incluse)
    filter: none              # supprime le filtre gris appliqué par défaut
    tap_action:
      action: none
    style:                    # calque plein cadre, centré
      top: 50%
      left: 50%
      width: 100%
      pointer-events: none    # laisse passer les clics vers les éléments du dessus

  # ---------- NIVEAU 2 : les calques d'objets ----------

  # Garage gauche ouvert, de jour
  - type: conditional
    conditions:
      - entity: cover.garage_gauche
        state_not: closed     # visible aussi pendant l'ouverture/fermeture
      - entity: sun.sun
        state: above_horizon
    elements:
      - type: image
        image: /local/dashboard/maison/calques/garage_gauche_ouvert_jour.webp
        tap_action:
          action: none
        style:
          top: 50%
          left: 50%
          width: 100%
          pointer-events: none

  # Garage gauche ouvert, de nuit : même bloc avec « below_horizon »
  # et garage_gauche_ouvert_nuit.webp (généré par le tableur)

  # Éclairage du porche (calque utile uniquement de nuit)
  - type: conditional
    conditions:
      - entity: light.eclairage_porche
        state: "on"
      - entity: sun.sun
        state: below_horizon
    elements:
      - type: image
        image: /local/dashboard/maison/calques/porche_allume_nuit.webp
        tap_action:
          action: none
        style:
          top: 50%
          left: 50%
          width: 100%
          pointer-events: none

  # ---------- NIVEAU 3 (facultatif) : une info en surimpression ----------
  - type: state-label
    entity: sensor.temperature_exterieure
    style:
      top: 8%
      left: 90%
      color: white
      font-size: 1.4em
      font-weight: bold

Inutile de recopier ces blocs à la main : l’onglet YAML généré du tableur produit un bloc conditional complet pour chaque calque déclaré (garage droit, jardin, portail…). Il ne reste qu’à copier-coller la colonne 4 sous elements:.

Les trois pièges classiques

• L’image devient grise ? Un élément image lié à une entité passe en niveaux de gris quand son état vaut off. La ligne filter: none règle le problème.
• Un calque décalé ? Il a été recadré à l’export. Réexportez-le à la taille exacte du fond.
• La nouvelle image ne s’affiche pas ? C’est le cache du navigateur. Ajoutez ?v=2 à la fin du chemin (jour_clair.webp?v=2) après chaque remplacement de fichier.

Envie d’aller plus vite ?

Tout ce guide fonctionne gratuitement avec le code ci-dessus. Pour gagner quelques heures, je vous propose un pack Ko-Fi complet qui contient même une maison de démo prête à l’emploi (14 ambiances et 8 calques). C’est un package étendu avec mode démo et repli automatique des ambiances pour visualiser le resultat avant même de vous lancer et surtout disposer d’un modele.

Le pack intègre également les modèles PSD Photoshop pour les calques et encore plus de prompts Nano Banana Pro. Aussi bien pour créer de zéro une maison en 3D sans même avoir de photo (comme celle de mon mode démo) et bien sûr tous les prompts pour modéliser VOTRE maison en 3D.

Ce pack est totalement optionnel, mais c’est aussi une façon de soutenir domo-blog et mon travail, alors merci d’avance à ceux qui prendront ce pack.

---

Vous y retrouverez egalement mon outil Excel support et j’ajoute également mon model image de local technique vidé prêt à être personnaliser selon vos besoins via l’IA.

Étape 8 : Dresser le tableau de bord en sections

Enfin arrive le moment du dressage ! Comme en cuisine, c’est là que le plat prend vie. Il en va de même pour votre tableau de bord.

Créez un nouveau tableau de bord vierge en vue Sections, et construisez-le en trois blocs :

• en haut, un bandeau pleine largeur (titre, météo, alertes) ;
• à gauche, une colonne d’un tiers pour les commandes ;
• à droite, un bloc de deux tiers qui accueille l’image 3D.

[Capture : schéma de disposition des sections]

C’est selon moi le format idéal, mais rien n’est figé : optez pour la disposition de votre choix. Voici le squelette YAML correspondant (Modifier le tableau de bord > Éditeur de configuration brute) :

views:
  - title: Maison
    path: maison
    type: sections
    max_columns: 3                # 3 colonnes = découpage 1/3 - 2/3 possible
    sections:

      # Bandeau pleine largeur
      - type: grid
        column_span: 3
        cards:
          - type: heading
            heading: Maison
            heading_style: title
          - type: weather-forecast
            entity: weather.forecast_maison
            show_forecast: false

      # Colonne de commandes (1/3)
      - type: grid
        column_span: 1
        cards:
          - type: tile
            entity: cover.garage_gauche
          - type: tile
            entity: cover.garage_droit
          - type: tile
            entity: light.eclairage_porche
          - type: tile
            entity: light.eclairage_jardin

      # L'image 3D isométrique (2/3)
      - type: grid
        column_span: 2
        cards:
          - type: picture-elements
            # ... collez ici la carte de l'étape 7
            grid_options:
              columns: full       # occupe toute la largeur de la section

Pensez à l’écran cible

Prenez en compte la taille de la tablette ou de l’écran qui affichera votre domotique. Chez moi, c’est une tablette de 12 pouces : la taille idéale pour piloter la maison une fois au mur.

Quelques réglages font la différence au quotidien :

• Testez l’affichage en mode paysage à la résolution réelle de la tablette avant de figer la disposition.
• Passez en mode kiosque (application compagnon avec l’extension HACS kiosk-mode, ou navigateur kiosque dédié) pour masquer les barres de navigation.
• Pilotez l’écran depuis Home Assistant : extinction la nuit, réveil sur détection de présence.

Nous aurons l’occasion d’y revenir dans un autre guide, vous avez déjà pas mal de pain sur la planche !

Conclusion : à vous de jouer

Vous avez maintenant la feuille de route pour créer votre interface. Une fois le premier tableau de bord configuré, il vous suffit de le dupliquer, de créer un nouveau package, puis de dérouler à nouveau ce guide de haut en bas. Et ainsi de suite.

Mon dernier conseil : ne surchargez pas votre interface. Optez pour un tableau général, puis quelques tableaux annexes (garage, piscine, local technique, chaufferie…). Selon moi, il n’est pas pertinent de modéliser toutes les pièces de la maison. Mais libre à vous de procéder comme bon vous semble : vous avez désormais tous les outils pour le faire !