Come creare una dashboard Lovelace ordinata e responsive in Home Assistant

Lovelace è il sistema di dashboard di Home Assistant. Le dashboard, le view e le card sono software dell’interfaccia: non modificano il firmware dei dispositivi e non richiedono hardware specifico. La stessa configurazione può essere usata da browser, app Companion e tablet, ma le dimensioni e le azioni touch devono essere verificate sul dispositivo reale.

Prerequisiti & Hardware Necessario

• Home Assistant aggiornato con entità già disponibili e nomi verificati.
• Accesso amministrativo per creare una dashboard e modificare le card.
• Browser desktop per la prima configurazione; tablet o smartphone solo per la verifica responsive.
• Backup Home Assistant prima di passare dalla modalità storage alla gestione YAML.
• Nessun prodotto d’acquisto necessario: Lovelace è software e può essere usato con l’hardware Home Assistant già presente.

Procedura passo-passo

1. Riordina le entità prima della grafica. In Impostazioni → Aree, etichette e zone assegna ogni dispositivo a un’area e correggi nomi e icone. Una dashboard leggibile dipende da entity ID corretti, non solo dal tema.
2. Crea una dashboard visuale. Apri Impostazioni → Dashboard, crea una nuova dashboard e scegli una view di tipo Sections per il layout a griglia. L’editor visuale salva la dashboard in modalità storage e non richiede un file YAML.
3. Definisci una struttura semplice. Crea view separate per Panoramica, Luci, Clima e Sicurezza. Non accumulare tutte le entità nella prima schermata: mostra prima stato casa, luci principali, temperatura e allarmi.
4. Aggiungi card native. Usa Tile per controlli rapidi, Entities per elenchi compatti, History graph o Statistics graph per andamento, Markdown per istruzioni e Conditional per avvisi. Le card devono riferirsi a entity ID realmente esistenti.
5. Imposta un path stabile per le view. Se usi YAML, i path devono contenere caratteri semplici e non iniziare con un numero. Esempio: clima produce /lovelace/clima. Usa azioni navigate solo verso view già esistenti.
6. Prova la modalità YAML solo se serve. La modalità YAML è utile per versionare e riusare la configurazione, ma separa il file dashboard dal file configuration.yaml. Esegui un backup prima della migrazione e non modificare il file storage generato dall’editor come se fosse YAML.
7. Configura una dashboard YAML. In configuration.yaml aggiungi sotto la chiave superiore lovelace:

   lovelace:
     dashboards:
       casa:
         mode: yaml
         filename: dashboards/casa.yaml
         title: Casa
         icon: mdi:home
         show_in_sidebar: true

   Crea quindi /config/dashboards/casa.yaml. La chiave del dashboard deve contenere un trattino, salvo il dashboard predefinito lovelace; casa è un esempio valido solo se la tua versione accetta il relativo key/path secondo la documentazione corrente.
8. Inserisci view e card nel file YAML.

   views:
     - title: Panoramica
       path: panoramica
       icon: mdi:home-outline
       type: sections
       max_columns: 3
       sections:
         - type: grid
           cards:
             - type: heading
               heading: Stato casa
             - type: tile
               entity: light.soggiorno
             - type: tile
               entity: climate.soggiorno
             - type: entities
               entities:
                 - entity: sensor.temperatura_soggiorno
                 - entity: binary_sensor.porta_ingresso
     - title: Sicurezza
       path: sicurezza
       icon: mdi:shield-home
       type: sections
       sections:
         - type: grid
           cards:
             - type: tile
               entity: alarm_control_panel.casa

   Sostituisci ogni entity ID con quello disponibile nel tuo sistema. Se la tua versione non riconosce sections, usa l’editor visuale o il tipo di view documentato dalla versione installata.
9. Controlla YAML e ricarica. Usa il controllo configurazione di Home Assistant prima del riavvio. Un errore di indentazione può impedire il caricamento del dashboard; correggi il file senza eliminare il backup.
10. Aggiungi navigazione. In una card che supporta l’azione tap usa, per esempio:

    tap_action:
      action: navigate
      navigation_path: /lovelace/clima

    Il path deve corrispondere alla view e non deve contenere spazi o caratteri speciali.
11. Ottimizza per tablet. Usa card grandi, poche entità per sezione e azioni con tap chiaro. Verifica scroll, tastiera, contrasto, orientamento verticale/orizzontale e timeout dello schermo sul tablet reale.
12. Gestisci sicurezza e utenti. Non mostrare token, password o URL amministrativi in Markdown. Crea dashboard e utenti con i permessi necessari; nascondere una card non sostituisce l’autorizzazione Home Assistant.

Verifica del funzionamento

1. Apri la dashboard da browser desktop e verifica che tutte le card carichino senza errore.
2. Apri la stessa view dall’app Companion e da un tablet, in verticale e orizzontale.
3. Aziona almeno una luce, controlla un sensore e prova una navigazione tra view.
4. Ricarica il frontend e riavvia Home Assistant per verificare che la configurazione persista.
5. Controlla i registri se una card mostra “entity not found” o se il dashboard YAML non compare nella barra laterale.

Problemi comuni

FAQ essenziali

Devo usare YAML per creare una dashboard?

No. L’editor visuale è sufficiente per la maggior parte delle installazioni. YAML è utile per versionamento, riuso e configurazioni più controllate.

Posso installare card custom per migliorare la grafica?

Sì, ma sono risorse software aggiuntive e possono rompersi dopo aggiornamenti. Prima stabilizza la dashboard con card native e installa una card custom alla volta, mantenendo un backup.