Introduzione
Node-RED è uno strumento low-code che permette di sviluppare applicazioni software mediante l’utilizzo di diversi plugin. Oltre a permettere di realizzare il lato back-end dell’applicazione, Node-RED consente anche lo sviluppo del rispettivo front-end, ossia dell'interfaccia grafica mediante cui l’utente può interagire visivamente con il sistema.
In questo tutorial vedrai come creare la tua prima Dashboard in Node-RED utilizzando alcuni widget messi a disposizione dal relativo plugin.
Per prima cosa dovrai accedere alla home di Node-RED. Se non sai come fare oppure non hai ancora installato Node-RED sul tuo server puoi seguire la nostra guida su Come installare Node-RED su Ubuntu 20.04.
Installazione del Plugin Dashboard
In Node-RED sono presenti molti Plugin che è possibile integrare all’interno del proprio progetto. Alcuni sono ufficiali, ovvero rilasciati direttamente dagli sviluppatori di Node-RED, altri sono invece prodotti dalla community.
Anche per la realizzazione della Dashboard esistono numerosi Plugin, ma in questo tutorial consigliamo l’utilizzo di quello ufficiale “node-red-dashboard”.
Per procedere con l’installazione, dopo aver avviato il servizio ed esserti recato sulla home page dell’editor, seleziona la voce “Manage Palette” dal Menù posto in alto a destra.
Dopo aver aperto il menù, clicca sulla voce “Install” della sezione “Palette” e ricerca il plugin “node-red-dashboard”.
Una volta trovato, procedi con l’installazione.
Al termine dell’installazione nella palette degli elementi (a sinistra) verranno aggiunti nuovi elementi (nodi) da poter integrare all’interno del progetto.
A differenza di quelli già inseriti di default in Node-RED questi avranno corrispondenza univoca all’interno della Dashboard: potrai quindi creare differenti “schermate” (Tab) all’interno delle quali inserire i diversi elementi grafici.
I nodi aggiunti si differenziano in 2 tipologie: Attivi e Passivi. I nodi Attivi sono quelli con i quali si può interagire direttamente, mentre i nodi Passivi si occupano di mostrare a schermo le informazioni ricevute.
Aggiunta del widget Button
Prova ad aggiungere quindi un bottone alla Dashboard: trascina l’elemento “button” all’interno del progetto.
Non appena lo aggiungerai, nella parte superiore del nodo vedrai un triangolo arancione che indicherà una errata configurazione del nodo stesso. In questo caso l’errore è dato dal fatto che non hai definito una prima Tab da mostrare e il relativo Gruppo all’interno del quale il pulsante debba essere collocato.
Al di sotto del pulsante Deploy, clicca quindi sul simbolo della Dashboard ed aggiungi una Tab e un relativo Gruppo.
Dopo aver confermato queste azioni, clicca due volte sul nodo “bottone” appena inserito e compila i seguenti campi:
- Group: Gruppo a cui il bottone è associato (e relativa Tab);
- Size: Dimensione del widget all’interno della dashboard (è consigliabile non modificare questo parametro in questo punto);
- Icon: Icona da associare al widget (Angular Material Icons, Font Awesome oppure Weather Icons);
- Label: Nome da associare al widget;
- Tooltip: Suggerimento da voler far apparire al passaggio del mouse;
- Colour: Colore del testo inserito in “Label”;
- Background: Colore di sfondo;
- Payload: Messaggio da inviare alla pressione del bottone;
- Topic: Identificativo del messaggio;
- Name: Nome da attribuire al nodo all’interno del progetto:
Come visibile in figura, alla pressione del pulsante così configurato verrà inviato il testo “I was pressed”. Tuttavia per visualizzare questo messaggio all’interno della Dashboard è necessario inserire un elemento “passivo”, ossia un elemento con il quale non è possibile interagire direttamente, bensì si occuperà solo di mostrare l’informazione ricevuta.
In questo caso è necessario inserire il nodo “text”: trascinalo dalla Palette all’interno del progetto. Una volta aperto, avrai i seguenti campi da compilare:
- Group: Gruppo a cui il testo è associato;
- Size: Dimensione del widget all’interno della dashboard;
- Label: Nome da associare al testo (N.B. questo nome è statico all’interno della dashboard);
- Value Format: Campo da voler mostrare del messaggio ricevuto in input;
- Layout: Disposizione del widget (layout + valore da mostrare) all’interno della dashboard;
- Name: Nome da attribuire al nodo all’interno del progetto.
Una volta configurati i nodi è fondamentale organizzarli all’interno della Dashboard in base alle proprie esigenze.
Torna nella sezione “Dashboard” (in alto a destra), seleziona la Tab di interesse (in questo caso “Home”) e clicca sulla voce a destra “layout”. Da qui potrai organizzare i diversi widget inseriti nel progetto disponendoli nell’ordine che preferisci.
Una volta terminato, clicca sul pulsante “Done”.
Infine, collega l’output del pulsante con l’input del nodo di testo. In questa maniera il messaggio generato dalla pressione del pulsante verrà indirizzato al nodo di testo.
Terminata questa connessione, clicca su Deploy e recati alla Dashboard all’indirizzo http://IP_SERVER:1880/ui.
Verrai reindirizzato alla Tab “Home” nella quale troverai l’unico gruppo attualmente inserito (Default): quest’ultimo conterrà il pulsante d il testo ordinati secondo il layout impostato.
Alla pressione del pulsante verrà inviato il messaggio al nodo di testo così come mostrato in figura.
Aggiunta del widget Gauge
Altro widget di grande interesse è il Gauge: un indicatore circolare tramite il quale visualizzare la posizione del dato ricevuto all’interno di una scala ben definita. In questo esempio viene integrata una funzione che genera un numero casuale (tra 1 e 10) che verrà poi mostrato sull’indicatore.
Inserisci all’interno del progetto un nodo “inject”, uno “function”, il nodo “gauge” e collegali così come mostrato in figura.
Configura il nodo “inject” per avviare la funzione ogni secondo come mostrato in Figura.
Seleziona la voce “Inject once after 0.1 seconds, then” e abilita la voce “Repeat” definendo “Interval - every 1 seconds”.
Nel nodo funzione inserisci il seguente snippet di codice:
msg.payload = Math.random()*10;
return msg;
Ogni volta che questa funzione verrà avviata, genererà un numero compreso tra 0 e 10 e lo restituirà in output: in questo caso l’output della funzione è collegato all’input del nodo Gauge.
Ultimo passo è la configurazione del Nodo Gauge.
- Group: Gruppo a cui il bottone è associato (e relativa Tab);
- Size: Dimensione del widget all’interno della dashboard (è consigliabile non modificare questo parametro in questo punto);
- Type: Tipologia di Gauge da voler utilizzare;
- Label: Nome da associare al widget;
- Value format: Formattazione del testo da voler mostrare sulla dashboard;
- Units: Unità di misura opzionale da visualizzare sulla dashboard;
- Range: Intervallo di numeri su cui applicare la scala di colori;
- Colour Gradient: Colore di cui riempire il gauge alla ricezione del dato in base alla posizione dello stesso nel Range precedentemente definitio;
- Sector: Anziché dividere in 3 aree equivalenti, si possono indicare 2 valori per limitare l’intervallo inferiore e quello superiore nel range;
- Name: Nome da attribuire al nodo all’interno del progetto.
Una volta effettuato il deploy del progetto, recati sulla Dashboard.
Potrai vedere il tuo Gauge che ad ogni ricezione di un nuovo valore dalla funzione (con intervallo di un secondo) si adatterà e si colorerà in base ai parametri indicati nella relativa configurazione.
