Nella prima parte abbiamo visto come organizzare il codice YAML per ottenere una struttura della plancia ben organizzata e facile da manutenere, grazie alla separazione dei contenuti in diverse sezioni del layout: Header, Body e Footer.

Ora iniziamo a fare sul serio e passiamo alla parte più divertente: vediamo come sviluppare al meglio ogni sezione del layout, e come avere totale controllo sul posizionamento delle nostre Card.

Per una migliore comprensione dell’argomento, se non lo avessi già fatto, ti consiglio vivamente di leggere la prima parte prima di proseguire con questo articolo.

Le dimensioni (larghezza e altezza) di una vista

La volta scorsa abbiamo costruito insieme lo scheletro di una plancia di esempio con due viste. Nelle viste abbiamo attivato l’opzione Pannello e usato come Card principale una vertical-stack, per sviluppare poi all’interno un layout diviso logicamente in sezioni.

Vertical stack in modalità pannello

La modalità Pannello renderizza la sua Card principale occupando tutta la larghezza messa a disposizione dal dispositivo utilizzato. Di conseguenza, anche tutte le card all’interno avranno lo stesso comportamento.
Questo è ottimo per noi, perché ci consente di sfruttare (senza particolari salti mortali) tutta la larghezza del tablet per organizzare il layout.

Per l’altezza (o la lunghezza, come preferisci) il discorso è diverso.

Lovelace (modulo di Frontend di Home Assistant) recepisce le nostre indicazioni, le interpreta e genera un codice HTML che poi viene decodificato dal nostro browser come una normalissima pagina Web.

Le pagine Web hanno una larghezza fissa, oppure dinamica (responsive design) in base alla risoluzione del browser, ma non hanno un’altezza definita in partenza, normalmente. Normalmente perchè lo sviluppatore può, se vuole, definire un’altezza fissa, ma sono rari casi specifici.

L’altezza di una pagina web è determinata dai contenuti, di fatto rappresenta la somma delle altezze di ogni “riga” della pagina. Più è alta una pagina e più sarà ampia la possibilità di scroll all’interno della stessa.

Le viste di Lovelace si comportano esattamente nello stesso modo, mi spiego meglio.

Il nostro layout è costruito dentro una vertical-stack. Questo significa che ogni nuova card viene posizionata sotto la precedente, sviluppando, appunto, un layout verticale.
Mi aiuto con un semplice esempio.

Ipotizziamo una vista in modalità Pannello dove dentro alla vertical-stack principale posizioniamo tre card di tipo button, una sotto l’altra.

- title: TEST
  path: test
  panel: true
  cards:
    - type: vertical-stack
      cards:
        - type: button
          name: HEADER
        - type: button
          name: BODY
        - type: button
          name: FOOTER

Il risultato è il seguente: stiamo usando solo parzialmente la superficie dello schermo e il Footer è posizionato senza alcun senso.

Esempio altezza del layout

Se invece aggiungessimo Card senza considerare l’altezza del layout disponibile, otterremmo una vista consultabile per intero solo scrollando la pagina.
E questa, a mio parere, è una situazione assolutamente da evitare per una plancia da Tablet, molto meglio avere a disposizione un pannello fisso.

Scroll Lovelace

Tutto questo per dire che cosa?

Semplicemente per chiarire che le sezioni del layout (Header, Body e Footer) sono solo degli elementi logici che ci permettono di organizzare le card nella vista, ma tocca a noi dimensionarle correttamente per ottenere un layout ordinato e senza possibilità di scroll.

Tra poco lo vedremo.

Prepariamo l'ambiente

Un modo per partire con il piede giusto è sicuramente quello di prepararci, fin da subito, un ambiente di sviluppo che ci faccia vedere esattamente quello che succede sul tablet e che ci consenta di analizzare il codice CSS della pagina.

Ecco le due cose che faremo.

  • Creiamo un utente dedicato al tablet e togliamo la sidebar
  • Impostiamo il browser Chrome del PC come ambiente virtuale

Su Home Assistant possiamo associare una plancia di default ad un utente, sfruttiamo questa opportunità per creare un utente dedicato al tablet con la sidebar non visibile.

Vai su Impostazioni -> Utenti e crea un nuovo utente chiamato tablet, senza privilegi da amministratore.

nuovo utente home assistant

Ora, dal tablet, vai nella scheda del profilo e disconnetti l’utente che stai usando, poi esegui un nuovo login con l’utente appena creato.

Bene, ora sei loggato su Home Assistant con l’utente tablet.
Torna alla scheda profilo e imposta la plancia Tablet in modo che venga caricata di default.

Ora ti dovresti trovare in questa situazione, con una sidebar visibile e senza le opzioni da amministratore.

sidebar visibile

Per nascondere la sidebar usiamo Kiosk Mode, un custom component che puoi installare via HACS.

Kiosk Mode offre diverse funzionalità che puoi approfondire nel suo repository GitHub, per il nostro scopo ci basta inserire questo codice in testa al file di configurazione principale della plancia.

kiosk_mode:
  user_settings:
    - users:
        - tablet
      hide_sidebar: true

Salva il file modificato e aggiorna la plancia con i 3 puntini in alto a destra. Infine, ricarica la pagina del browser.
Se tutto è andato per il verso giusto ora la sidebar laterale dovrebbe essere sparita.

Impostiamo Chrome del PC come Tablet virtuale

Per i motivi descritti nel capitolo precedente (ma non solo), è molto importante vedere in tempo reale come reagisce la plancia man mano che configuriamo il layout con le card.

