1
Nov, 2026

Je remplace mes badges de température par des jauges

🌡️ Pourquoi j’ai voulu moderniser l’affichage des températures

Sur mon dashboard Home Assistant, j’affiche les températures directement sur le plan de la maison.

C’est pratique : je vois tout de suite la température dans chaque pièce, sans avoir besoin d’ouvrir une autre page.

Jusqu’à présent, j’utilisais des éléments state-badge. Le résultat était bien lisible, avec une température affichée en gros dans un badge rond.

Mais j’avais envie de quelque chose de plus léger visuellement, qui s’intègre mieux au plan et qui permette aussi d’afficher l’humidité.

L’idée n’était pas de changer mes capteurs ni de refaire tout mon dashboard. Je voulais simplement présenter les mêmes informations autrement.

🔘 Mon ancien affichage avec des state-badge

Ma configuration de départ était assez simple : un élément par capteur, positionné sur le plan avec les propriétés top et left.

A noter que ces cartes sont inclus dans une carte de type: picture-elements générale

Voici par exemple le code que j’utilisais pour mon salon :

- type: state-badge
  entity: sensor.temperature_salon_temperature
  style:
    top: 98%
    left: 22%
    font-size: 40px
    text-align: center
    font-weight: bold
    color: transparent

Cet affichage faisait le travail. La température était visible et chaque badge avait sa place sur le plan.

Mais le badge prenait une place visuelle importante, avec son fond sombre et l’unité affichée dans un encart séparé.

🧩 Les cartes que j’ai retenues

Pour ce nouvel affichage, j’ai utilisé le projet Appliance Électroménager Cards de Skyrotter ou (nicolas59 sur HACF).

Le nom fait surtout penser aux machines à laver, aux réfrigérateurs et aux autres équipements de la maison. Mais dans mon cas, c’est la carte d’ambiance d’une pièce qui m’intéresse : custom:appliance-room-climate-card.

Pour les nouvelles jauges, je vous mets également le lien vers le message sur le forum HACF :
La discussion HACF autour des cartes et des nouvelles jauges.

Je vais utiliser une infime partie des possibilités du format gauge :

L’objectif, chez moi, est de garder uniquement les informations utiles sur le plan : la température et l’humidité, sans ajouter une grosse carte complète par pièce.

📦 L’installation dans Home Assistant

🛒 L’installation avec HACS

Pour installer les cartes, le plus simple est de passer par HACS.

Dans HACS, recherchez Animated Appliance & Energy Cards, puis téléchargez le projet (version supérieure à v1.52.0)

Une fois le téléchargement terminé, rechargez la page de Home Assistant. Sur un ordinateur, vous pouvez utiliser Ctrl + F5 pour forcer le rechargement du navigateur.

Si le projet n’apparaît pas dans la recherche, vous pouvez ajouter son dépôt manuellement :

  1. Ouvrir HACS.
  2. Ouvrir le menu avec les trois points.
  3. Aller dans les dépôts personnalisés.
  4. Ajouter l’adresse du dépôt ci-dessous.
  5. Choisir la catégorie des cartes de tableau de bord, appelée Dashboard dans la documentation du projet.
  6. Rechercher ensuite le projet dans HACS et le télécharger.
https://github.com/skyrotter/ha-appliance-electromenager-cards

Pensez à recharger votre navigateur après l’installation.

🛠️ L’alternative sans HACS

Le projet propose aussi une installation manuelle.

Dans ce cas, il faut récupérer le fichier ha-appliance-electromenager-cards.js présent dans le dossier dist du dépôt, puis le copier dans le dossier /config/www/ de Home Assistant.

Il faut ensuite ajouter une ressource dans les paramètres des tableaux de bord :

  • Adresse : /local/ha-appliance-electromenager-cards.js
  • Type : Module JavaScript

C’est une alternative à HACS. Il n’est pas nécessaire de faire les deux installations.

🎨 Mon nouvel affichage : un cercle et une jauge

