Embed Size (px)
Citation preview
CREAZIONE INTERFACCIA UTENTE CON Node-RED
Prerequisiti
1) Essere in possesso di un account Bluemix
2) Aver creato una piattaforma Internet Of Things su Bluemix
3) Aver inserito il dispositivo nella piattaforma Internet Of Things, ed essere quindi in possesso del suo
Device Id e del suo Token di autenticazione
4) Aver generato una chiave API sulla piattaforma Internet Of Things, ed essere quindi in possesso della sua
API KEY e del suo Token di autenticazione
5) Aver configurato il gateway SS10680 in maniera corretta
Procedura
1) Effettuare il login a Bluemix (http://www.bluemix.net/) con l’account creato in precedenza
2) Andare al catalogo attraverso il link https://console.ng.bluemix.net/catalog/
3) Dal menù di sinistra selezionare la voce ‘Piattaforma’ e cliccare su ‘Node-RED Starter’
4) Compilare i campi richiesti e al termine cliccare sul pulsante ‘Crea’ per creare un’istanza di Node-RED
A questo punto partirà la creazione dell’istanza di Node-RED.
Al termine della procedura, la situazione dovrebbe essere come quella nella figura successiva.
5) Cliccare su ‘Visita URL applicazione‘
6) La prima volta che si esegue l’istanza di Node-RED sarà necessario specificarne le proprietà.
Nella prima schermata cliccare su ‘Next’
7) Nel caso in cui si voglia consentire l’accesso all’istanza di Node-RED solamente alle persone autorizzate
scegliere ‘Secure your editor so only authorised users can access it’ e inserire username e password.
Nel caso in cui si voglia consentire l’accesso a qualsiasi utente ma non permettergli di fare cambiamenti
selezionare ‘Allow anyone to view the editor, but not make any changes’.
Nel caso un cui si voglia consentire l’accesso a tutti e permettere di fare modifiche al progetto selezionare
la voce ‘Allow anyone to access the editor and make changes’.
N.B. l’ultima scelta non è raccomandata
Una volta effettuata la propria scelta cliccare sul pulsante ‘Next’
8) Leggere le informazioni generali e cliccare su ‘Next’
9) Cliccare su ‘Finish’ per terminare l’installazione
10) Al termine dell’installazione, selezionare ‘Go to Node-RED flow editor’ per accedere al Workflow Editor
11) Inserire Username e Password (se è stato limitato l’accesso ai soli utenti autorizzati in fase di
installazione) e cliccare ‘Login’ per aprire il Workflow Editor
Se il login è andata a buon fine, la schermata che vi troverete davanti sarà simile alla seguente
12) Installare il pacchetto ‘node-red-dashboard’, che utilizzeremo per costruire l’interfaccia grafica visibile
dall’utente.
Cliccare sull’icona del menù e cliccare sulla voce ‘Manage Palette’. Nella schermata che si apre
cliccare sul tab ‘Install’ (1), nella barra di ricerca inserire la parola chiave ‘dashboard’ (2), individuare il
pacchetto ‘node-red-dashboard’ e procedere alla sua installazione cliccando su ‘install’ (3)
Se l’installazione del pacchetto è terminata con successo, nella barra di sinistra troveremo il pacchetto
‘dashboard’ con tutti i nodi che mette a disposizione
13) Installare il pacchetto ‘node-red-contrib-web-worldmap’, che utilizzeremo per inserire una mappa con la
posizione del gateway SS10680.
Cliccare sull’icona del menù e cliccare sulla voce ‘Manage Palette’. Nella schermata che si apre
cliccare sul tab ‘Install’ (1), nella barra di ricerca inserire la parola chiave ‘worldmap’ (2), individuare il
pacchetto ‘node-red-contrib-web-worldmap’ e procedere alla sua installazione cliccando su ‘install’
Se l’installazione del pacchetto è terminata con successo, nella barra di sinistra troveremo il pacchetto
‘location’ con tutti i nodi che mette a disposizione
Passiamo ora alla costruzione dell’interfaccia che vedrà l’utente finale.
14) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno del ‘Flow 1’.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo
Configurare il nodo come segue:
1. Authentication: selezionare la voce ‘API Key’
2. API Key: cliccare sul pulsante . Nella schermata che si apre bisogna configurare come
l’applicazione Node-RED comunicherà con la piattaforma Watson IoT
A. Name: inserire un nome per la connessione o lasciare bianco
B. API Key: inserire in questo campo la chiave API dell’APP creata su Watson IoT
C. API Token: inserire in questo campo il token di autenticazione dell’APP creata su
Watson IoT
D. Server-Name: inserire in questo campo l’indirizzo utilizzato per comunicare con la
piattaforma Watson IoT. L’indirizzo è nella forma
ogId.messaging.internetofthings.ibmcloud.com
dove orgId è l’id dell’organizzazione di appartenenza su Watson IoT
Cliccare quindi sul pulsante
3. Input Type: selezionare la voce ‘Device Event’
4. Device Type: se si lascia selezionato il checkbox ‘All’ verranno presi in considerazione tutti i
tipi di dispositivi dichiarati su Watson IoT. Se si vuole creare la connessione per un singolo tipo
di dispositivo deselezionare il checkbox ‘All’ e inserire nel campo di testo a fianco il tipo di
dispositivo che si vuole connettere
5. Device Id: se si lascia selezionato il checkbox ‘All’ verranno presi in considerazione tutti i
dispositivi/gateway. Se si vuole limitare la connessione ad un solo dispositivo/gateway,
deselezionare il checkbox ‘All’ e inserire nel campo di testo a fianco l’id del gateway
specificato in Watson IoT
6. Event: se si lascia selezionato il checkbox ‘All’ verranno presi in considerazione tutti gli eventi
dei dispositivi/gateway abilitati. Altrimenti deselezionando il checkbox ‘All’ è possibile
specificare un particolare evento
7. Format: se si lascia selezionato il checkbox ‘All’ saranno consentiti tutti i formati permessi da
Watson IoT (json, xml, text) per l’invio dei topic. Deselezionando il checkbox ‘All’ è possibile
specificare un unico formato supportato per i topic.
8. QoS (Quality of Service): indicare la garanzia di consegna dei messaggi MQTT
• 0: il broker/client consegna il messaggio una volta, senza conferme
• 1: il broker/client consegna il messaggio almeno una volta, con conferma richiesta
• 2: il broker/client consegna il messaggio una volta con una procedura di handshake a
4 passi
9. Name: specificare il nome da dare al nodo
Al termine della configurazione del nodo, si ottiene un risultato simile al seguente. Per proseguire cliccare
sul pulsante
15) Selezionare ora il nodo function sotto il menù ‘function’ nella barra di sinistra, e
trascinarlo nell’area di lavoro.
Fare doppio click su di esso per editarlo come nella figura seguente
Al termine cliccare sul pulsante .
16) Collegare i due nodi
Posizionare il mouse sul quadratino grigio del nodo ‘Read temperature1’ (il quadratino diventa di colore
arancio) e tenendo premuto trascinare il mouse verso il quadratino del nodo ‘Extract temperature1
value’. Il risultato ottenuto sarà il seguente
17) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo gauge e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito
Configurare il nodo come segue:
1. Group: selezionare la voce ‘Add new ui_group’ e premere sul pulsante . Nella schermata che
si apre andremo a definire il ‘gruppo’ e la ‘pagina’ in cui inserire il nostro oggetto grafico
A. Name: inserire il nome del gruppo a cui farà parte l’oggetto grafico. Nel nostro caso
inseriamo il nome del dispositivo
B. Tab: selezionare la voce ‘Home’. Nel caso si voglia aggiungere una nuova ‘pagina’,
selezionare la voce ‘Add new ui_tab’ e cliccare sul pulsante .
C. Width: specificare la larghezza del gruppo
D. Display group name: selezionare il checkbox per rendere visibile il nome del gruppo
nell’interfaccia grafica.
Al termine cliccare sul pulsante .
2. Size: specificare le dimensioni dell’oggetto nell’interfaccia grafica. Per questo esempio lasciare su
‘auto’.
3. Type: selezionare la voce ‘Gauge’.
4. Label: inserire ‘Temperature 1’. Questo campo verrà visualizzato sopra l’oggetto nell’interfaccia
grafica.
5. Value format: indica il formato del valore visualizzato. Lasciare {{value}}.
6. Units: indica l’unità di misura del valore mostrato. Inserire °C.
7. Range: specificare i valori minimo e massimo che può assumere la variabile mostrata. Inserire -60
per il min. e 60 per il max.
8. Colour gradient: specificare il colore dei settori mostrati. Per questo esempio faremo un solo
settore di colore verde.
9. Sectors: specificare a quali valori c’è il cambio di settore. Per questo esempio lasceremo i campi
vuoti.
10. Name: specificare il nome del nodo, in questo caso useremo ‘Temperature1’.
Al termine della configurazione del nodo, si ottiene un risultato simile al seguente. Per proseguire
cliccare sul pulsante .
18) Collegare il nodo ‘Extract temperature1’ e il nodo ‘Temperature1’ come spiegato al punto 16.
19) Dalla barra di sinistra sotto la voce ‘dashboard’ selezionare il nodo chart e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito
1. Group: selezionare la voce ‘Add new ui_group’ e premere sul pulsante . Nella schermata che
si apre seguire le indicazioni come al punto 17.1, inserendo come nome del gruppo ‘SS10014
Temperature Charts’, lasciando come ‘Tab’ la voce ‘Home’, come ‘Width’ impostare il valore 12 e
lasciare selezionato il checkbox di ‘Display group name’.
2. Size: impostare ‘12x6’
3. Label: inserire ‘Temperature 1 Chart’. Questo campo verrà visualizzato sopra l’oggetto
nell’interfaccia grafica.
4. Type: selezionare la voce ‘Line chart’.
5. Enlarge points: selezionare il checkbox relativo per mostrare i punti del grafico in rilievo rispetto
alla linea.
6. X-axis: lasciare selezionato ‘last 1 hour’
7. X-axis Label: indica i valori che verranno mostrati sull’asse X del grafico, lasciare ‘HH:mm:ss’
8. Y-axis: inserire i valori min. e max. che può assumere la variabile mostrata. In questo esempio -60
per il min e 60 per il max.
9. Legend: selezionare la voce ‘None’
10. Interpolate: selezionare la voce ‘linear’
11. Series Colours: selezionare il colore della linea del grafico
12. Blank label: inserire una label da mostrare quando non si è ancora ricevuto nessun valore della
variabile mostrata nel grafico. Per questo esempio lasceremo il campo in bianco
13. Name: specificare il nome del nodo, in questo caso ‘Temperature Chart 1’.
Al termine della configurazione del nodo, si ottiene un risultato simile al seguente. Per proseguire
cliccare sul pulsante .
20) Collegare il nodo ‘Extract temperature1 value’ e il nodo ‘Temperature 1 Chart’ come spiegato al punto 16.
Al termine nell’area di lavoro avremo un flow simile al seguente
21) Eseguire i punti dal 14 al 20 per la temperature2 del dispositivo SS10014.
La procedura è la stessa seguita per la temperature1, fare attenzione al punto 14.2, dove bisogna
selezionare la voce ‘Connection to Watson IoT’, e al punto 14.6 dove bisogna selezionare temperature2
come evento.
Al termine dell’inserimento dei nodi, nell’area di lavoro avremo un flow simile al seguente
22) Salvare ora il flow creato cliccando sul pulsante in altro a destra nella finestra
Passiamo ora a definire la lettura e la scrittura degli input e degli output del dispositivo SS10130 definiti
nell’interfaccia del gateway SS10680.
23) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘input1’. Al termine della configurazione del nodo il risultato ottenuto sarà
simile al seguente
Per proseguire cliccare sul pulsante .
24) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
25) Collegare i due nuovi nodi inseriti, come spiegato al punto 16.
26) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e
trascinarlo nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo
1. Template type: selezionare la voce ‘Widget in group’
2. Group: cliccare sul pulsante e inserire un nuovo gruppo ‘SS10130 – Inputs Status ’ come
spiegato al punto 17.1 .
3. Size: impostare ‘6x1’.
4. Name: inserire la stringa ‘Led input 1’.
5. Deselezionare il checkbox ‘Pass through messages from input’
6. Deselezionare il checkbox ‘Add output messages to stored state.’
7. Template: in questo campo andremo a specificare come dovrà apparire il led relativo all’ input1
nell’interfaccia grafica. Il codice da inserire è:
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
27) Collegare il nodo inserito al punto precedente al nodo ‘Extract input1 value’
Al termine, nell’area di lavoro, avremo un flow simile al seguente
28) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘fan1’. Al termine della configurazione del nodo il risultato ottenuto sarà simile
al seguente
Per proseguire cliccare sul pulsante .
29) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
30) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare la voce ‘SS10130 – Inputs Status’
• Size: impostare ‘6x1’.
• Name: inserire la stringa ‘Led fan 1’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
31) Collegare il nodo inserito al punto precedente al nodo ‘Extract fan1 value’
Al termine, nell’area di lavoro, avremo un flow simile al seguente
32) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘fan2’. Al termine della configurazione del nodo il risultato ottenuto sarà simile
al seguente
Per proseguire cliccare sul pulsante .
33) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
34) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare la voce ‘SS10130 – Inputs Status’
• Size: impostare ‘6x1’.
• Name: inserire la stringa ‘Led fan 2’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
35) Collegare il nodo inserito al punto precedente al nodo ‘Extract fan2 value’
Al termine, nell’area di lavoro, avremo un flow simile al seguente
36) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘bulb1’. Al termine della configurazione del nodo il risultato ottenuto sarà
simile al seguente
Per proseguire cliccare sul pulsante .
37) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
38) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare la voce ‘SS10130 – Inputs Status’
• Size: impostare ‘6x1’.
• Name: inserire la stringa ‘Led bulb 1’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
39) Collegare il nodo inserito al punto precedente al nodo ‘Extract bulb1 value’
Al termine, nell’area di lavoro, avremo un flow simile al seguente
40) Salvare ora il flow creato cliccando sul pulsante in altro a destra nella finestra
41) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘alarm_input1’. Al termine della configurazione del nodo il risultato ottenuto
sarà simile al seguente
Per proseguire cliccare sul pulsante .
42) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
43) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare e inserire un nuovo gruppo ‘SS10130 – Alarms Status’
• Size: impostare ‘auto’.
• Name: inserire la stringa ‘Led alarm input_1’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
44) Collegare tra loro i nodi inseriti. Al termine dell’operazione, nell’area di lavoro, avremo uno flow simile al
seguente
45) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘alarm_fan1’. Al termine della configurazione del nodo il risultato ottenuto
sarà simile al seguente
Per proseguire cliccare sul pulsante .
46) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
47) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare la voce ‘SS10130 – Alarms Status’
• Size: impostare ‘auto’.
• Name: inserire la stringa ‘Led alarm fan_1’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
48) Collegare tra loro i nodi inseriti. Al termine dell’operazione, nell’area di lavoro, avremo uno flow simile al
seguente
49) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘alarm_fan2’. Al termine della configurazione del nodo il risultato ottenuto
sarà simile al seguente
Per proseguire cliccare sul pulsante .
50) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
51) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare la voce ‘SS10130 – Alarms Status’
• Size: impostare ‘auto’.
• Name: inserire la stringa ‘Led alarm fan_2’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
52) Collegare tra loro i nodi inseriti. Al termine dell’operazione, nell’area di lavoro, avremo uno flow simile al
seguente
53) Dalla barra di sinistra, dal menù ‘input’ selezionare il nodo ibmiot e tenendo premuto il
pulsante sinistro del mouse trascinarlo all’interno dell’area di lavoro.
Una volta posizionato il nodo all’interno dell’area di lavoro, fare doppio click e si aprirà la schermata di
configurazione del nodo come al punto 14.
Selezionare per il campo ‘API Key’ la voce ‘Connection to Watson IoT’, mentre per il campo ‘Event’ inserire
nell’area di testo la stringa ‘alarm_bulb1’. Al termine della configurazione del nodo il risultato ottenuto
sarà simile al seguente
Per proseguire cliccare sul pulsante .
54) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo ed editarlo come descritto al punto 15.
55) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click sul nodo appena inserito per editarlo:
• Template type: selezionare la voce ‘Widget in group’
• Group: selezionare la voce ‘SS10130 – Alarms Status’
• Size: impostare ‘auto’.
• Name: inserire la stringa ‘Led alarm bulb_1’.
• Deselezionare il checkbox ‘Pass through messages from input’
• Deselezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
56) Collegare tra loro i nodi inseriti. Al termine dell’operazione, nell’area di lavoro, avremo uno flow simile al
seguente
57) Dalla barra di sinistra, dal menù ‘dashboard’, selezionare la il nodo chart e trascinarlo
nell’area di lavoro. Fare doppio click su di esso per editarlo come spiegato in figura:
Per proseguire cliccare sul pulsante .
58) Collegare i nodi ‘Extract alarm_input1 value’, ‘Extract alarm_fan1 value’, ‘Extract alarm_fan2’, ‘Extract
alarm_bulb1’ al nodo del grafico aggiunto al punto precedente. Il risultato ottenuto è mostrato nella
seguente figura
59) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo switch e trascinarlo
all’interno dell’area di lavoro. Fare doppio click su di esso per editarlo come segue:
• Group: cliccare sul pulsante e inserire un nuovo gruppo: ‘SS10130 – Simulate Alarms’
• Size: selezionare ‘6x1’
• Name: inserire la stringa ‘INPUT1 ALARM’
• Icon: selezionare la voce ‘Default’
• On payload: dal menù selezionare JSON e inserire la stringa ‘{“value”:1}’
• Off payload: dal menù selezionare JSON e inserire la stringa ‘{“value”:0}’
• Topic: lasciare bianco
• Name: inserire la stringa ‘activate input1 alarm’
Per proseguire cliccare sul pulsante .
60) Dalla barra di sinistra, dal menù ‘output’, selezionare il nodo ibmiot e trascinarlo nell’area di
lavoro. Fare doppio click per editarlo come in figura:
Per proseguire cliccare sul pulsante .
61) Collegare i nodi inseriti nei precedenti due punti come in figura
62) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo switch e trascinarlo
all’interno dell’area di lavoro. Fare doppio click su di esso per editarlo come segue:
Per proseguire cliccare sul pulsante .
63) Dalla barra di sinistra, dal menù ‘output’, selezionare il nodo ibmiot e trascinarlo nell’area di
lavoro. Fare doppio click per editarlo come in figura:
Per proseguire cliccare sul pulsante .
64) Collegare i due nodi appena inseriti come spiegato al punto 61
65) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo switch e trascinarlo
all’interno dell’area di lavoro. Fare doppio click su di esso per editarlo come segue:
Per proseguire cliccare sul pulsante .
66) Dalla barra di sinistra, dal menù ‘output’, selezionare il nodo ibmiot e trascinarlo nell’area di
lavoro. Fare doppio click per editarlo come in figura:
Per proseguire cliccare sul pulsante .
67) Collegare i due nodi appena inseriti come spiegato al punto 61
68) Dalla barra di sinistra, sotto il menù ‘dashboard’ selezionare il nodo switch e trascinarlo
all’interno dell’area di lavoro. Fare doppio click su di esso per editarlo come segue:
Per proseguire cliccare sul pulsante .
69) Dalla barra di sinistra, dal menù ‘output’, selezionare il nodo ibmiot e trascinarlo nell’area di
lavoro. Fare doppio click per editarlo come in figura:
Per proseguire cliccare sul pulsante .
70) Collegare i due nodi appena inseriti come spiegato al punto 61
Al termine, il risultato ottenuto sarà simile al seguente
71) Salvare ora il flow creato cliccando sul pulsante in altro a destra nella finestra.
72) Dalla barra di sinistra, dal menù ‘location’, selezionare il nodo worldmap in e trascinarlo
all’interno dell’area di lavoro.
73) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro ed editarlo come in figura
Per proseguire cliccare sul pulsante .
74) Selezionare ora il nodo function dal menù ‘function’ nella barra di sinistra e trascinarlo
nell’area di lavoro ed editarlo come in figura
Per proseguire cliccare sul pulsante .
75) Dalla barra di sinistra, dal menù ‘location’, selezionare il nodo worldmap out e trascinarlo
all’interno dell’area di lavoro.
76) Collegare ora i quattro nodi inseriti come mostrato in figura
77) Dalla barra di sinistra, dal menù ‘input’, selezionare il nodo inject e trascinarlo all’interno
dell’area di lavoro. Fare doppio click per editarlo:
• Payload: dal menù a tendina selezionare ‘string’ e nella casella di testo inserire la stringa
‘/worldmap’
• Topic: lasciare bianco
• Repeat: selezionare la voce ‘None’
• Selezionare il checkbox ‘Inject once a start?’
Per proseguire cliccare sul pulsante .
78) Dalla barra di sinistra, dal menù ‘function’, selezionare il nodo template e trascinarlo
all’interno dell’area di lavoro. Fare doppio click sul nodo per editarlo come in figura
Per proseguire cliccare sul pulsante .
79) Dalla barra di sinistra, dal menù ‘dashboard’ selezionare il nodo template e trascinarlo
nell’area di lavoro. Fare doppio click su di esso ed editarlo come segue:
• Template type: selezionare la voce ‘Widget in group’
• Group: cliccare sul pulsante e aggiungere un nuovo gruppo ‘Map’
• Size: selezionare ‘12x12’
• Selezionare il checkbox ‘Pass through messages from input’
• Selezionare il checkbox ‘Add output messages to stored state.’
• Template: inserire il seguente codice
Al termine della configurazione, il risultato ottenuto sarà simile al seguente
Per proseguire cliccare sul pulsante .
80) Collegare i nodi inseriti come nella seguente figura
81) Al termine, nell’area di lavoro, avremo il seguente flow
82) Salvare ora il flow creato cliccando sul pulsante in altro a destra nella finestra
83) Per avere un’idea di quella che sarà l’interfaccia finale cliccare su in alto a destra nella finestra,
selezionare la voce ‘View’ e infine cliccare su ‘Dashboard’
Nella barra di destra si è aperta una nuova scheda ‘dashboard’, la quale è composta da 3 sotto schede:
• Scheda Layout: da questa scheda si vede la struttura generale dell’interfaccia
• Scheda Themes: da questa scheda si può definire lo stile della finestra, e il colore utilizzato per il
menù e il font utilizzato per i vari elementi grafici
• Scheda Site: da questa scheda si possono definire alcune caratteristiche del sito, come il titolo o il
formato della data
84) Per visualizzare l’interfaccia utente è possibile cliccare sul pulsante dalla tab dashboard, oppure
digitare nella barra degli indirizzi del browser la rotta dell’applicazione assegnata dalla piattaforma
Watson IoT seguita da ‘/ui’.
L’interfaccia grafica ottenuta sarà simile alla seguente:
![MANULE UTENTE - macrom.it · Toccare il tasto [ ] / [ ] sul interfaccia utente per sintonizzare una stazione precedente o sucessiva. Nota: Quando si riceve una stazione, la ricerca](https://img.pdfslide.net/doc/110x75/5c6627b709d3f230488ba9d2/manule-utente-toccare-il-tasto-sul-interfaccia-utente-per-sintonizzare.jpg)