Ovviamente la via più semplice è quella di avere il tablet vicino mentre si lavora e aggiornare ogni volta la visualizzazione della plancia. A volte questo però, per un motivo qualsiasi, potrebbe non essere possibile.
In questo caso possiamo creare un pannello virtuale sul PC con la stessa risoluzione del tablet, in modo da avere una rappresentazione della plancia precisa al pixel.

Usiamo gli strumenti per sviluppatori del browser Google Chrome.

Questi strumenti sono complessi e fanno un sacco di cose, a noi adesso interessa la parte di simulazione di un device dove andiamo a configurare le dimensioni dello schermo del tablet in possesso.

Apri gli strumenti di Chrome da >> Altri strumenti >> Strumenti per sviluppatori.

Vai nelle impostazioni con l’icona ad ingranaggio nella barra superiore degli strumenti.

(1) Seleziona il tab Devices.
(2) Clicca sul pulsante Add custom device.
(3) Assegna un nome al Device (es. Tablet HA) e inserisci le dimensioni dello schermo.

Attenzione!!

La dimensione dello schermo non sempre corrisponde alla risoluzione nativa del tuo Tablet.
Per conoscere esattamente larghezza e altezza da impostare su Chrome naviga dal Tablet a questo indirizzo e usa i valori che ti mostra nel box evidenziato qui sotto.

test risoluzione schermo

Ora clicca su Add per creare il device e chiudi la finestra delle impostazioni.

Vai alla URL di Home Assistant e apri la plancia da simulare.

Entra in modalità simulazione device con l’icona indicata qui sotto.

Seleziona il tablet tra i devices e, se necessario, correggi la percentuale di zoom per vedere la plancia correttamente.

Bene, ora dovresti vedere nel tuo PC un pannello virtuale del Tablet da usare come anteprima durante lo sviluppo della plancia.
Io, francamente, questa modalità la trovo più pratica rispetto ad usare il tablet direttamente.

Simulazione Device

Lo sviluppo della plancia

Se lo scroll annoiato e compulsivo non si è impossessato di te e hai seguito con attenzione fin qui, ora dovresti aver chiaro come realizzare e posizionare correttamente le sezioni nel layout, e dovresti anche avere un ambiente ben configurato per iniziare a sviluppare le card della plancia.

E allora sviluppiamo.

E’ superfluo dire che ognuno di noi ha idee ed esigenze diverse, per cui ovviamente sei libero di progettare il layout come meglio credi. Qui provo a descrivere anche i ragionamenti che ci sono dietro sperando possano essere un’utile fonte di ispirazione.

Vediamo quali sono i criteri che hanno indirizzato le mie scelte e una serie di consigli generali su come impostare, sezione per sezione, la creazione delle card.

Lo sviluppo della plancia lo faremo editando i vari file YAML che rappresentano le diversi sezioni del layout e usando i template di button-card, secondo quanto già descritto nei dettagli nella prima parte di questa “guida”.

Dopo aver salvato le modifiche nei file YAML di configurazione è necessario sempre aggiornare la plancia per vedere il risultato sullo schermo.
Per aggiornare la plancia fai click sui 3 puntini in alto a destra e poi su Aggiorna.

Aggiornamento plancia

Quando ho iniziato a progettare il layout con una struttura di questo tipo, avevo ben chiaro in mente quale doveva essere il ruolo di una sezione Header: mostrare informazioni rilevanti in una vista Home generica …

… oppure fornire un pannello comandi principale in relazione alla tematica della vista (in questo caso Luci).

Nell’Header di una vista, tipicamente, non abbiamo bisogno di incolonnare card una sopra l’altra, ci basta usare una horizontal-stack per organizzarle dentro una riga, una accanto all’altra, e definire un’altezza fissa che sia proporzionata alla dimensione totale dello schermo da gestire.

Per la mia plancia ho definito un’altezza di 100px per l’header della vista Home, e di 60px per le header delle altre viste tematiche.

Vediamo come ho costruito la sezione Header delle mia vista Home.
Qui dentro puoi vedere il codice completo del mio file header.yaml, relativo alla vista Home.

File header.yaml

type: horizontal-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: person.max
        name: Max
        template: sensor_person
      - type: 'custom:button-card'
        entity: person.ele
        name: Elena
        template: sensor_person
  - type: 'custom:button-card'
    entity: sensor.time
    layout: vertical
    template: no_background
    label: "[[[ return states['sensor.dark_sky_hourly_summary_tmpl'].state; ]]]"
    name: "[[[ return states['sensor.pretty_date'].state; ]]]"
    show_icon: false
    show_label: true
    show_name: true
    show_state: true
    styles:
      card:
        - height: 100px
      state:
        - font-size: 200%
        - font-weight: bold
        - justify-self: center
      label:
        - justify-self: center
        - font-size: 90%
        - color: var(--paper-item-icon-active-color)
      name:
        - justify-self: center
        - font-size: 120%
    tap_action:
      action: none        
  - type: horizontal-stack
    cards:
      - type: glance
        style:|
          :host {
            height: 100px;
          }
        entities:
          - entity: binary_sensor.pve_ubuntu_server_running
            name: SERVER
          - entity: binary_sensor.internet_status
            name: INTERNET
          - entity: binary_sensor.ups_status
            name: UPS
        show_state: false
      - type: 'custom:button-card'
        entity: sensor.cpu_temperature
        show_icon: false
        show_state: true
        name: CPU
        state_display: '[[[ return entity.state + "°" ]]]'
        styles:
          card:
            - width: 100px
            - height: 100px
          name:
            - font-size: 14px
            - margin-bottom: 15px
          state:
            - font-size: 120%
            - font-weight: bold

