Presentazione WeSmart Custom Cards
Se hai mai provato a costruire una dashboard seria con Home Assistant, sai già di cosa sto per parlare.
Quello della dashboard di Home Assistant è sempre stato un problema dal punto di vista estetico, almeno per me. È proprio da questa frustrazione che è nato WeSmart Custom Cards, una collezione di card personalizzate che ho sviluppato da zero — usando anche l'AI come strumento di sviluppo, per capire fino a che punto possa aiutare concretamente in un progetto del genere. Sono sempre stato alla ricerca di qualcosa di diverso: funzionale, ma anche bello da vedere — soprattutto quando si vuole creare un pannello di controllo da installare in casa, su un tablet o su un display dedicato.
Nel panorama di Home Assistant ci sono tantissime soluzioni e card disponibili. Si può personalizzare praticamente tutto: card, colori, sfondi e molto altro. Cercando in giro si può fare un ottimo lavoro, questo è innegabile. Io però volevo qualcosa di diverso. Semplice, funzionale, bello da vedere e già pronto all'uso. Non troppo difficile da configurare — anche se qualcosa in termini di personalizzazione andava necessariamente concesso.
Le card sono poco flessibili dal punto di vista del layout, ma ho cercato di rimediare sviluppando card specifiche per ogni singolo caso d'uso. Il concetto di base è semplice: fare poche cose, ma farle bene.
In questo articolo:
- Il design system e l'ispirazione dietro le card
- Come Claude AI e Gemini hanno aiutato nello sviluppo
- Showcase completo delle 15 card disponibili
- La Infinite Color Card e il motore HSL
- Come scaricarle e installarle su Home Assistant
L'ispirazione e il design system
Il punto di partenza è sempre lo stesso: semplicità. L'obiettivo era evitare il cosiddetto caos informativo — card sovraccariche di dati, dashboard affollate che diventano illeggibili dopo cinque minuti. Ogni WeSmart custom card per Home Assistant è pensata per fare una cosa sola e farla bene, con uno stile minimal che mette al centro le informazioni davvero utili e nasconde tutto il resto.
Come puoi vedere dalle card per le luci e gli interruttori, l'approccio è volutamente essenziale: niente fronzoli, niente elementi decorativi inutili. Solo ciò che serve.
Per quanto riguarda lo stile, mi sono ispirato direttamente all'interfaccia di Claude AI — le card sono state sviluppate con il suo aiuto, quindi è sembrato naturale prenderne anche l'estetica come riferimento. Da lì vengono il charcoal caldo come sfondo, l'arancione come accento primario e la tipografia minimale. Il risultato è un design riconoscibile, caldo, che non stanca la vista anche dopo ore di utilizzo.
Il nome WeSmart deriva direttamente dal sito WeAreSmart.it — tagliato e condensato in un'unica parola. Era il nome più naturale per identificare questa collezione di card come parte del progetto più grande.
Caratteristiche del design system
- Un file, zero dipendenze. Ogni card è un singolo file JavaScript: lo copi nella cartella www di Home Assistant, lo registri come risorsa e funziona. Nessuna libreria esterna, nessun processo di build, nessuna dipendenza da aggiornare.
- Tre temi supportati. Tutte le card supportano dark, light e auto. Il tema auto segue le preferenze di sistema — ideale per chi usa un tablet fisso in casa.
- Installazione in cinque minuti. Chiunque può installarle senza impazzire — ed era esattamente questo l'obiettivo.
Se vuoi confrontare questa soluzione con altre card popolari come Bubble Card, Mushroom e Button Card, ho scritto un'analisi dettagliata che aiuta a capire quale scegliere in base alle proprie esigenze.
Sviluppare con l'AI: Claude e Gemini
Dopo tutte queste premesse, cosa ho fatto concretamente? Ho aperto un nuovo progetto, l'ho chiamato WeSmart-Original — il suffisso "Original" non è casuale, esiste anche una variante con palette colori dinamica, ma ne parliamo in un capitolo e in un articolo dedicato — e ho chiesto a Claude AI di creare la prima card.
Sono partito da quella più semplice: la card per le luci. Volevo qualcosa di minimal, bello da vedere ma funzionale, che permettesse di accendere e spegnere le luci e, all'occorrenza, di regolare alcuni parametri: luminosità, temperatura colore e colore, ovviamente solo per le luci che lo supportano.
Da quella prima card è partito tutto il resto. La card singola per una luce specifica ha generato l'esigenza di una card per gestire tutte le luci insieme in un'unica vista — e così via, card dopo card, ognuna orientata a risolvere un singolo problema specifico. Tutte le WeSmart custom card per Home Assistant risentono di questa filosofia di costruzione: semplici, focalizzate, senza sovrapposizioni.
Claude AI e Gemini AI sono stati i veri assistenti nella costruzione e nella correzione del codice. Claude AI è stato utilizzato all'interno di VS Code, mentre Gemini AI è stato usato tramite Antigravity come ambiente di sviluppo. Devo dire che l'esperienza è stata sorprendentemente positiva: entrambi conoscono bene Home Assistant e le sue possibilità con l'AI e sanno come si sviluppano le custom card. Non ci sono state grosse difficoltà — al netto di correzioni e aggiustamenti, hanno centrato l'obiettivo quasi immediatamente.
Nota sull'esperimento:
È stato un esperimento interessante anche da questo punto di vista: capire fino a che punto l'AI possa accompagnare uno sviluppatore nella costruzione di un progetto concreto. La risposta, almeno in questo caso, è: molto più di quanto mi aspettassi. L'estetica finale può piacere o non piacere — quello è soggettivo — ma con il giusto prompt si può davvero chiedere qualsiasi cosa. Una buona esperienza, senza dubbio.
Le card, una per una
Eccole tutte. Quindici card, ognuna pensata per risolvere un problema specifico della dashboard di Home Assistant. Niente di superfluo, niente di ridondante — ogni card ha il suo posto e il suo scopo.
WeSmart Light Card
La card per una singola luce, con controllo completo. Toggle on/off, slider per la luminosità, slider per la temperatura colore e una palette di otto colori predefiniti. Rileva automaticamente le capacità della luce — se non supporta il colore, lo slider non appare. Semplice e pulita.
WeSmart Light Card — controllo completo per una singola luce
WeSmart Lights Card
Stessa filosofia della Light Card, ma per gestire più luci insieme in una lista compatta. Ogni riga ha il suo toggle individuale, e in alto c'è un toggle master per accendere o spegnere tutto con un tap. Il sottotitolo mostra in tempo reale quante luci sono accese. Perfetta per raggruppare le luci di una stanza.
WeSmart Lights Expand Card
Una variante della Lights Card con un'aggiunta molto comoda: cliccando su una riga si espande un pannello inline con gli slider di luminosità e temperatura colore. Niente popup, niente navigazione — tutto resta nella dashboard. Un solo pannello aperto alla volta, animazione fluida.
WeSmart Lights Expand Card — pannello inline con slider di luminosita e temperatura
WeSmart Climate Card
La card per il termostato o il climatizzatore. Mostra la temperatura attuale in grande, il badge umidità, i pulsanti +/- per la temperatura target e i pill per selezionare la modalità HVAC. Quando è in riscaldamento il bordo si scalda di arancione, in raffreddamento di blu. Funziona con qualsiasi entità climate.* di Home Assistant.
WeSmart Climate Compact Card
L'alternativa alla Climate Card per chi gestisce più zone climatiche. Invece di una card per stanza, hai tutto in una lista: ogni riga mostra la temperatura attuale, i pulsanti +/- e lo stato. Ideale se hai il riscaldamento autonomo in più stanze.
WeSmart Sensors Card
Lista di sensori ambientali con badge valore e sistema di alert integrato. La card sa già che sopra i 1000 ppm di CO2 c'è un problema, che sotto il 20% di batteria è ora di caricare, che una temperatura fuori range merita attenzione. Se qualcosa non va, il contatore alert appare nel header in arancione. Puoi anche definire soglie personalizzate per ogni sensore.
WeSmart Doors Card
Lista di porte, finestre e contatti binari con pill stato colorato: arancione se aperto, verde se chiuso. Il header mostra in sintesi quante sono aperte o se tutto è chiuso. Supporta diverse classi di dispositivo — porte, finestre, garage, serrature, sensori di movimento e altro.
WeSmart History Card
Sostituto della History Graph nativa di Home Assistant, decisamente più leggibile. Per i sensori numerici mostra un grafico a linea SVG con gradient fill, per i binary sensor una timeline a barre con i periodi di attività evidenziati in arancione. In alto puoi selezionare il range temporale: 1 ora, 6 ore, 24 ore o 7 giorni.
WeSmart History Card — grafico SVG con gradient fill e timeline a barre per binary sensor
WeSmart Buttons Bar Card
Una barra orizzontale compatta di pulsanti azione, pensata come riga di accesso rapido. Ogni pulsante può fare il toggle di un'entità, chiamare un servizio, o entrambe le cose. Quando un'entità è attiva il pulsante si illumina di arancione. Altezza ridotta, perfetta come riga fissa in fondo a una view.
WeSmart Buttons Grid Card
La versione a griglia della Buttons Bar Card. Stessa logica, layout quadrato, numero di colonne che si adatta automaticamente alla larghezza della card. Ideale per stanze con molti dispositivi da controllare — cucina, studio, ingresso.
WeSmart Switches Card
Card per gestire switch e toggle multipli in lista. L'icona di ogni riga è interattiva: cliccandola si fa il toggle diretto del dispositivo, con glow arancione quando è attivo. Cliccando sul testo della riga si apre invece il dialog More Info di Home Assistant. Funziona con switch, luci, input boolean e qualsiasi entità toggle.
WeSmart Battery Status Card
Monitoraggio batterie per tutti i dispositivi della casa in una sola card. Tre modalità di visualizzazione a scelta: icona MDI dinamica, barra lineare orizzontale o anello SVG animato — e puoi combinarle liberamente, dispositivo per dispositivo. Sotto il 20% il contatore "N scariche" appare nel header. Sotto il 15% il colore diventa arancione critico.
WeSmart Clock Card
Un orologio ambient da mettere in cima alla dashboard, con la possibilità di
aggiungere fino a tre entità extra in una barra inferiore o in una sidebar laterale.
Perfetto abbinato a meteo, temperatura esterna e umidità. Con
translate_weather: true gli stati
del meteo vengono tradotti automaticamente in italiano.
WeSmart Infinite Color Card
La card più recente e quella che apre a scenari nuovi. È una History Card — stesse funzionalità, stesso layout — ma con un motore HSL che genera l'intera palette visiva da un singolo colore che scegli tu. Dai un hex, la card si ridipinge completamente: sfondo, superfici, accenti, testi. Ne parliamo in dettaglio nel prossimo capitolo.
WeSmart Commander Hub (Sperimentale non completo)
È la card sperimentale. Funziona come un pannello di controllo centrale con tre tab: Riepilogo (luci accese, porte aperte, batterie scariche), Controlli (toggle rapidi per i dispositivi più usati) e Sensori (valori ambientali in tempo reale). Include un saluto dinamico e un orologio. Se dovessi scegliere una sola card da installare, sarebbe questa.
La Infinite Color Card: il salto in avanti
Mentre lavoravo alle card della collezione WeSmart-Original mi sono reso conto di una cosa: il design era bello, ma fisso. Charcoal caldo, arancione, bianco caldo — sempre quelli. Funziona benissimo come sistema coerente, ma non lascia spazio a chi vuole qualcosa di diverso, magari per abbinare le card al resto della propria dashboard o semplicemente perché preferisce un altro colore.
Da questa riflessione è nata la WeSmart Infinite Color Card.
Il concetto è semplice: invece di una palette fissa, la card ha un motore HSL integrato che genera l'intera palette visiva a partire da un singolo colore che scegli tu. Dai un codice hex nel YAML — un rosso, un blu, un verde, qualsiasi cosa — e la card si ridipinge completamente. Sfondo, superfici, accenti, testi, gradiente del grafico: tutto deriva matematicamente da quel colore.
Esempi di utilizzo pratico
- Una history card rossa per la stanza dei server
- Un blu per la dashboard del meteo
- Un verde per il monitoraggio energetico
- Qualsiasi hex, la card si aggiorna automaticamente
Funzionalmente è identica alla WeSmart History Card: timeline a barre per i sensori binari, grafico a linee SVG per i sensori numerici, pill temporali interattivi, badge stato per ogni entità. La differenza è tutta nel colore — o meglio, nella libertà di sceglierlo.
WeSmart Infinite Color Card — il motore HSL che genera l'intera palette da un singolo colore hex
È un progetto a sé stante rispetto alla collezione Original, e merita un articolo dedicato dove approfondire il funzionamento del motore HSL e tutti i casi d'uso.
Come ottenerle
Tutte le WeSmart Custom Cards sono disponibili gratuitamente su GitHub. Trovi l'intero progetto, diviso in WeSmart-Original e WeSmart-InfiniteColor, al seguente indirizzo: github.com/WeAreSmart-home/wesmart-original-custom-cards.
L'installazione è semplice: copi i file .js nella cartella
config/www/ di Home Assistant, li
registri come risorse JavaScript nelle impostazioni della dashboard e fai un hard
refresh del browser. Cinque minuti e sei operativo.
Passaggi per l'installazione
- Scarica i file .js dal repository GitHub del progetto WeSmart Custom Cards
-
Copia i file nella cartella
config/www/di Home Assistant - Vai in Impostazioni > Dashboard e registra ogni file come risorsa JavaScript
- Fai un hard refresh del browser (Ctrl+Shift+R o Cmd+Shift+R)
- Le card sono disponibili nell'editor della dashboard di Home Assistant
Se vuoi una guida passo dopo passo con tutti i dettagli di configurazione e gli esempi YAML per ogni card, ho scritto un tutorial completo dedicato. (On line dall' 11 Marzo 2026)
Se provi le card e vuoi condividere la tua dashboard, o se trovi un bug e vuoi segnalarlo, apri pure una issue su GitHub — il progetto è open source e i contributi sono benvenuti.
Nota sull'installazione:
Per installare custom card su Home Assistant hai bisogno di accesso alla cartella
www nella tua configurazione. Se
non hai ancora configurato
HACS (Home Assistant Community Store), ti consiglio di farlo prima: semplifica notevolmente la gestione di tutte le
risorse personalizzate.
Prova WeSmart Custom Cards
Hai installato le card e costruito la tua dashboard? Condividi uno screenshot sui social taggando @wearesmartit — è sempre interessante vedere come ognuno personalizza il proprio pannello di controllo.
Per domande, bug o contributi, il repository GitHub del progetto è aperto.
