Aurora Glass v3: dashboard animata per Home Assistant, guida da zero

Cosa costruiamo

Alla fine avrai in Home Assistant una plancia a tutto schermo con un cielo che segue l'ora reale, dieci mondi animati tra cui scegliere, luci e scene fatte di illustrazioni animate, allarme, sensori di movimento e di apertura, clima, telecamere e una vista Energia con i costi in euro.

Cosa ottieni, in immagini

La plancia Aurora Glass è una scheda per Home Assistant: cambia con l'ora, ha dieci paesaggi animati, undici effetti meteo e pulsanti che sono vere illustrazioni. Ecco tutto, prima di costruirla.

Dieci mondi, quattro momenti del giorno

Ogni mondo ha la sua alba, il suo giorno, il suo tramonto e la sua notte: sole e luna percorrono il cielo e i colori dell'intera interfaccia seguono l'ora reale. Qui li vedi al tramonto.

Undici effetti meteo

Pioggia, temporale con fulmini, neve, nebbia, foglie, petali, lucciole, stelle cadenti, fuochi d'artificio, bolle e coriandoli: si sovrappongono a qualsiasi mondo e si scelgono con un tocco.

Pulsanti che sono immagini (e GIF animate)

Luci, scene, sensori, allarme e clima non sono icone: sono illustrazioni, e quando accendi una luce diventano GIF animate. Puoi sostituirle con le tue.

Energia in euro, clima e sicurezza

La vista Energia mostra la potenza in tempo reale e, con la tariffa della tua bolletta, i costi veri di oggi, del mese e dell'anno. Ci sono poi il pannello del climatizzatore e la vista Sicurezza con allarme, sensori e telecamere.

Telefono, tablet e schermo a parete

Prima di cominciare

• Home Assistant già installato, con un utente amministratore.
• Un modo per copiare file nella cartella di configurazione: il componente aggiuntivo File editor (il più semplice), oppure Samba share o Studio Code Server.
• Le tue luci, i sensori e (se li hai) allarme, clima ed energia già visibili in Home Assistant.

1. Scarica il pacchetto

Usa il pulsante «Scarica il pacchetto» in cima a questa pagina e prendi Aurora Glass v3 per Home Assistant. Decomprimi lo zip: troverai una cartella aurora-glass-v3 con questo contenuto.

I file che vanno dentro Home Assistant sono quelli in www/aurora-v3. I tre file .yaml sono esempi da aprire con un editor di testo e incollare più avanti.

2. Copia i file in Home Assistant

La scheda e le immagini vanno nella cartella www della configurazione di Home Assistant. Tutto ciò che sta in www viene servito come /local/….

Metodo A · File editor (consigliato)

1. In Home Assistant apri Impostazioni → Componenti aggiuntivi → Add-on store, cerca File editor, premi Installa, poi Avvia e attiva Mostra nella barra laterale.
2. Apri File editor dalla barra laterale e sfoglia i file con l'icona della cartella. Se non c'è già, crea la cartella www; dentro creane un'altra chiamata aurora-v3.
3. Entra in aurora-v3 e carica il file aurora-v3.js con l'opzione di caricamento file. Poi crea la cartella btn e caricaci tutte le immagini del pacchetto (puoi selezionarle tutte insieme).

Metodo B · Samba share

Installa e avvia Samba share, poi dal computer apri la risorsa di rete config del tuo Home Assistant (nel nome di rete che gli hai dato, di solito «homeassistant»). Trascina dentro la cartella www il contenuto di www/aurora-v3 del pacchetto.

Metodo C · Studio Code Server o SSH

Se li usi già, copia la cartella aurora-v3 in www/ con il tuo strumento.

Prova: apri nel browser l'indirizzo del tuo Home Assistant seguito da /local/aurora-v3/aurora-v3.js. Se vedi molto testo che inizia con «Aurora Glass v3», i file sono al posto giusto. Se vedi «404», rivedi le cartelle.

3. Aggiungi la risorsa

Home Assistant deve sapere che esiste una scheda personalizzata. Si fa registrando il file come risorsa.

1. Attiva la modalità avanzata: clicca il tuo nome in fondo alla barra laterale (il Profilo) e accendi Modalità avanzata. Senza questa, la voce «Risorse» non compare.
2. Vai in Impostazioni → Plance, clicca il menu ⋮ in alto a destra e scegli Risorse (la stessa pagina si apre anche da una plancia in modifica, con ⋮ → Gestisci le risorse).
3. Premi + Aggiungi risorsa. In URL scrivi /local/aurora-v3/aurora-v3.js?v=1 e come Tipo di risorsa scegli Modulo JavaScript. Poi Crea.