Pour intégrer la jauge sur mon plan, j’ai utilisé deux éléments superposés :

  • Une image circulaire en arrière-plan.
  • La carte de température et d’humidité au-dessus.

Le cercle permet de détacher légèrement l’affichage du décor, sans masquer complètement la pièce.

La jauge vient ensuite afficher les valeurs et les arcs colorés.

Sur ma nouvelle capture, la température apparaît au centre et l’humidité juste en dessous. Le résultat est plus léger que mon ancien badge, tout en donnant une information supplémentaire.

⚪ Le cercle en arrière-plan

J’ai commencé par ajouter l’image qui sert de fond :

- type: image
  image: /local/maison/cerclebleu.png
  style:
    top: 60%
    left: 42%
    width: 120px
    transform: translate(-50%, -50%)
    opacity: 0.5

Dans cet exemple, mon fichier s’appelle cerclebleu.png.

Voici mon fichier mais chacun peut personnaliser. Il y a 3 autres couleurs.

Il est placé dans le dossier /config/www/maison/, ce qui correspond à l’adresse /local/maison/cerclebleu.png utilisée dans le dashboard.

Ce fichier est une image à prévoir de votre côté : ce n’est pas un élément fourni automatiquement par la carte. Vous pouvez utiliser votre propre fond circulaire en adaptant le chemin.

J’ai retenu une largeur de 120px et une opacité de 0.5. Je voulais un fond visible, mais pas un disque opaque qui cache le plan.

🌡️ La carte de température et d’humidité

J’ai ensuite ajouté la carte au même emplacement :

- type: custom:appliance-room-climate-card
  icon: ''
  entity_temperature: sensor.temperature_salon_temperature
  entity_humidity: sensor.temperature_salon_humidity
  temperature_unit: C
  language: fr
  show_status: false
  show_outdoor: false
  show_dew_point: false
  show_advice: false
  show_graph: false
  animations: false
  transparent: true
  name: " "
  variant: gauge
  show_trend: false
  style:
    top: 60%
    left: 42%
    width: 130px
  illustration_size: 120

Cette fois, l’exemple concerne le salon. Les entités sont donc différentes de celles des deux températures extérieures montrées au début de l’article.

J’utilise les deux entités suivantes :

  • sensor.temperature_salon_temperature pour la température.
  • sensor.temperature_salon_humidity pour l’humidité.

⚙️ Les réglages que j’ai retenus

🧭 La présentation en jauge

Le choix de cette présentation se fait avec le paramètre suivant :

variant: gauge

C’est ce réglage que j’utilise pour obtenir l’affichage avec les arcs autour des valeurs.

🪟 Un affichage volontairement allégé

Sur le plan de la maison, je n’ai pas besoin de toutes les informations que peut proposer une carte complète.

J’ai donc désactivé plusieurs éléments :

show_status: false
show_outdoor: false
show_dew_point: false
show_advice: false
show_graph: false
show_trend: false

Je garde ainsi l’essentiel pour cette vue : lire rapidement la température et l’humidité.

J’utilise aussi ces réglages :

transparent: true
name: " "
icon: ''
animations: false

Dans ma configuration, je ne veux ni nom de pièce ni icône supplémentaire, et je désactive les animations.

L’emplacement de la jauge sur le plan donne déjà le contexte. Je n’ai pas besoin de répéter « Salon » à cet endroit.

📐 Le positionnement sur le plan

Le cercle et la carte utilisent exactement les mêmes coordonnées :

top: 60%
left: 42%

C’est ce qui permet de les placer au même endroit. J’ai un peu joué sur width, mais à chacun d’adapter à son écran.

Ces dimensions correspondent à mon plan et à mon affichage. Elles sont à ajuster selon la place disponible sur votre dashboard.

Les deux blocs sont à insérer dans la liste elements: de ma carte picture-elements, à la place des anciens badges concernés.

Il ne s’agit donc pas de deux cartes indépendantes à ajouter ailleurs sur le tableau de bord.

🧾 Le code complet de mon nouvel affichage

Pour avoir les deux éléments au même endroit dans la configuration, voici le bloc complet que j’utilise pour le salon.

L’image est déclarée en premier, puis la jauge :

- type: image
  image: /local/maison/cerclebleu.png
  style:
    top: 60%
    left: 42%
    width: 120px
    transform: translate(-50%, -50%)
    opacity: 0.5

- type: custom:appliance-room-climate-card
  icon: ''
  entity_temperature: sensor.temperature_salon_temperature
  entity_humidity: sensor.temperature_salon_humidity
  temperature_unit: C
  language: fr
  show_status: false
  show_outdoor: false
  show_dew_point: false
  show_advice: false
  show_graph: false
  animations: false
  transparent: true
  name: " "
  variant: gauge
  show_trend: false
  style:
    top: 60%
    left: 42%
    width: 130px
  illustration_size: 120

Pour reproduire cet affichage dans une autre pièce, je reprends les deux éléments en changeant les entités et les coordonnées.

Je veille simplement à conserver les mêmes valeurs de top et de left pour le fond et la jauge d’une même pièce.

🎁 Bonus : j’utilise decluttering_templates

À ce stade, mon nouvel affichage fonctionne avec deux éléments : le cercle de fond et la jauge.

Pour une seule pièce, ce n’est pas gênant de conserver les deux blocs directement dans le dashboard.

Mais pour reproduire cet affichage dans plusieurs pièces, je vais devoir copier une bonne partie du code à chaque fois.

Et le jour où je veux modifier la présentation, il faudra reprendre chaque bloc, avec le risque d’en oublier un.

J’ai donc regroupé cet affichage dans un template réutilisable avec decluttering-card.

🧩 À quoi sert decluttering_templates ?

Le principe est simple : je définis une seule fois la structure de mon affichage, puis je la réutilise en lui passant quelques variables.

Dans mon cas, la structure reste toujours la même :

  • Un cercle en arrière-plan.
  • Une jauge de température et d’humidité au-dessus.
  • Les mêmes options pour conserver un affichage léger.

Ce qui change d’une pièce à l’autre, ce sont les capteurs, la position sur le plan et éventuellement la taille, la couleur ou l’opacité du cercle.

Je sépare donc la présentation, définie dans le template, des informations propres à chaque pièce, renseignées au moment de l’appel.

📦 Le prérequis : decluttering-card

Cette partie suppose que la carte personnalisée decluttering-card est déjà installée dans Home Assistant.

Attention à ne pas confondre les deux noms :

  • decluttering_templates: est la rubrique dans laquelle je déclare mes modèles.
  • type: custom:decluttering-card est l’élément qui appelle l’un de ces modèles dans mon dashboard.

Le template ne remplace pas la carte de température. Il réutilise simplement sa configuration, en l’associant à mon image de fond.

💡 Mon astuce pour regrouper deux éléments dans un seul template

Et voici la petite astuce que je vous partage pour ce montage.

Normalement, un template decluttering décrit une seule carte avec card:, ou un seul élément de plan avec element:.

Cela ne veut pas dire qu’il est impossible de regrouper plusieurs éléments, mais il faut passer par une structure qui les contient.

Dans mon cas, j’ai justement besoin de deux éléments : l’image du cercle et la carte de température.

Je ne peux donc pas simplement mettre deux blocs directement sous element:. Il me faut un élément capable de contenir les deux.

C’est là que j’utilise un petit détournement de type: conditional.

🎁 Un conditional… sans condition !

Habituellement, un élément conditional sert à afficher des éléments uniquement lorsque certaines conditions sont remplies.

Mais il possède surtout quelque chose de très pratique pour mon besoin : une liste elements:, dans laquelle je peux placer plusieurs éléments.

Voici le principe du regroupement, sous une forme simplifiée :

element:
  type: conditional
  conditions: []
  elements:
    - type: image
      # Mon cercle de fond

    - type: custom:appliance-room-climate-card
      # Ma jauge de température et d’humidité

Avec conditions: [], je ne définis aucune condition à satisfaire : dans mon montage, le groupe reste affiché.

Le conditional ne me sert donc pas à gérer une condition. Il me sert de conteneur pour réunir mes deux éléments.

C’est toute l’astuce : un seul element: pour decluttering, mais deux éléments à l’intérieur !

Au moment de l’utilisation, un seul appel à custom:decluttering-card suffit alors pour afficher le cercle et la jauge ensemble.

🗂️ Où je place le template

Je place la rubrique decluttering_templates: à la racine de la configuration YAML du dashboard, au même niveau que views:.

Elle ne doit donc pas être ajoutée dans la liste elements: du plan.

Si vous avez déjà une rubrique decluttering_templates:, ajoutez simplement le modèle jauge_temperature: à l’intérieur, à côté de vos autres templates.

Pour effectuer cette modification, je vais sur Editeur de configuration brute.

🧾 Le template complet de ma jauge

Voici le code complet que j’utilise :

decluttering_templates:
  jauge_temperature:
    default:
      - largeur: 120
      - opacite_fond: 0.5
      - couleur_cercle: bleu

    element:
      type: conditional
      conditions: []
      style:
        position: absolute
        top: '[[top]]'
        left: '[[left]]'
        width: calc([[largeur]]px + 10px)
        height: calc([[largeur]]px + 10px)
        transform: translate(-50%, -50%)

      elements:
        - type: image
          image: '/local/maison/cercle[[couleur_cercle]].png'
          style:
            position: absolute
            top: 50%
            left: 50%
            width: '[[largeur]]px'
            opacity: '[[opacite_fond]]'
            transform: translate(-50%, -50%)
            z-index: 0

        - type: custom:appliance-room-climate-card
          icon: ''
          entity_temperature: '[[temperature]]'
          entity_humidity: '[[humidite]]'
          temperature_unit: C
          language: fr
          show_status: false
          show_outdoor: false
          show_dew_point: false
          show_advice: false
          show_graph: false
          animations: false
          transparent: true
          name: " "
          variant: gauge
          show_trend: false
          illustration_size: '[[largeur]]'
          style:
            position: absolute
            top: 50%
            left: 50%
            width: calc([[largeur]]px + 10px)
            transform: translate(-50%, -50%)
            z-index: 1

📐 Je positionne le groupe, puis je superpose les éléments

La position sur le plan est définie sur le conteneur, avec les coordonnées transmises au template :

top: '[[top]]'
left: '[[left]]'

Ces coordonnées déplacent l’ensemble : le cercle et la jauge restent associés.

À l’intérieur du groupe, je centre les deux éléments avec les mêmes propriétés :

position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)

C’est ce qui permet de les superposer.

J’insiste sur ce point parce que j’ai rencontré le problème pendant mes essais : sans ce positionnement interne, le cercle et la carte s’affichaient l’un au-dessus de l’autre, au lieu d’être superposés.

Enfin, je définis z-index: 0 sur le cercle et z-index: 1 sur la jauge pour conserver le fond derrière les informations.

📏 Une seule variable pour gérer la taille

J’ai choisi de conserver une seule variable de taille : largeur.

Sa valeur est un nombre sans unité, par exemple :

- largeur: 120

C’est important, car le paramètre illustration_size de la carte attend ici une valeur comme 120, et non 120px :

illustration_size: '[[largeur]]'

Pour les propriétés CSS, j’ajoute donc l’unité directement dans le template :

width: '[[largeur]]px'

Et pour la carte et son conteneur, je conserve une largeur supérieure de 10 pixels :

width: calc([[largeur]]px + 10px)

Avec une valeur de 120, mon fond mesure donc 120px de large et la carte 130px.

Je n’ai plus besoin de renseigner deux largeurs séparément.

Attention, dans les appels au template, il faut donc écrire largeur: 120, sans ajouter px.

🎨 Je choisis la couleur du cercle

Pour changer la couleur du fond, j’ai prévu la variable couleur_cercle.

Le chemin de l’image est construit avec cette valeur :

image: '/local/maison/cercle[[couleur_cercle]].png'

Avec couleur_cercle: bleu, le template utilise :

