Facebook Twitter Instagram
    Nicola PreoNicola Preo
    • Home
    • Domotica
    • Informatica
    • Recensioni
    • Tutorial
    • About Nicola
      • Contattami
    Nicola PreoNicola Preo
    Domotica

    Pannello domotico. Home Assistant + Floorplan

    26 commenti5 Mins Read
    dashboard

    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.

    Se volete il Bundle:

    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!

    Articoli collegati

    Case domotiche: una Dashboard per gestirle

    Rilevatore GAS metano smart

    Serratura Domotica Smart

    26 commenti

    1. Nik on 23 Gennaio 2021 18:25

      Ciao Ale,
      Benchè Floorplan sia fantastico, l’articolo è un tecnologicamente datato. Questa è la nuova versione che puoi utilizzare su una nuova installazione: https://community.home-assistant.io/t/floorplan-now-available-as-a-lovelace-card/115489
      In aggiunta a quello ti rimando a questo link per poterti studiare cosa fare con “Picture Elements”, ottimo componente per realizzare quello di cui hai bisogno: https://www.home-assistant.io/lovelace/picture-elements/#how-to-use-the-style-object

      A presto

      Nik

    2. Ale on 23 Gennaio 2021 18:08

      Ciao Nicola. Sto seguendo la tua guida per implementare il floorplan in modo tradizionale. Ma ho qualche difficoltà, no risco a visualizzare sulla sidebar Floorplan. La cartella panels non mi è chiearo dive va inserita poichè uso hassOS e non Hassio core. Tuttavia ho provato a collocarla in vari punti senza risultato. Se potessi avere qualche delucidazione te ne sarei grato.

    3. Nik on 22 Ottobre 2020 9:58

      Ciao Paolo,
      Se dentro la cartella /Home/* Non c’è nulla vuole semplicemente dire che Homeassistant è installato da un’altra parte. Che tipo di installazione hai fatto?
      Il percorso di installazione può variare: “/var/opt/homeassistant” “/usr/share/hassio/”
      Prova a verificare anche quei 2, in ogni caso qui trovi un sacco di informazioni utili inerenti l’installazione: https://www.home-assistant.io/docs/

      Nik

    4. Paolo on 14 Ottobre 2020 21:56

      Ciao Nicola, sono sempre Paolo (vedi commento del 5 agosto). Sono alla disperazione… non riesco a trovare la cartella dove copiare i files. Ho dato anche il comando per vedere le cartelle nascoste ma a me manca proprio la partenza /home/homeassistrant/.homeassistant (collegandomi tramite filezilla non vedo neppure la cartella home). Avresti modo di fornirmi ulteriori istruzioni? Grazie

    5. Nik on 8 Agosto 2020 10:42

      Ciao Paolo,

      – Per il primo punto puoi usare questo comando “ls -latrh” per visualizzare tutte le cartelle anche quelle nascoste;
      – Per il secondo punto, probabilmente è un errore di permessi. Assicurati che i file, specialmente le cartelle abbiamo gli stessi permessi e accessi di tutti gli altri. Puoi usare i comandi “chmod” e “chown” per sovrascriverli eventualmente.

      Ciao

      Nik

    6. Paolo on 5 Agosto 2020 0:04

      Ciao Nicola,
      grazie per questa dettagliatissima guida! Avrei due domande di cui ad una hai già parzialmente risposto ma non trovo soluzione:
      – in hass collegato tramite ssh vedo la cartella home ma non le sottocartelle e non le trovo da altre parti. come devo fare per far apparire quelle nascoste nel caso fosse quello il problema? io ho provato a crearle ma non so se va bene uguale..
      – riavviando il sistema terminata la procedura mi da un errore nei log: Error loading /config/configuration.yaml: in “/config/configuration.yaml”, line 27, column 15: Unable to read file /config/panel_custom.yaml.
      Può essere dovuto al fatto che ho creato a mano le sottocartelle e non funzioni?

      Grazie di tutto in anticipo e ancora complimenti!

    7. Nik on 24 Febbraio 2020 18:58

      Ciao Carlo,

      Mi fa piacere che apprezzi! In passato, a scopo sperimentale, ho provato a crearne più di uno. Qui ti spiegano come fare: https://community.home-assistant.io/t/how-to-set-up-layers-for-different-floorplans/39920/17
      In ogni caso, è un processo lungo e laborioso, specialmente da mantenere. Consiglio piuttosto di esplorare il mondo delle “Lovelace”: https://www.home-assistant.io/lovelace/

      Appena riesco, tornerò a scrivere. Ho in mente dei progetti fantastici alla portata di tutti!

      Fammi sapere come va

      Ciao

      Nik

    8. Santoro Carlo on 21 Febbraio 2020 9:53

      Ciao Nicola, grazie per la splendida guida che tempo fa mi ha permesso di creare il mio primo floorplan…
      Adesso volevo chiederti se mi indicheresti i passaggi da sefuire per poter creare un secondo floorplan, in quanto ho domotizzato anche parte della taverna e vorrei vederla in piantina.

      Grazie per il tuo ammirevole contributo

    9. Nik on 13 Febbraio 2020 21:55

      Ciao Diego,
      Nel tuo caso potrebbero esserci 2 possibilità:
      – La tua cartella è nascosta (ha il . davanti)
      – Hai installato HASS in un percorso diverso da quello mio. E’ uguale, basta che trovi dove l’hai installato

      Ciao

      Nik

    10. diego on 13 Febbraio 2020 14:37

      Ciao Nicola!
      Stavo seguendo la tua guida per implementare la piantina in hassio ma mi fermo a questo punto:

      Copiate la cartella “panels” dentro la Raspberry a questo percorso: /home/homeassistrant/.homeassistant

      Io se mi collego in ssh al mio rasp, trovo la cartella home ma all’interno non ci sono le altre due sottocartelle, è normale?
      Grazie
      mille
      Diego

    11. Alessandro on 15 Gennaio 2019 0:02

      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?

    12. Nik on 20 Aprile 2018 21:52

      Ciao Tonnio,

      Ti ho risposto via mail.

      Nik

    13. Tonnio on 18 Aprile 2018 21:32

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

    14. Nik on 29 Marzo 2018 18:52

      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

    15. Andrea on 28 Marzo 2018 12:39

      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

    16. Nik on 16 Marzo 2018 22:34

      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

    17. Federico on 16 Marzo 2018 14:25

      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.

    18. Massimo on 10 Marzo 2018 7:25

      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

    19. Nik on 9 Marzo 2018 19:09

      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

    20. Nik on 9 Marzo 2018 19:05

      Ciao Giorgio,

      Ti ho risposto via mail

    21. Massimo on 9 Marzo 2018 7:00

      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

    22. Giorgio Sarcletti on 1 Marzo 2018 21:53

      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

    23. Nik on 26 Febbraio 2018 19:32

      Ciao Giorgio,

      Ben tornato! Ti ho risposto via mail

      Nik

    24. Giorgio Sarcletti on 25 Febbraio 2018 22:10

      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]

    25. Nik on 10 Febbraio 2018 20:04

      Ciao Cesare,

      Ti ho risposto via mail

      Nik

    26. Cesare Quadalti on 10 Febbraio 2018 19:05

      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

    Leave A Reply

    Homepage | Chi è Nicola Preo | Contatti | Privacy |

    Copyright © Nicola Preo

    Type above and press Enter to search. Press Esc to cancel.