Analizziamo meglio il codice del file header.yaml per capire come si sviluppano le card all’interno.
In testa abbiamo una horizontal-stack con tre card all’interno, in questo modo otteniamo una riga divisa in tre colonne della stessa larghezza.

type: horizontal-stack
cards:
  - CARD 1
  - CARD 2
  - CARD 3

Nella prima colonna è configurata un’altra horizontal-stack per dividere ancora lo spazio a disposizione, con all’interno due card che usano il template button card sensor_person.

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      entity: person.max
      name: Max
      template: sensor_person
      variables:
        battery_entity: sensor.battery_cell_max   
    - type: 'custom:button-card'
      entity: person.ele
      name: Elena
      template: sensor_person
      variables:
        battery_entity: sensor.battery_cell_ele

Poi al centro una button-card composta da diversi elementi per mostrare data, ora e previsione meteo del giorno.

- type: 'custom:button-card'
  entity: sensor.time
  layout: vertical
  template: no_background
  label: "[[[ return states['sensor.dark_sky_hourly_summary_tmpl'].state; ]]]"
  name: "[[[ return states['sensor.pretty_date'].state; ]]]"
  show_icon: false
  show_label: true
  show_name: true
  show_state: true
  styles:
    card:
      - height: 100px
    state:
      - font-size: 200%
      - font-weight: bold
      - justify-self: center
    label:
      - justify-self: center
      - font-size: 90%
      - color: var(--paper-item-icon-active-color)
    name:
      - justify-self: center
      - font-size: 120%
  tap_action:
    action: none

In questo caso si tratta di una card che non sarà riutilizzata nella plancia, quindi usare un template di button card non porterebbe alcun vantaggio.

Infine, l’ultima colonna con alcuni sensori. Anche qui è presente una horizontal-stack per distribuire le card all’interno: una card Glance standard di Lovelace e una button-card custom.

- type: horizontal-stack
  cards:
    - type: glance
      style:|
        :host {
          height: 100px;
        }
      entities:
        - entity: binary_sensor.pve_ubuntu_server_running
          name: SERVER
        - entity: binary_sensor.internet_status
          name: INTERNET
        - entity: binary_sensor.ups_status
          name: UPS
      show_state: false
    - type: 'custom:button-card'
      entity: sensor.cpu_temperature
      show_icon: false
      show_state: true
      name: CPU
      state_display: '[[[ return entity.state + "°" ]]]'
      styles:
        card:
          - width: 100px
          - height: 100px
        name:
          - font-size: 14px
          - margin-bottom: 15px
        state:
          - font-size: 120%
          - font-weight: bold

Da notare come ogni card è configurata per avere un’altezza pari a 100px, in modo da avere una Header omogenea e dimensionata correttamente.

Body

Il Body è il cuore pulsante della vista. E’ qui che si concretizzano le idee della plancia che abbiamo in mente.

Io l’ho pensata sin dall’inizio come una pulsantiera, un pannello comandi che aiutasse nelle abitudini di casa, nelle azioni frequenti. Ma anche una plancia pensata per essere un pannello informativo, ad esempio, è un’ottima idea. Si tratta di interpretazioni personali e la struttura di base consente di realizzare quello che vuoi.

Indipendentemente dalle scelte personali qualche consiglio rimane sempre valido.

Abbiamo a disposizione gran parte dello schermo e lo possiamo dividere in colonne, come visto nella prima parte.
Io ho scelto di usare tre colonne nella vista Home in modo da poter organizzare e dividere i contenuti secondo la tematica di appartenenza, e invece due colonne per le altre viste focalizzate su un argomento specifico.

Nell’header abbiamo usato una horizontal-stack per sviluppare una riga. Ora, invece, dobbiamo sviluppare una colonna quindi usiamo una vertical-stack per ogni colonna del Body.

Vediamo nel dettaglio la prima colonna della mia vista Home, configurata nel file body_col_1.yaml della directory home.

Qui sotto il codice completo della colonna.

File body_col_1.yaml

type: vertical-stack
cards:
  - type: 'custom:button-card'
    name: LUCI
    template: label_center
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: sensor.luci_accese
        icon: 'mdi:lightbulb-group-outline'
        name: LUCI ACCESE
        template:
          - sensor_card
          - action_state_numeric
        styles:
          card:
            - height: 60px
      - type: 'custom:button-card'
        name: SPEGNI
        entity: group.luci_all
        template:
          - button_horizontal
          - action_turn_off
        styles:
          card:
            - height: 60px
  - type: 'custom:button-card'
    template: row_space_5
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: scene.salotto_brillante
        icon: 'phu:archetypesFloorShade'
        template:
          - button_text_label
          - action_turn_scene
        name: Sala
        label: GIORNO
      - type: 'custom:button-card'
        entity: scene.salotto_relax
        icon: 'phu:presetsDimmerDimdown'
        template:
          - button_text_label
          - action_turn_scene
        name: Sala
        label: RELAX
      - type: 'custom:button-card'
        entity: scene.salotto_luce_tv
        icon: 'phu:presetsNightlight'
        template:
          - button_text_label
          - action_turn_scene
        name: Sala
        label: SERA
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: scene.salotto_tutto
        icon: 'phu:routinesDaytime'
        template:
          - button_text_label
          - action_turn_scene
        name: Sala
        label: TUTTO
      - type: 'custom:button-card'
        entity: scene.scala_cortesia
        icon: 'phu:tabbarAutomation'
        template:
          - button_text_label
          - action_turn_scene
        name: Scala
        label: CORTESIA
      - type: 'custom:button-card'
        name: SALA
        entity: group.luci_salotto
        template:
          - button_horizontal
          - action_turn_off
        styles:
          card:
            - height: 100%
  - type: 'custom:button-card'
    template: row_space_5
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: light.tavolo
        icon: 'phu:bulbsClassic'
        color: auto-no-temperature
        template:
          - button_light
      - type: 'custom:button-card'
        entity: light.faretti_sala
        icon: 'phu:bulbsClassic'
        name: Faretti
        template:
          - button_light
      - type: 'custom:button-card'
        entity: light.terrazzo_salotto
        icon: 'phu:bulbsClassic'
        name: Terrazzo
        template:
          - button_light
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: light.scala
        icon: 'phu:bulbsClassic'
        color: auto-no-temperature
        template:
          - button_light
      - type: 'custom:button-card'
        entity: light.studio
        icon: 'phu:bulbsClassic'
        color: auto-no-temperature
        template:
          - button_light
      - type: 'custom:button-card'
        entity: light.bagno_sotto
        name: Bagno
        icon: 'phu:bulbsClassic'
        color: auto-no-temperature
        template:
          - button_light

