Share
Nel mio precedente articolo, vi ho mostrato come prototipare un sistema di Internet of Things usando Johnny-Five e PubNub. In quel tutorial, hai imparato come creare un LED controllato via web, alla Philips HUE.
Questa volta, vorrei mostrarti come leggere i dati dai sensori collegati ad un Arduino e tracciare un grafico sul web!
In questo esercizio, hai intenzione di:
Hai bisogno di una scheda Arduino (Genuino) Uno e delle conoscenze di base su come impostare Arduino per Johnny-Five. È una buona idea rivedere il Impostazione di Arduino sezione del tutorial passo-passo, ma non è necessario installare StandardFirmata perché stavolta installerai qualcos'altro.
Inoltre, assicurati che Node.js sia in esecuzione sul tuo computer.
Project EON è un framework JavaScript open source per la creazione di grafici e la mappatura, creato da PubNub.
Poiché il componente grafico e grafico di EON è basato su C3.js, che è un wrapper per D3.js, EON consente di creare facilmente grafici in tempo reale senza sapere come usare la libreria D3 molto più complicata.
I passaggi fondamentali per visualizzare i dati del sensore sono semplici come i seguenti:
Pubblica dati da una fonte:
PUBNUB.publish (channel: 'my-graph', message: 'eon': 'My data 1': 39, 'My data 2': 23); 2. Incorpora un grafico sul web: eon.chart (channel: 'my-graph', genera: bindto: '#myGraph');
Passerò attraverso i dettagli su come usare EON, poiché qui lavoriamo sia su un hardware che su un software. Quindi iniziamo!
Costruiamo innanzitutto un circuito per il sensore di temperatura! Il sensore generico e le parti dovrebbero essere piuttosto economici.
Hardware necessario:
Un tipico sensore di temperatura digitale DS18B20 misura da -55 ° C a 125 ° C (Celsius) con una precisione di ± 0,5 ° C su gran parte della gamma. Un convertitore analogico-digitale (ADC) integrato converte questa misura di temperatura analogica in un valore digitale con fino a 12 bit di precisione.
Il sensore DS18B20 comunica tramite un bus proprietario a 1 filo. Quando si utilizzano dispositivi con il protocollo speciale, Johnny-Five richiede il modulo specifico 1-Wire, che utilizza il ConfigurableFirmata schizzo.
Quindi cariciamo il tuo Arduino con ConfigurableFirmata prima di cablare il sensore:
Ora, legiamoli. Il circuito è piuttosto semplice: assicurati di utilizzare un resistore da 4.7kΩ quando accendi il sensore con la sorgente 5V di Arduino.
Passiamo al lato software. Leggere i valori digitali dal sensore è semplicissimo quando utilizzi Johnny-Five.
Assicurati che Node.js sia installato sul tuo computer. In una directory dev appropriata, installa Johnny-Five usando il npm gestore di pacchetti.
$ npm installa johnny-five
Crea un file, temperature.js e utilizza il codice seguente per stampare i valori:
Accentsconagua
var five = require ('johnny-five'); five.Board (). on ('ready', function () var temperature = new five.Thermometer (controller: 'DS18B20', pin: 2); temperature.on ('data', function () console .log (this.celsius + '° C', this.fahrenheit + '° F');););Esegui il codice da una console con nodo temperature.js. Una volta che la scheda hardware è pronta, dovresti vedere i valori di temperatura stampati sulla console in questo modo:
Ora, pubblichiamo i dati dal sensore di temperatura e tracciamo i valori in un grafico!
Per prima cosa, devi installare il modulo Node.js pubnub usando npm:
$ npm installa pubnub
PubNub Data Stream Network (DSN) fornisce l'infrastruttura globale e consente di costruire e scalare applicazioni e dispositivi IoT in tempo reale abbastanza facilmente. Nel mio precedente articolo, hai usato PubNub per ricevere dati da un browser web, ma questa volta stai usando PubNub per pubblicare i dati del sensore da leggere nel browser.
Una volta installato il modulo pubnub, devi inizializzarlo con le tue chiavi API.
var pubnub = require ('pubnub') (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...'); Creiamo anche un nome di canale.
var channel = 'temperature-ds18b20';
Quando si traccia un grafico, è necessario acquisire i dati pubblicati dallo stesso nome di canale.
Una volta ottenuti i dati di temperatura sull'evento di dati con Johnny-Five che hai creato nella sezione precedente del tutorial, mantieni i dati come variabile, invece di console.log.
var temp = 0; temperature.on ('data', function () temp = this.celsius;);Puoi pubblicare tutti i dati su PubNub, ma il sensore potrebbe attivare l'evento troppo frequentemente. Quindi inviamo i dati ogni tre secondi.
setInterval (publish, 3000);
Nella funzione di pubblicazione, usa PubNub pubblicare() metodo per inviare i dati in oggetto (o JSON).
function publish () var data = 'temperature': temp,; pubnub.publish (channel: channel, message: data,);
L'intero codice per Arduino è disponibile in questo repository GitHub.
Ora dimenticati di Arduino. Ora creerai una pagina web separata per disegnare un grafico.
Primo, includi eon.css nel tuo file HTML:
Quindi includi pubnub.js:
Quindi crea un elemento vuoto con qualche ID:
Questo è dove il grafico verrà generato nella tua pagina. Ora, devi inizializzare PubNub, proprio come hai fatto tu node.js file precedente per Arduino:
var pubnub = PUBNUB.init (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...');
Quindi, genera un semplice grafico a barre usando EON grafico(), non appena riceve i dati da PubNub. È possibile ricevere i dati inviati dal sensore di temperatura utilizzando lo stesso nome di canale, temperatura DS18B20:
eon.chart (pubnub: pubnub, channel: 'temperature-ds18b20', genera: bindto: '#chart', transform: function (m) return eon: temperatura: m.temperature );
Il trasformare() funzione adatta i dati grezzi inviati dal sensore per adattarsi allo schema che EON può comprendere.
Esegui sia il codice HTML che il codice Node.js per Arduino.
Voilà, hai una visualizzazione dei dati in tempo reale nel tuo browser!
Puoi personalizzare il grafico in più con i parametri C3.j opzionali, come i colori e la larghezza della linea!
Ad esempio, per cambiare il colore della barra in viola come questa animazione gif in alto, puoi aggiungere il colore del dati parametro:
... generare: bindto: '#chart, data: type:' line ', colors: temperature:' # 663399 ',
Puoi usare il asse parametro per etichettare e formattare anche l'asse xe l'asse y..
Se vuoi un diverso tipo di grafico, prova a cambiare il 'linea', che è un valore predefinito per il tipo, a 'Spline', e vedi cosa succede.
Per il codice completo, si prega di fare riferimento al repository GitHub. Ci sono alcuni altri esempi se desideri provare diversi sensori come un sensore di luce ambientale e diversi tipi di grafici.
Spero ti sia piaciuto il tutorial!
