Tags: NodeRED, IoT, Bluemix
Un sistema di rilevamento dati e loro visualizzazione con NodeRED su Bluemix
Quando si parla di NodeRED in generale ci si riferisce ad applicazioni di backend, applicazioni che fanno delle elaborazioni senza un'interfaccia o che alimentano basi dati ecc. Oggi aggiungiamo un'interfaccia utente!
Data la struttura intrinsecamente incrementale di NodeRED, che può cioè essere arricchito di ulteriori blocchetti (nodi) per le necessità più disparate, ho pensato di scrivere questo breve articolo per mostrare come sia possibile arricchirlo utilizzando delle librerie di nodi, sia come dare a NodeRED la possibilità di costruire e visualizzare delle dashboard, senza particolare programmazione aggiuntiva.
Mi sono inventato quindi il seguente problema con la relativa soluzione:
Problema: L'associazione dei club nautici delle coste Italiane vuole un sistema che faccia il monitoraggio in tempo reale di tre parametri fisici inerenti il meteo locale: temperatura, umidità e velocità del vento.
Questi dati devono essere mostrati su una dashboard web consultabile da qualsiasi smartphone, e devono essere mostrati i dati attuali e storici delle ultime 12 ore. Ci sarà una dashboard per ciascun porto o club nautico.
Una soluzione a questo problema è la realizzazione del sistema di monitoraggio utilizzando NodeRED su IBM Bluemix, mediante le interfacce verso il mondo IoT.
Ingredienti della soluzione: useremo Bluemix e NodeRED per creare e far girare l'applicazione, un simulatore di sensori software per iniettare i parametri fisici (che nella realtà andrebbero prelevati da sensori IoT utilizzando il protocollo MQTT), una libreria NodeREd per la dashboard.
Step 1) Creazione Applicazione (vuota)
Apriamo come di consueto il nostro Bluemix, entriamo in uno Space o ne creiamo uno nuovo, andiamo nel catalogo e creiamo un'applicazione NodeRED usando il Boilerplate NodeRED Starter.
Diamo un nome univoco alla nostra applicazione: io la chiamo condizionimeteo1
Trasciniamo il blocchetto INJECT nell'editor grafico e usiamo i parametri come in figura (in pratica diciamo di iniettare un segnale di start ogni 5 secondi)
Il blocchetto Gauge segnalerà la velocità del vento in tempo reale: creiamo un nuovo gruppo Wind e sistemiamo i parametri come in figura
Il blocchetto Chart segnalerà lo storico del valore:
E poi sistemiamo il blocchetto Text:
Il flusso finito a questo punto è il seguente:
Proviamo a fare il DEPLOY del nostro flow e se tutto va bene potremo visualizzare la nostra dashboard andando nel tab in alto a destra Dashboard:
Verrà visualizzato il seguente cruscotto:
Temperatura ed Umidità
Ora che abbiamo capito come funziona il meccanismo della dashboard aggiungiamo quelle della temperatura ed umidità
SENSORE
Per fare questo abbiamo bisogno di un sensore che ci comunichi questi parametri. Andiamo quindi all'URL:
https://quickstart.internetofthings.ibmcloud.com/iotsensor/
e copiamo la stringa in alto a destra che sarà l'ID del nostro sensore.
Torniamo nel nostro editor grafico e trasciniamo il blocchetto IBMIOT nel quale andremo a copiare l'ID del sensore nel campo Device ID
Poi usiamo 2 FUNCTION per selezionare temperatura ed umidità:
usando il codice:
msg.payload = msg.payload.d.humidity;
return msg;
e
msg.payload = msg.payload.d.temp;
return msg;
Ora siamo pronti per creare le relative dashboard.
Per la temperatura (e poi per l'umidità) prendiamo un GAUGE ed un CHART , creiamo altri 2 Group per temperatura e umidità e li creiamo nel seguente modo:
e
Facciamo la stessa cosa per il gruppo umidità con altri 2 blocchetti.
Questo flusso sarà così:
Trasciniamo i 2 nuovi gruppi sotto quello WIND nel pannello a destra come in figura:
Effettuando il Deploy e facendo il refresh della pagina web della dashboard avremo il seguente risultato:
Che è quello che volevamo ottenere.
Possiamo provare a modificare i valori di temperatura e umidità usando il nostro sensore software che avevamo avviato prima e vedremo i valori cambiare nella nostra dashboard.
Possiamo anche copiare l'url della dashboard nel browser web del nostro smartphone e controllare che anche li venga visualizzata correttamente.
Conclusioni
Abbiamo utilizzato Nodered, lo abbiamo esteso e abbiamo creato una dashboard utilizzando dati inviati da un sensore MQTT
Un sistema di rilevamento dati e loro visualizzazione con NodeRED su Bluemix
Quando si parla di NodeRED in generale ci si riferisce ad applicazioni di backend, applicazioni che fanno delle elaborazioni senza un'interfaccia o che alimentano basi dati ecc. Oggi aggiungiamo un'interfaccia utente!
Data la struttura intrinsecamente incrementale di NodeRED, che può cioè essere arricchito di ulteriori blocchetti (nodi) per le necessità più disparate, ho pensato di scrivere questo breve articolo per mostrare come sia possibile arricchirlo utilizzando delle librerie di nodi, sia come dare a NodeRED la possibilità di costruire e visualizzare delle dashboard, senza particolare programmazione aggiuntiva.
Mi sono inventato quindi il seguente problema con la relativa soluzione:
Problema: L'associazione dei club nautici delle coste Italiane vuole un sistema che faccia il monitoraggio in tempo reale di tre parametri fisici inerenti il meteo locale: temperatura, umidità e velocità del vento.
Questi dati devono essere mostrati su una dashboard web consultabile da qualsiasi smartphone, e devono essere mostrati i dati attuali e storici delle ultime 12 ore. Ci sarà una dashboard per ciascun porto o club nautico.
Una soluzione a questo problema è la realizzazione del sistema di monitoraggio utilizzando NodeRED su IBM Bluemix, mediante le interfacce verso il mondo IoT.
Ingredienti della soluzione: useremo Bluemix e NodeRED per creare e far girare l'applicazione, un simulatore di sensori software per iniettare i parametri fisici (che nella realtà andrebbero prelevati da sensori IoT utilizzando il protocollo MQTT), una libreria NodeREd per la dashboard.
Step 1) Creazione Applicazione (vuota)
Apriamo come di consueto il nostro Bluemix, entriamo in uno Space o ne creiamo uno nuovo, andiamo nel catalogo e creiamo un'applicazione NodeRED usando il Boilerplate NodeRED Starter.
Diamo un nome univoco alla nostra applicazione: io la chiamo condizionimeteo1
Aspettiamo che l'applicazione sia partita (led verde acceso) ed entriamo nell'editor (dopo aver dato una user e password).
Step 2) Caricamento libreria dashboard
Una volta nell'editor grafico di NodeRED, selezioniamo il menu sandwich (con le 3 lineette) in alto a destra e selezioniamo la voce Manage Palette.
Si aprirà sulla sinistra un pannello dal quale impostare la ricerca della parola 'dashboard' come nella figura:
Cliccare a fianco della voce node-red-dashboard il pulsante Install.
Seguire le brevi istruzioni eventuali ed attendere la corretta estensione della libreria di blocchetti.
Cliccare Done in alto per chiudere la palette delle estensioni.
Possiamo andare nella palette dei blocchetti, scorrendoli verso il basso fino a trovare quelli nuovi aggiunti per implementare la nostra dashboard, per verificare che siano stati aggiunti correttamente.
Step 3) Creazione del flusso Nodered
A questo punto vogliamo fare le seguenti cose: predisponiamo l'interfaccia Mqtt IoT per leggere i dati di temperatura ed umidità dall'esterno e simuliamo la velocità del vento con una funzione random:
Velocità del vento Trasciniamo il blocchetto INJECT nell'editor grafico e usiamo i parametri come in figura (in pratica diciamo di iniettare un segnale di start ogni 5 secondi)
Poi usiamo un blocchetto FUNCTION e ci scriviamo il seguente codice:
msg.payload = Math.round(Math.random()*100);
return msg;
return msg;
che farà in modo da restituire un valore random intero compreso tra 0 e 100.
Ora siamo pronti a creare la prima dashboard che mostri la velocità del vento.
Usiamo i blocchetti Gauge, Chart e Text dei nuovi nodi caricati prima:
che modificheremo in questo modo.
Il blocchetto Chart segnalerà lo storico del valore:
E poi sistemiamo il blocchetto Text:
Il flusso finito a questo punto è il seguente:
Proviamo a fare il DEPLOY del nostro flow e se tutto va bene potremo visualizzare la nostra dashboard andando nel tab in alto a destra Dashboard:
Verrà visualizzato il seguente cruscotto:
Temperatura ed Umidità
Ora che abbiamo capito come funziona il meccanismo della dashboard aggiungiamo quelle della temperatura ed umidità
SENSORE
Per fare questo abbiamo bisogno di un sensore che ci comunichi questi parametri. Andiamo quindi all'URL:
https://quickstart.internetofthings.ibmcloud.com/iotsensor/
e copiamo la stringa in alto a destra che sarà l'ID del nostro sensore.
Torniamo nel nostro editor grafico e trasciniamo il blocchetto IBMIOT nel quale andremo a copiare l'ID del sensore nel campo Device ID
Poi usiamo 2 FUNCTION per selezionare temperatura ed umidità:
usando il codice:
msg.payload = msg.payload.d.humidity;
return msg;
e
msg.payload = msg.payload.d.temp;
return msg;
Ora siamo pronti per creare le relative dashboard.
Per la temperatura (e poi per l'umidità) prendiamo un GAUGE ed un CHART , creiamo altri 2 Group per temperatura e umidità e li creiamo nel seguente modo:
e
Facciamo la stessa cosa per il gruppo umidità con altri 2 blocchetti.
Questo flusso sarà così:
Trasciniamo i 2 nuovi gruppi sotto quello WIND nel pannello a destra come in figura: Effettuando il Deploy e facendo il refresh della pagina web della dashboard avremo il seguente risultato:
Che è quello che volevamo ottenere.
Possiamo provare a modificare i valori di temperatura e umidità usando il nostro sensore software che avevamo avviato prima e vedremo i valori cambiare nella nostra dashboard.
Possiamo anche copiare l'url della dashboard nel browser web del nostro smartphone e controllare che anche li venga visualizzata correttamente.
Conclusioni
Abbiamo utilizzato Nodered, lo abbiamo esteso e abbiamo creato una dashboard utilizzando dati inviati da un sensore MQTT
Nessun commento:
Posta un commento