Lovelace

Enrico Lovelace Gennaio 3, 2019 | 0

1 Configure UI:
2 Raw config editor:
3 CUSTOM CARD
4 CARD STANDARD

Innanzitutto cos’è Lovelace? Si tratta di un’interfaccia grafica che a breve diventerà definitiva su Home Assistant, ci permette di personalizzare ogni parte della nostra interfaccia, le diverse entità vengono raggruppate in card. Di queste card esistono quelle ufficiali e quelle custom cioè realizzate appositamente per essere integrate in HA però necessitano di file esterni per funzionare a volte con i nuovi aggiornamenti queste custom o vengono integrate in quelle ufficiali o subiscono delle modifiche e a volte è necessario mettere mano al codice.

Home Assistan ci mette a disposizione due metodi per programmare l’interfaccia Lovelace: la classica in modalità yaml o tramite interfaccia grafica.

LOVELACE MODALITÀ YAML
Per abilitare questa modalità dovremmo aggiungere al file configurator.yaml le seguenti righe:

poi se non lo avete dovrete creare il file ui-lovelace.yaml nella cartella config di Home Assistant (con gli ultimi aggiornamenti HA lo ha creato in automatico). In questo file ora potrete personalizzare l’interfaccia Lovelace di Home Assistant.

LOVELACE MODALITÀ INTERFACCIA GRAFICA
Se non viene dichiarato nulla nel file configurator.yaml in automatico la modalità grafica viene abilitata, vediamo ora come e dove trovare i comandi.

in alto a destro troveremo 3 icone la prima il campanello si troveranno tutte le notifiche permanenti, la seconda la tralasciamo, la terza i 3 puntini si aprirà il menù delle modifiche

In questo menù troveremo 4 voci:
Unused entities: troveremo tutte le entity non usate nelle varie card
Configure UI: l’interfaccia grafica per Lovelace che sarà quella che ci interessa maggiormente
Raw config editor: da qui potremmo accedere a tutto il codice di programmazione di Lovelace, anche questo utile
Help: ci manda solamente alla pagina della guida ufficiale di Lovelace.

Configure UI:

Appena selezioniamo la voce, sull’interfaccia e sulle card appariranno nuove funzioni

Ci avvisa che siamo in modalità modifica e terminate le modifiche premere la X per confermarle
EDIT della singola card
Spostare la card all’interno dello stesso Tab
Edita i Tab già presenti
Aggiungere nuovi Tab
Aggiungere nuove card

2. MODIFICA SINGOLA CARD

Da questo menù sarà possibile modificare la singola card con un’anteprima in tempo reale. Sarà possibile anche cambiare tipologia di card basta modificare la riga tipe:xx e ovviamente rispettare le dichiarazioni per quella specifica card.

4. EDITITOR DEI TAB

In questo menù sarà possibile creare nuovi Tab con titolo, icona, eventuale url per il richiamo da altre card, selezionare il tema e aggiungere o editare i Badges presenti nella pagina che non sono altro che le entità a pallino tondo che abbiamo sempre visto nella vecchi interfaccia di Home Assistant

5. AGGIUNTA NUOVI TAB
Si aprirà lo stesso menù di prima ma vuoto tutto da completare

6. AGGIUNTA NUOVA CARD

Comparirà un menù dove si potranno già scegliere le card che si vuole aggiungere, in questo modo il codice sarà già presente e ognuna di essa avrà una diversa modalità si settaggio ovviamente in base alle caratteristiche della card. In alternativa con SKIP si potrà inserire il codice a mano per la creazione della card.

Raw config editor:

Da questo menù sarà possibile visualizzare ed editare l’intero codice di Lovelace.
Ho notato che inserendo alcune custom card si ha difficoltà ad accedere a questo menù ho risolto andando su Informazioni (sesta icona in basso a sinistra menù sviluppatori) poi cliccando su Try out the new Lovelace UI che non fa altro che rimandarti alla home in modalità Lovelace e poi rifare la procedura per arrivare al Raw config editor.

CUSTOM CARD

Le custom card come spiegato in precedenza sono delle card realizzare da sviluppatori esterni e quindi non ancora assimilati all’interno di Home Assistant, per questo hanno bisogno di essere installate in locale. Su internet facendo una ricerca si trovano le custom card in GitHub, li si trovano le istruzioni di come vanno dichiarate ma la procedura per installarle è sempre la stessa: scaricato il file si inserisce nella cartella share/www/custom_ui poi nel file di Lovelace che sia quello modalità yaml o modalità grafica all’inizio del codice inseriamo ad esempio questa stringa:

Si noti che nella dichiarazione del percorso del file va specificato ovviamente il percorso esatto la cartella www o local sono la stessa cosa

In aggiunta per alcune card è possibile aggiungere una ulteriore dichiarazione per l’aggiornamento in automatico va sempre scritto all’inizio del codice sotto o sopra la dichairazione resources: come nell’immagine poco sopra

Tutte queste informazioni comunque si trovano nella descrizione della custom card

CARD STANDARD

Le card standard ad oggi 02/02/2019 sono:

Alarm Panel	Conditional	Entities	Entity Button
Entity Filter	Gauge	Glance	History Graph
Horizontal Stack Vertical Stack	Iframe	Light	Map
Markdown	Media Control	Picture	Picture Elements
Picture Entity	Picture Glance	Plant Status	Sensor
Shopping List	Thermostat	Weather Forecast