Custom Card per Home Assistant con Design Minimal: le 17 WeSmart Cards

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.

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.

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.

Le card, una per una

Eccole tutte. Diciassette 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.

L’opzione collapse_when_off nasconde i controlli quando la luce è spenta e li mostra automaticamente all’accensione — utile per tenere la dashboard compatta.

type: custom:wesmart-light-card
entity: light.living_room
theme: dark
show_brightness: true
show_color_temp: true
show_color: true
collapse_when_off: false

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.

type: custom:wesmart-lights-card
title: Soggiorno
theme: dark
entities:
- light.ceiling
- entity: light.floor_lamp
  name: Piantana
  icon: mdi:floor-lamp

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 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 e in riscaldamento il bordo si scalda di arancione, in raffreddamento di blu. Funziona con qualsiasi entità climate.* di Home Assistant.

type: custom:wesmart-climate-card
entity: climate.living_room
theme: dark
show_fan_mode: true

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.

type: custom:wesmart-climate-compact-card
title: Riscaldamento Piano Superiore
theme: dark
entities:
- climate.master_bedroom
- entity: climate.guest_room
  name: Ospiti
- climate.bathroom

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.

type: custom:wesmart-sensors-card
title: Sensori Casa
theme: dark
entities:
- sensor.temperature_soggiorno
- sensor.humidity_soggiorno
- entity: sensor.co2_cucina
  name: CO2 Cucina
  alert_above: 800
- entity: sensor.battery_door
  name: Batteria porta

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.

type: custom:wesmart-doors-card
title: Porte & Finestre
theme: dark
entities:
- binary_sensor.porta_ingresso
- binary_sensor.finestra_cucina
- entity: binary_sensor.garage
  name: Garage
  device_class: garage_door

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.

type: custom:wesmart-history-card
title: Storico Casa
theme: dark
hours: 24
entities:
- light.soggiorno
- sensor.temperatura_cucina
- entity: binary_sensor.porta_ingresso
  name: Porta Ingresso

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.

type: custom:wesmart-buttons-bar-card
theme: dark
title: Azioni Rapide
buttons:
- name: Luci
  icon: mdi:lightbulb
  entity: light.soggiorno
- name: Film
  icon: mdi:movie-open
  service: scene.turn_on
  service_data:
    entity_id: scene.serata_film
- name: TV
  icon: mdi:television
  entity: switch.tv

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.

type: custom:wesmart-buttons-grid-card
title: Casa
icon: mdi:home
theme: dark
columns: 3
buttons:
- name: Luci Soggiorno
  icon: mdi:lightbulb
  entity: light.soggiorno
- name: TV
  icon: mdi:television
  entity: switch.tv
- name: Film
  icon: mdi:movie-open
  service: scene.turn_on
  service_data:
    entity_id: scene.serata_film

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.

type: custom:wesmart-battery-status-card
title: Stato Batterie
display_type: circular
entities:
- sensor.phone_battery
- entity: sensor.tablet_battery
  name: Tablet
  display_type: linear
- entity: sensor.watch_battery
  name: Orologio
  display_type: icon

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.

type: custom:wesmart-switches-card
title: Interruttori Cucina
entities:
- switch.kettle
- entity: light.counter_light
  name: Sottopensile
  icon: mdi:led-strip-variant
- input_boolean.coffee_timer

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.

type: custom:wesmart-clock-card
theme: dark
extras_layout: sidebar
translate_weather: true
extra_entities:
- weather.home
- entity: sensor.outdoor_temperature
  icon: mdi:thermometer-high
- entity: sensor.humidity
  icon: mdi:water-percent

WeSmart Chart Card

La Chart Card nasce per un caso d’uso diverso dalla History Card: invece di mostrare la cronologia di singole entità su righe separate, sovrappone più linee nello stesso grafico. Ideale per confrontare temperature tra stanze, umidità di più sensori o qualsiasi grandezza numerica che ha senso leggere insieme in un colpo d’occhio.

Il grafico SVG supporta il drag-to-zoom in memoria — trascini per zoomare su un intervallo, doppio click per tornare alla vista completa, senza nessun re-fetch verso Home Assistant. Al passaggio del mouse appare un tooltip con ora e valori di tutte le entità in quel punto. In basso c’è una legenda con il dot colorato, il valore corrente e il range min-max del periodo selezionato.

Per entità binarie (switch, sensori on/off) viene mostrata automaticamente una barra timeline invece della linea, come nella History Card.

