Questo sito utilizza cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione. Il rifiuto del consenso può rendere non disponibili le relative funzioni.

Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento.

Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Declina” per continuare senza accettare.

Una Dashboard Lovelace per il Tablet – Parte 1/2

Eccolo qui, il primo post del blog.

Oh .. non è mica sempre facile essere il primo, in qualsiasi cosa, per cui sono io stesso che ti faccio un bel in bocca al lupo 🙂

Poi bisogna rompere il ghiaccio, scegliere un tema da argomentare, trovare le parole e tentare di far partire qualcosa.
Un sacco di cose.
E allora rompo il ghiaccio con un tema che mi sta a cuore e che mi ha sempre divertito: le interfacce grafiche, quelle che comunemente chiamiamo UI (User Interface).

Vi racconto la mia Dashboard Lovelace ottimizzata per il tablet, utilizzabile comunque anche come Dashboard da PC con qualche accorgimento (lo vedremo più avanti).

Non sarà proprio una guida step by step, credo sia più sensato raccontare nei dettagli la logica che c’è dietro, così da fornire un metodo (spero) valido per la costruzione di una dashboard Lovelace in autonomia.

Gli aspetti di cui parlare sono parecchi, meglio dividere l’argomento in due parti.

In questa prima parte vediamo come costruire una struttura di base per gestire le dashboards su Home Assistant con Lovelace, nella seconda parte invece vedremo come sviluppare la dashboard con le card.

ELENCO DEGLI ARGOMENTI

Modalità Lovelace: Storage vs YAML

Voglio prima spendere due parole sulla modalità YAML di Lovelace perché sta alla base di tutto il progetto.

Sappiamo che oggi esistono due modalità di gestione di Lovelace:

  • Modalità STORAGE
  • Modalità YAML

La modalità STORAGE ci viene proposta di default ed quella che un po’ tutti siamo abituati a vedere, gestiamo i pannelli direttamente dall’interfaccia.
Con la modalità YAML, invece, la gestione si trasferisce completamente ad uno o più file yaml, e la gestione da interfaccia viene disabilitata.

Certo che detta così sembra proprio dire: Come disabilitata? Ma allora chi te lo fa fare?

Io pure la pensavo così, poi ho iniziato a sviluppare la Dashboard da tablet ed in poco tempo sono arrivato ad avere un file raw totalmente ingestibile.
Il file raw, per chi non lo sapesse, è la configurazione che il modulo di Frontend genera a fronte delle tue modifiche da UI.

In modalità STORAGE, nel file raw, non puoi inserire commenti e soprattutto non puoi usare gli include, per cui arrivi facilmente a superare 5000 righe di codice in un unico file, da impazzire.
E’ vero, hai la UI per trovare le card da gestire, ma se inizi ad annidare diverse card stack tra loro, anche via UI non è proprio immediato trovare una card per modificarla o qualsiasi altro.

Ebbene, sono stato molto felice nello scoprire che i problemi sono brillantemente risolti dalla modalità YAML, puoi scrivere tutti i commenti che ti pare e puoi dividere la tua configurazione in più files grazie agli include.

Questo non significa che bisogna abbandonare definitivamente Lovelace da interfaccia grafica. E’ possibile lasciare la dashboard di default in modalità STORAGE e creare quante dashboards si vogliono in modalità YAML, ad esempio una per il tablet, una per smartphone, una dedicata alla configurazione di HA … Qui la creatività non ha limiti.

In corso d’opera mi sono fermato un secondo e ho migrato la dashboard in modalità YAML.

Al momento la mia configurazione è questa:

lovelace:
  mode: storage
  dashboards:
    lovelace-tablet:
      mode: yaml
      title: Tablet
      icon: mdi:tablet
      show_in_sidebar: true
      filename: lovelace-tablet.yaml
  • mode: storage
    Lasciamo la plancia di default in modalità interfaccia grafica
  • dashboards:
    Elenco delle plance in modalità YAML
  • filename: lovelace-tablet.yaml
    Nome del file yaml “master” della configurazione, da creare nella directory /config di Home Assistant.

Un altro notevole vantaggio della modalità YAML è quello di poter condividere “pezzi” di configurazione tra una dashboard e l’altra. In modalità STORAGE, purtroppo, sei obbligato a creare duplicati di una configurazione, perchè ogni dashboard ha il suo file raw esclusivo.
Chi usa i template del custom component Button Card sa benissimo di cosa parlo (ne parlerò in dettaglio più avanti).

La Struttura della Dashboard

Con l’occasione della migrazione in modalità YAML, ho provato ad ottenere una struttura chiara, leggibile, aggiornabile senza troppi sforzi e che soprattutto si prestasse ad essere riutilizzata come punto di partenza per lo sviluppo di altre dashboards. E da qui nasce anche l’idea di parlarne un pochino e di condividere il materiale.

Per descriverla nel migliore dei modi ho pensato di costruire insieme, a titolo puramente esemplificativo, una dashboard chiamata Demo con due viste, Home e Luci.

A fine post avremo una dashboard vuota, senza card, ma con tutta la configurazione di base per iniziare a svilupparla in base alle proprie esigenze. Nei prossimi articoli della serie, invece, vi racconto nel dettaglio come ho realizzato le mia.

Puoi seguire i passaggi uno ad uno, in ogni caso in fondo all’articolo ti lascerò un pacchetto da scaricare con la struttura funzionante e pronta da installare.

Iniziamo.

Custom Components

Per realizzare questa dashboard dimostrativa abbiamo bisogno di due custom components:

Sono due custom molto noti, probabilmente li stai già usando, se così non fosse entrambi possono essere installati via HACS.

Organizziamo la configurazione

Lovelace è basato sostanzialmente su tre macro elementi:

  • Dashboard
    Una dashboard è un insieme di una o più views, associabile ad un utente e, se specificato in configurazione, genera una icona nella sidebar. Da ora la chiameremo PLANCIA.
  • View
    Una view è una “sezione” della dashboard e funziona da raccoglitore di una o più card. Da ora la chiameremo VISTA.
  • Card
    Sono gli oggetti che manipoliamo per mostrare informazioni ed eseguire azioni all’interno di una vista.

Creiamo su disco, a partire dalla configurazione principale di Home Assistant (/config), una gerarchia di directory che rifletta esattamente gli elementi base appena descritti.

In questo modo abbiamo già ottenuto una struttura di primo livello che ci consente di dividere e organizzare la configurazione delle nostre plance.

Il Layout delle Viste

Ora ci dobbiamo occupare della configurazione delle viste (Home e Luci), e lo facciamo creando un classico layout web formato da Header, Body e Footer.
Il Body lo dividiamo in diverse colonne, in base alle esigenze della specifica vista.

LAYOUT DELLA VISTA HOME A 3 COLONNE
LAYOUT DELLA VISTA LUCI A 2 COLONNE

Un layout di questo tipo, con l’ausilio degli strumenti vertical-stack e horizontal-stack di Lovelace, ci offre una grande flessibilità in termini di organizzazione delle card e di personalizzazione dell’aspetto grafico.

La modalità Pannello

Le viste di Lovelace possono essere create in due modi: nella modalità di default, chiamiamola a colonne, oppure in modalità Pannello.
La modalità Pannello è l’ideale per una plancia da tablet perché ci consente di sfruttare tutto lo schermo e avere totale controllo sulla disposizione delle card.

Si attiva con panel: true

Nella modalità Pannello possiamo creare una sola card, e questa card occuperà tutta la larghezza dello schermo, per cui abbiamo bisogno di una card “strutturale” in cui poi sviluppare il nostro layout.

A questo scopo utilizziamo una vertical-stack, si tratta di una card Lovelace particolare, molto utile, che consente di raggruppare diverse card nella stessa colonna.
Per raggruppare, invece, diverse card nella stessa riga, abbiamo a disposizione la card sorella horizontal-stack.

I Template di Button Card

Tutto il progetto fa grande uso dei Template del custom component Button Card.

Button Card, per chi non lo conoscesse, è un custom component molto potente e versatile.
Il nome fa pensare ad una semplice card per creare pulsanti, ma in realtà offre molte opzioni e diversi strumenti per realizzare praticamente ogni cosa. L’ho usato ovviamente per i pulsanti della plancia, in diverse forme, ma anche per alcune card di tipo “sensore” con lo scopo di mostrare solo informazioni, quindi nessuna azione al tap.
Un altro caso d’uso molto, ma molto utile, è quello di creare card “vuote” e invisibili, da usare come separatore tra card, oppure per regolare automaticamente la dimensione delle card in una horizontal-stack.

Vedremo tutto nel dettaglio, ma ora, per comprendere appieno il codice YAML della plancia, devi sapere cosa sono e come usare i suoi Template.

I Template di Button Card ricordano un po’ il concetto di un foglio di stile CSS.
Possiamo definire un modello centralizzato e poi usarlo nelle card type: 'custom:button-card', evitando così molte ripetizioni della stessa configurazione. Di conseguenza otteniamo anche un codice più pulito e ordinato.
Inoltre, c’è la grande comodità di applicare una modifica a tutte le card dello stesso template contemporaneamente.

In modalità STORAGE la configurazione dei template va inserita direttamente nel file raw, ad esempio:

button_card_templates:
  no_background:
    styles:
      card:
        - background-color: 'rgba(0, 0, 0, 0.0)'
        - box-shadow: none
  empty_card:
    template: no_background
    color_type: blank-card

In modalità YAML possiamo configurare i templates in un file dedicato e inserire un include nella configurazione della plancia, così da rendere autonoma la configurazione dei templates e lasciare compatto il file principale della plancia:

button_card_templates.yaml
no_background:
  styles:
    card:
      - background-color: 'rgba(0, 0, 0, 0.0)'
      - box-shadow: none
empty_card:
  template: no_background
  color_type: blank-card
Configurazione nella plancia
button_card_templates: !include button_card_templates.yaml

Hai notato che dentro al secondo template viene richiamato il primo?
Esatto, un template può ereditare la configurazione di un altro, questo apre alla possibilità di avere un codice modulare e ben organizzato.

Per concludere, vediamo che con due semplici righe possiamo creare una card vuota e senza sfondo da usare nei casi più disparati:

type: 'custom-button-card'
template: empty_card

Il codice YAML

Dopo questa lunga ma doverosa premessa, passiamo finalmente a vedere come strutturare il codice YAML per ottenere il layout sopra descritto.

All’inizio abbiamo creato una gerarchia per avere la configurazione di ogni vista in una directory specifica.
Ora, all’interno di queste directories, andiamo a creare diversi file YAML, ognuno per la relativa sezione del layout della vista (Header, Body, etc).

Per il momento ci occupiamo della sola vista HOME, con un layout che prevede un Body a tre colonne.

Nella directory lovelace creiamo il file principale della plancia, lovelace-demo.yaml, che poi attiveremo nel configuration.yaml di Home Assistant.

button_card_templates: !include button_card_templates.yaml

views:
  - title: HOME
    path: home
    panel: true
    cards:
      - 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

Come puoi notare è un codice compatto e facilmente leggibile, grazie alla separazione della struttura dai contenuti veri e propri.
Le righe evidenziate si riferiscono ai diversi file YAML inclusi dalla directory della vista, in questo caso home della plancia demo.

E’ facile intuire che in questi files andremo a creare solo le card della relativa sezione del layout, ottenendo così, ancora una volta, un’ulteriore separazione dei ruoli e dei files YAML non troppo voluminosi da gestire in futuro.

Analizziamo il codice strutturale della vista punto per punto.

Ora vediamo la vista LUCI, stavolta realizziamo un layout con un Body a due colonne.

Secondo i miei gusti, in questo caso, è preferibile armonizzare l’aspetto grafico restringendo un pochino il layout. Usiamo Card Mod, un famoso strumento custom per applicare stili CSS alle card Lovelace.

- title: LUCI
  path: luci
  panel: true
  cards:
    - type: 'custom:mod-card'
      style:
        hui-vertical-stack-card$: |
          #root {
            max-width: 90%;
          }
      card:
        type: vertical-stack
        cards:          
          - !include demo/luci/header.yaml
          - type: 'custom:button-card'
            template: row_space_10
          - type: horizontal-stack
            cards:
              - !include demo/luci/body_col_1.yaml
              - !include demo/luci/body_col_2.yaml
          - type: 'custom:button-card'
            template: empty_card
            styles:
              card:
                - height: 10px
          - !include demo/luci/footer.yaml

Nelle righe evidenziate vediamo che il blocco di Card Mod applica una larghezza massima pari al 90% di quella disponibile.

LAYOUT DELLA VISTA LUCI A 2 COLONNE

Questo passaggio non è obbligatorio ovviamente, se preferisci usare tutto lo schermo anche con un layout a due colonne, ti basta usare lo stesso codice della vista HOME.

Infine, una piccola ottimizzazione all’aspetto grafico complessivo. Applichiamo un margine al layout in modo che non venga schiacciato ai bordi dello schermo.

- 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

Inseriamo il blocco di codice evidenziato per applicare un margine di 15px alla Vertical Stack principale.
Vediamo la differenza con il layout originale.

Ora dobbiamo creare delle card vuote in tutti i files YAML della plancia, altrimenti il modulo di Frontend non riuscirà a caricarla correttamente.

type: 'custom:button-card'
template: empty_card

Abbiamo finito!

Ora abbiamo a disposizione uno scheletro vuoto, ma ben organizzato e pronto per essere sviluppato secondo gusti ed esigenze personali.

Installazione

Non ci resta che scaricare ed installare il materiale nella nostra configurazione e attivare la plancia.

DOWNLOAD DEMO
  • Scarica l’archivio e scompattalo nella directory /config della tua installazione di Home Assistant.
  • Attiva la plancia nella configurazione di Home Assistant editando il file configuration.yaml:
     lovelace: mode: storage dashboards: lovelace-demo: mode: yaml title: Demo icon: mdi:help show_in_sidebar: true filename: lovelace/lovelace-demo.yaml
  • Riavvia Home Assistant.

Questa configurazione lascia la plancia di default in modalità STORAGE (gestita da interfaccia grafica) e crea una nuova plancia chiamata DEMO in modalità YAML.
Ovviamente prima di attivarla puoi personalizzare nome ed icona.

Conclusione

In questa prima parte abbiamo visto come organizzare la configurazione, come dividere la struttura dai contenuti e come ottenere un layout pronto per essere sviluppato.

Nella seconda parte vi parlo dello sviluppo della plancia e di come ho gestito le card all’interno di ogni sezione.

Ciao e a presto!
Max.

Piaciuto l’articolo?

Se ti va, puoi darmi una mano con le spese di gestione del blog. Grazie!

Con la piattaforma buymeacoffee

Con una donazione Paypal

Se compri su Amazon inizia da qui
Perché?

Fallo girare!

Articoli correlati

