Se sei arrivato qui probabilmente hai già letto la presentazione del progetto WeSmart Custom Cards e vuoi passare all'azione. Bene — in questo tutorial ti spiego come installare e configurare tutte e 14 le card su Home Assistant, con gli snippet YAML pronti all'uso per ogni singola card.
Niente teoria, si va dritti al punto.
Prerequisiti:
Home Assistant OS o Home Assistant Supervised, accesso alla cartella
config/www/ tramite File Editor,
Samba share o SSH, e una conoscenza base della configurazione YAML. Non devi
essere uno sviluppatore, ma se non hai mai aperto il file editor di Home
Assistant ti conviene fare un po' di pratica prima.
Installazione
Step 1 — Scarica i file da GitHub
Vai sul
repository GitHub del progetto
e scarica i file .js delle card
che vuoi installare. Puoi scaricare l'intero repository come
.zip oppure clonarlo se preferisci
usare Git.
I file che ti servono sono tutti nella cartella
WeSmart-Original:
wesmart-commander-hub.js
wesmart-light-card.js
wesmart-lights-card.js
wesmart-lights-expand-card.js
wesmart-climate-card.js
wesmart-climate-compact-card.js
wesmart-sensors-card.js
wesmart-doors-card.js
wesmart-history-card.js
wesmart-buttons-bar-card.js
wesmart-buttons-grid-card.js
wesmart-battery-status-card.js
wesmart-switches-card.js
wesmart-clock-card.js
Step 2 — Copia i file nella cartella www
Copia i file .js nella cartella
config/www/ della tua
installazione di Home Assistant. Se la cartella
www non esiste ancora, creala tu.
Il percorso finale sarà:
config/www/wesmart-commander-hub.js
config/www/wesmart-light-card.js
config/www/wesmart-lights-card.js
...
Puoi farlo tramite il File Editor integrato di Home Assistant, tramite Samba share o via SSH se hai il relativo add-on installato.
Step 3 — Registra le risorse in Home Assistant
Ogni file .js va registrato come
risorsa JavaScript. Vai su
Impostazioni → Dashboard → Risorse e aggiungi una
voce per ogni card che hai copiato.
| URL | Tipo |
|---|---|
| /local/wesmart-commander-hub.js | JavaScript module |
| /local/wesmart-light-card.js | JavaScript module |
| /local/wesmart-lights-card.js | JavaScript module |
| /local/wesmart-lights-expand-card.js | JavaScript module |
| /local/wesmart-climate-card.js | JavaScript module |
| /local/wesmart-climate-compact-card.js | JavaScript module |
| /local/wesmart-sensors-card.js | JavaScript module |
| /local/wesmart-doors-card.js | JavaScript module |
| /local/wesmart-history-card.js | JavaScript module |
| /local/wesmart-buttons-bar-card.js | JavaScript module |
| /local/wesmart-buttons-grid-card.js | JavaScript module |
| /local/wesmart-battery-status-card.js | JavaScript module |
| /local/wesmart-switches-card.js | JavaScript module |
| /local/wesmart-clock-card.js | JavaScript module |
Nota:
il percorso /local/ in Home
Assistant corrisponde fisicamente alla cartella
config/www/. È un alias
interno che Home Assistant gestisce in automatico.
Step 4 — Hard refresh del browser
Dopo aver aggiunto le risorse, svuota la cache del browser con un hard refresh:
-
macOS:
Cmd + Shift + R -
Windows/Linux:
Ctrl + Shift + R
Se le card non appaiono ancora, prova ad aprire una finestra in incognito o svuota completamente la cache del browser.
I temi disponibili
Tutte le WeSmart Custom Cards supportano tre temi tramite l'opzione
theme:
-
dark— sfondo charcoal caldo#1C1917, accento arancione#D97757. È il tema di riferimento del progetto, quello per cui le card sono state pensate. -
light— sfondo crema caldo#FFFEFA, testo scuro. Ideale per dashboard in ambienti molto luminosi. -
auto— segue automaticamente le preferenze di sistema (prefers-color-scheme). Particolarmente utile su tablet fissi in casa, dove il tema può cambiare con la luce ambientale.
In tutti gli esempi qui sotto uso
dark, ma puoi cambiarlo
liberamente su ogni singola card.
Configurazione card per card
WeSmart Commander Hub
La card centrale della dashboard. Tre tab integrati — Riepilogo, Controlli e Sensori — con saluto dinamico e orologio in tempo reale. Mettila sempre in cima alla tua dashboard principale.
type: custom:wesmart-commander-hub
title: Casa
entities:
- light.soggiorno
- switch.bollitore
- switch.tv
stats:
- sensor.temperatura_esterna
- sensor.consumo_energia
WeSmart Light Card
Card per una singola luce con controllo completo. Rileva automaticamente le
capacità della luce da
supported_color_modes —
gli slider appaiono solo se la luce li supporta davvero. Utile anche per le
automazioni luci
più articolate.
type: custom:wesmart-light-card
entity: light.soggiorno
theme: dark
show_brightness: true
show_color_temp: true
show_color: true
WeSmart Lights Card
Lista compatta di più luci con toggle individuale e toggle master. Il sottotitolo mostra in tempo reale quante luci sono accese.
type: custom:wesmart-lights-card
title: Soggiorno
theme: dark
entities:
- light.plafoniera
- entity: light.lampada_terra
name: Lampada Terra
icon: mdi:floor-lamp
- light.striscia_led
WeSmart Lights Expand Card
Stessa struttura della Lights Card, ma cliccando su una riga si espande un pannello inline con gli slider di luminosità e temperatura colore. Un solo pannello aperto alla volta, animazione accordion fluida.
type: custom:wesmart-lights-expand-card
title: Camera da Letto
theme: dark
entities:
- light.plafoniera_camera
- entity: light.comodino_sx
name: Comodino SX
- entity: light.comodino_dx
name: Comodino DX
WeSmart Climate Card
Card per un singolo termostato o climatizzatore. Mostra temperatura attuale, badge umidità, pulsanti +/- per la temperatura target e pill per le modalità HVAC e ventilatore. Riscaldamento: glow arancione. Raffreddamento: glow blu. Combinata con le automazioni per il riscaldamento smart offre un controllo completo delle zone climatiche.
type: custom:wesmart-climate-card
entity: climate.soggiorno
theme: dark
show_fan_mode: true
temp_step: 0.5
WeSmart Climate Compact Card
Versione a lista per gestire più zone climatiche in una sola card. Ogni riga ha temperatura attuale, pulsanti +/- e stato HVAC.
type: custom:wesmart-climate-compact-card
title: Riscaldamento Casa
theme: dark
entities:
- climate.soggiorno
- entity: climate.camera
name: Camera
- climate.bagno
WeSmart Sensors Card
Lista di sensori con badge valore e sistema di alert integrato. Alert
automatici per temperature fuori range, CO₂ alta, umidità anomala
e batteria scarica. Puoi aggiungere soglie personalizzate con
alert_above e
alert_below.
type: custom:wesmart-sensors-card
title: Sensori Casa
theme: dark
entities:
- sensor.temperatura_soggiorno
- sensor.umidita_soggiorno
- entity: sensor.co2_cucina
name: CO₂ Cucina
alert_above: 800
- entity: sensor.pm25_esterno
name: PM2.5 Esterno
alert_above: 25
WeSmart Doors Card
Lista di porte, finestre e contatti binari con pill stato colorato. Arancione se aperto, verde se chiuso. Il header mostra quante sono aperte o “Tutte chiuse”.
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. Grafico a linee SVG per sensori numerici, timeline a barre per binary sensor. Range temporale selezionabile: 1h, 6h, 24h, 7 giorni.
type: custom:wesmart-history-card
title: Storico Casa
theme: dark
hours: 24
entities:
- sensor.temperatura_cucina
- light.soggiorno
- entity: binary_sensor.porta_ingresso
name: Porta Ingresso
WeSmart Buttons Bar Card
Barra orizzontale compatta di pulsanti azione. Ogni pulsante può fare toggle su un'entità, chiamare un servizio, o entrambe le cose. Perfetta come riga di accesso rapido 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
- name: Allarme
icon: mdi:shield-home
service: alarm_control_panel.alarm_arm_away
service_data:
entity_id: alarm_control_panel.casa
WeSmart Buttons Grid Card
Griglia di pulsanti quadrati con numero di colonne auto-adattivo o fisso. Ideale per stanze con molti dispositivi da controllare.
type: custom:wesmart-buttons-grid-card
title: Cucina
icon: mdi:countertop
theme: dark
columns: 3
buttons:
- name: Luci
icon: mdi:ceiling-light
entity: light.cucina
- name: Cappa
icon: mdi:fan
entity: switch.cappa
- name: Forno
icon: mdi:stove
entity: switch.forno
- name: Caffe
icon: mdi:coffee
entity: switch.macchinetta
- name: Bollitore
icon: mdi:kettle
entity: switch.bollitore
WeSmart Switches Card
Lista di switch e toggle con icone interattive. Clic sull'icona → toggle diretto con glow arancione. Clic sul testo della riga → dialog More Info di Home Assistant.
type: custom:wesmart-switches-card
title: Prese Smart
theme: dark
entities:
- switch.bollitore
- entity: switch.scrivania
name: Presa Scrivania
icon: mdi:desk
- input_boolean.modalita_notte
WeSmart Battery Status Card
Monitoraggio batterie con tre modalità di visualizzazione: icona MDI
dinamica (icon), barra lineare
(linear) e anello SVG animato
(circular). Puoi combinarle
liberamente per ogni dispositivo.
type: custom:wesmart-battery-status-card
title: Batterie
display_type: circular
theme: dark
entities:
- sensor.batteria_telefono
- entity: sensor.batteria_tablet
name: Tablet
display_type: linear
- entity: sensor.batteria_sensore_porta
name: Sensore Porta
display_type: icon
WeSmart Clock Card
Orologio ambient con fino a tre entità extra in barra inferiore o
sidebar laterale. Con
translate_weather: true gli
stati meteo vengono tradotti automaticamente in italiano.
type: custom:wesmart-clock-card
theme: dark
time_format: 24
extras_layout: sidebar
translate_weather: true
extra_entities:
- weather.home
- entity: sensor.temperatura_esterna
icon: mdi:thermometer-high
- entity: sensor.umidita_esterna
icon: mdi:water-percent
Conclusioni
Quattordici card, una sola installazione. Una volta copiati i file e registrate le risorse puoi usare qualsiasi combinazione nella tua dashboard senza ulteriori dipendenze o configurazioni particolari.
Se vuoi capire la filosofia dietro il progetto e vedere tutte le card in azione, leggi la presentazione completa delle WeSmart Custom Cards.
Se invece sei curioso della variante con palette dinamica, c'è un articolo dedicato interamente alla WeSmart Infinite Color Card e al suo motore HSL.
Codice sorgente su GitHub
Trovi tutti i file, la documentazione e gli aggiornamenti nel repository ufficiale del progetto.
Vai al repository GitHub