URL della risorsa

/local/aurora-v3/aurora-v3.js?v=1

4. Crea la plancia

1. Vai in Impostazioni → Plance e premi + Aggiungi plancia.
2. Scegli Nuova plancia da zero.
3. Come titolo scrivi Aurora, scegli un'icona (per esempio mdi:home-heart), lascia attivo Mostra nella barra laterale e premi Crea.

5. Incolla la scheda

Apri la plancia Aurora dalla barra laterale. Premi la matita in alto a destra, poi il menu ⋮ e scegli Editor di configurazione testuale. Cancella tutto il testo e incolla questo (è lo stesso del file dashboard-esempio.yaml), poi Salva.

dashboard-esempio.yaml

title: Aurora
views:
  - title: Casa
    path: casa
    icon: mdi:home-heart
    panel: true            # la scheda occupa tutta la pagina
    cards:
      - type: custom:aurora-v3-card
        assets: /local/aurora-v3/btn/

6. Collega le tue entità

Ogni luce, sensore o dispositivo in Home Assistant ha un nome tecnico, l'entità (per esempio light.soggiorno). Per trovarli: Strumenti per sviluppatori → Stati, e scrivi nel filtro l'inizio del nome (light., binary_sensor.…).

Torna nell'editor di configurazione testuale e aggiungi, sotto assets, il blocco entities con solo ciò che hai. Ecco un esempio completo con tre luci e l'allarme (rispetta i rientri: ogni livello è di due spazi):

La plancia con le tue luci

title: Aurora
views:
  - title: Casa
    path: casa
    icon: mdi:home-heart
    panel: true
    cards:
      - type: custom:aurora-v3-card
        assets: /local/aurora-v3/btn/
        entities:
          lights:
            salotto: light.soggiorno
            cucina: light.cucina_soffitto
            camera: switch.luce_camera
          alarm: alarm_control_panel.allarme

Le luci possono essere light., switch. o qualunque cosa si accenda e spenga. Le stanze disponibili sono: salotto, ingresso, corridoio, cucina, balcone, camera, cameretta, bagno_piccolo, bagno_doccia, lavanderia, sgabuzzino. Se non hai una stanza, non scriverla: resta senza entità e la scheda la mostra «Non disponibile».

Energia e tariffa

La vista Energia compare da sola quando indichi un sensore di potenza. Il percorso, dal contatore agli euro:

Il minimo: la potenza di adesso

Solo potenza

        entities:
          power: sensor.il_tuo_sensore_potenza      # Watt
          energy:
            power: sensor.il_tuo_sensore_potenza

Con questo hai il quadrante e i grafici a 3 ore, 24 ore e 7 giorni.

I kWh: oggi, ieri, mese, anno

Servono un sensore con i kWh totali (che crescono sempre) e dei contatori per giorno, mese e anno. Il file aurora-energia.yaml del pacchetto li crea per te: copialo in /config/packages/ (o incolla le due sezioni in configuration.yaml), sostituisci SENSORE_ENERGIA_KWH con il tuo sensore e riavvia Home Assistant.

In configuration.yaml (una volta sola)

homeassistant:
  packages: !include_dir_named packages

Poi, nella scheda

          energy:
            power: sensor.il_tuo_sensore_potenza
            energyTotal: sensor.il_tuo_sensore_energia_kwh
            today: sensor.aurora_energia_oggi
            yesterday: sensor.aurora_energia_ieri
            month: sensor.aurora_energia_mese
            lastMonth: sensor.aurora_energia_mese_scorso
            year: sensor.aurora_energia_anno

Il costo vero: imposta la tariffa

Nella vista Energia tocca la barra Tariffa (o uno qualsiasi dei riquadri dei costi). Scrivi quanto paghi un kWh, oppure apri «Non lo so: calcolalo dalla bolletta» e inserisci il totale da pagare e i kWh consumati: il risultato include anche quota fissa, trasporto e imposte, ed è il costo reale di ogni kWh.

Al primo salvataggio la scheda crea in Home Assistant un campo numerico (input_number.prezzo_energia): la tariffa vale così per tutti i dispositivi e puoi cambiarla anche da Impostazioni → Dispositivi e servizi → Helper. Serve un utente amministratore; altrimenti resta salvata solo su quel dispositivo.

Da quel momento ogni cifra è kWh × tariffa: i riquadri, «Costa adesso» in euro all'ora, la stima di fine mese e il grafico giornaliero, che con l'interruttore kWh / € mostra i costi giorno per giorno.

Clima e telecamere

Climatizzatore

