community italiana di domotica personale
 
Cos’è e come funziona il frontend Home Assistant basato su “Dashboards” (ex “Lovelace UI”)

Cos’è e come funziona il frontend Home Assistant basato su “Dashboards” (ex “Lovelace UI”)

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 l’appropriata app Home Assistant Companion: si tratta infatti di un’interfaccia web responsiva, ovvero in grado di adeguarsi al mezzo di visualizzazione.

Prima che 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 “Dashboards” (un tempo “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 Dashboards 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.

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 Dashboards 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 Dashboards 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”, Dashboard 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, Dashboard è 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 Dashboards è 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 Dashboards 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 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.

PANNELLI

I “Pannelli” non sono altro che pagine contenenti “Card”. Organizzare le proprie rappresentazioni grafiche tramite pannelli è particolarmente semplice e utile: è possibile per esempio realizzare un pannello contenente i sistemi clima, uno i sistemi di illuminazione e così via. A partire dalla versione 0.107 di Home Assistant è finalmente possibile mostrare selettivamente i pannelli a specifici utenti, consentendo così tutta una serie di ulteriori usi e personalizzazioni.

Esempi

Vediamo un paio di esempi per capire come funzioni Dashboards.

Gruppi di entità

Un classico uso di Dashboards è 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 l’integrazione Home Assistant


Questa pagina è redatta, manutenuta e aggiornata dallo staff di inDomus, un gruppo di persone molto diverse tra loro che trovi, per domande e supporto, sul forum e sulla chat del sito. Alcuni link sono taggati in qualità di affiliati Amazon e riceviamo un compenso dagli acquisti idonei, utile al sostenimento del sito, ma le nostre recensioni sono tutte indipendenti e non sponsorizzate. Se ti sei perso, a tua disposizione c'è la mappa.