Un beau dashboard, tout simplement...

Votre tableau de bord, c'est la vitrine de votre domotique. C'est une des interfaces avec laquelle vous interagissez avec Home Assistant, et s'il est soigné, il aura un effet waouh non négligeable.

Depuis les débuts de Home Assistant, il a beaucoup évolué, et, au fil des versions, de nouvelles fonctionnalités le rendent de plus en plus simple à configurer. C'est une des forces de Home Assistant!

Nous allons voir dans cet article comment utiliser les dashboards automatiques, comment prendre la main et personnaliser son dashboard. Sans notions compliquées, nous verrons comment réaliser un tableau de bord personnalisé, beau et compatible avec plusieurs tailles d'écrans (PC, Tablette, Mobile). Le tout sans utiliser le YAML, de façon la plus simple possible.

Notre objectif sera de s'approcher de l'exemple de la démo officielle :

Home Assistant Demo

Open source home automation that puts local control and privacy first.

Home Assistant

Bien sûr, une fois comprises, les notions utilisées ici vous permettrons de faire beaucoup plus, votre imagination sera la seule limite !

Quelques grands principes

J'utiliserai indifféremment les termes "tableau de bord" et "dashboard", vous m'excuserez pour cet anglicisme qui risque de revenir régulièrement. Lorsque des éléments, les cartes par exemple, ont des noms différents en anglais (ou dans le YAML) j'essaierai de donner aussi la VO...

Nous allons utiliser l'interface graphique pour cela, tout ce que nous allons faire pourra se faire sans YAML, et pas à pas, donc pas d'inquiétude !

Les dashboards par défaut

Vos premiers dashboards

Ils sont créés automatiquement, et surtout ils sont maintenus à jour sans avoir besoin de s'en occuper, alors pourquoi ne pas les utiliser !

Dès l'installation, home assistant vous est "livré" avec trois dashboards:

• Le dashboard par défaut
• Le dashboard energy
• Une carte

Les dashboards sont accessibles depuis la barre latérale de l'interface de Home assistant.

L'objectif ici ne sera pas de configurer la carte ou le dashboard Energie, mais ces dashboards aussi sont très pratiques, il est utile de les connaitre et de les tester avant de vouloir réinventer la roue dans votre dashboard personnalisé.

Concentrons nous donc sur le dashboard par défaut. Si vous avez renseigné des pièces lorsque vous avez ajouté vos éléments (entités ou appareils), votre dashboard est déjà tout rempli et organisé par pièces.

Il contient a priori toutes vos entités ou presque, et s'il y a beaucoup d'entités, il peut être difficile de s'y retrouver, nous verrons un peu plus loin comment le personnaliser un peu. Ci dessous le dashboard par défaut de mon installation, obtenu sans aucune personnalisation:

Nous allons voir tout de suite qu'on peut y ajouter d'autres dashboards, y compris des dashboards automatiques, en quelques clics.

Ajouter des dashboards ? C'est facile !

Les dashboards sont paramétrables en allant dans Paramètres / Tableaux de bord

Pour gérer les dashboard, recréer un dashboard par défaut ou démarrer un nouveau dashboard, il faut:

• aller dans: Paramètres / Tableau de bord
• cliquer sur "+ Ajouter un tableau de bord"
• sélectionner le type de dashboard à ajouter ("vue globale" pour le dashboard par défaut "historique")

Ci dessous la vue du menu principal du dashboard "pièces" de mon installation.
Obtenu en quelques clic!
On peut directement contrôler les entités de certaines pieces, et il suffit de cliquer sur une piece pour obtenir une autre vue de dashboard dédiée à cette pièce, générée elle aussi de façon automatique.

Ci dessous la vue du menu principal du dashboard "maison" de mon installation.
Obtenu en un clic!
Il suffit de cliquer sur une piece ou un résumé pour obtenir une autre vue dédiée, générée elle aussi de façon automatique.

Personnaliser le dashboard par défaut (vue globale)

Une première étape pour personnaliser un dashboard va être de filtrer ce qui est affiché. Pour cela, et comme dans tous les cas suivants, on va d'abord activer les modifications du dashboard en cliquant sur le petit crayon en haut à droite.

Et là une nouvelle interface graphique apparait permettant de modifier le dashboard :

• En cliquant sur le petit chevrons près de "Pièces", on peut choisir d'afficher ou masquer certaines pièces, et changer l'ordre d'affichage.
• On peut masquer les entités n'ayant pas de pièces.
• On peut masquer les entités ayant trait à l'énergie.

