CREAZIONE INTERFACCIA UTENTE CON Node-RED

Transcript

1 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 ( con l account creato in precedenza 2) Andare al catalogo attraverso il link 3) Dal menù di sinistra selezionare la voce Piattaforma e cliccare su Node-RED Starter

2 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

3 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.

4 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

5 8) Leggere le informazioni generali e cliccare su Next

6 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

7 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

8 13) Installare il pacchetto node-red-contrib-web-worldmap, che utilizzeremo per inserire una mappa con la posizione del gateway SS 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

9 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

10 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

11 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

12 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

13 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.

14 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 ) 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

15 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.

16 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 SS 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

17 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 SS ) 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 ) Collegare i due nuovi nodi inseriti, come spiegato al punto 16.

18 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 Size: impostare 6x1. 4. Name: inserire la stringa Led input 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 è:

19 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

20 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 ) 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

21 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

22 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 ) 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

23 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

24 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 ) 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

25 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

26 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 ) 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

27 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

28 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 ) 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

29 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

30 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

31 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 ) 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

32 Per proseguire cliccare sul pulsante.

33 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.

34 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 ) 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

35 Per proseguire cliccare sul pulsante.

36 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:

37 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

38 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

39 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.

40 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:

41 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

42 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.

43 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.

44 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?

45 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.

46 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

47 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

48 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

49 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: