1
11 月, 2026

Je remplace mes badges de température par des jauges dans Home Assistant

🌡️ 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 以及 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 从 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 标准 计 :

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 仪表 板 仪表 板 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.

[ICI Illustration + description : fiche du projet dans HACS, avec son nom et le bouton de téléchargement.]

🛠️ 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 显示在文件中 dist du dépôt, puis le copier dans le dossier /config/www/ 家助理

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/cercle200.png
  style:
    top: 60%
    left: 42%
    width: 120px
    transform: translate(-50%, -50%)
    opacity: 0.5

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

Voici mon fichier mais chacun peut personnaliser.

Il est placé dans le dossier /config/www/maison/, ce qui correspond à l’adresse /local/maison/cercle200.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 图片 元素, à 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/cercle200.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 以及 left pour le fond et la jauge d’une même pièce.

✅ Ce que j’ai gagné avec ce changement

Je conserve le principe que j’aimais déjà : les informations restent directement placées sur le plan de la maison.

Mais la présentation change vraiment :

  • La température reste au centre de l’affichage.
  • L’humidité apparaît au même endroit.
  • Les arcs colorés donnent une présentation plus moderne.
  • Le fond laisse davantage apparaître la pièce.

Je n’ai ajouté ni nouveau capteur ni nouvelle automatisation pour cette modification. J’ai simplement changé la façon d’afficher les données déjà disponibles.

Les captures avant et après ne sont pas prises au même moment : l’objectif est ici de comparer la présentation, pas les valeurs de température.

[ICI Illustration + description : montage avant/après avec l’ancien badge à gauche et la nouvelle jauge à droite, sur un cadrage comparable du plan.]

结论 结论

Je n’ai pas refait tout mon dashboard pour moderniser l’affichage des températures.

J’ai simplement remplacé mes anciens badges par une composition en deux couches : un cercle de fond et une carte en mode jauge.

Le résultat correspond mieux à ce que je voulais : quelque chose de plus léger sur le plan, avec la température et l’humidité au même endroit.

Comme quoi, il n’est pas toujours nécessaire de changer toute son installation. Parfois, une nouvelle façon de présenter les mêmes informations suffit.