Pannello domotico. Home Assistant + Floorplan

Pannello domotico. Home Assistant + Floorplan

 

 

Dopo il mio ultimo articolo su Home Assistant: Allarme senza fili. Home Assistant + MQTT, in tanti mi hanno scritto e definito senza limiti ed io ho risposto: l’unico nostro limite, con questa tecnologia, è la fantasia! Diamoci dentro con un altro progetto di Domotica!

Hai già dato un occhio all’indice di articoli inerenti la Domotica presenti nel mio sito? Facci un salto: Indice articoli di Domotica

Questa volta andremo a configurare un vero e proprio pannello domotico con il quale possiamo interagire, per esempio da un tablet, e gestire ogni cosa. In linea di massima andremo a strutturare qualcosa del genere:

 

 

 

 

Un appunto. Quello che vedete si chiama Hadashboard. Possiamo definirla un’integrazione di Home Assistant. Oggi non andremo a vedere nel dettaglio la configurazione di Hadashboard ma nello specifico di Floorplan.

A differenza di Hadashboard, Floorplan è in grado non solo di creare un’interfaccia uguale a quella che vedete, ma è pure in grado di usare una planimetria della vostra abitazione. Flessibilità tendente all’infinito.

 

1) Floorplan, conosciamolo meglio.

Descrizione:

Floorplan è anch’essa un’integrazione di Home Assistant che ci permette di estendere le sue funzionalità ad un altro livello: creare un pannello domotico completamente personalizzabile.

Se avete sempre voluto un costosissimo sistema di domotica che interagisce con luci, clima, porte/finestre e molto altro della vostra abitazione, ora potete averlo gratis e soprattutto personalizzato!

Come funziona:

Floorplan si integra con Home Assistant in 2 modi:

  • Creando una nuova “Vista”
  • Creando un Pannello personalizzato.

Se non sai di cosa sto parlando: Installare Home Assistant. Guida completa

La dinamica di installazione è la stessa cambia solo il modo in cui si accede alla dashboard.

All’interno del file di configurazione di Floorplan, è stata pensata una configurazione a gruppi analoga a quella di Home Assistant ma senza alcun legame logico con essa. I gruppi che andremo a configurare su Floorplan saranno legati tra loro solo da degli “stili di visualizzazione” (CSS)

 

Parti principali:

Floorplan si compone di pochi e semplici componenti:

  • Il file di configurazione: Floorplan.yaml, dove andremo a specificare i gruppi con le relative classi CSS e il Layout del nostro pannello domotico.
  • Una cartella dove è presente il template WEB da utilizzare: panels\floorplan.html
  • Un’altra cartella dove metteremo il file con le classi CSS e il Layout del nostro pannello domotico: www\custom_ui\floorplan\floorplan.css e floorplan.svg

L’ultimo file, floorplan.svg, come detto in precedenza è il Layout del nostro pannello domotico.

 

Uno dei motivi per il quale Floorplan è una potentissima integrazione di Home Assistant, è che ci permette di creare il nostro pannello domotico personalizzato. Per fare questo è sufficiente creare un file con estensione .SVG e caricarlo nella cartella indicata in precedenza.

L’unica cosa da fare è linkare gli oggetti che andiamo a creare con le entity presenti in Home Assistant.

 

 

Ecco cosa bisogna fare:

  • Scaricate ed installate Inkscape. Questo programma è discretamente facile da usare e vi permetterà di creare il vostro pannello domotico personalizzato.
  • Se siete abbastanza pratici di Photoshop e/o qualsiasi altro programma di grafica, fate gli spavaldi e saltate il tutorial, è abbastanza intuitivo, altrimenti vi consiglio di seguire qualche tutorial Online.

Questo è fatto bene:

  • Definite la grandezza del documento che andate a creare (Si, fatelo della risoluzione del vostro Tablet così lo vedrete perfetto!). Guida
  • Ogni oggetto che create dentro inkscape, va linkato con un entity di Home Assistant. Per linkare l’oggetto è sufficiente cliccarci sopra e premete “Object Properties” e, nel campo “ID“, specificare l’entity di Home Assistant. Es: sensor.forecastio_apparent_temperature. La lista delle Entity la trovate nell’interfaccia di Home Assistant, cliccando sul simbolo “< >”.

 

2) Floorplan: Configurazione