88 commenti

  2. Ci tengo a lasciare i miei complimenti per questa ottima guida chiara e semplice in ogni suo punto!!
    Salverò il link nei miei preferiti in modo da poterla controllare di tanto in tanto per vederne sempre le novità con le ultime guide!!

    Spero presto in un nuovo articolo.

    Complimentoni

    Carlo

  3. Complimenti, sei stato chiarissimo nella esposizione e mi piace molto lo stile “tutorial”
    Grazie per la condivisione

  4. Guida molto interessante, salverò anche io il link e spero continuerai il progetto che trovo molto utile
    Complimenti

  5. Finalmente: c’è luce in fondo al tunnel!
    Un’ottima guida da cui prenderò sicuramente spunto. Non volevo credere che tutto ciò non fosse possibile.
    Grazie mille e COMPLIMENTI MAX!

    • Grazie Giuseppe! Infatti ho notato che non è molto battuto come argomento, ottime dashboard su github si trovano, ma nessuno ha provato a spiegarle e allora sto provando a dare un contributo

  6. Cosa posso aggiungere che già non ho detto nel gruppo FB.
    Mi sono avvicinato da poco al mondo HA e sei stato un aiuto importantissimo e preziosissimo.
    La tua plancia mi ha affascinato da quando l’hai postata su FB ed è diventata un riferimento per le mie sperimentazioni.
    Questo ulteriore blog, fatto benissimo, sarà per me una bibbia per capire meglio e aiutarmi a migliorare.
    Grazie grazie e ancora grazie !!!

  7. Complimenti per la tua guida, davvero ben fatta, chiara ed esaustiva. Purtroppo ho sempre pensato che il sito ufficiale di home assistant sia fatto male e non si capisca bene come muoversi, soprattutto se si è alle prime armi. Con la tua guida, invece, sono riuscito a configurare la plancia come si deve.

    • Eh il più presto possibile spero, ci sto lavorando ma tra lavoro e famiglia mi posso dedicare solo la notte praticamente 😉

  9. Guida molto interessante, salverò anche io il link se puoi vorrei cercare di capire come utilizzare un database esterno (tipo mariadb) e grafana per memorizzare alcuni dati nel tempo, come le temperature, ecc.
    Complimenti

  10. Con la struttura ad albero proposta nel tutorial, non riesco a capire come richiamare i percorsi delle risorse hacs.

    resources:
    – url: /hacsfiles/button-card/button-card.js
    type: module

    Ho provato più varianti ma niente da fare… un suggerimento?

    • Ciao Lucio, la configurazione proposta nell’articolo lascia la plancia di default in modalità UI, in questo modo le risorse continuano ad essere gestite da HACS senza la necessità di inserire manualmente le stringhe.

      • Forse è quello il mio problema, non ho mai usato la modalità UI e sto passando da un mio file ui-lovelace.yaml nella root alla struttura dell’articolo. Quindi di default non ci sono risorse caricate ed ovviamente mi va tuto in errore.

        • Allora in questo caso ti basta accodare alla tua configurazione yaml la nuova plancia (adattando i path degli include), lasciando inalterato tutto il resto.

          • mi accodo anche io Max al riavvio (nonostante tutte le risorse gestite da HACS) mi trovo la plancia nuova ma con all’interno tutte card auto-create e nessuna vista. Controllato persino i permessi sulle directory e i file ma niente da fare. (Ho finora utilizzato la modalità UI e mai in modalità YAML nonostante scrivevo tutte le viste e le card in modalità “manuale” da tempo)

          • Ciao Andrew, non mi è chiarissimo quale sia il problema, se mi contatti su messenger ne parliamo, così mi puoi allegare anche qualche screen per capire meglio.

          • @Andrew, ho avuto anch’io lo stesso problema: nel mio caso era dovuto al path non corretto del file di definizione della plancia (tablet.yaml): l’avevo messo nella directory di lovelace, mentre nell’include del config.yaml non avevo specificato il path completo. In questo caso, invece di dare errore nella verifica della configurazione, HA si comporta in questa maniera bizzarra, e include una plancia in cui include tutti gli oggetti presenti nella configurazione RAW (?!?). Risolto (pare) aggiustando i path.

  11. Riproponendo il commento di Giuseppe del 21/2 …una luce in fondo al tunnel!!! ti ringrazio per il tempo che stai dedicando per noi neofiti… si comincia a capire qualcosa…
    Ti seguirò passo passo per migliorare le mie poche conoscenze in tema HA e sono sicuro che con i tuoi articoli la cosa sarà meno faticosa…
    grazie per il tempo che dedichi e che vorrai dedicarci.

  12. Ciao, sto seguendo la tua guida per creare la mia plancia con la struttura da te creata. Ho il problema che però modifico i file yaml ma anche se riavvio HA o cancello la cronologia del browser, non mi aggiorna la plancia… dimentico qualche passaggio?

    • Ciao Ale, dopo aver modificato i files YAML per aggiornare la plancia devi cliccare sui 3 puntini in alto a destra e poi su Aggiorna 😉
      Non è necessario il riavvio di HA

  13. Se la guida ufficiale di HA fosse scritta come la tua, sarebbe il programma di domotica più utilizzato al mondo. COMPLIMENTI!

  14. Ottima guida… molto comprensibile. Gran lavoro! Di sicuro è il più chiaro esempio che ho visto ad ora. Complimenti!!!

  15. Ciao Max, stavo iniziando a seguire la tua ottima guida, ti volevo segnalare che il pulsante Download Demo porta ad una pagina con errore 404, lo posso trovare da un altra parte il file? Grazie e complimenti!

    • Ciao Luca, sei passato proprio quando stavo aggiornando il pacchetto per via delle recenti modifiche che ci sono state a Layout Card, riprova ora!

          • Ciao, innanzitutto complimenti per l’ottima guida e grazie per averla condivisa. Le sto seguendo tutte passo passo (si tutte, compresa quella di Spotify 😉 ).
            Però mi sfugge una cosa talmente stupida che ho quasi paura a chiedere:
            c’è la possibilità di modificare la larghezza delle colonne dei body? Esempio nel LAYOUT DELLA VISTA LUCI A 2 COLONNE ho la necessità di avere il body_col_1 più stretto (circa la metà) e lasciare il restante spazio al body_col_2
            Magari è un semplice parametro dell’Horizontal Stack o una istruzione CSS del Card Mod, ma ci ho provato in tutti i modi senza riuscirci.
            Grazie

          • Ciao Antonio, grazie mille! Con horizontal stack non puoi fare quello che chiedi, si può con layout card. Appena ho un secondo ti dico come fare

          • Si, sto seguendo quella al momento, ti volevo segnalare che nel file header.yaml linea 42
            style: |
            ho dovuto mettere uno spazio tra : e | altrimenti dal tablet mi dava errore su quella riga

  16. Ciao Max, ottima guida.
    ho provato ad utilizzare i file allegati ma non riesco a far prendere il colore di background.
    Ho provato anche con il template della seconda parte della guida ma niente. Hai qualche idea di dove sto sbagliando.

  17. Max, pendo dalle tue labbra per il codice delle altre schede (TV-Media-Energia) :°D Non ho mai avuto la dashboard sul tablet cosi sistemata fino ad oggi! Grande!

    • Luca grazie della fiducia ma ti consiglio di essere il più possibile autonomo! Per il momento non so dirti se riuscirò a riprendere a scrivere per il blog, richiede molto tempo che non ho

      • Ci sto provando e riuscendo! Dove mi vedo ancora lontano è la scheda TV, per le altre sono quasi a posto! Grazie mille Max!!

  18. Complimenti, ottima guida! Ho seguito tutti i tuoi consigli ed ora la configurazione è sicuramente molto più agevole. Uso l’add-on Samba per accedere da un PC alle directory e Visual Studio per editare i file, veramente molto comodo, grazie!

    Mi manca solo un ultimo step.
    Vorrei rendere la dashboard creata in yaml come default per tutti gli utenti in ogni dispositivo.
    Se nel file configuration.yaml uso
    lovelace:
    mode: yaml
    non posso specificare un filename (la dashboard l’ho messa nella directory lovelace dove poi ci sono le varie subdirectory)
    Ho provato a copiare lo yaml della dashboard nel file ui-lovelace.yaml posizionato nella stessa cartella config/ ma ottengo degli errori del modulo card-mod non trovato. Ho provato anche a pulire la cache del browser, ma niente…

    Quindi, mi sapresti dire come faccio a far diventare la dashboard yaml il default così quanto faccio click su Overview o appena entro la vedo?

    Ah, ho provato anche ad impostare la dashboard di default per l’utente, ma questo vale solo per un utente, mentre io vorrei impostare un default per tutti

    Grazie
    Luciano

  19. Ciao, ho scaricato ed installato il pacchetto nel mio Home Assistant. Nella parte sinistra ora esce la nuova plancia chiamata “Demo” ma, se ci entro, trovo un unico riquadro di colore rosso con all’interno il seguente messaggio:

    “Button-card template ‘row_space_10’ is missing!
    type: custom:button-card
    template: row_space_10”

    Cosa sbaglio?

    • Ciao Giovanni, non hai installato correttamente, ti mancano i template di button card residenti su un file dedicato. Riprova da zero

      • Ho riprovato scaricando il pacchetto ed installandolo pari pari come nella tua guida ma nulla. Io button card l’ho installato tramite HACS? c’entra qualcosa?

          • Ciao, anche io ho lo stesso problema di Giovanni…
            avete risolto?

            grazie in anticipo

          • update: rispetto alla guida, il file “button_card_templates” include la definizione di “row_space_10”. Copiando il file o quella porzione di codice, funziona 😉

          • Il punto è che non bisognerebbe cercare di far funzionare row_space che è solo un esempio, meglio cercare di capire come funziona e cosa serve il file dei template.

    • Se magari invece di usare giri di parole e indicazioni in privato, lo spiegassi pubblicamente cosi anche gli altri possono capire, lo capiremmo anche no a cosa serve e come correggere. Non ti pare?

      • Dopo aver passato notti insonni per scrivere gli articoli spiegati nel dettaglio e dopo aver risposto alle numerose richieste di chiarimento che mi arrivano devo anche leggere ste cose.
        Se non riesci a seguire 3 passi in croce di installazione evidentemente hai il cervello di una pecora ed è un problema solo tuo.
        Fuori dalle palle immediatamente.

  21. ciao complimenti ottima guida ma ho un dubbio nella prima parte della plancia quando si crea la stuttura in quella che ho fatto io non vedo diciamo i disegni , ma sono fatti per far capire com’e’ la struttura o si devono proprio vedere i bordi come nella tua foto? giusto per capire se ho sbagliato qualcosa

  22. Ciao Max, Ottima guida! Ho eseguito i passaggi installati i due componenti hack estratto lo zip ed installato aggiungendo anche le info nell file di configurazione, demo creata ma tutto vuoto i HOME e LUCI

  24. Ciao e complimenti per la guida… ho iniziato da un paio di settimane con ha e praticamente non so nulla, tantomeno di yaml, ecc. sentito parlare e letto si ma oltre no. Praticamente zero. Per creare su disco “Creiamo su disco, a partire dalla configurazione principale di Home Assistant (/config), una gerarchia di directory che rifletta esattamente gli elementi base appena descritti.” riporto l’articolo, da dove inizio? dove e come si creano queste cose? Grazie

  25. Ciao Max complimenti per la guida, sono 2 settimane che mi sono buttato in questo mondo e non conosco praticamente nulla. Per fare questo: “Creiamo su disco, a partire dalla configurazione principale di Home Assistant (/config), una gerarchia di directory che rifletta esattamente gli elementi base appena descritti.” da dove lo faccio? Inoltre su Hacs non c’è “card mod”, sto usando questa versione “Home Assistant 2023.5.4
    Supervisor 2023.04.1
    Operating System 10.1
    Frontend 20230503.3 – latest”
    Grazie per l’aiuto

    • Prima di tutto ti chiederei la cortesia di non creare due commenti uguali ma aspettare, prima o poi passo, approvo e rispondo. Grazie.
      Poi riguardo alla domanda cosa c’è di complicato? C’è scritto chiaramente di creare una struttura di directory a partire da config. Se non sai cosa significa ti consiglio di acquisire bene prima le competenze di base e poi provare progetti come questo. Per interagire con il filesystem di HA puoi usare l’addon Samba

  26. Ciao Max, complimenti! Guida mozzafiato!
    per caso sai dove posso trovare il codice di “simple-thermostat” ? mi piace molto e volevo utilizzarlo anche io.

  27. Ciao a tutti, le guide di Albani sono fantastiche, spiegate e illustrate in maniera che tutti possano comprenderle (soprattuto per chi è neofita di Home assistant); ho seguito altre guide di Max e grosso modo sono sempre arrivato al risultato finale, purtroppo questa volta non capisco dove sbaglio, quasi sicuramente sarà una mia svista.
    Sulla plancia appare la dashboard Demo con le viste Home e Luci ma sono entrambe vuote (pagine bianche); Ho controllato i percorsi sono corretti i file sono presenti, HACS è installato correttamente con le 2 custom components. Se vado su panoramica e aggiungo una nuova scheda mi da la possibilità di personalizzare il Button-card.
    La versione di Button Card è V.4.1.1
    La versione di card-mod 3 è V.3.2.2
    Home Assistant 2023.8.2, Supervisor 2023.08.1, Operating System 10.4
    Grazie.

    • è normale che siano vuote, la prima parte dell’articolo ti fa installare una struttura vuota da implementare. nella parte 2 sono incluse cose in più

  28. Ciao Max, grazie per la tua bellissima guida.
    Ho un problema la parte finale dell’installazione, cioè la modifica del file configuration.yaml sicuramente sto sbagliando. Come bisogna modificarlo? Devo rimuovere i parametri che trovo già dentro il file? O devo solo copiare questi nuovi a capo? Come devo ricopiarli? Perché in qualsiasi modo provi, mi esce questo errore una volta che vado a riavviare:
    The system cannot restart because the configuration is not valid: Integration error: filename – Integration ‘filename’ not found. Integration error: dashboards – Integration ‘dashboards’ not found. Integration error: show_in_sidebar – Integration ‘show_in_sidebar’ not found. Integration error: title – Integration ‘title’ not found. Integration error: icon – Integration ‘icon’ not found.

  29. Ciao, grazie per la condivisione, immagino che anche a distanza di tempo ti arrivino richieste… come la mia:
    Ho visto che negli screenshot che hai pubblicato non si vede la barra laterale sinistra con le varie altre dashboard. C’è un modo specifico di richiamare la pagina da un browser in modo da vedere soltanto il pannello interno, senza tutto l’overhead non necessario in un tablet da muro ?
    Grazie mille.

  30. Ciao, complimenti per la giuda. Ti chiedo una cosa: ma è sempre valida anche per le nuove versioni?
    sto provando a metterla in atto e trovo delle difficoltà!

  31. ciao,
    ottima guida ben fatta e a differenza di molte altre, anche abbastanza chiara e puntuale.
    L’ho trovata e seguita, ma lanciando il reboot mi restituisce degli errori.
    Immagino siano collegati alla nuova gestione delle dashboard.
    Come risolvere?
    Invalid config for ‘lovelace’ at configuration.yaml, line 287: expected dictionary for dictionary value ‘lovelace->dashboards’, got None
    Invalid config for ‘lovelace’ at configuration.yaml, line 288: ‘lovelace-demo’ is an invalid option for ‘lovelace’, check: lovelace->lovelace-demo
    Invalid config for ‘lovelace’ at configuration.yaml, line 290: ‘title’ is an invalid option for ‘lovelace’, check: lovelace->title
    Invalid config for ‘lovelace’ at configuration.yaml, line 291: ‘icon’ is an invalid option for ‘lovelace’, check: lovelace->icon
    Invalid config for ‘lovelace’ at configuration.yaml, line 292: ‘show_in_sidebar’ is an invalid option for ‘lovelace’, check: lovelace->show_in_sidebar
    Invalid config for ‘lovelace’ at configuration.yaml, line 293: ‘filename’ is an invalid option for ‘lovelace’, check: lovelace->filename

    • Ciao Oscar, grazie. Questi errori non sono collegati a nulla, hai solo sbagliato sintassi nella configurazione. Se la metti qui la controlliamo

  32. questo è quello che ho inserito nel config.yaml

    lovelace:
    mode: storage
    dashboards:
    lovelace-demo:
    mode: yaml
    title: Demo
    icon: mdi:help
    show_in_sidebar: true
    filename: lovelace/lovelace-demo.yaml

    queste sono le due righe che ho aggiunto, sempre nel config per attivare il card-mod

    frontend:
    themes: !include_dir_merge_named themes
    extra_module_url:
    – /local/card-mod.js

    non so se è necessario fare qualcosa per l’estensione button card

  33. Grazie Max.
    Avevi ragione, era errata l’intendazione e ti spiego anche il motivo, sperando che ti possa essere utile per sistemare la guida o per chi dovesse trovarsi nello stesso problema: io ho copiato e incollato l’ultima box di codice della tua guida. In realtà l’intendazione corretta è quella che hai riportato nella stessa guida al punto in cui dici “Al momento la mia configurazione è questa:..”
    Spero di esserti stato utile anch’io e …. ancora grazie

  34. …. mi spiace ma non ci sono ancora.
    modifcato il config

    lovelace:
    mode: storage
    dashboards:
    lovelace-demo:
    mode: yaml
    title: Demo
    icon: mdi:help
    show_in_sidebar: true
    filename: lovelace\lovelace-demo.yaml

    mi ha creato il tab ma è identico alla dashboard principale, creata automaticamente da HA.
    mi spiace ma ho modificato anche le path del file lovelace-demo ma …. niente.

  35. Ciao Max,
    voglio farti i complimenti per il tutorial.
    HA è un bellisimo sistema per le case moderne dove tanta tecnologia la fa sempre più da padrona.
    Con passione, tempo e persone come te che dedicano il loro “prezioso” tempo alla condivisione del sapere si può riuscire anche in cose lontane dal nostro vivere quotidiamo e ci si può togliere qualche piccola soddisfazione.
    Continua così!!!!

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *