“Lovelace UI”: cos’è e come funziona il frontend Home Assistant

4 minuti di lettura

Come sa bene chi utilizza da tempo Home Assistant – forse il più noto tra gli HUB personali software – l’interfaccia utente (UI) è lo strumento preposto sia per interrogare la propria domotica personale (eg. leggere il valore di un sensore) sia per comandarla nei più disparati modi. Tale interfaccia è essenzialmente basata sul web e può essere interpellata sia tramite tradizionale browser che tramite app: si tratta infatti di un’interfaccia web responsiva, ovvero in grado di adeguarsi al mezzo di visualizzazione.

Prima che, dalla versione 0.86 di Home Assistant, venisse ufficialmente introdotta la nuova interfaccia, la configurazione di Home Assistant era responsabile anche del comportamento dell’interfaccia utente. L’introduzione della nuova interfaccia, nome in codice LOVELACE, ha introdotto tutta una serie di novità di estremo rilievo.

In primis, la più rilevante novità sta nella scelta (sacrosanta) di disaccoppiare la configurazione dell’HUB dalla sua interfaccia. In pratica, dall’introduzione di Lovelace una cosa è la configurazione dell’HUB (sulla quale ci siamo spesi su tanti, diversi aspetti), un’altra la sua interfaccia utente. La definizione di quest’ultima è ora completamente a sé rispetto alla configurazione dell’HUB, aprendo così non sono a una maggiore chiarezza, ma anche a una serie di funzioni aggiuntive inizialmente non previste.

Home Assistant - lovelace-ui-comparison
il precedente modello di funzionamento (a sx) e il nuovo (dx).

Questo nuovo modello di funzionamento, come detto, ha aperto a tutta una serie di nuove funzionalità, a partire dal concetto di “Card”.

CARD

Le “Card” sono decine di modelli pre-impostati che permettono di visualizzare, presso il frontend, le più disparate informazioni relative a specifiche entità o gruppi di, nonché fornire all’utente degli strumenti per agire attivamente sulla domotica (eg. comandare qualcosa).

Home Assistant Lovelace UI presenta decine di diverse “Card” che permettono all’utente di personalizzare l’aspetto dell’interfaccia. Per portare un esempio, una delle più classiche è quella dedicata alle luci:

Home Assistant - lovelace_light_card

Nell’esempio sopra è possibile apprezzare la rappresentazione presso il frontend di due entità di tipo “Light; com’è facile intuire, non solo è possibile accendere/spegnere la luce, ma anche regolarne l’intensità (ovviamente l’entità rappresentata deve prevederlo di suo).

Inoltre, le specifiche di Lovelace consentono di definire proprie rappresentazioni grafiche, definite “Custom Card“: questo ha dato vita a una vivace produzione di Card personalizzate messe a disposizione dalla community. Sviluppare tali Card è possibile seguendo le indicazioni fornite dal team di sviluppo di Home Assistant.

La genialità delle “Card” e delle “Custom Card” sta nel fatto di prevedere, in sé, variabili e metodi, i quali permettono di personalizzare in modo molto puntuale il comportamento dell’interfaccia grafica; è però importante ricordare come tali automatismi/personalizzazioni si riferiscono solo all’ambito dell’interfaccia e non al funzionamento dell’HUB vero e proprio, il quale non è consapevole rispetto a cosa accade sulla sua interfaccia grafica (per i motivi legati al disaccoppiamento sopra descritto).

TEMI

Oltre alle “Card”, Lovelace dota l’utente di un’ulteriore possibilità ovvero quella di personalizzare il tema grafico dell’ambiente: colori, sfumature, sfondi sono gli elementi sui quali è possibile agire al fine di rendere Home Assistant più vicino ai propri gusti.

CONTROLLO

Come detto, Lovelace è presente come interfaccia di default a partire dalla versione 0.86 di Home Assistant e provvede, in autonomia, ad auto-configurarsi in base alla disponibilità di diverser entità presenti sull’HUB, il che semplifica molto ai novellini l’adozione dell’HUB. Non c’è bisogno di fare nulla: ciò che è integrato con Home Assistant appare, utilizzando le card appropriate, sul frontend.

Una volta preso confidenza con l’HUB, accedere alla personalizzazione dell’interfaccia Lovelace è particolarmente semplice: è infatti sufficiente premere sui tre puntini in alto a destra presenti sull’interfaccia e cliccare sulla voce “Configurare interfaccia utente”.

Così facendo si otterrà accesso all’editor di interfaccia (“UI Editor”) il quale consente di modificare in modo visuale i contenuti, la disposizione e il comportamento delle Card presenti sul frontend. In questa fase è possibile cliccare nuovamente sui tre puntini per accedere a due possibili viste:

  • l’elenco delle entità non utilizzate (presso il frontend);
  • l’editor di configurazione grezza.

Quest’ultimo è utile per prendere visione del combinato disposto dell’attuale configurazione Lovelace in formato testuale in notazione YAML, notazione con la quale l’utente avrà già una certa dimestichezza, trattandosi di quella utilizzata anche per la configurazione ordinaria dell’HUB. Questa vista permette di effettuare modifiche in modo testuale e, per l’appunto, grezzo, da parte degli utenti che più apprezzino questa modalità rispetto a quella grafica.

Esempi

Vediamo un paio di esempi per capire come funzioni Lovelace.

Gruppi di entità

Un classico uso di Lovelace è quello di raggruppare più entità, per esempio delle luci.
Una volta aperto l’editor di interfaccia come prima spiegato, andremo ad aggiungere una “Card” selezionando “Entities“:

Home Assistant - Lovelace - Entities

A questo punto l’interfaccia aprirà un pannello vergine del tipo scelto:

Home Assistant - Lovelace - Entities - Aggiunta elenco

nel quale andremo a indicare un titolo (facoltativo) e una o più entità, in elenco, per poi terminare con “Salva“:

Home Assistant - Lovelace - Entities - Aggiunta elenco - 2

Il risultante pannello risulterà come segue:

Home Assistant - Lovelace - Entities - Aggiunta elenco - 3

il quale potrà ora venire utilizzato per il controllo e il censimento degli stati delle entità “Light” indicate.

Termostato

Vediamo una delle card più apprezzate, quella che permette di visualizzare e controllare lo stato di un termostato. Ipotizziamo di aver infatti integrato un sistema clima (nell’esempio, un climatizzatore tradizionale integrato grazie a “SmartIR Climate”).

Una volta aperto l’editor di interfaccia come prima spiegato, andremo ad aggiungere una “Card” selezionando “Entities“:

Home Assistant - Lovelace - Thermostat

A questo punto l’interfaccia aprirà un pannello vergine del tipo scelto:

Home Assistant - Lovelace - Thermostat 2

nel quale andremo a indicare un nome (facoltativo) e l’entità da controllare per poi terminare con “Salva“:

Home Assistant - Lovelace - Thermostat 3

Il risultante pannello risulterà come segue:

Home Assistant - Lovelace - Thermostat 4

il quale potrà ora venire utilizzato per il controllo e il censimento degli stati delle entità “Climate” indicate.

Panoramica: i sistemi d’allarme, la domotica e Home Assistant



Please comment below