Avete creato il vostro pannello domotico? Ottimo, procediamo con il resto dell’installazione.

  • Entrate nella pagina di GitHub dove sono presenti i sorgenti di Floorplan.
  • Scaricate tutto il contenuto cliccando su “Clone or download“, e salvate lo zip.
  • Copiate la cartella “panels” dentro la Raspberry a questo percorso: /home/homeassistrant/.homeassistant
  • Copiate la cartella “www” ed il suo contenuto, nello stesso percorso
  • Copiate il file di configurazione: floorplan.yaml e panel_custom.yaml dentro lo stesso percorso.
  • Aggiungete questa riga alla fine del vostro file configuration.yaml

panel_custom: !include panel_custom.yaml

  • Sovrascrivete il file del vostro pannello domotico con quello presente dentro www/custom_ui/floorplan/floorplan.svg
  • Riavviate Home Assistant o da linea di comando o da interfaccia WEB.

 

Salvo imprevisti, una volta che Home Assistant è stato riavviato, dovreste trovarvi sulla sinistra un nuovo Tab chiamato “Floorplan”. Se ci cliccate dovreste trovare la vostra Planimetria/Dashboard che avete disegnato con Inkscape.

Quanta soddisfazione state provando in questo momento? Appendete al muro il vostro tablet ed iniziate a vivere la domotica che avete sempre sognato, a costo 0 e anche con la giusta dose di divertimento!

 

 

Considerazioni

Questo è un altro esempio che i nostri limiti sono fatti per essere superati. Questo meccanismo potete applicarlo come ho fatto io per avere 2 Dashboard:

  • Una che mi gestisce i comandi dell’abitazione molto simile a quella di inizio articolo.
  • La seconda invece mi mostra una planimetria della casa con luci, allarme e stato dei sensori. In base a quando vengono azionati ricevo notifiche e l’immagine cambia colore a seconda di come ho deciso di strutturarla.

A differenza degli altri progetti, questo è un po’ più articolato dato che volendo è possibile giocare parecchio con componenti JAVA, CSS e HTML.

Mostrate ai vostri amici cosa siete in grado di fare con una Raspberry!

