Home Assistant: come passare alla nuova interfaccia Lovelace

Quando si configura per la prima volta Home Assistant i dispositivi che vengono rilevati sono automaticamente visualizzati nel frontend in maniera abbastanza caotica. Per ordinare le entità per gruppi, card e schede fino ad oggi si utilizzava il file groups.yalm, come descritto in un precedente articolo.

Una nuova interfaccia più bella

Lovelace è la nuova UI utente di Home Assistant, ancora in versione sperimentale, che promette di essere più veloce, versatile e soprattutto più personalizzabile rispetto alla precedente. Quella che segue è una brevissima guida su come passare al nuovo frontend su una installazione già attiva, una pillola non esaustiva ma che speriamo sia utile a fornire una base di partenza.

Per iniziare bisogna creare un nuovo file chiamato ui-lovelace.yaml all’interno della cartella Config di Home Assistant. Riavviamo il server e all’interno del file cominciamo a descrivere la nostra UI seguendo le indicazioni che troverete in questa guida. Per vedere il risultato colleghiamoci da browser al nostro server <YOUR HASS URL>/lovelace. Fortunatamente non è necessario riavviare Home Assistant quando modifichiamo il file di configurazione ui-lovelace.yaml, è sufficiente un refresh del browser per vedere subito i cambiamenti.

Iniziamo con una struttura base:

title: Home
views:
  - title: Principale
    id: principale
    icon: mdi:home-assistant
    cards:
    - type: glance
      title: Presenza
      show_state: false
      entities:
        - binary_sensor.motion_sensor_158d0000f89a78
        - binary_sensor.motion_sensor_158d0000fa2b84

Sotto views inizieremo ad elencare le varie schede ed all’interno di queste le relative card, stando sempre ben attenti a rispettare l’indentazione. Quando ce ne sarà più d’una bisognerà strutturarle in questo modo:

title: Home 
views:
  - title: Pagina principale 
    cards:
    - type: .....
  - title: Pagina due
    cards:
    - type: .....
  - title: Pagina XX

In ogni view, dopo il title: c’è icon: (opzionale) con cui possiamo indicare l’icona che andrà a sostituire il nome della scheda nel Menu blu in alto. A seguire troviamo badge: in cui elencheremo tutte quelle entità che non vogliamo inserire nella card, ma mantenere come badge (il pallino con il contorno rosso che normalmente usiamo per i dispositivi di presenza e tracciamento). Infine le card: per ognuna delle quali dovremo prima di tutto indicare il type: poi il title: ed infine l’elenco delle entities:

views:
  - title: Pagina Principale
    icon: mdi:home
    badge:
      - device_tracker.rocco_iphone
      - device_tracker.faso_iphone
    card:
      - type: entities
        title: nostra prima card su Lovelace
        show_header_toggle: true #mostra l'interruttore generale
        entities:
          - sun.sun
          - sensor.fasilunari

Le card sono il punto di forza di lovelace

I punti di forza di questa nuova interfaccia sono fondamentalmente due, il primo è che non è necessario riavviare o ricaricare i gruppi ad ogni cambiamento sul file ui-lovelace.yaml, potente visionare le modifiche quasi in tempo reale (giusto un refresh di pagina), il secondo e più importante sono le nuove card. Se ne possono creare con un gran numero di stili differenti, portando la personalizzazione della configurazione ad un livello ben superiore rispetto al passato. L’indicazione sul “modello” di card si specifica col parametro type:

cards:
- type: glance
  title: Presenza
  show_state: false
  entities:
    - binary_sensor.motion_sensor_158d0000f89a78
    - binary_sensor.motion_sensor_158d0000fa2b84

Proviamo ad utilizzare glance, una card compatta che in questo esempio ho sfruttato per vedere lo stato dei sensori di movimento.

Aggiungiamo qualche altro elemento alla precedente e poi utilizziamo un’altra card, la card entities, per i sensori delle finestre, al cui interno inseriremo un elemento di formattazione divider.

