🔥 HA-Animated-cards : Le Tweak Home Assistant qui change tout (sans JavaScript lourd)

HA-Animated-cards est une collection de cartes prêtes à l’emploi (67 modèles au moment où ces lignes sont écrites) pour “animer” un dashboard Home Assistant, surtout si vous utilisez déjà Mushroom. L’idée n’est pas de coller des paillettes partout : les animations sont plutôt discrètes, propres, et elles s’activent quand ça a du sens. Un lave-linge “tourne” quand il consomme, un ventilateur se met à tourner quand il est réellement en marche, une prise “brille” seulement si elle tire de la puissance, etc.

Le point qui fait plaisir : ce n’est pas une “énorme” carte custom qui ajoute une tonne de JavaScript. Le projet s’appuie surtout sur Mushroom comme base, et sur card-mod pour injecter le style (CSS) et les animations. Résultat : c’est léger, et ça s’intègre très bien dans un dashboard déjà existant.

Pourquoi c’est intéressant dans Home Assistant

Un dashboard, on le consulte vite fait, plusieurs fois par jour. Et dans la vraie vie, “voir” l’état en une fraction de seconde vaut parfois mieux que “lire” une valeur. HA-Animated-cards apporte justement cette lecture instantanée.

Prenons trois situations très concrètes.

La machine à laver est “On”, oui… mais est-ce qu’elle tourne vraiment ? Avec une animation déclenchée sur la puissance (W), vous voyez immédiatement si le cycle est en cours ou si la machine est juste en veille.

Une batterie à 23% : vous le voyez. Mais si elle charge, vous voulez aussi le comprendre sans entrer dans le détail. Les modèles “battery/progress” peuvent afficher un comportement différent quand un capteur “chargeur” est actif (typiquement pour un smartphone).

Température / humidité : les cartes “environment” peuvent réagir visuellement selon des seuils, et même afficher un graphe interactif sur la durée pour comprendre une tendance (humidité qui grimpe après la douche, température qui décroche la nuit, etc.).

Bref, on gagne en lisibilité, et on se surprend à utiliser le dashboard avec plus de plaisir (oui, c’est un vrai argument… un tableau de bord qu’on aime regarder, on le garde à jour !).

Prérequis

Le socle conseillé par l’auteur est simple : HACS, Mushroom (cartes et thème), et card-mod (installable via HACS en 2 clics).

Selon les modèles, vous pourrez aussi croiser mushroom-legacy-template-card (souvent mentionné comme dépendance pratique), et pour certaines variantes “avec graph”, des cartes complémentaires comme mini-graph-card et vertical-stack-in-card.

Un détail qui évite de s’arracher les cheveux : il est recommandé d’utiliser un affichage de dashboard en mode Sections ou Masonry, et si vos animations semblent ne pas se déclencher, changer le type de vue peut résoudre le souci.

Installation : la logique (simple) de HA-Animated-cards

HA-Animated-cards ne s’installe pas comme une intégration Home Assistant classique. Le principe est plutôt “copier-coller” : vous créez une carte Mushroom (ou une carte manuelle selon le modèle), vous la configurez normalement (entité, nom, icône…), puis vous collez le bloc de style/animation fourni par le projet dans la section card_mod.

C’est important : ne cherchez pas à “ajouter le dépôt dans HACS” comme si c’était un plugin à installer. Ici, vous récupérez des morceaux de YAML + style à coller dans vos cartes.

Mise en place pas à pas

En pratique, la mise en place est donc très simple:

Vous ouvrez votre dashboard, puis vous appliquez le thème Mushroom sur la vue où vous allez poser les cartes (c’est clairement recommandé).

Vous ajoutez la carte de base, souvent une Mushroom Entity Card (ou une Mushroom Light Card pour les lumières).

Vous réglez les champs standards (entité, nom, icône, infos…), puis vous passez en éditeur de code et vous collez le style à partir de la section card_mod fournie par HA-Animated-cards.

Vous remplacez les entités demandées dans le code copié. Pour certains modèles, c’est “à deux endroits” (exemple typique : les cartes environnement + graphe).

