HA-Animated-cards è una collezione di schede pronte all’uso (67 modelli al momento in cui si scrive) per “animare” un dashboard di Home Assistant, soprattutto se già utilizzi Mushroom. L’idea non è di mettere brillantini ovunque: le animazioni sono piuttosto discrete, pulite, e si attivano quando ha senso. Una lavatrice “gira” quando consuma, un ventilatore inizia a girare quando è realmente acceso, una presa “brilla” solo se sta prelevando potenza, ecc.
Il punto che fa piacere: non è una “enorme” scheda personalizzata che aggiunge una tonnellata di JavaScript. Il progetto si basa principalmente su Mushroom come base, e su card-mod per iniettare lo stile (CSS) e le animazioni. Risultato: è leggera, e si integra molto bene in un dashboard già esistente.
Perché è interessante in Home Assistant
Un dashboard lo consulti al volo, più volte al giorno. E nella vita reale, “vedere” lo stato in un attimo a volte vale più che “leggere” un valore. HA-Animated-cards offre proprio questa lettura istantanea.
Prendiamo tre situazioni molto concrete.
La lavatrice è “Accesa”, sì… ma sta davvero girando? Con un’animazione attivata sulla potenza (W), puoi vedere immediatamente se il ciclo è in corso o se la macchina è semplicemente in standby.
Una batteria al 23%: la vedi. Ma se si sta caricando, vuoi anche capirlo senza entrare nei dettagli. I modelli “battery/progress” possono mostrare un comportamento diverso quando un sensore “caricatore” è attivo (tipicamente per uno smartphone).
Temperatura / umidità: le schede “environment” possono reagire visivamente a seconda delle soglie, e persino mostrare un grafico interattivo nel tempo per comprendere una tendenza (umidità che aumenta dopo la doccia, temperatura che scende di notte, ecc.).
In breve, si guadagna in leggibilità, e ci si sorprende a usare il dashboard con più piacere (sì, è un vero argomento… un dashboard che ci piace guardare, lo teniamo aggiornato!).
Requisiti
La base consigliata dall’autore è semplice: HACS, Mushroom (schede e tema), e card-mod (installabile tramite HACS in 2 clic).
A seconda dei modelli, è possibile anche incrociare mushroom-legacy-template-card (spesso menzionato come dipendenza pratica), e per alcune varianti “con grafico”, schede complementari come mini-graph-card e vertical-stack-in-card.
Un dettaglio che evita di strapparti i capelli: si consiglia di utilizzare una visualizzazione della dashboard in modalità Sezioni o Masonry, e se le tue animazioni sembrano non attivarsi, cambiare il tipo di vista può risolvere il problema.
Installazione: la logica (semplice) di HA-Animated-cards
HA-Animated-cards non si installa come un’integrazione Home Assistant classica. Il principio è piuttosto “copia-incolla”: crei una scheda Mushroom (o una scheda manuale a seconda del modello), la configuri normalmente (entità, nome, icona…), poi incolli il blocco di stile/animazione fornito dal progetto nella sezione card_mod.
È importante: non cercare di “aggiungere il deposito in HACS” come se fosse un plugin da installare. Qui, recuperi pezzi di YAML + stile da incollare nelle tue schede.
Messa in opera passo dopo passo
In pratica, la messa in opera è quindi molto semplice:
Apri il tuo dashboard, poi applica il tema Mushroom sulla vista dove andrà a posarsi le schede (è chiaramente raccomandato).
Aggiungi la scheda di base, spesso una Mushroom Entity Card (o una Mushroom Light Card per le luci).
Regola i campi standard (entità, nome, icona, informazioni…), poi passi in modalità editor di codice e incolli lo stile dalla sezione card_mod fornita da HA-Animated-cards.
Sostituisci le entità richieste nel codice copiato. Per alcuni modelli, è “in due posti” (esempio tipico: le schede ambientali + grafico).
E regola le soglie (temperature, watt, percentuali) per adattarle alla TUA casa. Perché una lavatrice, una VMC o un radiatore non hanno tutti la stessa firma di consumo, ed è proprio qui che queste schede diventano “intelligenti”.
Esempio 1: scheda “presa intelligente” controllata dalla potenza
Un caso d’uso molto parlante: una presa connessa a una lavatrice, un asciugatrice, una stampante 3D, o persino un server.
Crea una Mushroom Entity Card sull’entità della presa (switch). Poi incolla l’animazione corrispondente, e rendila “intelligente”: l’animazione non dipende più solo dallo stato On/Off, ma da un sensore di potenza (W). Quando la potenza supera una soglia (spesso 0 W è sufficiente), l’animazione inizia. Puoi anche cambiare l’operatore di confronto a seconda delle tue esigenze.
Piccolo dettaglio che conta: affinché card-mod recuperi correttamente il colore, l’autore raccomanda di scegliere un vero colore per l’icona, ed evitare le opzioni “primary” o “accent”.
Esempio 2: schede ambientali (temperatura / umidità) con grafico interattivo
È il genere di scheda che fa dire “ok, qui è elegante” in 2 secondi.
Il metodo mostrato è molto diretto: aggiungi una scheda manuale nel dashboard, incolla il YAML del modello, poi sostituisci l’entità del sensore nei punti indicati (tipicamente, una volta per la visualizzazione principale e una volta per il grafico). Poi, adatta i valori min/max o le soglie utilizzate affinché la scala si adatti alla tua stanza (una cantina umida non si regola come una camera…).
Per guadagnare spazio, il trucco consiste nel combinare due schede affiancate tramite una Grid Card (2 colonne), poi regolare l’altezza delle schede e la larghezza del grafico affinché il tutto rimanga compatto.
Esempio 3: schede batteria / percentuale (smartphone, sensore, download…)
Questi modelli si applicano a tutto ciò che espone una percentuale: la batteria di un telefono, la batteria di un sensore Zigbee, il progresso di una stampa 3D, il progresso di un download…
La demo propone di partire da una Mushroom Entity Card sul sensore della batteria, senza forzare un’icona personalizzata, e con un colore piuttosto bianco/grigio chiaro. Poi, incolli la parte card_mod del modello scelto.
Per un telefono, c’è un bonus interessante: puoi aggiungere un sensore “caricatore” (collegato / in carica) per mostrare un’animazione specifica quando sta caricando.
E per quanto riguarda la personalizzazione, rimaniamo nel concreto: variabili per la dimensione dei testi (primario/secondario), dimensione dell’icona, e persino una riga da commentare/eliminare se non ti piace la posizione “in un angolo”.
Suggerimenti e trappole classiche
Se un’animazione “non funziona”, inizia verificando due punti molto banali: il tipo di vista del dashboard (alcune persone notano che cambiare vista sblocca la situazione) e il fatto di utilizzare il tema Mushroom sulla vista.
Se una scheda dipende dal colore (luci, icone che devono “riprendere” la tonalità), presta attenzione alle istruzioni di configurazione: per alcuni tipi, non si mette colore all’icona, per altri invece è necessaria una vera colore (non primary/accent).
Se controlli un’animazione su un valore numerico (watt, temperatura, umidità), prenditi 2 minuti per scegliere una soglia che corrisponda alla tua attrezzatura. È questa regolazione che trasforma un’animazione “gadget” in un vero indicatore utile.
Dove trovare i modelli e come andare oltre
Il progetto è centralizzato su GitHub, e la filosofia è semplice: scegli una scheda, copia il YAML / lo stile, sostituisci le entità, poi adatta.
E se ti piace il formato video, l’autore pubblica demo molto “passo dopo passo”, con regolarmente nuovi modelli (schede richieste dalla comunità, varianti più compatte, versioni con grafico, ecc.).