title: Home
views:
  - title: Principale
    id: principale
    icon: mdi:home-assistant
    cards:
    - type: glance
      title: Presenza
      show_state: false
      entities:
        - binary_sensor.motion_sensor_158d0000f89a78
        - binary_sensor.motion_sensor_158d0000fa2b84
        - binary_sensor.motion_sensor_158d0000e7c432
        - binary_sensor.motion_sensor_158d000112b5c9
    - type: entities
      title: Serramenti
      entities:
        - binary_sensor.door_window_sensor_158d0000f800be
        - binary_sensor.door_window_sensor_158d0000fa7617
        - type: divider
        - binary_sensor.door_window_sensor_158d0000f80498
        - binary_sensor.door_window_sensor_158d0000f0ceba

Salviamo e vediamo subito sul browser il risultato dopo un veloce refresh. Se non notate cambiamenti è possibile che vi siano errori logici o di formattazione, quindi ricontrollare il codice.

Creiamo ora una nuova schermata utilizzando la card picture-glance per visualizzare il flusso video di una IP cam e qualche altro sensore.

title: Home
views:
  - title: Camere
    id: Camere
    cards:
    - type: picture-glance
      entities:
       - sensor.temperature_158d0001069f7a
       - sensor.humidity_158d0001069f7a
       - light.giardino
       - input_boolean.foscam
       - switch.03200019b4e62d0707aa
      camera_image: camera.1giardino

Con questa potremo vedere il flusso video e contemporaneamente controllare i valori dei sensori o attivare e disattivare degli interruttori correlati (ad esempio una luce che illumina l’area inquadrata). Grazie alle opzioni di picture-glance possiamo anche usare delle immagini di sfondo fisse in questo modo:

- type: picture-glance
  title: Irrigazione
  entities:
    - input_boolean.irrigazione_ch1
    - input_boolean.irrigazione_ch2
    - input_boolean.irrigazione_ch3
    - binary_sensor.water_leak_sensor_158d0001d78ac1
  image: /local/grass.png

Se abbiamo configurato nel file config.yalm il componente climate, è anche possibile inserire la card personalizzata per la regolazione di un termostato con un bel effetto di regolazione della temperatura:

- type: thermostat
  entity: climate.termostato

Come avrete visto, Lovelace permette un controllo ed una personalizzazione ben superiore rispetto al precedente frontend. Già ora ci sono molte card disponibili ma vi consiglio di controllare gli aggiornamenti perché migliorano continuamente.

Quando avete configurato le vostre entità e siete pronti a passare a Lovelace è sufficiente selezionare su info negli strumenti per gli sviluppatori, Set lovelace as default page on this device.

Tip: Se avete già istallato Home Assistant da un po’ di tempo probabilmente avrete il vostro file group.yaml configurato in modo soddisfacente e la voglia di mettervi a riscrivere tutto da capo rasenterà lo zero assoluto. Per fortuna nel menu Hass.io tra i Community Hass.io Add-ons, trovate “Lovelace Migration”. Questo semplicissimo add-on non farà altro che creare il file ui-lovelace.yaml basandosi sulla vostra attuale interfaccia. Una volta utilizzato si potrà disattivare o anche disinstallare ed iniziare a lavorare sul file di configurazione con il vostro editor preferito.

Autore
Cesare Munari (@cmunari)

Revisori
Davide (@daxda)
Maurizio Natali (@simplemal)

SmartHome Channel

Special Team - I SaggiUtenti del canale #SmartHome presente sul nostro Slack uniti per creare guide e recensioni dedicate all'automazione. Partecipa anche tu entrando nel gruppo effettuando una donazione dal SaggioSupporto.

Commenti controllati Oltre a richiedere rispetto ed educazione, vi ricordiamo che tutti i commenti con un link entrano in coda di moderazione e possono passare diverse ore prima che un admin li attivi. Anche i punti senza uno spazio dopo possono essere considerati link causando lo stesso problema.