Share
I min tidigare artikel visade jag dig hur man prototyper ett system för internet av saker med hjälp av Johnny-Five och PubNub. I den handledningen lärde du dig hur du skapar en webstyrd LED, à la Philips HUE.
Den här gången vill jag visa dig hur man läser data från sensorer som är kopplade till en Arduino och plottar en graf på webben!
I denna övning kommer du att:
Du behöver en Arduino (Genuino) Uno styrelse och grundläggande kunskaper om hur du ställer in Arduino för Johnny-Five. Det är en bra idé att granska Ställa in Arduino avsnittet i steg-för-steg-handledningen, men du behöver inte installera StandardFirmata för att du ska installera något annat den här gången.
Se också till att Node.js körs på din dator.
Project EON är en open-source JavaScript-ram för kartläggning och kartläggning, skapad av PubNub.
Eftersom kartläggnings- och grafikkomponenten i EON är baserad på C3.js, som är en omslag för D3.js, kan EON enkelt byggas i realtidsgrafer utan att veta hur man använder det mycket mer komplicerade D3-biblioteket.
De grundläggande stegen för att visualisera sensordata är lika enkla som följande:
Publicera data från en källa:
PUBNUB.publish (kanal: 'min-graf', meddelande: 'eon': 'Min data 1': 39, 'Min data 2': 23); 2. Bädda in ett diagram på webben: eon.chart (channel: 'my-graph', generera: bindto: '#myGraph');
Jag kommer att gå igenom detaljerna om hur man använder EON, eftersom vi arbetar med både en hårdvara och en mjukvaruövning här. Så låt oss börja!
Låt oss bygga en krets för temperatursensorn först! Den generiska sensorn och delarna ska vara ganska billiga.
Hårdvara du behöver:
En typisk DS18B20 digital temperatursensor mäter från -55 ° C till 125 ° C (Celsius) med ± 0,5 ° C noggrannhet över mycket av intervallet. En inbyggd analog-till-digital-omvandlare (ADC) omvandlar denna analoga temperaturmätning till ett digitalt värde med upp till 12 bitars precision.
DS18B20-sensorn kommunicerar via en proprietär 1-Wire-buss. När du använder enheter med specialprotokollet kräver Johnny-Five den specifika 1-Wire-modulen, som använder ConfigurableFirmata skiss.
Så låt oss ladda din Arduino med ConfigurableFirmata innan sensorn ansluts:
Nu, låt oss leda upp dem. Kretskortet är ganska enkelt - bara se till att du använder ett 4,7 kΩ motstånd när du slår på sensorn med 5V källa från Arduino.
Låt oss gå vidare till programsidan. Att läsa digitala värden från sensorn är super lätt när du använder Johnny-Five.
Se till att Node.js är installerat på din dator. Installera Johnny-Five i en lämplig dev-katalog genom att använda npm paketchef.
$ npm installera johnny-fem
Skapa en fil, temperature.js och använd koden nedan för att skriva ut värdena:
Accentsconagua
var fem = kräver ('johnny-fem'); fem.Thermometer (controller: 'DS18B20', pin: 2); temperatur.on ('data', funktion () konsol .log (this.celsius + '° C', this.fahrenheit + '° F');););Kör koden från en konsol med nod temperatur.js. När hårdvarukortet är klart bör du se de temperaturvärden som skrivs ut på konsolen så här:
Låt oss nu publicera data från temperaturgivaren och plotta värdena i en graf!
Först måste du installera pubnub Node.js-modulen med hjälp av npm:
$ npm installera pubnub
PubNub Data Stream Network (DSN) tillhandahåller den globala infrastrukturen och låter dig bygga och skala realtidsprogram och IoT-enheter ganska enkelt. I min tidigare artikel använde du PubNub för att ta emot data från en webbläsare, men den här gången använder du PubNub för att publicera sensordata som ska läsas i webbläsaren.
När du har installerat pubnub-modulen måste du initiera den med dina API-nycklar.
var pubnub = kräver ('pubnub') (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...'); Låt oss också skapa ett kanalnamn.
var kanal = 'temperatur-ds18b20';
När du plottar ett diagram måste du ta bort de publicerade data från samma kanalnamn.
När du har hämtat temperaturdata i datahändelsen med Johnny-Five som du har skapat i föregående avsnitt i handledningen, behåll data som en variabel, i stället för bara console.log.
var temp = 0; temperatur.on ("data", funktion () temp = this.celsius;);Du kan publicera varje bit data till PubNub, men sensorn kan bränna händelsen för ofta. Så låt oss skicka data var tredje sekund.
setInterval (publicera 3000);
I publiceringsfunktionen använder du PubNub publicera() Metod för att skicka data i objekt (eller JSON).
funktion publicera () var data = 'temperatur': temp,; pubnub.publish (kanal: kanal, meddelande: data,);
Hela koden för Arduino finns i denna GitHub repo.
Glöm nu Arduino. Du skapar nu en separat webbsida för att rita ett diagram.
Först inkludera eon.css i din HTML-fil:
Ta sedan med pubnub.js:
Skapa sedan ett tomt element med något ID:
Här kommer grafen att genereras på din sida. Nu måste du initiera PubNub, precis som du gjorde i node.js fil tidigare för Arduino:
var pubnub = PUBNUB.init (publish_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...');
Skapa sedan en enkel stapeldiagram med EON: s Diagram(), så snart den tar emot data från PubNub. Du kan ta emot data som skickas från temperatursensorn med samma kanalnamn, temperatur DS18B20:
eon.chart (pubnub: pubnub, kanal: 'temperature-ds18b20', generera: bindto: '#chart', transform: funktion (m) return eon: temperatur: m.temperature );
De omvandla() funktion skräddarsyddar de råa data som skickas från sensorn så att den passar i det schema som EON kan förstå.
Kör både HTML och Node.js-koden för Arduino.
Voilà, du har en realtidsdatavisualisering i din webbläsare!
Du kan anpassa grafen mer med valfria C3.js-parametrar, till exempel linjefärger och bredd!
Om du till exempel ändrar streckfärgen till lila som denna gif animation ovan kan du lägga till färgen på data parameter:
... generera: bindto: '#chart, data: typ:' linje ', färger: temperatur:' # 663399 ',
Du kan använda axel parameter för att märka och formatera x-axeln och y-axeln också.
Om du vill ha en annan typ av graf, försök ändra 'linje', vilket är ett standardvärde för typ, till 'Spline', och se vad som händer.
För fullständig kod, se GitHub repo. Det finns några fler exempel om du vill prova olika sensorer som en omgivande ljussensor och olika typer av diagram.
Jag hoppas att du tyckte om handledningen!
