Introduzione
Se hai già installato le WeSmart Custom Cards sai di cosa sono capaci. Design minimal, tema scuro caldo, accento arancione — un sistema visivo coerente e riconoscibile. Funziona benissimo. Ma ad un certo punto mi sono fatto una domanda: e se qualcuno volesse un colore diverso?
Da quella domanda è nata la WeSmart Infinite Color Card.
Il limite della palette fissa
Le card della
collezione WeSmart-Original
hanno una palette definita: charcoal caldo come sfondo, arancione
#D97757 come accento, bianco caldo
per i testi. E' una scelta precisa, nata dall'ispirazione all'interfaccia di
Claude AI, e visivamente funziona molto bene.
Il problema e' che e' fissa. Se vuoi abbinare le card al tema della tua dashboard, se preferisci un blu al posto dell'arancione, o se vuoi semplicemente differenziare visivamente le sezioni della tua interfaccia — con le card Original non puoi farlo. Devi accettare il design cosi' com'e'.
Non e' un difetto grave, ma e' un limite reale. E quando lavori su un progetto open source, i limiti ti danno fastidio.
L'idea del motore HSL
La soluzione non era creare varianti colorate delle card — sarebbe stato un lavoro enorme e poco scalabile. L'idea giusta era un motore che generasse la palette in automatico a partire da un singolo colore di input.
HSL — Hue, Saturation, Lightness — e' il modello colore perfetto per questo. A differenza di RGB, HSL separa l'identita' del colore (la tonalita', Hue) dalla sua intensita' e luminosita'. Questo significa che puoi prendere qualsiasi colore, estrarne la tonalita', e costruire attorno ad essa un'intera palette coerente semplicemente variando saturazione e luminosita' in modo matematico.
In pratica funziona cosi': dai alla card un codice hex — un rosso, un blu, un verde, qualsiasi cosa. La card converte quel colore in HSL, estrae la tonalita' e da li' genera automaticamente tutti i token visivi: sfondo molto scuro con quella tonalita', superfici leggermente piu' chiare, testi quasi bianchi con una leggera tinta, accento vivace. Il tutto senza che tu debba pensarci.
Il principio in sintesi:
Un solo valore. Una palette intera. Coerente per definizione.
Cosa cambia rispetto alla Original
Funzionalmente la Infinite Color Card e' identica alla WeSmart History Card: stessa struttura, stesse funzionalita', stesso comportamento.
- Grafico a linee SVG con gradient fill per i sensori numerici
- Timeline a barre per i binary sensor con periodi attivi evidenziati
- Pill temporali interattivi: 1h · 6h · 24h · 7d
- Badge stato corrente per ogni entita'
- Stat riepilogativa per ogni entita' — percentuale attivita' per i binari, min/max per i numerici
- Tap su una riga per aprire il dialog More Info di Home Assistant
- Tema dark · light · auto
L'unica differenza e' il parametro
color. Tutto il resto e' identico.
WeSmart History Card — palette fissa
type: custom:wesmart-history-card
title: Storico Casa
theme: dark
hours: 24
entities:
- sensor.temperatura_cucina
- binary_sensor.porta_ingressoWeSmart Infinite Color Card — palette dinamica
type: custom:wesmart-infinite-color-card
color: '#3b82f6'
title: Storico Casa
theme: dark
hours: 24
entities:
- sensor.temperatura_cucina
- binary_sensor.porta_ingresso
Una riga in piu' — color — e la
card si ridipinge completamente. Sfondo, superfici, accenti, testi, gradiente
del grafico: tutto cambia in base al colore che hai scelto.
Nota sul default:
Se ometti color il default e'
#D97757 — esattamente
l'arancione WeSmart. In quel caso il risultato e' visivamente identico alla
History Card Original.
Casi d'uso pratici
Dashboard multi-stanza con colori diversi per ogni ambiente
Hai una view per il soggiorno, una per la cucina, una per la camera. Con la Infinite Color Card puoi assegnare un colore diverso a ogni stanza mantenendo la stessa struttura visiva. Blu per la camera, verde per il giardino, arancione per il soggiorno — ogni sezione ha la sua identita' cromatica senza perdere la coerenza del design.
# Soggiorno — arancione WeSmart
type: custom:wesmart-infinite-color-card
color: '#D97757'
title: Storico Soggiorno
# Camera — blu notte
type: custom:wesmart-infinite-color-card
color: '#3b82f6'
title: Storico Camera
# Giardino — verde
type: custom:wesmart-infinite-color-card
color: '#10b981'
title: Storico Giardino
# Studio — viola
type: custom:wesmart-infinite-color-card
color: '#a855f7'
title: Storico Studio
Abbinamento a temi Dashboard esistenti
Se usi gia' un tema personalizzato su Home Assistant con un colore primario definito, puoi passare quel colore alla Infinite Color Card e ottenere una card perfettamente integrata nel tuo design esistente.
Monitoraggio energetico differenziato
Se hai piu' contatori o piu' circuiti da monitorare, colori diversi aiutano a distinguerli a colpo d'occhio senza dover leggere il titolo della card. Abbinalo all' Energy Dashboard di Home Assistant per una visualizzazione ancora piu' chiara.
Come installarla
L'installazione segue esattamente lo stesso processo delle card Original. Copi
il file nella cartella
config/www/, lo registri come
risorsa JavaScript e fai un hard refresh.
File da copiare:
config/www/wesmart-infinite-color-card.js
In Home Assistant — Impostazioni — Dashboard — Risorse:
| URL | Tipo |
|---|---|
| /local/wesmart-infinite-color-card.js | JavaScript module |
Guida completa all'installazione:
Per la guida completa all'installazione di tutte le card consulta il tutorial dedicato all'installazione delle WeSmart Custom Cards.
Se non hai ancora installato HACS su Home Assistant, ti conviene farlo prima: semplifica notevolmente la gestione delle custom card.
Tutte le opzioni
| Opzione | Tipo | Default | Descrizione |
|---|---|---|---|
| color | string | #D97757 | Colore base hex — genera l'intera palette |
| title | string | History | Intestazione card |
| icon | string | mdi:chart-line | Icona header |
| theme | string | dark | dark · light · auto |
| hours | number | 24 | Range temporale default |
| entities | list | — | Obbligatorio. Qualsiasi tipo di entita' |
Conclusioni
La Infinite Color Card non e' una card diversa — e' la stessa History Card con una liberta' in piu'. Se sei soddisfatto del design Original non hai bisogno di cambiarla. Ma se hai sempre voluto personalizzare il colore della tua dashboard Home Assistant senza riscrivere CSS o installare temi complicati, questo e' il modo piu' semplice per farlo.
Un hex. Una palette. Zero complicazioni.
