In questo articolo vedremo una soluzione che è possibile adottare per la realizzazione di una WebApp di controllo remoto, che in questo caso, ci permetterà di ruotare un cubo virtuale presente nella pagina web, che potrà esserci utile per i nostri progetti.
Vedremo come avviene lo scambio di informazioni, la loro gestione, il codice sorgente e le librerie utilizzate in modo da poter replicare l’esperimento.
In questo esperimento ho messo in fila una serie di tecnologie per realizzare la base per un telecomando su smartphone in logica IOT
Il cubo che appare qui sotto è stato disegnato con WebGL che è la tecnologia per disegnare oggetti 3D all’interno di pagine Web. Per interagire con questi oggetti si usa ovviamente il linguaggio Javascript ma il rendering è comunque molto veloce perchè WebGL permette di accedere direttamente alle capacità di accellerazione grafica della vostra scheda video tramite OpenGL.
Useremo questo cubo come oggetto da controllare in remoto tramite il nostro telefono cellulare.
L’esempio funzionante del cubo lo trovate nell’articolo originale linkato alla fine di questo articolo.
Se provate a leggere, con il vostro smartphone, il QR-code riprodotto qui sotto:
oppure ad aprire questo link, vedrete che sarà possibile ruotare il cubo sul video del PC direttamente dal telefono muovendo semplicemente il telefono. Ovviamente per eseguire questa oprazione è richiesto un telefono dotato di accellerometro a bordo ormai presente in quasi tutti gli smartphone. Sul telefono appariranno i dati di lettura rilevati dall’accellerometro di bordo.
Da notare che il telefono riesce a inviare dati al cubo senza dover intervenire in alcun modo nella configurazione della rete dove è connesso il PC. Il tutto funziona perfettamente anche in caso di presenza di un firewall o di un proxy server.
E’ anche possibile aprire una seconda finestra con questa pagina, leggere il nuovo QR-code con un altro telefono e controllare in maniera indipendente i due cubi sul video.
Allo stesso modo se qualcun altro fa lo stesso esperimento in un’altra parte del mondo, telefoni e cubi agiranno in maniera del tutto indipendente tra loro.
Se invece farete il refresh della pagina la relazione con il telefono si perderà e andrà riletto il QR-Code. La relazione non si perde se invece fate il refresh della WepApp solo sul telefono in quanto l’identificativo che consente di mantenerla è ancora presente nella url della pagina. Questo è utile per riprendere il controllo dopo che il telefono è andato in stand-by.
Come funziona?
Nella seguente figura è riportato lo schema di funzionamento del sistema.
Alla base di tutto c’e’ un Broker MQTT fornito gratuitamente da Eclipse.org che risponde all’indirizzo iot.eclipse.it. Si tratta di un Broker pubblico senza alcun tipo di privacy per cui si sconsiglia di usarlo per far viaggiare i pacchetti di un sistema di controllo vero.
In questo caso meglio installarsif un Broker MQTT Open Source in un sistema privato. Il broker per eccellezza è Mosquitto ed è installabile gratuitamente su qualsiasi sistema Linux.
Essendo il broker un oggetto che deve essere sempre operativo, pena il blocco totale di tutto il sistema di controllo, l’ideale sarebbe farlo girare su una scheda Linux Embedded. Anche una piccola scheda Arietta G25 andrebbe benissimo.
Per poter far comunicare i due programmi Javascript che stanno girando nel browser del PC e nel browser dello Smartphone ho usato le librerie Eclipse Paho sempre Open Source e disponibili per qualsiasi linguaggio di programmazione.
Il topic MQTT usato
Ogni coppia Smartphone/PC usa un topic MQTT diverso per comunicare. In questo modo non c’è possibilità di interferire con altre coppie Smartphone/PC.
Un esempio di topic è:
tanzolab/[client id]/acc;
Il client id viene generato casualmente dalla pagina web su PC ed inserito nella URL da leggere con il cellulare quello generato da questa pagina ad esempio è:
http://www.tanzolab.it/webapp/acc2mqtt/?client_id=jpkr6
Nel topic il programma Javascript che gira sullo smartphone invia un messaggio denominato payload. Il formato del messaggio che abbiamo scelto per comunicare con il cubo sul PC è per forza di cose JSON. Nella riga seguente vengono visualizzati i messaggi JSON che sta inviando lo smartphone
In attesa di payloads....
Sorgenti
Accedi al sorgente di questa pagina
Accedi al sorgente della webapp
Link
Librerie Javascript three.js usate per disegnare il cubo
Librerie Javascript per generare il QR-Code
Filtro software per eliminare il rumore dell’accellerometro suggerito da Andrea, ancora da integrare.
Articolo originale di Sergio Tanzilli.