type: custom:wesmart-chart-card
title: Sensori Casa
theme: dark
hours: 24
show_grid: false
zoom: true
entities:
- entity: sensor.temperatura_soggiorno
  name: Temperatura
- entity: sensor.humidity_bagno
  name: Umidita

WeSmart Media Player Card

La Media Player Card porta il controllo audio e video direttamente nella dashboard, con un livello di dettaglio che le card native di Home Assistant non offrono. L’album art dell’elemento in riproduzione diventa lo sfondo della card — blurred e sovrapposto — con la thumbnail in primo piano. Se l’entità non ha album art, appare un’icona di fallback che rispetta comunque il design system.

La barra di avanzamento è animata in tempo reale: invece di richiedere aggiornamenti a Home Assistant ogni secondo, la card calcola la posizione localmente e la aggiorna fluidamente. Cliccando sulla barra si fa seek direttamente alla posizione — se l’integrazione lo supporta. Il pulsante repeat cicla tra off, all e one. Il pill di stato in header cambia colore: verde animato per in riproduzione, arancione per in pausa, grigio per idle o spento.

I controlli sono adattativi: se l’integrazione non supporta shuffle, repeat o volume, i pulsanti corrispondenti vengono nascosti automaticamente. Compatibile con Sonos, Spotify, Apple TV, Samsung TV, Chromecast, Plex, Kodi, VLC, MPD e qualsiasi integrazione media_player.* di Home Assistant.

type: custom:wesmart-media-player-card
entity: media_player.living_room
title: Living Room
theme: dark
show_shuffle: true
show_repeat: true
show_volume: true
show_source: false

WeSmart Weather Card

La Weather Card è pensata per avere il meteo sempre in vista nella dashboard, con più informazioni di quelle che si vedono normalmente su una card nativa. L’icona della condizione è grande, colorata e con il glow specifico per ogni stato — il sole ha il suo giallo, la pioggia il suo blu, la neve il suo bianco. Sotto appare la temperatura in caratteri grandi con il “feels like” accanto.

Nella fascia delle statistiche ci sono pill separati per umidità, vento (con direzione cardinale), pressione, visibilità e UV index. I pill sono configurabili — puoi mostrare solo ciò che ti interessa. Il forecast è selezionabile tra giornaliero e orario, con un numero di slot configurabile da 1 a 7. Funziona con qualsiasi entità weather.* di Home Assistant.

type: custom:wesmart-weather-card
entity: weather.home
title: Milano
theme: dark
forecast_type: daily
forecast_days: 5
show_humidity: true
show_wind: true
show_pressure: false
show_visibility: false

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 perche 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.

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.

Esiste anche la variante WeSmart Infinite Chart Card, che applica lo stesso motore HSL alla Chart Card: i colori multi-entità vengono calcolati con angolo aureo (hue + i x 137.5) per garantire sempre armonia cromatica tra le linee, indipendentemente dal colore base scelto.

type: custom:wesmart-infinite-color-card
title: Storico Casa
color: '#f73747'
theme: dark
hours: 24
entities:
- light.soggiorno
- sensor.temperatura
- binary_sensor.porta_ingresso

È 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. Ho scritto un tutorial completo sulla WeSmart Infinite Color Card con tutti i dettagli sul motore HSL e gli esempi pratici per dashboard multi-stanza.

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.

Se vuoi una guida passo dopo passo con tutti i dettagli di configurazione e gli esempi YAML per ogni card, leggi il tutorial completo sull’installazione delle WeSmart Custom Cards.

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.

Conclusioni

WeSmart Custom Cards nasce da un’esigenza concreta: avere una dashboard di Home Assistant che sia funzionale e piacevole da usare senza dover mettere insieme decine di soluzioni diverse. Le 17 card della collezione coprono i casi d’uso più comuni — luci, clima, sensori, porte, media player, meteo, batterie — con un design coerente, minimal e pensato per stare bene su un tablet fisso in casa.

Il progetto è open source, gratuito e disponibile su GitHub. Non richiede HACS per l’installazione, basta copiare i file .js nella cartella www di Home Assistant. Ogni card è un file autonomo, zero dipendenze esterne.

Se vuoi partire subito, il primo passo è scaricare le card dal repository e seguire la guida completa all’installazione delle WeSmart Custom Cards — trovi gli esempi YAML pronti per tutte le 17 card. Se invece ti interessa la versione con palette colori dinamica, c’è il tutorial sulla WeSmart Infinite Color Card con il motore HSL spiegato nel dettaglio.