Tutorial Installazione

WeSmart Custom Cards per Home Assistant: installazione e configurazione completa

avatar di max novadi

Max Novadi

Pubblicato 10 Marzo 2026

WeSmart Custom Cards per Home Assistant: dashboard con design minimal e tema scuro

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:

FILE Lista file
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à:

PERCORSO Struttura cartelle
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.

YAML Esempio configurazione
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.

YAML Esempio configurazione
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.

YAML Esempio configurazione
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.

YAML Esempio configurazione
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 Light Card e Lights Card per Home Assistant con tema scuro
WeSmart Light Card, Lights Card e Lights Expand Card con tema scuro

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.

YAML Esempio configurazione
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.

YAML Esempio configurazione
type: custom:wesmart-climate-compact-card
title: Riscaldamento Casa
theme: dark
entities:
  - climate.soggiorno
  - entity: climate.camera
    name: Camera
  - climate.bagno
WeSmart Climate Card e Climate Compact Card per Home Assistant
WeSmart Climate Card e Climate Compact Card per la gestione delle zone climatiche

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.

YAML Esempio configurazione
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 Sensors Card per Home Assistant con alert integrati
WeSmart Sensors Card con badge valori e sistema di alert

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

YAML Esempio configurazione
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 Doors Card per Home Assistant: monitoraggio porte e finestre
WeSmart Doors Card con indicatori di stato colorati per porte e finestre

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.

YAML Esempio configurazione
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.

YAML Esempio configurazione
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.

YAML Esempio configurazione
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 Buttons Bar Card e Buttons Grid Card per Home Assistant
WeSmart Buttons Bar Card (barra orizzontale) e Buttons Grid Card (griglia adattiva)

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.

YAML Esempio configurazione
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 Switches Card per Home Assistant con toggle interattivi
WeSmart Switches Card con glow arancione al toggle

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.

YAML Esempio configurazione
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 Battery Status Card per Home Assistant con tre modalita di visualizzazione
WeSmart Battery Status Card nelle tre modalità: icon, linear e circular

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.

YAML Esempio configurazione
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
WeSmart Clock Card per Home Assistant con entita extra e orologio ambient
WeSmart Clock Card in modalità sidebar con meteo e sensori esterni

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
avatar di max novadi

Max Novadi

Blog writer specializzato in tecnologia e domotica.

Max si occupa di tendenze tecnologiche da oltre un decennio, con un'attenzione particolare alle automazioni domestiche e alla smart home, ambiti che ha approfondito in particolare con Home Assistant. Si interessa anche di intelligenza artificiale e delle sue applicazioni nella tecnologia consumer.

WeSmart Custom Cards Home Assistant Dashboard YAML Custom Cards Tutorial