Share
În articolul meu precedent, ți-am arătat cum să prototip un sistem de Internet de obiecte folosind Johnny-Five și PubNub. În acest tutorial, ați învățat cum să creați un LED controlat de web, à la Philips HUE.
De data aceasta, aș dori să vă arăt cum să citești date de la senzori atașați unui Arduino și să comporți un grafic pe web!
În acest exercițiu, veți urma:
Ai nevoie de un board Arduino (Genuino) Uno și de cunoștințe de bază despre cum să creezi Arduino pentru Johnny-Five. Este o idee bună să revizuiți Configurarea Arduino secțiune în tutorial pas cu pas, dar nu este nevoie să instalați StandardFirmata pentru că vei instala altceva de data asta.
De asemenea, asigurați-vă că Node.js rulează pe calculatorul dvs..
Proiectul EON este un framework JavaScript open-source pentru cartografiere și cartografiere, creat de PubNub.
Deoarece componenta grafică și grafică a EON se bazează pe C3.js, care este un wrapper pentru D3.js, EON vă permite să construiți grafice în timp real fără a ști cum să utilizați biblioteca mult mai complicată D3.
Pașii de bază pentru vizualizarea datelor senzorului sunt la fel de simpli ca și cele de mai jos:
Publicați datele dintr-o sursă:
PUBNUB.publish (canal: 'my-graph', mesaj: 'eon': 'Datele mele 1': 39, 'Datele mele 2': 23); 2. Încărcați un grafic pe web: eon.chart (canal: 'my-graph', generați: bindto: '#myGraph');
Voi trece prin detaliile utilizării EON, deoarece lucrăm aici atât la un hardware, cât și la un exercițiu software. Deci, să începem!
Să construim mai întâi un circuit pentru senzorul de temperatură! Senzorul generic și componentele ar trebui să fie destul de ieftine.
Hardware de care aveți nevoie:
Un senzor digital de temperatură digitală DS18B20 măsoară între -55 ° C și 125 ° C (Celsius) cu o precizie de ± 0,5 ° C pe o mare parte a intervalului. Un convertor analog-digital (ADC) integrat convertește această măsurare a temperaturii analogice într-o valoare digitală cu până la 12 biți de precizie.
Senzorul DS18B20 comunică printr-o magistrală proprietară de 1 fir. Când utilizați dispozitive cu protocolul special, Johnny-Five necesită modulul cu 1 fir, care utilizează ConfigurableFirmata schiță.
Deci, hai să-ți încarcă Arduino-ul ConfigurableFirmata înainte de cablarea senzorului:
Acum, hai să le sârmăm. Circuitul este destul de simplu - asigurați-vă că folosiți un rezistor de 4.7kΩ atunci când alimentați senzorul cu sursa de 5V de la Arduino.
Să trecem la partea software. Citirea valorilor digitale de la senzor este foarte ușoară când folosiți Johnny-Five.
Asigurați-vă că Node.js este instalat pe computer. Într-un director dev devreme, instalați Johnny-Five folosind NPM manager de pachete.
$ npm instala johnny-cinci
Creați un fișier, temperature.js și folosiți codul de mai jos pentru a imprima valorile:
Accentsconagua
var cinci = necesită ("johnny-five"); ("controller": "DS18B20", pin: 2); temperature.on ('data', function () consola .log (acest număr cel mai mic + '° C', acest.fahrenheit + '° F');););Rulați codul de la o consolă cu temperatura nodului. Odată ce placa hardware este gata, ar trebui să vedeți valorile de temperatură tipărite pe consola astfel:
Acum, să publicăm datele de la senzorul de temperatură și să compunem valorile într-un grafic!
Mai întâi, trebuie să instalați modulul pubnub Node.js utilizând npm:
$ npm instala publicnub
Rețeaua de fluxuri de date PubNub (DSN) oferă infrastructura globală și vă permite să construiți și să scalați în timp real aplicații și dispozitive IoT cu ușurință. În articolul meu anterior, ați folosit PubNub pentru a primi date de la un browser web, dar de această dată, utilizați PubNub pentru a publica datele senzorului care trebuie citite în browser.
Odată ce instalați modulul pubnub, trebuie să îl inițializați cu ajutorul tastelor API.
var pubnub = necesită ('pubnub') (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...'); De asemenea, să creăm un nume de canal.
var canal = 'temperatura-ds18b20';
Când compilați un grafic, va trebui să apăsați datele publicate din același nume de canal.
Odată ce obțineți date despre temperatură cu privire la evenimentul de date cu Johnny-Five pe care l-ați creat în secțiunea anterioară a tutorialului, păstrați datele ca variabilă, în loc de doar console.log.
var temp = 0; temperature.on ('data', funcția () temp = this.celsius;);Puteți publica toate datele la PubNub, dar senzorul poate declanșa evenimentul prea frecvent. Deci, trimiteți datele la fiecare trei secunde.
setInterval (publicați, 3000);
În funcția de publicare, utilizați PubNub publica() metoda de trimitere a datelor în obiect (sau JSON).
funcția publicare () var data = 'temperature': temp,; pubnub.publish (canal: canal, mesaj: date,);
Întregul cod pentru Arduino este disponibil în acest repo GitHub.
Acum uitați de Arduino. Acum veți crea o pagină web separată pentru a desena un grafic.
Mai întâi, includeți eon.css în fișierul HTML:
Apoi includeți pubnub.js:
Apoi creați un element gol cu un anumit ID:
Acesta este locul în care graficul va fi generat în pagina dvs. Acum, trebuie să inițializați PubNub, la fel ca în cazul node.js fișier mai devreme pentru Arduino:
var pubnub = PUBNUB.init (public_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...');
Apoi, generați un graf simplu folosind EON-urile diagramă(), de îndată ce primește datele de la PubNub. Puteți primi datele trimise de la senzorul de temperatură utilizând același nume de canal, Temperatura-DS18B20:
eon.chart (pubnub: pubnub, canal: 'temperature-ds18b20', generează: bindto: '#chart', transformă: funcția (m) return: temperature: m.temperature );
transforma() funcția adaptează datele brute trimise de senzor pentru a se încadra în schema pe care EON o poate înțelege.
Rulați atât codul HTML, cât și codul Node.js pentru Arduino.
Voila, ai o vizualizare de date în timp real în browserul tău!
Puteți personaliza mai mult graficul cu parametrii opționali C3.js, cum ar fi culorile și lățimea liniei!
De exemplu, pentru a schimba culoarea barului în mov ca această animație gif de mai sus, puteți adăuga culoarea date parametru:
... generează: bindto: '#chart, data: type:' line ', culori: temperature:' # 663399 ',
Puteți utiliza funcția axă parametru pentru etichetarea și formarea axei x și a axei y, de asemenea.
Dacă doriți un alt tip de grafic, încercați să schimbați 'linia', care este o valoare implicită pentru tip, la 'splina', și vezi ce se întâmplă.
Pentru codul complet, consultați repo-ul GitHub. Există câteva exemple suplimentare dacă doriți să încercați senzori diferiți, cum ar fi un senzor de lumină ambientală și diferite tipuri de diagrame.
Sper că ți-a plăcut tutorialul!
