Share
I min forrige artikkel viste jeg deg hvordan du prototype et system for Internett av ting ved hjelp av Johnny-Five og PubNub. I den opplæringen lærte du hvordan du oppretter en nettstyrt LED, à la Philips HUE.
Denne gangen vil jeg gjerne vise deg hvordan du leser data fra sensorer som er festet til en Arduino og tegner en graf på nettet!
I denne øvelsen skal du:
Du trenger et Arduino (Genuino) Uno bord og grunnleggende kunnskap om hvordan du setter opp Arduino for Johnny-Five. Det er en god ide å gjennomgå Sette opp Arduino delen i trinn-for-trinns opplæringen, men du trenger ikke å installere StandardFirmata fordi du skal installere noe annet denne gangen.
Sørg også for at Node.js kjører på datamaskinen.
Project EON er et open-source JavaScript-rammeverk for kartlegging og kartlegging, opprettet av PubNub.
Siden kartleggings- og grafikkomponenten i EON er basert på C3.js, som er en wrapper for D3.js, lar EON deg bygge sanntidsgrafer uten å vite hvordan du bruker det langt mer kompliserte D3-biblioteket.
De grunnleggende trinnene for å visualisere sensordataene er like enkle som følgende:
Publiser data fra en kilde:
PUBNUB.publish (kanal: 'min-graf', melding: 'eon': 'Mine data 1': 39, 'Mine data 2': 23); 2. Legg inn en graf på nettet: eon.chart (channel: 'my-graph', generer: bindto: '#myGraph');
Jeg vil gå gjennom detaljene om hvordan du bruker EON, da vi jobber med både en maskinvare og en programvareøvelse her. Så la oss begynne!
La oss bygge en krets for temperatursensoren først! Generisk sensor og deler skal være ganske rimelig.
Maskinvare du trenger:
En typisk DS18B20 digital temperaturføler måler fra -55 ° C til 125 ° C (Celsius) med ± 0,5 ° C nøyaktighet over mye av området. En innebygd analog-til-digital-omformer (ADC) konverterer denne analoge temperaturmåling til en digital verdi med opptil 12 bits presisjon.
DS18B20-sensoren kommuniserer via en proprietær 1-Wire-buss. Når du bruker enheter med spesialprotokollen, krever Johnny-Five den 1-Wire-spesifikke modulen, som bruker ConfigurableFirmata skisse.
Så la oss laste din Arduino opp med ConfigurableFirmata før du kobler sensoren:
La oss nå vise dem. Kretsen er ganske enkel - bare vær sikker på at du bruker en 4.7kΩ motstand når du slår sensoren opp med 5V-kilden fra Arduino.
La oss gå videre til programvaresiden. Å lese de digitale verdiene fra sensoren er super lett når du bruker Johnny-Five.
Kontroller at Node.js er installert på datamaskinen. I en passende dev-katalog, installer Johnny-Five ved hjelp av NPM pakkebehandling.
$ npm installere johnny-fem
Opprett en fil, temperature.js, og bruk koden under for å skrive ut verdiene:
Accentsconagua
var fem = krever ('johnny-fem'); fem.Thermometer (controller: 'DS18B20', pin: 2); temperature.on ('data', funksjon () konsoll .log (this.celsius + '° C', this.fahrenheit + '° F');););Kjør koden fra en konsoll med node temperature.js. Når maskinvarekortet er klart, bør du se temperaturverdiene som skrives ut på konsollen slik:
La oss nå publisere dataene fra temperaturføleren og plotte verdiene i en graf!
Først må du installere pubnub Node.js-modulen ved hjelp av npm:
$ npm installere pubnub
PubNub Data Stream Network (DSN) gir den globale infrastrukturen og lar deg bygge og skala sanntidsapplikasjoner og IoT-enheter ganske enkelt. I min forrige artikkel brukte du PubNub til å motta data fra en nettleser, men denne gangen bruker du PubNub til å publisere sensordataene som skal leses i nettleseren.
Når du har installert pubnub-modulen, må du initialisere den med API-nøklene.
var pubnub = krever ('pubnub') (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...'); La oss også lage et kanalnavn.
var kanal = 'temperatur-ds18b20';
Når du skriver en graf, må du ta de publiserte dataene fra samme kanalnavn.
Når du har oppnådd temperaturdata på datahendelsen med Johnny-Five som du har opprettet i forrige del av opplæringen, behold dataene som en variabel, i stedet for bare console.log.
var temp = 0; temperature.on ('data', funksjon () temp = this.celsius;);Du kan publisere alle dataene til PubNub, men sensoren kan brenne hendelsen for ofte. Så la oss sende dataene hvert tredje sekund.
setInterval (publiser 3000);
I publiseringsfunksjonen, bruk PubNub publisere() metode for å sende dataene i objektet (eller JSON).
funksjon publisere () var data = 'temperatur': temp,; pubnub.publish (kanal: kanal, melding: data,);
Hele koden for Arduino er tilgjengelig i denne GitHub repo.
Nå glem Arduino. Du vil nå opprette en egen nettside for å tegne en graf.
Først inkluderer eon.css i HTML-filen din:
Deretter inkluderer pubnub.js:
Deretter oppretter du et tomt element med noen ID:
Dette er hvor grafen vil bli generert på siden din. Nå må du initialisere PubNub, akkurat som du gjorde i node.js fil tidligere for Arduino:
var pubnub = PUBNUB.init (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...');
Deretter genererer du en enkel linjediagram ved hjelp av EONs kartet (), så snart den mottar data fra PubNub. Du kan motta dataene som sendes fra temperatursensoren ved å bruke det samme kanalnavnet, temperatur-DS18B20:
eon.chart (pubnub: pubnub, kanal: 'temperature-ds18b20', genererer: bindto: '#chart', transform: funksjon (m) return eon: temperatur: m.temperature );
De forvandle() Funksjonen skredder de rå dataene som sendes fra sensoren, slik at de passer i skjemaet som EON kan forstå.
Kjør både HTML og Node.js-koden for Arduino.
Voilà, du har en real-time data visualisering i nettleseren din!
Du kan tilpasse grafen mer med valgfrie C3.js-parametere, for eksempel linjefargene og bredden!
For eksempel, for å endre barfargen til lilla som denne gif animasjonen ovenfor, kan du legge til fargen på data parameter:
... generere: bindto: '#chart, data: type:' linje ', farger: temperatur:' # 663399 ',
Du kan bruke akser parameter for å merke og formatere x-aksen og y-aksen også.
Hvis du vil ha en annen type graf, kan du prøve å endre 'linje', som er en standardverdi for type, til 'Spline', og se hva som skjer.
For fullstendig kode, vennligst se GitHub repo. Det er noen få eksempler hvis du vil prøve forskjellige sensorer som en omgivende lyssensor og forskjellige typer diagrammer.
Jeg håper du likte opplæringen!
