Creare una Dashboard per la rete Antennino con Thingsboard

Realizziamo la Dashboard per la rete Antennino con gateway, utilizzando un software open source per implementare un pannello di controllo per i nostri dispositivi wireless. 

In questo post vi abbiamo descritto l’hardware del nuovo Gateway per Antennino basato sul potente NodeMCU ESP 32 ed avervi introdotto il software open source Thingsboard con cui abbiamo realizzato la Dashboard per la gestione a distanza dei moduli Antennino periferici e collettori di dati.

Ricordiamo che lo scopo del Gateway è rendere disponibile una rete di sensori Antennino, quindi una rete di sensori per l’IoT sul lato edge, in Internet e farla interagire con il web.

L’applicazione, ossia la Dashboard, che realizza tutto questo è stata realizzata grazie a ThingsBoard, che è un software open sviluppato proprio per creare delle Dashboard da utilizzare nell’ambito di sistemi Internet of Things (non a caso si chiama ThingsBoard).

In questa puntata conclusiva riprendiamo quindi il discorso da esso, dal suo utilizzo e dalla creazione della nostra Dashboard personalizzata che utilizzeremo per lavorare con la rete di sensori basata sui moduli Antennino convenzionali.

ThingsBoard

In questa sede non affronteremo la procedura di installazione di ThingsBoard perché è veramente banale e richiederebbe ulteriore spazio; chi volesse approfondire l’argomento, all’indirizzo web https://thingsboard.io/docs/user-guide/install/installation-options/ potrà trovare descrizioni dettagliate e aggiornate delle vare procedure di installazione, con i suggerimenti del caso.

Come accennato nella prima puntata, se ci interessa solamente fare un test si può utilizzare allo scopo la versione live di ThingsBoard, che in pratica mette a nostra disposizione un ambiente completamente personale e personalizzabile senza installarlo.

Quello che faremo in queste pagine sarà focalizzare l’attenzione alla configurazione della dashboard per evidenziare come sia possibile raccogliere dati telemetrici da un paio di nodi Antennino (ossia moduli impostati come nodo periferico), visualizzare i dati corrispondenti su dei grafici oppure su degli indicatori analogici, controllare da remoto un pin presente su Antennino tramite un pulsante virtuale sulla dashboard, inviare e-mail di alert, un messaggio su Telegram oppure una PushNotification, quando un certo parametro supera una soglia da noi impostata.

Renderemo disponibili anche dei Widget custom e tutti i file di configurazione JSON per realizzare i test con il Gateway, cosicché sarà sufficiente importare i vari file JSON per trovarsi l’ambiente configurato e pronto per lavorare. Iniziamo con la procedura di registrazione sull’ambiente di test.

Dunque, iniziamo a lavorare con il nostro ThingsBoard: innanzitutto bisogna andare alla pagina web https://demo.thingsboard.io/signup, dove è possibile registrarsi per poter configurare la propria Dashboard; la Fig. 1 ne riporta l’aspetto.

Fig. 1 La pagina di login della Dashboard.

 

Una volta terminata la registrazione è necessario aprire la pagina web https://demo.thingsboard.io/home (Fig. 2) per accedere con le proprie credenziali alla dashboard personale ed iniziare a prendere confidenza con l’ambiente.

 

Fig. 2 Accesso alla Dashboard.

 

In Fig. 3 è possibile vedere come si presenta la Homepage della nostra DashBoard: a sinistra abbiamo un menu contenente tutte le voci principali e al centro le stesse voci proposte nella modalità tile (icone).

Andiamo ad ispezionare le voci principali: notate che selezionando una singola voce sul menu di sinistra oppure dall’icona centrale si apre una finestra in cui sono elencati tutti gli oggetti contenuti dentro questa voce.

Per vederne i dettagli dobbiamo cliccare sull’elemento interessato, oppure entrare in modalità “editing”.

Il comportamento descritto si ripete per ciascuna voce del menu.

Fig. 3 Homepage della Dashboard.

Rule Chain

Questo item (Fig. 4) è il cuore di tutto il sistema e permette di configurare il comportamento sulla base di eventi. Cliccando sulla voce di menu o sull’icona corrispondente si apre una finestra contenente la Root Rule Chain, contenente, se ve ne sono, gli item.

Aprendone il dettaglio si può vedere che l’aspetto è molto simile a quello di Node Red (https://nodered.org) e probabilmente è mediato da quello e declinato all’uso specifico di ThingsBoard.

È possibile definire in modo visuale (con il semplice Drag and Drop dei componenti a video) il comportamento del sistema impiegando degli oggetti predefiniti presenti sulla sinistra e relazionandoli tra loro tramite delle frecce di collegamento.

Fig. 4 Rule Chain.

 

È anche possibile inserire un blocco custom contenente del codice personalizzato.

Non fatevi spaventare da questa cosa, perché per il momento non toccheremo questa configurazione. La lasceremo come si trova dopo l’installazione. Dedicheremo spazio a questa importantissima sezione in articoli futuri, che proporremo sul tema della gestione degli allarmi e delle notifiche.

Clienti di Thingsboard

Questa opzione (Fig. 5) permette di definire dei clienti specifici ai quali assegnare i Dispositivi della rete gestita attraverso la Dashboard.

Dispositivi di Thingsboard

La Dashboard demo è già popolata (Fig. 6) da una serie di dispositivi con i quali è possibile sperimentare e sul sito sono indicate le istruzioni dettagliate su come fare dei test. (thingsboard.io/docs/guides).

 

Fig. 5 Selezione clienti.

 

Fig. 6 Dashboard riportante i dispositivi.

Libreria Widget

Questa opzione contiene una serie di famiglie di Widget (Fig. 7) utilizzabili nella nostra Dashboard. Ad esempio, abbiamo la possibilità di visualizzare dati come la temperatura o la pressione, tramite degli indicatori Analogici (Analogue Gauge) come è visibile nella Fig. 8.

Da qui è anche possibile creare dei propri Widget copiando e personalizzando quelli esistenti oppure crearne uno da zero. Inoltre, come anticipato, è possibile scaricare la definizione del Widget in formato JSON a scopo di backup oppure per crearne uno nuovo basato su uno esistente (Fig. 9).

Fig. 7 Famiglie di widget

 

Fig. 8 Analogue gauge.

 

Fig. 9 Creazione nuovo widget.

 

Una volta scaricato il file, è possibile aprirlo con Notepad++ ed editarne il nome nel file di testo, ricaricarlo (Fig. 10), cosicché si è pronti a creare un proprio Widget.

All’indirizzo web https://thingsboard.io/docs/user-guide/contribution/widgets-development/ è possibile trovare le linee guida per la programmazione dei Widget.

Le competenze necessarie per lo sviluppo di Widget personalizzati implicano una conoscenza abbastanza approfondita del funzionamento di ThingsBoard, ma anche di HTML, CSS, AngularJS e JSON.

 

Fig. 10 Creazione di un gauge.

DashBoard

Questo è la parte visuale (Fig. 11) di ThingsBoard, il pannello di controllo, anzi i pannelli di controllo, che permettono di avere una visuale sui dispositivi.

Come potete notare sono già presenti diverse Dashboard configurate, e sono tutte molto interessanti. Vi consigliamo di sperimentare con tutte nel caso abbiate l’hardware necessario.

Fig. 11 Le Dashboard già configurate.

 

Facendo doppio clic su una delle Dashboard presenti è possibile ispezionarne l’aspetto ed eventualmente, entrando in modalità editing (Fig. 12), modificare il posizionamento e le dimensioni dei vari Widget che la compongono. Nella modalità editing si entra cliccando sul pulsante arancione posto nell’angolo inferiore destro, riportante il simbolo della matita.

Fig. 12 Modalità editing.

 

Per editare, invece, le proprietà dei singoli Widget, è necessario cliccare sul simbolo della matita presente sul bordo superiore destro del Widget che si vuole editare (Fig. 13).

Una volta completata l’operazione di editing, ci si trova di fronte qualcosa di simile a quanto proposto nella Fig. 14 che riporta l’editing di uno specifico widget.

Bene, ciò detto possiamo ritenere conclusa la descrizione della Dashboard ed ora che vi abbiamo passato tutte le informazioni utili a crearvene una personalizzata, passiamo all’ultimo step del progetto, vale a dire la realizzazione dell’hardware del Gateway per la rete di sensori IoT basata su Antennino.

Fig. 13 Il widget da editare.

 

Fig. 14 Completamento dell’editing.

 

Conclusioni

Bene, con questo abbiamo terminato. Vi abbiamo introdotto la realizzazione del Gateway Antennino che ci permetterà di collegare la nostra rete di dispositivi ad una Dashboard Thingsboard, abbiamo illustrato le particolarità del Gateway e introdotto il protocollo MQTT e la Dashboard IoT ThingsBoard.

Vi ricordiano che i vari Sketch possono essere scaricati dal repository Github https://github.com/open-electronics/antennino/gateway_thingsboard, dove sarà possibile scaricare anche le librerie utilizzate per il progetto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Menu