In testa troviamo una vertical-stack che fa da contenitore principale. All’interno, poi, una sotto l’altra, alcune card che sviluppano la colonna.

type: vertical-stack
cards:
  - CARD 1
  - CARD 2
  - ......

I pulsanti della colonna sono raggruppati per riga con alcune semplici horizontal-stack, ad esempio questa con l’attivazione di alcune scene:

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      entity: scene.salotto_brillante
      icon: 'phu:archetypesFloorShade'
      template:
        - button_text_label
        - action_turn_scene
      name: Sala
      label: GIORNO
    - type: 'custom:button-card'
      entity: scene.salotto_relax
      icon: 'phu:presetsDimmerDimdown'
      template:
        - button_text_label
        - action_turn_scene
      name: Sala
      label: RELAX
    - type: 'custom:button-card'
      entity: scene.salotto_luce_tv
      icon: 'phu:presetsNightlight'
      template:
        - button_text_label
        - action_turn_scene
      name: Sala
      label: SERA

Poi vale la pena spendere due parole su altre card utilizzate e utili in diversi contesti.

La prima card della colonna è una button-card con il template label_center, pensato per creare una sorta di intestazione senza sfondo e senza reazioni al tap.

## BUTTON CARD ##
- type: 'custom:button-card'
  name: LUCI
  template: label_center
  
## TEMPLATE ##
label_center:
  styles:
    card:
      - padding: 5px 5px
    name:
      - justify-self: center
      - font-size: 120%
      - color: var(--secondary-text-color)
  template: no_background
  tap_action:
    action: none

Infine, una card per separare leggermente i blocchi di card simili tra loro.
Usiamo il template row_space_5 (una card vuota alta 5px).

## BUTTON CARD ##
- type: 'custom:button-card'
  template: row_space_5
  
## TEMPLATE ##
row_space_5:
  template: no_background
  styles:
    card:
      - height: 5px
      - padding: 0px

La prima considerazione da fare sul Footer è che se non ti piace, o non ti serve, lo puoi escludere dal layout senza problemi ed estendere il Body per tutto lo spazio disponibile sullo schermo.

E’ sufficiente rimuovere la configurazione del footer e della riga separatore sopra (codice evidenziato) dal file principale di configurazione della plancia:

- title: HOME
  path: home
  panel: true
  cards:
    - type: 'custom:mod-card'
      style:
        hui-vertical-stack-card$:|
          #root {
            margin: 15px !important;
          }
      card:
        type: vertical-stack
        cards:
          - !include demo/home/header.yaml
          - type: 'custom:button-card'
            template: row_space_10
          - type: horizontal-stack
            cards:
              - !include demo/home/body_col_1.yaml
              - !include demo/home/body_col_2.yaml             
              - !include demo/home/body_col_3.yaml
          - type: 'custom:button-card'
            template: empty_card
            styles:
              card:
                - height: 10px
          - !include demo/home/footer.yaml

Nella mia interpretazione il Footer funziona sostanzialmente da menù di navigazione nella Home e come utility nelle viste tematiche.

Su come sviluppare il Footer non c’è molto da dire, valgono gli stessi consigli della sezione Header.
Usiamo una horizontal-stack in testa e poi configuriamo le card all’interno.

type: horizontal-stack
cards:
  - type: 'custom:button-card'
    template: button_menu
    name: LUCI
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/luci
  - type: 'custom:button-card'
    template: button_menu
    name: TV
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/tv
  - type: 'custom:button-card'
    template: button_menu
    name: MUSICA
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/musica
  - type: 'custom:button-card'
    template: button_menu
    name: MEDIA
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/media
  - type: 'custom:button-card'
    template: button_menu
    name: SISTEMA
  - type: 'custom:button-card'
    template: button_menu
    name: TABLET

Invece c’è qualcosa da dire sul suo posizionamento nel layout.

Alla luce di quanto detto nel primo capitolo di questo articolo (le dimensioni di una vista), tecnicamente non è possibile posizionare il Footer secondo “coordinate” precise, tipo come si fa con Top e Left in una picture-elements.

La sua posizione è determinata dall’altezza del separatore tra Body e Footer.

Se non ti è chiaro il concetto di separazione tra le sezioni del layout ti consiglio una rilettura di questo capitolo della prima parte.

In pratica, una volta completato lo sviluppo del Body, dobbiamo fare dei tentativi e settare correttamente l’altezza della card separatore tra Body e Footer, in modo da “spingere” il Footer in basso nello schermo quel che basta per non far scrollare la pagina.

Lo facciamo aggiustando l’opzione height della card separatore nel file di configurazione della plancia.
In questo caso è stato sufficiente impostare un’altezza di 10 pixel per posizionare il Footer correttamente.