Indica la tua entità climate e compare il pannello: modalità (spento, auto, freddo, deumidifica, ventola, caldo), temperatura con − e +, ventola, alette e preset. L'illustrazione cambia con la modalità.

Clima

        entities:
          climate: climate.soggiorno

Telecamere (vista Sicurezza)

Ogni telecamera può avere un'anteprima che si aggiorna da sola, un pulsante Diretta (video in tempo reale, si ferma dopo 2 minuti o quando esci), oppure solo l'immagine dell'ultimo movimento per le telecamere che non danno lo stream.

Telecamere

        entities:
          cameras:
            - { n: Ingresso, img: camera.ingresso_snapshot, live: camera.ingresso, poll: 20 }
            - { n: Giardino, kind: motion, img: image.giardino_ultimo_movimento, cam: camera.giardino, poll: 60 }

Personalizza

Il pulsante Stile apre il pannello dove scegli il mondo, l'ora del giorno da simulare, gli effetti meteo e lo stile dei pulsanti. Le scelte si ricordano su ogni dispositivo.

Cambiare le immagini dei pulsanti

• Da un dispositivo: Stile → Modifica le immagini dei pulsanti, tocca un pulsante e scegli una delle immagini della libreria o trascina un tuo file (PNG, JPG, WebP o GIF animata fino a 3 MB). Resta salvata in quel browser.
• Per tutti i dispositivi: sostituisci il file nella cartella www/aurora-v3/btn con uno dallo stesso nome (per esempio luce_salotto_on.gif), poi ricarica la pagina senza cache (Ctrl+F5).
• Misure consigliate: quadrate, 256 × 256 pixel; le GIF «accese» meglio sotto i 500 KB.

Mondi, effetti e tema

Dieci mondi, undici effetti che si sovrappongono a ogni mondo, tema scuro e chiaro (l'icona luna in alto), e la modalità Compatti per chi preferisce icone semplici o ha un tablet datato.

Aggiornare e rimuovere

• Aggiornare: sostituisci aurora-v3.js in www/aurora-v3 con la versione nuova, poi in Impostazioni → Plance → Risorse alza il numero dopo ?v=.
• Rimuovere tutto: elimina la plancia «Aurora», elimina la risorsa e cancella la cartella www/aurora-v3. Non viene toccato altro.

Se qualcosa non va

• Vedo «Custom element doesn't exist: aurora-v3-card» o una scheda rossa. La risorsa non è registrata o il file non si trova. Controlla: 1) la risorsa è /local/aurora-v3/aurora-v3.js?v=1 di tipo Modulo JavaScript; 2) aprendo quell'indirizzo nel browser vedi del testo e non «404»; 3) se la cartella www era nuova, hai riavviato Home Assistant; 4) hai ricaricato con Ctrl+F5.
• La plancia si vede ma le immagini dei pulsanti sono vuote. La cartella delle immagini non coincide. Nella scheda assets deve essere /local/aurora-v3/btn/ (con la barra finale) e i file devono stare in www/aurora-v3/btn.
• Le luci sono grigie e dicono «Non disponibile». Il nome dell'entità non esiste (errore di battitura?) oppure il dispositivo è davvero offline. Controllalo in Strumenti per sviluppatori → Stati. Se un dispositivo ogni tanto va «non disponibile» per qualche secondo, è un problema della sua connessione, non della scheda.
• La vista Energia non compare. Compare solo se energy.power (o power) punta a un sensore che esiste. Controlla il nome in Stati.
• I costi sono a zero o dicono «Tariffa non impostata». Tocca la barra Tariffa e salva il prezzo del kWh. Finché non lo fai, la scheda usa eventuali sensori di costo che hai già (costToday…) o un prezzo di esempio.
• La tariffa non si salva in Home Assistant. Per creare il campo numerico serve un utente amministratore. In alternativa crealo tu: Impostazioni → Dispositivi e servizi → Helper → Crea helper → Numero, nome «Prezzo energia», minimo 0, massimo 5, passo 0,001, modalità Campo di input.
• Il tablet è lento. Dal pannello Stile scegli un mondo semplice (Casetta o Mare), togli l'effetto e attiva i pulsanti «Compatti». Chiudi le altre schede del browser.

Domande frequenti

Raccoglie dati o usa servizi esterni?

No. Funziona tutta in locale dentro Home Assistant. L'unica richiesta esterna è quella dei font Google; se vuoi evitarla, scaricali e servili da www.

Posso usarla sul tablet a muro in modalità a schermo intero?

Sì: apri la plancia Aurora dal tablet e usa la modalità a schermo intero del browser o un'app «kiosk». La scheda occupa tutta la pagina.