17 commenti

  1. Cesare Quadalti on

    Ciao,
    sto cercando di creare un secondo pannello Floorplan solo che non funziona. IN panel_custom ho aggiunto il secondo floorplan
    – name: floorplan1
    sidebar_title: Pannello
    sidebar_icon: mdi:home
    url_path: pannello
    config: !include floorplan1.yaml
    che crea un altro URL di nome pannello (l’altro si chiamava piantina) ed include una copia del file floorplan (floorplan1). Dentro floorplan1.yaml ho fatto puntare l’SVG ed il CSS alla directory copia dell’altra (floorplan1) dentro custom_ui. Ho poi creato dentro panels un file html floorplan1.html gemello dell’altro tranne che dentro linko la directory floorplan1
    link rel=”import” href=”/local/custom_ui/floorplan1/ha-floorplan.html” async
    Ho anche ricreato dentro /home/homeassistant/.homeassistant/www/custom_ui state-card-floorplan1.html che dentro punta
    link rel=”import” href=”floorplan1/ha-floorplan.html” async
    Risultato sulla barra di HA il link piantina (ex floorplan originale) funziona, vedo il link pannello ma se clicco sopra passa sì all’URL floorplan1 ma non vedo nulla. Visto che hai detto di averne creato uno nuovo anche tu, sapresti dirmi per favore dove sto sbagliando, o cosa ho dimenticato? Grazie

  2. Giorgio Sarcletti on

    Ciao Nik sono sempre io (Giorgio Sarcletti) sempre piu entusiasta dei tuoi progetti: Anche di questo che sono riuscito parzialmente a realizzare. Quando vado a sostituire floorplan.svg con il mio floorplan.svg (la planimetria di casa mia) continuo a vedere in homeassistant la planimetria inserita come esmpio. Mi sa che c’è forse qualcos’altro da aggiungere e/o da configurare. Mi dici cosa? Ti ringrazio e ti saluto come al solito molto cordialmente Giorgio Sarcletti. Se vuoi rispondere via e-mail questa è la mia
    [email protected]

  3. Giorgio Sarcletti on

    ciao Nic, dopo essere riuscito ad installare il primo floorplan, sono interessato anch’io ad inserire un secondo floorplan (sai l’appetito vien mangiando). Ho visto dall’e-mail di Cesare Quadalti che anche lui aveva la stessa esigenza ma gli hai risposto in privato sulla sua e-mail. Ti dispiace rispondere anche a me partendo dalla implementazione indicata?. Ti ringrazio e ti saluto molto cordialmente augurandoti una buona serata Giorgio Sarcletti

  4. ciaoo io sono un pazzo di home assistant e volevo riuscire a creare un floorplan ma non so dove sbaglio faccio i passaggi che dici e su ha si vede la planimetria che creo ma non riesco a rendere clikkabili inpulsanti e non so dove sbaglio mi potresti aiutare grazie mille

  5. Ciao Massimo,

    Se la planimetria la vedi ma non riesci a cliccare i pulsanti significa che non usi l’entity name corretto.
    Prova a rileggere questa parte:

    Ogni oggetto che create dentro inkscape, va linkato con un entity di Home Assistant. Per linkare l’oggetto è sufficiente cliccarci sopra e premete “Object Properties” e, nel campo “ID“, specificare l’entity di Home Assistant. Es: sensor.forecastio_apparent_temperature. La lista delle Entity la trovate nell’interfaccia di Home Assistant, cliccando sul simbolo “<>”.

    Fammi sapere se hai ancora dubbi

    Ciao

    Nik

  6. Ciao ho visto che i nomi sono corretti ma poi leggendo ho visto che devo andare a modificare anche un altro file con le entity che inserisco che si chiama floorplan.yaml giusto. Saresti cosi gentile da spiegarmi il funzionamento di quel file? ci sono altri file da modificare tipo quel floorlan.css dentro la cartella floorplan
    grazie e scusa

  7. ciao, sto cercando di creare una dashboard come l’immagine ad inizio pagina, ma sto trovando parecchie difficoltà..purtroppo le mie conoscenze sono molto limitate e probabilmente questo è il motivo per cui non riesco nel mio intento. ad esempio ho creato una tab con la data e l’ora ma non riesco a fare in modo che questi dati siano visibili sulla dashboard.. ho provato anche con Hadashboard ma peggio che andar di notte.

  8. Ciao Federico,

    Prima di tutto, non disperare. Come in ogni cosa si tratta solo di fare pratica. Onestamente, ti consiglio di fare pratica con Floorplan rispetto ad Hadashboard in quanto decisamente più facile.

    Per ora ti posso solo consigliare di leggere bene e passo passo la mia guida. Se dovessi incontrare ulteriori problemi fammi sapere

    Ciao

    Nik

  9. Ciao.
    Mi sono appassionato ad Homeassistant da non molto, ed è leggendo articoli come i tuoi che capisco che le potenzialità dello strumento sono davvero infinite!
    Ho seguito la tua guida passo passo e vedo correttamente la planimetria della casa.
    Ho anche linkato ogni oggetto con la entity id di HA.
    Purtroppo, come Massimo sopra, gli oggetti non risultano cliccabili.
    Ci potresti dire come deve essere editato il file floorplan.yaml?
    Per quanto riguarda gli altri files?

    Grazie
    Andrea

  10. Ciao Andrea,

    Visto che non sei il primo che me lo chiede, deduco che dal mio articolo non si capisca. Vedo di fargli un aggiornamento in modo da renderlo più facile da capire
    In basso all’articolo clicca “Resta aggiornato” così appena rilascio la nuova versione riceverai l’aggiornamento

    Ciao

    Nik

  11. Non mi funziona,
    c’è qualcosa che manca ma non capisco cosa 🙁
    In home assistant ottengo invalid config
    si sapreste indicare la strada ?

  12. Ciao e complimeti per il servizio che offri,io non sono molto esperto ma ho cercato di seguire tutti i passaggi,alla fine pero’ quando copio
    panel_custom: !include panel_custom.yaml
    mi da questo errore nel controllo configurazione
    Error loading /config/configuration.yaml: Config file not found: /config/panel_custom.yaml
    dove sbaglio?

  13. Ciao Alessandro,
    Dall’errore sembrano possano essere 2 cose:
    – Nel file configurations, non hai indicato la parte di config per il pannello
    – Il file “Panel_Custom.yaml” o non esiste o ha dei permessi particolari.

    Prova a verificare

    Ciao

    Nik

Lascia un commento