- title: HOME
  path: home
  panel: true
  cards:
    - type: 'custom:mod-card'
      style:
        hui-vertical-stack-card$:|
          #root {
            margin: 15px !important;
          }
      card:
        type: vertical-stack
        cards:
          - !include demo/home/header.yaml
          - type: 'custom:button-card'
            template: row_space_10
          - type: horizontal-stack
            cards:
              - !include demo/home/body_col_1.yaml
              - !include demo/home/body_col_2.yaml             
              - !include demo/home/body_col_3.yaml
          - type: 'custom:button-card'
            template: empty_card
            styles:
              card:
                - height: 10px
          - !include demo/home/footer.yaml

Materiale da scaricare

Ti lascio il codice completo delle viste Home e Luci che abbiamo visto negli screen e il mio file con tutti i template di button card che uso nella plancia.

DOWNLOAD

Puoi prendere spunto per qualche card, usare qualche template oppure usare tutto il materiale come punto di partenza.
In quest’ultimo caso ecco la procedura da seguire per installare e attivare la plancia Tablet.

  • Scarica l’archivio e scompattalo nella directory /config della tua installazione di Home Assistant.

Apri QUI se non hai mai usato Lovelace in modaltà YAML

Aggiungi nel file configuration.yaml questa configurazione:

lovelace:
  mode: storage
  dashboards:
    lovelace-tablet:
      mode: yaml
      title: Tablet
      icon: mdi:tablet
      show_in_sidebar: true
      filename: lovelace/lovelace-tablet.yaml

Questa configurazione lascia la plancia di default in modalità STORAGE (gestita da interfaccia grafica) e crea una nuova plancia chiamata Tablet in modalità YAML con le due viste Home e Luci.

Apri QUI se stai già usando Lovelace in modaltà YAML

Accoda sotto la voce dashboards della tua configurazione Lovelace questo codice per attivare una nuova plancia chiamata Tablet in modalità YAML con le due viste Home e Luci.

lovelace-tablet:
  mode: yaml
  title: Tablet
  icon: mdi:tablet
  show_in_sidebar: true
  filename: lovelace/lovelace-tablet.yaml
  • Riavvia Home Assistant

Ora vedrai diversi errori nella plancia, armati di santa pazienza e adatta la configurazione delle card in base alle tue entità, idee ed esigenze.

Considerazioni finali

Siamo arrivati alla fine di questo lungo ma spero produttivo racconto su come ho impostato la mia plancia da Tablet.

Avrai notato che è una plancia senza troppi fronzoli che va dritto al punto, mettendo a disposizione le azioni frequenti delle nostre abitudini familiari. Questa è la mia personale interpretazione dell’utilizzo di un Tablet come pannello di Home Assistant.

Mi sono concentrato sulle cose utili quando sei in casa, tralasciando molti aspetti che magari invece potrebbero servire quando sei in mobilità con lo smartphone.

Ma indipendentemente da questo, il mio obiettivo era quello di spiegare, in forma comprensibile, un metodo astratto valido in ogni contesto, che aiutasse anche ad avere una configurazione pulita e facilmente aggiornabile nel tempo, perchè una plancia Home Assistant è sempre in continua evoluzione.

Mi auguro davvero di esserci riuscito e se dovessi aver dato qualcosa troppo per scontato, o se hai dubbi in generale, parliamone nei commenti qui sotto o nel gruppo Facebook Home Assistant Italia dove milito con piacere.

Ciao, grazie per l’attenzione e a presto!
Max

Se apprezzi i miei contenuti puoi stimolare nuove idee sostenendo il progetto con una buona birra!