/local/maison/cerclebleu.png

Avec couleur_cercle: orange, il utilise :

/local/maison/cercleorange.png

Je peux ainsi choisir parmi les quatre fonds présentés plus haut :

  • bleu
  • beige
  • vert
  • orange

Il faut bien sûr avoir placé les fichiers correspondants dans le dossier /config/www/maison/, en conservant ces noms.

Cette variable change uniquement l’image de fond. Elle ne modifie pas les couleurs des arcs de la jauge.

🔧 Les valeurs par défaut

Le bloc default: définit les valeurs utilisées lorsque je ne les précise pas dans l’appel :

default:
  - largeur: 120
  - opacite_fond: 0.5
  - couleur_cercle: bleu

Si je ne demande rien de particulier, j’obtiens donc un cercle bleu de 120px de large, avec une opacité de 0.5.

Je peux remplacer ces valeurs pour une pièce précise, sans modifier le modèle commun.

En revanche, les entités de température et d’humidité ainsi que les coordonnées top et left doivent être renseignées à chaque appel dans ce template.

📍 L’appel pour mon salon

Dans la liste elements: de ma carte picture-elements, je remplace maintenant les deux anciens blocs par ce seul appel :

- type: custom:decluttering-card
  template: jauge_temperature
  variables:
    - temperature: sensor.temperature_salon_temperature
    - humidite: sensor.temperature_salon_humidity
    - top: 60%
    - left: 47%
    - largeur: 120
    - couleur_cercle: bleu

Mais comme j’utilise les valeurs par défaut, je peux simplifier en :

- type: custom:decluttering-card
  template: jauge_temperature
  variables:
    - temperature: sensor.temperature_salon_temperature
    - humidite: sensor.temperature_salon_humidity
    - top: 60%
    - left: 47%

Ici, j’utilise les capteurs du salon, je place le groupe à 60% depuis le haut et 47% depuis la gauche, et je choisis le fond orange.

La largeur reste à 120. Je l’ai laissée dans l’exemple pour montrer où la modifier, mais je pourrais supprimer cette ligne puisque c’est déjà la valeur par défaut.

Même chose pour l’opacité : comme elle n’apparaît pas dans cet appel, le template conserve 0.5.

🏠 Je réutilise l’affichage dans les autres pièces

Pour ajouter une autre jauge, je duplique uniquement ce petit bloc d’appel.

Je remplace les deux entités et les coordonnées, puis j’adapte éventuellement la largeur, la couleur ou l’opacité.

Par exemple, si je veux un affichage plus petit, je peux utiliser :

- largeur: 80

Et si je veux rendre le fond plus discret :

- opacite_fond: 0.3

Ces lignes sont à renseigner dans la liste variables: de l’appel concerné.

Je n’ai plus à recopier toute la configuration de la carte ni celle de l’image.

Et si je veux modifier une option commune à toutes mes jauges, je le fais dans le template plutôt que dans chaque pièce.

C’est surtout ce que je cherchais : une configuration plus facile à maintenir, sans perdre la possibilité d’adapter chaque affichage.

✅ Ce que j’ai gagné avec cette modification

Au final, je conserve le fonctionnement que j’aimais déjà : les températures restent directement visibles sur le plan de la maison.

Mais j’ai maintenant une présentation plus légère, avec l’humidité au même endroit.

Et grâce au template, je peux reproduire cet affichage dans plusieurs pièces sans multiplier les blocs de configuration identiques.

Le petit détournement du conditional me permet de conserver le cercle et la jauge ensemble, avec un seul appel pour chaque pièce.

🎯 Conclusion

Je n’ai changé ni mes capteurs ni le principe de mon dashboard.

J’ai simplement remplacé mes anciens badges par des jauges, ajouté un fond discret et regroupé le tout dans un modèle réutilisable.

Le résultat me convient mieux visuellement, et la configuration reste plus simple à faire évoluer.

Pour moi, c’est une bonne façon de moderniser un dashboard existant : améliorer la présentation, sans tout recommencer.