Cette étape vous permet de filtrer ce qui est affiché sur le dashboard par défaut afin de limiter le nombre d'information affichées aux aspects utiles de votre dashboard. C'est le premier pas vers un dashboard plus personnalisé, mais nous avons vu au dessus que Home Assistant vous propose désormais des dashboards beaucoup plus jolis, disponibles en seulement quelques clics, eux aussi sont personnalisables.

Personnaliser le dashboard Pièces

Si vous avez opté pour un dashboard "Pièces" disponible depuis la 2025.4, vous avez le même type de personnalisation pour sélectionner les pièces à afficher.

Il faut là encore passer en mode modification.

Puis dans l'interface qui apparait :

• Cliquez sur un étage pour afficher les pièces de cet étage
• Cliquez sur l'icone en forme d'œil pour masquer / afficher les différentes pièces.
• Cliquez sur l'icone en forme de carte pour passer d'une carte compacte à une carte étendue.
• Cliquez sur les petits chevrons pour configurer les affichages de chacune des pièces (entités à afficher / masquer).
• Faites glisser les grilles de 12 points pour changer l'ordre d'affichage dans chaque vue (ordre des étages, des pièces, des entités...).

Ceci vous permet de gérer les affichages de ce dashboard. N'oubliez pas qu'il est très dépendant de la façon dont vous avez configuré vos pièces dans le menu "Paramètres / Pièces, étiquettes et zones" (l'étage, l'icone, le nom, l'image, les capteurs associés à vos pièces).

Personnaliser le dashboard Maison

Pour l'instant (2025.10) la seule personnalisation possible du dashboard maison est de définir des entités favorites qui seront affichées en haut du dashboard.

Il faut là encore passer en mode modification.

Puis dans l'interface qui apparait, sélectionner ses entités "favorites" qui apparaitront tout en haut du dashboard.

N'oubliez pas qu'il est très dépendant de la façon dont vous avez configuré vos pièces dans le menu "Paramètres / Pièces, étiquettes et zones" (l'étage, l'icone, le nom, l'image, les capteurs associés à vos pièces).

Nul doute que de nouvelles personnalisations vont fleurir dans les versions à vernir, comme ce fut le cas pour le dashboard "pièces".

Prendre le contrôle de son dashboard

Il faut là encore passer en mode modification.

Dans le menus de modification (quel que soit le dashboard, "Pièces", "Maison" ou le dashboard par défaut), on peut alors prendre le contrôle total du dashboard. Il suffit de cliquer sur les trois petits points en haut à droite du menu "Modifier le tableau de bord" puis cliquer sur "prendre le contrôle".

Sur le menu suivant "Prenez le contrôle de votre tableau de bord" :

• Si vous ne cochez pas "Commencer avec un tableau de bord vide" vous démarrerez avec votre tableau de bord actuel (personnalisé au § précédent).
• Si vous cochez cette case, vous partirez de zéro, avec un dashboard entièrement vide.

Puis cliquer sur prendre le contrôle.

C'est désormais vous qui avez la main sur ce dashboard qui jusqu'à présent était construit automatiquement.

Sur ce dashboard dont nous avons pris le contrôle , si l'on passe en mode modification, on va pouvoir modifier les caractéristiques.

Cliquons donc sur le crayon à côté de Default, le menu du Dashboard :

On peut renommer notre dashboard, changer son icône (qui apparaitra dans la barre latérale de l'interface), et gérer la visibilité de ce dashboard (pour les admins uniquement ou pour tout le monde). Mettons les paramètres suivants :

Nous venons de commencer à personnaliser notre dashboard en lui donnant un nom et une icône.

Il est temps de se préoccuper de son contenu !

Nous avons vu précédemment Que lorsqu'on prend le contrôle, HA ne mets plus à jour automatiquement le contenu du dashboard. Il y a un moyen simple pour ajouter du contenu, par exemple lorsqu'on intègre un nouvel équipement.

Depuis la vue "Paramètre"/"Appareil et services", si on sélectionne un nouvel appareil, on peut ajouter au dashboard et à la vue de son choix les différentes cartes proposées. Il suffit de cliquer "ajouter au tableau de bord" sur les cartes qui nous intéressent, puis de sélectionner dans quel dashboard, et quelle vue vous voulez ajouter cette carte. Exemple ci-dessous avec une prise connectée :

Note, si vous savez déjà ajouter des cartes ou que vous êtes dans un dashboard en sections (ce que nous verrons un peu plus tard dans l'article) vous pouvez faire l'équivalent de l'étape précédente, mais avec des cartes tuiles plus colorées...

Dans le dashboard, à l'étape d'ajout d'une carte, au lieu de choisir un type de carte, choisissez l'onglet "par entité":

Sélectionnez la ou les entités à ajouter:

Cliquez sur continuer.

Cliquez sur ajouter et c'est fait, il ne vous reste plus qu'à personnaliser ça comme on le verra par la suite...

Démarrez votre dashboard à base de sections

Cela fait un certain temps que vous manipulez votre domotique, vous commencez à avoir une idée de ce à quoi devrait ressembler votre dashboard. Il est temps de se lancer dans la personnalisation complète!

Dans cette partie nous allons donc quitter les dashboards automatiques. Vous allez prendre le contrôle à 100% de votre dashboard.

Il vous faut désormais prendre la main sur un dashboard, un dashboard vide ou l'un des dashboard automatiques dont le style vous plait, afin de bénéficier le la structure la plus proche de votre dashboard idéal.

Vous avez donc déjà un ou plusieurs dashboards, accessibles depuis la barre latérale, voyons donc de quoi ils sont composés et comment paramétrer l'ensemble de ces éléments.

Les vues et sous vues

Si on a pris le contrôle du dashboard par défaut ou d'un dashboard vide, notre dashboard ne contient qu'une seule vue (view) : la vue Home, générée par défaut.

Si on est parti d'un autre dashboard, il peut y en avoir plusieurs, mais le principe reste le même.

Les vues sont accessibles dans le bandeau supérieur, juste en dessous du nom du dashboard. Pour modifier une vue on clique sur le crayon a coté de son nom.

Nous pouvons modifier cette vue Home en cliquant sur le crayon à coté de son nom :

Nous pouvons lui donner un nouveau nom, une nouvelle icône, mais aussi changer son url (son adresse), et même lui attribuer un thème.

Nous constatons ensuite deux options intéressantes pour la suite :

• on peut changer la mise en page de cette vue
• on peut transformer cette vue en sous-vue

Je vous propose de laisser cette vue comme elle est pour l'instant (fermer la fenêtre ou même supprimez la vue, comme vous choisissez), pour repartir de zéro avec une page blanche.

Nous allons donc créer une nouvelle vue, nommée Menu, en cliquant sur le "+" à côté de Home, en laissant la mise en page en section par défaut.

Lorsqu'on clique sur "enregistrer" on obtient une nouvelle vue presque vide :

Cette vue va nous servir de base pour la suite, Pour l'instant elle contient juste une section avec écrit "nouvelle section", mais nous y reviendrons plus tard.

Afin d'illustrer ce qu'est une sous-vue, nous allons directement en créer une, nommée "Chambre Louise". On procède exactement comme pour la vue précédente, avec le "+" sur le bandeau du haut, mais cette fois-ci, on sélectionne l'option "sous-vue" dans l'interface.

Nous avons donc 2 nouvelles vues dans notre dashboard : Menu et Chambre Louise, les deux avec des icônes.

Si nous sommes toujours en mode "édition", nous voyons toutes les vues (la sous-vue étant grisée) :

Si nous revenons en mode "normal" (en cliquant sur "Terminer") nous constaterons que la sous vue n'apparait que lorsqu'on était dessus, elle est visible, mais n'est plus directement accessible.

Revenons à notre vue Menu et repassons en mode édition pour voir de quoi la vue Menu est constituée.

L' en-tête : badges et titre.

Les badges et titres sont sont des éléments graphiques qui vont se placer en haut de notre vue.

Ils ont un espace réservé en haut. Bien sûr, si on n'ajoute pas de badge ou de titre, cet espace disparait lorsqu'on n'est plus en mode édition.

Depuis la version 2025.3, un titre (header) est disponible avec les badges. Là encore s'il est vide, il n'apparaitra pas.

Cet article ayant été écrit avant la mise en place des titres, ceux ci ne sont pas indiqués sur toutes les captures d'écran, mais les concepts restent identiques.

Nous allons donc commencer par ajouter des badges.

Si l'on clique sur le bouton d'ajout de badge on va pouvoir ajouter un badge et découvrir ses propriétés.

Il faut tout d'abord définir l'entité associée à ce badge. Par exemple un badge météo avec une entité weather.

Comme pour tous les éléments de HA, une fois notre badge créé, nous pouvons encore interagir avec lui, en mode édition, en passant la souris dessus, via le menu a trois points pour le dupliquer, copier, couper, supprimer, ou via le crayon pour le modifier :

En suivant le même procédé, on peut par exemple ajouter un badge avec l'entité de son choix : un détecteur de mouvement, une personne, une température, l'état d'une alarme, le mode du chauffage, etc... Les badges seront en haut de la vue, et seront spécifiques à cette vue (ou sous vue).

Pour l'exemple, je vais ajouter un badge avec une entité person et n'afficher que la photo et le nom (pas l'état) je vous laisse essayer de jouer avec le mini-menu Contenu (anciennement "Apparence" dans les captures d'écran) pour faire la même chose, voici mon résultat :

Maintenant, nous allons en profiter pour voir comment naviguer vers une sous-vue, avec le mini-menu Interactions.

Nous avions créé une sous vue Chambre Louise, nous allons utiliser le clic sur le badge Louise pour ouvrir cette sous vue. Il suffit, dans le mini menu interactions, de définir l'action Naviguer à la place de Plus d'info (par défaut), il faudra aussi définir vers quelle vue (Chemin de navigation) on veut naviguer :

Nous avons désormais un moyen d'accéder à notre sous-vue, sans que celle-ci apparaisse dans la barre de menu en haut.

Pour ajouter un titre (header) on clique sur le bouton d'ajout de titre:

On peut alors renseigner du texte (et des templates, mais on va garder ça pour la fin) qui se positionnera par défaut au dessus des badges, mais ceci est réglable.

Exemple après avoir cliqué sur Ajouter un titre:

Un clic sur le bouton de réglage permet d'accéder aux paramètres de cette en-tête pour définir comment seront affichés le titre et les badges :

Nous avions défini notre vue en mode section, regardons donc ce qu'il se passe juste en dessous des badges et de l'entête, dans ces fameuses sections qui vont contenir la majorité de vos informations.

Les sections

Plutôt que de tout réexpliquer, si vous voulez un peu d'historique sur la mise en place de ces sections, autant vous renvoyer vers les articles qui les ont décrit tout au long de 2024 :

Le projet Grace

Le projet Grace vise à refondre le “dashboard” de Home Assistant. Voici un résumé du “chapitre 1″ du projet, publié sur le site de Nabu Casa.

Home Assistant Communauté FrancophoneArgonaute

2024.3: Glisser-déposer comme si c’était brûlant !

Comme chaque premier mercredi du mois, une nouvelle version de Home Assistant Core est sortie. Voici la traduction de cette release note publiée sur le site de Home Assistant. Ce mois-ci Home-Assistant revoit l’organisation du dashboard grâce au projet Grace, et bien plus encore.

Home Assistant Communauté FrancophoneTank

2024.11 : Des tableaux de bord lisses et des caméras rapides

Comme chaque premier mercredi du mois, une nouvelle version de Home Assistant Core est sortie. Voici la traduction des release notes. Ce mois-ci Home-Assistant officialise le nouveau dashboard section et améliore la fluidité des flux des caméras.

Home Assistant Communauté FrancophoneTank

Les sections sont un moyen d'organiser des ensembles de cartes dans un bloc "figé". Ces sections se réorganiseront en fonction de la place disponible. Ceci permet un placement plus prédictif que les type de vue classiques utilisées auparavant, mais un peu moins compact.

Il y a un autre atout qui va nous intéresser : en mode édition, les sections sont facilement modifiables par glisser déposer ! On peut glisser déposer :

• une section par rapport aux autres sections pour la replacer à l'intérieur de la vue
• une carte pour la replacer par rapport aux autres cartes à l'intérieur de sa section
• une carte pour la changer de section

Pour créer de nouvelles sections, il suffit de cliquer sur l'icône :

Maintenant que nous avons des sections en dessous de nos badges, nous allons pouvoir les remplir avec des cartes !

Les cartes

Les cartes sont les objets de base de notre dashboard. Il en existe une multitude. Dans cette première partie, nous nous concentrerons sur seulement deux types de cartes et leurs options :

• les cartes En-têtes (heading)
• les cartes Tuiles (tile)

Les cartes En-têtes ("heading")

Par défaut chaque nouvelle section est créée avec une carte en-tête en haut de la section, contenant le titre "Nouvelle section".

A ne pas confondre avec l'en-tête ("header") qui est au dessus des sections, il s'agit ici d'une petite carte, déplaçable partout en glisser déposer et qui est capable de faire beaucoup plus que juste afficher "Nouvelle section" !

Leur usage principal est de servir de titre et de sous-titre, à l'intérieur des sections. On va voir qu'on peut y ajouter de nombreuses subtilités.

Ci-dessous, on modifie le texte du titre et on ajoute un sous-titre :

Dans l'onglet Configuration, on retrouve le même mini-menu Interactions qui va ici aussi nous permettre de définir ce qu'il se passe lorsqu'on clique sur le titre ou le sous-titre (rien par défaut), mais ici encore, on peut s'en servir pour naviguer ou lancer des actions (un script par exemple).

On découvre aussi un nouveau mini-menu Entités qui va nous permettre d'ajouter des petits "badges" à droite de nos titres et sous-titres.

Par exemple, je peux configurer la carte pour qu'elle serve de titre sur une section dédiée à la chambre de ma fille, avec les étapes suivantes :

• modification du texte
• ajout d'une icône lit
• navigation vers la sous-vue dédiée créée précédemment (qu'il faudra remplir car elle est vide pour l'instant)
• ajout d'une entité (détecteur de mouvement)

On a créé un titre, on naviguera vers la sous-vue comme précédemment avec le badge: c'est matérialisé par le petit chevron ">" qui indique que le titre est cliquable. Et on a ajouté un petit badge avec le détecteur de mouvement de la pièce.

Ce mini-badge peut lui aussi être personnalisé (un peu comme un badge) pour ajouter un peu de couleur et enlever le texte de l'état par exemple, en cliquant sur le crayon à coté de notre entité, on va trouver des menus qui nous sont familiers: Contenu (anciennement apparence) et interactions.

On peut là encore définir des options d'interaction (que se passe-t-il si on clique sur le mini-badge), par exemple afficher "plus d'info" si on clique dessus permet de faire un genre de pop-up.

Cette nouvelle carte en-tête sortie en octobre 2024 est pleine de possibilités si on se donne la peine de les explorer :

• servir simplement de titre ou de sous-titre
• servir à mettre du texte sur son dashboard
• servir de bouton (raccourci ou lanceur de scenario)
• en utilisant les mini-badges avoir un affichage très compact
• à vous d'inventer la suite  (quelques exemples suivront).

Les cartes Tuiles ("Tile")

Nous allons remplir un peu cette section en ajoutant des cartes tuiles.

Note, comme vu dans la section personnaliser le dashboard par défaut, on peut ajouter des lots de cartes tuiles en ajoutant les cartes "par entité" au lieu de les ajouter "par type de carte", ici nous allons les ajouter une par une.

On ajoute donc une carte en choisissant le type tuile puis en choisissant l'entité associée à chaque carte. Pour cette chambre : une lumière et un volet.

En quelques secondes, nous avons ajouté la lumière et les volets de cette chambre à notre dashboard. Notre section est un peu plus remplie, juste avec des cartes par défaut sans aucune configuration :

Maintenant si nous regardons l'onglet de configuration d'une carte Tuile, nous retrouvons un menu qui ressemble aux précédents, avec presque les mêmes mini-menus : Contenu (anciennement Apparence), Interactions et Fonctionnalités.

Nous pouvons donc modifier le contenu ("apparence" avant 2025.3) :

Quelques exemples avec la même entité light :

Nous pouvons modifier les interactions :

Par défaut, on aura en général l'affichage du "plus d'info" si on clique sur la carte et le basculement de la lumière si on clique sur l'icône, mais on peut définir ce que l'on veut (naviguer, une action particulière, ou même ne rien faire) pour l'appui sur chaque zone :

Nous pouvons enfin ajouter des fonctionnalités :

Ces fonctionnalités dépendront du type d'entité sélectionnée. Comme nous avons une lumière, les fonctionnalités seront en rapport avec l'entité light sélectionnée :

On peut en ajouter tant qu'on veut et les ordonner dans le sens que l'on veut.

Les fonctionnalités sur la carte volet seront différentes :

Depuis la version 2025.3, une fonctionnalité peut être placée "en ligne" pour un affichage plus "horizontal":

En quelques clics notre petite section a pris des couleurs :

Si on reproduit exactement les mêmes étapes avec deux autres sections pour nos deux autres enfants, et les entités des autres chambres, on obtient assez rapidement ce début de dashboard :

Comme il s'agit de sections, si la taille de l'écran ou de la fenêtre change, tout se réarrange dynamiquement, par exemple avec une largeur proche de celle d'un smartphone, les sections seront empilées au lieu d'être juxtaposées :

Libre à vous de réfléchir à votre organisation.

Vous pouvez créer autant de vues et de sous-vues que vous souhaitez, avec l'organisation qui vous arrange. Par exemple un menu assez compact et des sous-vues par chambres plus détaillées.

Nous avions notre premier exemple avec trois sections, une par chambre, nous pouvons facilement le modifier pour créer une seule section, plus compacte, qui trouverait alors sa place dans une autre organisation de dashboard (avec peut-être une section séjour, une section cuisine, etc...) :

Les exemples ci-dessus montrent déjà qu'un peu d'organisation sera nécessaire. De grands choix s'offrent à vous, des vues organisées par pièces, des vues organisées par fonctions ou par équipements, ou encore un peu des deux ?

Je vous invite à regarder cette vidéo YouTube montrant les dashboards de deux développeurs français de Home Assistant, et qui sera très complémentaire de cet article :

D'autres tuiles ?

Vous allez me dire que vous n'avez pas que des lumières et des volets, et vous aurez raison. En fonction de vos entités, vous pourrez utiliser des tuiles avec des fonctionnalités différentes (voir la doc en anglais : https://www.home-assistant.io/dashboards/tile/).

Ci-dessous une section de dashboard crée pour l'occasion avec des types de tuiles variés (en fonction des types d'entités que je possède) :

Copier-coller des cartes

Comme pour tous les éléments de HA, une fois nos cartes créées, nous pouvons encore interagir avec, en mode édition, en passant la souris dessus, pour les dupliquer, copier, couper, supprimer, ou pour les modifier avec le crayon.

Si nous avons passé un peu de temps à personnaliser une carte et que nous voulons la dupliquer pour ne changer par exemple que l'entité, sans refaire toute la personnalisation, c'est tout à fait faisable avec l'interface graphique.

Pour aller plus loin dans le copier-coller, nous allons être obligés de parler un peu du YAML.

Le YAML, c'est un mot qui fait peur. Mais comme vous l'avez vu, nous ne nous en sommes pas servi du tout depuis le début.

Nous pourrions continuer comme cela jusqu'au bout de cet article, mais nous allons voir que le YAML peut être extrêmement utile, au moins temporairement, par exemple pour échanger des morceaux de dashboard avec d'autres utilisateurs ou pour faire des copier-coller.

On peut accéder au code YAML d'une carte (ou d'un badge), dans l'interface de modification, en cliquant sur Afficher l'éditeur de code, puis le copier ou le modifier.

On peut revenir à l'interface graphique en cliquant sur Afficher l'éditeur visuel, par exemple après avoir copié ou modifié un code YAML. Dans certains cas, ce ne sera pas possible si certaines options ne sont pas prises en compte par l'éditeur visuel. Tout dépendra du contenu YAML que vous injectez dans vos cartes.

Le code YAML de la carte contient tous les paramètres de la carte alors que l'interface graphique nécessite de cliquer et afficher les différents sous-menus pour tout afficher.

Lors d'une demande d'aide, il sera plus efficace de fournir ce code YAML que de multiples captures d'écran, d'autant plus que les autres utilisateurs pourront ainsi directement copier votre code dans leur dashboard pour tester ce qui cloche :

type: tile
entity: climate.pac
features:
  - style: icons
    type: climate-hvac-modes
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - "off"
  - type: target-temperature
layout_options:
  grid_columns: 4
  grid_rows: 3

On peut aussi récupérer ou modifier le code YAML au niveau d'une section entière :

Au niveau d'une vue entière :

Et au niveau d'un dashboard complet en cliquant sur éditeur de configuration dans le menu :

Personnaliser l'affichage de son dashboard

On vient de voir qu'il n'est pas très dur, avec quelques cartes simples, de créer facilement un dashboard simple et coloré. Nous n'avons fait ensemble que la vue "Menu", mais remplir les sous-vues en fonction de l'organisation de votre dashboard se fera sur le même principe, d'autant plus que vous savez désormais aussi faire des copier-coller pour aller plus vite, récupérer des cartes sur le forum, voire que vous avez pris le contrôle d'un dashboard automatique pour gagner du temps.

N'oubliez pas que vous pouvez régler la partie supérieure du tableau de bord (Titre et Badges pour choisir comment articuler cette partie:

Si l'on avait que des badges comme dans l'exemple suivi jusque là , nous sommes arrivés à ce type de dashboard:

Nous avons donc déjà :

• créé un nouveau dashboard et créé un menu avec les sections
• intégré des sous vues et créé des raccourcis vers celles-ci
• ajouté des cartes et des badges

Désormais la seule limite, ce sera les informations disponibles dans votre domotique et votre manière de les afficher et d'interagir avec. Nous allons regarder un peu quelques notions que nous avons laissées de côté afin de personnaliser encore un peu plus l'affichage notre dashboard.

La visibilité

Depuis le début, nous avons volontairement ignoré l'onglet "visibilité". Celui-ci est disponible dans de nombreuses interfaces :

• Avec une gestion par utilisateur : au niveau des vues et sous vues, vous pouvez ainsi réserver l'accès à certaines vues et sous vues à certains utilisateurs.
• Avec une gestion par logique :
  • au niveau des sections
  • au niveau de chaque élément graphique (badge, carte)
  • à l'intérieur de certains éléments (par exemple les entités dans les cartes en-tête)

Attardons-nous sur ce dernier cas avec un exemple sur une carte en-tête :

Nous avions créé une carte en-tête contenant une entité (l'état d'un détecteur de mouvement). Si je sélectionne la configuration de cette carte en-tête, puis si je clique sur le mini-menu entités et enfin sur le crayon à côté de mon capteur de mouvement, on se retrouve dans l'éditeur de badges d'en-tête :

En cliquant sur le mini-menu visibilité, je peux ajouter différents types de conditions.

Ces conditions peuvent être liées à des états d'entités, des tailles d'écran, des utilisateurs, et des combinaisons logiques de tout cela.

Je vais sélectionner Etat d'une entité, pour n'afficher l'entité que si le détecteur capte quelque chose, (et donc ne rien afficher le reste du temps) :

En reprenant le même type de filtrage sur les trois en-têtes, on obtient un affichage du mini badge uniquement pour les pièces occupées :

La mise en page

Dans l'interface de modification des cartes, nous n'avons pas encore parlé de l'onglet mise en page.

Cet onglet, au fonctionnement assez intuitif, vous permet de définir la place que prendra la carte dans sa section. La section est représentée par une grille, et on peut sélectionner le nombre de cases de la grille que prendra la carte.

Ceci vous permettra en particulier d'agrandir vos cartes pour les rendre plus lisibles si besoin, ou pour changer la manière d'organiser les informations.

Par exemple, vous pouvez utiliser des cartes très compactes dans un menu général, et des cartes plus étalées dans une sous vue dédiée par pièce par exemple… À vous de voir !

Le mode pleine largeur permet comme son nom l'indique à la carte de prendre toute la largeur de la section.

En 2024.11, un mode précis a fait son apparition pour permettre une mise en page encore plus précise dans la section, et en particulier si vous voulez faire des sections à trois colonnes.

Dans l'interface de modification des sections, vous pouvez également modifier la largeur de votre section pour créer des sections plus larges.

Dans l'interface de modification des vues, vous pouvez également modifier le nombre de maximal de sections dans la largeur de votre vue, ou encore opter pour un mode de placement dense, plus efficace mais moins prédictible.

Jouer avec les cartes en-tête et tuile

Avec seulement deux types de cartes, on peut, avec les notions vues jusqu'ici, réaliser des choses très variées !

Si l'on conserve notre exemple très simple d'une chambre d'enfants, et de trois entités (détection de mouvement, lumière et volet), on peut par exemple :

• Afficher nos informations de façon très compacte (pour une synthèse par exemple) ou de façon très détaillée (pour une sous-vue dédiée par exemple).
• modifier la visibilité pour n'afficher que les informations pertinentes.
• Définir les interactions que l'on souhaite :
  • des popups simples en appelant "plus d'info"
  • des interactions directes (comme permuter l'entité, appeler des actions ou lancer des scripts)
  • naviguer vers d'autres parties du dashboard ou même une URL internet.

Ci-dessous cinq sections en exemple, avec nos trois entités, des cartes en-têtes et tuiles, et différentes mises en pages pour vous donner des idées :

Quelques autres cartes

Pour aller plus loin, on peut être amené à utiliser d'autres cartes.

Sans aller chercher de choses trop compliqué, en se limitant aux cartes par défaut, on peut utiliser les cartes suivantes :

• Cartes capteur (sensor) : pour afficher des mini-courbes pour une entité de type sensor. Bien que d'un style un peu plus ancien que les cartes tuiles, si on masque l'icône (comme ci-dessous en mettant un espace à la place de l'icône), elles peuvent se fondre assez bien dans un dashboard à base de tuiles. Notez que depuis la 2025.9 les tuiles sont désormais capables d'afficher un graphe de tendance qui les rend très proches de cette bonne vieille carte sensor.

• Cartes pile horizontale, pile verticale et grille : Ces cartes vous permettent d'empiler plusieurs cartes de façon horizontale ou verticale, ou encore de créer une grille de carte en choisissant le nombre de colonnes.
  De mon point de vue, elles sont devenues un peu obsolètes avec les sections, mais elles peuvent vous permettre de mettre plus de cartes dans une section, par exemple des cartes boutons (je vous laisse regarder les capacités de cette carte) :

• Cartes "carte" (map) : cette carte vous permet d'afficher une carte ainsi que des tracker sur une carte. Suivez les utilisateurs, la position de votre voiture, ou autre. À utiliser en mini-carte dans une section, ou en plein écran dans une vue dédiée, au choix.

• Cartes "prevision météo" (weather-forecast) : cette carte vous permet d'afficher les prévisions météo de façon simple et épurée, surtout si on la réduit un peu :

• Cartes "markdown" (markdown) : cette carte vous permet d'afficher du texte. Ce texte peut être du texte libre, avec des balises de mise en forme si besoin, mais aussi des modèles (templates) avec la syntaxe JINJA2 afin d'afficher des informations dynamiques.
  Le même fonctionnement peut être utilisé dans le titre de l'en-tête (header), pour afficher un peu plus que du texte.
  C'est d'un usage un peu plus avancé, mais ces syntaxes peuvent être testées dans le menu "outils de développement", dans l'onglet modèle :
  

Avec quelques recherches, on arrive vite à faire ses premières syntaxes simples :

Et à les intégrer dans le contenu d'une carte markdown:

HACS, pour aller plus loin

Jusqu'à présent, nous n'avons utilisé que des cartes "core" et aucune carte personnalisée (custom card). Donc en théorie, il y a très peu de risque d'incompatibilité lors des mises à jour de Home Assistant puisque tous les éléments sont parties prenantes de HA.

Mais si on veut aller plus loin dans la personnalisation de son dashboard, on peut utiliser quelques éléments supplémentaires décrit ci-dessous.

Les éléments décrits ci-dessous sont tous disponibles sur HACS et permettent quelques personnalisations bien pratiques.

Ils nécessitent peut-être une petite prise en main, je vous laisse expérimenter en vous documentant par vous-mêmes, car vous devez à présent être devenus autonomes. Alors n'oubliez pas de lire les documentations associées sur GitHub et consultez le forum pour utiliser les cartes qui suivent.

• Carte météo France (La carte météo dédiée, développée par la communauté HACF) : pour afficher toutes les infos de météo France. Indispensable pour une météo détaillée et afficher les prévisions.
  
• Browser_mod (très utile pour générer des pop ups): excellent outil de gestion des navigateurs, il dispose de nombreuses capacités. en particulier générer des popups. On peut facilement en créer une carte personnalisée : la Popup-card, qui remplacera alors l'affichage de la vue "plus d'info" de l'entité sélectionnée. Vous pourrez bien sûr réaliser des choses encore plus complexes.
  
• Mushroom (les tuiles avec un petit truc en plus) : cette collection de cartes et de badges (développée avant les tuiles, mais par le même développeur), est 100% compatible du look des tuiles, mais offre plus de personnalisation.
  Les cartes mushroom-template permettent de prendre le contrôle total de la carte (couleur et type de l'icone, affichage principal et secondaire, etc...). Pour en tirer le maximum, il faudra écrire des modèles au format JINJA2 comme pour les cartes markdown.
  
• Vertical-stack-in-cards (fusionnez des cartes pour fabriquer vos cartes customs) : avec le même type d'interface que la carte pile verticale, vous pouvez fusionner des cartes différentes, et celles-ci auront une bordure et un fond en commun. Ceci peut vous permettre de réaliser des cartes sur mesure.
  
• Custom Features (des features sur mesure) : Un outil pour ajouter des fonctionnalités (features) à n'importe quelle carte tuile, même s'il n'y a pas de fonctionnalité associée avec le type d'entité sélectionnée. Disponible aussi avec une interface graphique.
  
• Bubble cards (une autre famille de cartes, un autre look) : une très jolie collection de cartes avec un superbe look et des fonctionnalités très intéressantes (pop-ups, boutons, sliders, etc...). On s'éloigne du dashboard standard et on entre dans la personnalisation avancée, mais là encore, il y a une interface graphique qui permet de se lancer sans YAML!
  

Conclusion

Lancez-vous ! Vous avez normalement toutes les clefs pour prendre le contrôle de votre dashboard, en toute simplicité grâce aux interfaces de Home Assistant qui proposent toujours plus de possibilités, sans nécessité de se plonger dans le code.

Nous avons vu que les sections, les tuiles et les en-têtes vous offrent déjà de très nombreuses possibilités. À vous de trouver comment les agencer de la façon qui vous conviendra.

Et si vous êtes en panne d'inspiration, faites un tour sur le forum, rubrique présentation, nombreux sont ceux qui partagent leurs dashboards !

Et à très bientôt pour voir vos créations !

N'hésitez pas à les partager dans le fil associé du forum, ou dans votre presentation !