Partecipa alla discussione 71 Commenti

  • Marco ha detto:

    Ciao Max, complimenti per il tutorial, mi sta facendo fare i primi passi nella programmazione yaml delle Dashboard.
    Hai condiviso molto di quello che hai fatto e probabilmente fai un uso evoluto anche dei sensori che poi richiami dall’interfaccia.
    Ad esempio mi incuriosisce capire come dal template prendi valori diversi a seconda della entity che lo richiama. Prendi il template sensor_person a cui gli passi come variabile il livello della batteria. Non so come hai configurato il tuo sensor.clt_l09_livello_della_batteria.. io ho sensori separati per ogni device/persona.. quindi se sul template metto il mio sensor.s10_livello_della_batteria, ovviamente tutte le entity che faranno uso di quel template vedranno il mio livello di batteria.
    Magari e’ banale e forse non ho studiato abbastanza la button_card component, ma se mi indirizzassi sarebbe utile. Grazie!

    • Max ha detto:

      Ciao Marco grazie mille! No guarda, quella è una parte che avevo fatto al volo per usarla nell’articolo, ma effettivamente è sbagliata! Così ovviamente tutte le entità person prendono lo stesso valore di batteria, ho sistemato la configurazione oggi usando una variabile. Appena ho un secondo aggiorno anche l’articolo, grazie della segnalazione

  • Francesco ha detto:

    Ciao Max! ottima guida, grazie mille per lo sforzo!
    nella guida e nel codice che ho scaricato (lo zip) non riesco a trovare dove sono definiti i template delle button-card, per esempio il template sensor_person.
    Inoltre sarei molto interessato al modo in cui riesci a cambiare canale alla TV (ho visto una scheda della tua interfaccia che ha i loghi di diversi canali TV), ma penso che questo argomento sia più adatto a una guida che a una risposta a un commento 🙂
    Grazie!

    • Max ha detto:

      Ciao Francesco, grazie mille!
      I template sono tutti nel file button_card_templates.yaml che trovi incluso nel pacchetto.
      La parte TV è tutta integrazione Harmony, farò un articolo

  • ugo ha detto:

    Ciao Max, sto provando a seguire la tua guida, ma sto avendo problemi, ho questo errore “Button-card template ‘sensor_person’ is missing!”, puoi darmi qualche indicazione per risolverlo? Grazie.

    Bel lavoro

    • Max ha detto:

      Ciao e grazie a te! Ti manca il file che contiene tutti i template di button card, hai seguito i passi di installazione? Nel pacchetto a fine articolo c’è tutto il materiale necessario. Vedi bene, nel caso scrivi di nuovo.

  • Luca ha detto:

    Ciao Max
    sto provando a configurare la plancia seguendo la tua guida ( fatta molto bene ) ma già mi scontro con questo errore nella configurazione del header.yaml della prima schermata, dove potrei sbagliare?
    ti allego lo yaml
    type: ‘custom:button-card’
    template: empty_card

    type: horizontal-stack
    cards:
    – type: horizontal-stack
    cards:
    – type: ‘custom:button-card’
    entity: person.luca
    name: Luca
    template: sensor_person
    – type: ‘custom:button-card’
    entity: person.vale
    name: Valentina
    template: sensor_person
    – type: ‘custom:button-card’
    entity: sensor.time
    layout: vertical
    template: no_background
    label: “[[[ return states[‘sensor.dark_sky_hourly_summary_tmpl’].state; ]]]”
    name: “[[[ return states[‘sensor.pretty_date’].state; ]]]”
    show_icon: false
    show_label: true
    show_name: true
    show_state: true
    styles:
    card:
    – height: 100px
    state:
    – font-size: 200%
    – font-weight: bold
    – justify-self: center
    label:
    – justify-self: center
    – font-size: 90%
    – color: var(–paper-item-icon-active-color)
    name:
    – justify-self: center
    – font-size: 120%
    tap_action:
    action: none
    – type: horizontal-stack
    cards:
    – type: glance
    style:|
    :host {
    height: 100px;
    }
    entities:
    – entity: switch.termostato_cucina
    name: TERMOSTATO CUCINA
    – entity: sensor.temumi_interno_t
    name: TEMP.CUCINA
    – entity: sensor.temumi_esterno_t
    name: TEMP.ESTERNO
    show_state: false
    – type: ‘custom:button-card’
    entity: sensor.cpu_temperature
    show_icon: false
    show_state: true
    name: CPU
    state_display: ‘[[[ return entity.state + “°” ]]]’
    styles:
    card:
    – width: 100px
    – height: 100px
    name:
    – font-size: 14px
    – margin-bottom: 15px
    state:
    – font-size: 120%
    – font-weight: bold

    Mi rende questo errore:
    while scanning a simple key in “/config/lovelace/Ipad/home/header.yaml”, line 45, column 9 could not find expected ‘:’ in “/config/lovelace/Ipad/home/header.yaml”, line 47, column 19

    Grazie in anticipo.
    Luca

  • Luca ha detto:

    Buongiorno Max
    un altra cosa, ho scaricato i file da questa pagina, ma vanno messi in config/lovelace oppure direttamente dentro la cartella Lovelace? Vorrei partire da questi completi per personalizzarli.
    Grazie

  • Luca ha detto:

    Ciao Max
    scusami ma in parte ho risolto.
    Ora almeno la plancia tablet si vede, ovviamente ora devo sistemare le entità perché vedo forse metà di quelle che ci sono essendo impostate sulle tue, comunque è partita e ora si vede la plancia.
    Grazie mille.

  • Luca ha detto:

    Ciao Max
    che botto card hai utilizzato per le immagini della lavatrice/lavastoviglie? e per i consumi? molto belle veramente. grazie

  • andrea ha detto:

    Ciao Max, veramente tantissimi complimenti per quello che hai realizzato e soprattutto per condividere tutto il lavoro con gli altri. Ti chiedo aiuto per mettere nell header , lo stato della persona, a casa o fuori casa. Nei file che ci hai fornito mi sembra non sia configurata questa variabile. Mi puoi scrivere come si fa?
    grazie infinite

    • Max ha detto:

      Ciao Andrea, grazie. Devi mettere l’entità person o device tracker in quella card e ti mostra lo stato.

      • andrea ha detto:

        Funziona tutto Max, grazie. Ti chiedo se cortesemente potresti condividere anche la pagina “consumi”. Mi piacerebbe davvero tanto vedere come l’hai realizzata.
        Grazie ancora e un saluto.

  • Alex ha detto:

    Ciao Max!
    I complimenti sono scontati, veramente! Tutto ben dettagliato e definito e semplice da capire per chi ha già un minimo di esperienza con HA! Bravissimo!
    Ti dico la verità, fino ad oggi non avevo mai pensato di customizzare plance , viste e card, ma mi hai fatto venire troppa voglia, anche perché a me le sfide piacciono molto!!
    Ti chiedo una curiosità, ho visto che hai inserito delle icone (molto belle) del tipo phu: anzichè mdi:.
    Le mdi le conosco bene (material design icons) ma le phu non ho idea nemmeno dove si trovino o se siano state create da te!
    Mi daresti qualche dritta?

    Grazie

    • Max ha detto:

      Ciao Alex, è un set custom di icone che ho creato partendo da un post sul forum ufficiale di HA. E’ una procedura abbastanza complessa da spiegare

  • Matteo ha detto:

    Ciao Max,
    non so se mi sono perso qualcosa, ma ho 2 problemi:
    1) Perchè le scritte non sono gialle? Io ho installato ios-dark-theme.
    2) Che icone hai usato?

    • Max ha detto:

      Ciao Matteo, uso un file tema customizzato da me, le scritte vengono dalla variabile di tema paper-item-icon-active-color.
      Le icone sono le mdi classiche e un set di icone custom che ho creato per le philips hue

  • Franco Dace ha detto:

    Ciao Max,
    Innanzitutto complimenti per la plancia, è bellissima,
    sto seguendo la tua guida e sono riuscito a mettere la tua plancia sul mio tablet, personalizzandola per i miei dispositivi, per la parte home.
    A differenza della tua, la parte giorno, ora e previsioni meteo dell’ header mi visualizza la condizione della giornata in inglese, mentre la tua è in italiano.
    Il mio sensore è sensor.dark_sky_hourly_summary, ho notato che tu invece hai un sensore sensor.dark_sky_hourly_summary_tmpl, è li che fai la conversione da inglese s italiano?
    Se è li che fai la conversione, potresti postare anche quel sensore, io ancora non sono in condizioni per affrontarlo da solo.
    Non vedo l’ora di completare questa parte per passare alla parte spotify.
    Grazie

    • Max ha detto:

      Ciao Franco, si uso quel sensore ma è un template basato sullo stesso sensore che hai tu (dark_sky_hourly_summary) il quale fornisce già l’informazione in italiano.
      Uso un template solo per cambiare l’icona per altre esigenze.

      • Franco Dace ha detto:

        Grazie per la risposta, sto provando a farla uscire in italiano, speriamo bene.. vorrei approfittare della tua gentilezza per un altro piccolo quesito:
        in una label oppure un name posso aggiungere una stringa?
        es. label: “[[[ return states[‘sensor.myhome_temperature’].state; ]]]”
        posso mettere prima la stringa “Temperatura” e dopo la stringa “°”?
        Un po come si fa con display_state:
        state_display: ‘[[[ return entity.state + “°” ]]]’

        Grazie mille

  • Franco Dace ha detto:

    Perfetto! non capivo dove inserire le stringhe
    Grazie mille sei gentilissimo.

  • Marco ha detto:

    Ciao,

    Tutto fantastico : stoprendendo molto spunto dai tuoi “appunti” !
    Una domanda : visto che ci sono molte app in giro da installare sul tablet tu quale consiglieresti : l’HOME Assistant App originale oppure hai provato qualcosa di alternativo e piú compatibile con il compito che il tablet deve fare ? ( tipo fully kiosk, wall panel, ecc ? )

    Grazie !

  • Luca ha detto:

    Ciao Max, ancora complimenti per il blog!
    Una domanda, il sensore “caldaia oggi” come lo ottengo? Io ho collegato uno shelly alla caldaia per accenderla e spegnerla, ma non saprei come creare questo sensore, hai delle indicazioni? Grazie Mille!

  • Alex ha detto:

    Ciao, complimenti per il lavoro! Lo sto adattando per i miei utilizzi… ho preso il tuo pacchetto con home e luci e l’ho modificato, ho installato browser_mod, light popup card, card_mod, e light entity card ma i pop up non so come farli aprire!! Sui pulsanti tipo questo:
    – type: ‘custom:button-card’
    entity: light.hue_sala
    template:
    – button_light
    – button_light_brightness
    – popup_light
    ho ovviamente caricato il tuo file button_card_templates.yaml
    devo aggiungere altro? bisogna abilitare il qualche modo il browser_mod?
    Grazie!

  • Fabrizio Magli ha detto:

    Ciao Max ,
    Io nella mia configurazione di Lovelace ho più schede ad esempio la scheda dei grafici ,la scheda del controllo carichi ecc riesco secondo te a integrarli nella scheda tablet così da vederle poi tutte su quest’ultima? Mi sai dire come fare ?

    • Max ha detto:

      Ciao Fabrizio, certo che puoi, ma abbi pazienza, se mi chiedi una cosa del genere significa che non hai letto con attenzione questi due articoli. È tutto spiegato nel dettaglio

  • Luca ha detto:

    Ciao Max
    devo dire uno spettacolo, avevo inviato ancora qualche mese fa ma ora sto finalmente trovando il tempo di implementare la cosa.
    Una domanda, riesci a postarmi\mandarmi il codice della custom card che hai utilizzato per creare la lavatrice nell’immagine che vedo ? sono interessato ad una pagina come quella.
    Grazie e bravo

  • Diego ha detto:

    Ciao Max, veramente un ottimo articolo mi ha aiutato tantissimo, solo una curiosità ho visto che uso un tasto go to home e vorrei farlo anche io, ma ho il problema che riesco a linkarmi solo a una delle schermate riguardanti la plancia standard lovelace in nessuno modo alla mia amche definendo il percorso in configurazione plancia.
    Te come hai risolto?
    Grazie mille e spero di essermi spiegato bene

  • Leo ha detto:

    Buongiorno Max e ovviamente complimenti per il tuo lavoro!! Avrei da chiederti un aiuto: vorrei inserire una cam in live sulla parte centrale della schermata Home, ma non riesco a capire il codice esatto da utilizzare. Potresti darmi una dritta?

    Grazie 😉

    • Max ha detto:

      Ciao e grazie! La puoi inserire come una qualsiasi altra card, riguardo alla cam non ti so aiutare perchè non le gestisco da HA. Prova a mettere su la card da UI in una vista di test e quando hai trovato il codice corretto la metti nella dashboard

  • Fabio ha detto:

    Ciao! Alcune Custom card con il telefono ( iPhone) non le vedo, sia con app sia con browser. Hai la soluzione ?
    Grazie e complimenti

  • manustar ha detto:

    I complimenti per la spiegazione sono più che meritati.

    sto creando la mia plancia partendo dalla tua guida, ora ho un problema, la parte del meteo (sereno, nuvoloso, ecc. utilizzo quella nativa HA met.no) me la riporta in inglese, ma se vado nell’entità tramite ui la vedo in italiano in italiano e in aggiunta non riesco a capire come prende il sensore della temperatura dell’integrazione.

  • Marco ha detto:

    Ottimo lavoro.
    Mi sono perso solo in un punto:

    label: |
    [[[
    var h = states[variables.battery_entity].state;
    return ‘Batteria: ‘+h+’%’;
    ]]]

    E’ chiaro che la variabile serve poi quando, nella card, vado ad inserire

    variables:
    battery_entity: sensor.my_battery_level

    E quindi la variabile viene sostituita dal mio sensore ma… come creo la variabile “variables.battery_entity”???

    Magari la domanda è stupida ma sono entrato nel mondo HA da pochissimo.

    Grazie!

  • Giovanni ha detto:

    Ciao, innanzitutto complimenti, volevo chiederti, sicuramente non ho capito io, ma all’interno del file button_card_templates.yaml non ci sono tutti i template, ad es. ‘person’ etc. bisogna aggiungere in proprio? Grazie

    • Max ha detto:

      Ciao Giovanni grazie, no ci sono tutti i template. Quello a cui fai riferimento tu è sensor_person.

      • Giovanni ha detto:

        Grazie per rapida risposta, ma dentro il file c’è solo questo:

        no_background:
        styles:
        card:
        – background-color: ‘rgba(0, 0, 0, 0.0)’
        – box-shadow: none

        empty_card:
        template: no_background
        color_type: blank-card

        row_space_10:
        template: empty_card
        styles:
        card:
        – height: 10px

        • Max ha detto:

          Devi scaricare il materiale che trovi nella seconda parte dell’articolo, li trovi tutto. Il materiale della prima parte è per chi vuole iniziare da zero.

  • Daniel ha detto:

    Ciao, ti faccio davvero i complimenti, nella spiegazione sei stato chiarissimo..
    Ho però un problema, nel lato sinistro del browser mi rimane la slide verticale.
    Hai qualche consiglio da darmi?
    Grazie

    • Daniel ha detto:

      scusa nella parte destra del browser

    • Max ha detto:

      Se ti rimane la slide evidentemente hai generato troppe card per lo spazio a disposizione e il browser deve scrollare

      • Daniel ha detto:

        In effetti ci avevo pensato anche io ma non e cosi (credo).. perché tutte le card sono visibili e ho ancora spazio..
        Ho già tolto il footer e la card di spaziatura e cmq mi rimane..

        • Daniel ha detto:

          Ciao Max ho risolto togliendo:
          style:
          hui-vertical-stack-card$: |
          #root {
          margin: 15px !important;
          }
          nel file principale della dashboard…

  • Matteo P ha detto:

    Ciao,
    Intanto complimenti per le guide, è un bel po’ che sto pasticciando con Home Assistant a tempo perso, e se non fosse stato per le tue guide non avrei mai combinato nulla…. rispetto a tutte quelle che ho letto sono le più chiare perché non danno nulla per scontato, mentre tipicamente su altre guide mi perdevo perché si davano per scontate cose che chi è alle prime armi non sa/capisce.

    ho un paio di domande
    1) lo stato di presenza quando uno non è in casa a me esce “sconosciuto” c’è modo di cambiarlo con tipo “fuori casa”??
    2) sto cercando di fare dei pulsanti scena, volendo fare una scena che mi abbassa una tapparella che comandi ci sono per farlo?
    es:
    # per luci dimmerabili
    light.lampada:
    state: “on”
    brightness: 70
    # per luci normali
    light.luce_soggiorno: “off”
    # per tapparelle??
    cover.tapparella_1: ??? (che tipologia di comandi posso mettere? sempre se si può)

    ho cercato in lungo e in largo ma non sono riuscito a capire

    Grazie!

    • Max ha detto:

      Grazie mille 😉
      1) devi rivedere la fonte del tuo sensore, se ti dice sconosciuto non sta funzionando bene.
      2) Non ho tapparelle domotizzate purtroppo quindi non conosco i relativi servizi

  • edoardo ha detto:

    Ciao max, stavo cercando di creare una card footer con i button templates ma con la possibilità di scorrere il body (non mi servirà come nel tuo caso per il tablet) ma per lo smartphone. Secondo te è possibile? Dagli screen vedo che nel progetto homekit infused ci sono riusciti, ma non so se usano lo stesso gioco della card vuota per distanziare body e footer.

    • Max ha detto:

      Per uno smartphone non ha senso fare il footer visto che tipicamente si scrolla fino al bisogno. Il footer come l’ho inteso io serve solo quando vuoi uno schermo che non scrolli. Quello che dici tu è sicuramente fatto con qualche custom che ancora un DIV in fondo allo schermo

  • Giovanni ha detto:

    Ciao Max ti ho scritto in privato utilizzando il form in “contatti” chiedevo se hai letto…
    nell’occasione ti volevo chiedere, dove posso reperire il pacchetto delle icone che utilizzi?
    ciao e grazie ancora

  • Leo ha detto:

    Ciao Max e complimenti per i tuoi articoli! So creando grazie ai tuoi suggerimentoi la mia Dashboard Lovelace. Ho un dubbio: il una vista ho creato due colonne che chiaramente sono larghe uguali, c’è modo invece di ingrandire la colonna di sinistra e rimpicciolire quella di destra?

    Grazie
    Leo

Lascia un Commento