Et vous ajustez les seuils (températures, watts, pourcentages) pour coller à VOTRE maison. Parce qu’un lave-linge, une VMC ou un radiateur n’ont pas tous la même signature de consommation, et c’est justement là que ces cartes deviennent “intelligentes”.

Exemple 1 : carte “prise intelligente” pilotée par la puissance

Cas d’usage très parlant : une prise connectée sur un lave-linge, un sèche-linge, une imprimante 3D, ou même un serveur.

Vous créez une Mushroom Entity Card sur l’entité de la prise (switch). Ensuite, vous collez l’animation correspondante, et vous la rendez “maligne” : l’animation ne dépend plus seulement de l’état On/Off, mais d’un capteur de puissance (W). Quand la puissance dépasse un seuil (souvent 0 W suffit), l’animation démarre. Vous pouvez aussi changer l’opérateur de comparaison selon vos besoins.

Petit détail qui compte : pour que card-mod récupère correctement la couleur, l’auteur recommande de choisir une vraie couleur d’icône, et d’éviter les options “primary” ou “accent”.

Exemple 2 : cartes environnement (température / humidité) avec graphe interactif

C’est le genre de carte qui fait dire “ok, là c’est classe” en 2 secondes.

La méthode montrée est très directe : vous ajoutez une carte manuelle dans le dashboard, vous collez le YAML du modèle, puis vous remplacez l’entité du capteur aux emplacements indiqués (typiquement, une fois pour l’affichage principal et une fois pour le graphe). Ensuite, vous adaptez les valeurs min/max ou les seuils utilisés pour que l’échelle colle à votre pièce (une cave humide ne se règle pas comme une chambre…).

Pour gagner de la place, l’astuce consiste à combiner deux cartes côte à côte via une Grid Card (2 colonnes), puis à ajuster la hauteur des cartes et la largeur du graphe pour que l’ensemble reste compact.

Exemple 3 : cartes batterie / pourcentage (smartphone, capteur, téléchargement…)

Ces modèles s’appliquent à tout ce qui expose un pourcentage : batterie de téléphone, batterie de capteur Zigbee, progression d’impression 3D, progression de téléchargement…

La démo propose de partir d’une Mushroom Entity Card sur le capteur de batterie, sans forcer d’icône custom, et avec une couleur plutôt blanche/gris clair. Ensuite, vous collez la partie card_mod du modèle choisi.

Pour un téléphone, il y a un bonus sympa : vous pouvez ajouter un capteur “chargeur” (branché / en charge) afin d’afficher une animation spécifique quand ça charge.

Et côté personnalisation, on reste dans le concret : variables pour la taille des textes (primaire/secondaire), taille de l’icône, et même une ligne à commenter/supprimer si vous n’aimez pas la position “dans un coin”.

Astuces et pièges classiques

Si une animation “ne prend pas”, commencez par vérifier deux points très bêtes : le type de vue du dashboard (certaines personnes constatent que changer de vue débloque la situation) et le fait d’utiliser le thème Mushroom sur la vue.

Si une carte dépend de la couleur (lumières, icônes qui doivent “reprendre” la teinte), faites attention aux consignes de configuration : pour certains types, on ne met pas de couleur d’icône, pour d’autres, il faut au contraire une couleur réelle (pas primary/accent).

Si vous pilotez une animation sur une valeur numérique (watts, température, humidité), prenez 2 minutes pour choisir un seuil qui correspond à votre équipement. C’est ce réglage qui transforme une animation “gadget” en vrai indicateur utile.

Où trouver les modèles et comment aller plus loin

Le projet est centralisé sur GitHub, et la philosophie est simple : vous choisissez une carte, vous copiez le YAML / le style, vous remplacez les entités, puis vous ajustez.

Et si vous aimez le format vidéo, l’auteur publie des démos très “pas à pas”, avec régulièrement des nouveaux modèles (cartes réclamées par la communauté, variantes plus compactes, versions avec graph, etc.).

Testez rapidement sur notre environnement de test !

Si vous avez loupé l’information, je vous propose depuis quelques semaines un environnement de test gratuit pour essayer rapidement Home Assistant sans rien installer chez vous. J’y ai installé tout le nécessaire pour que vous puissiez tester ces cartes animées. Ca se passe ici : https://testhomeassistant.fr (login: demo / mot de passe: maisonetdomotique).