Share
In mijn vorige artikel heb ik je laten zien hoe je een Internet of Things-systeem kunt prototypen met Johnny-Five en PubNub. In die tutorial heb je geleerd hoe je een webgestuurde LED creëert, à la Philips HUE.
Deze keer wil ik je laten zien hoe je gegevens van sensoren die aan een Arduino zijn gekoppeld, kunt lezen en een grafiek op het web kunt plotten!
In deze oefening ga je:
Je hebt een Arduino (Genuino) Uno-board nodig en basiskennis over het instellen van de Arduino voor Johnny-Five. Het is een goed idee om de Arduino instellen sectie in de stapsgewijze zelfstudie, maar u hoeft deze niet te installeren StandardFirmata omdat je deze keer iets anders gaat installeren.
Zorg er ook voor dat Node.js actief is op uw computer.
Project EON is een open-source JavaScript-framework voor grafieken en mapping, gemaakt door PubNub.
Omdat de grafiek- en grafiekcomponent van EON is gebaseerd op C3.js, een omhulsel voor D3.js, kunt u met EON real-time grafieken maken zonder te weten hoe u de veel gecompliceerdere D3-bibliotheek moet gebruiken.
De basisstappen om de sensorgegevens te visualiseren zijn zo simpel als het volgende:
Publiceer gegevens van een bron:
PUBNUB.publish (channel: 'my-graph', message: 'eon': 'My data 1': 39, 'My data 2': 23); 2. Sluit een grafiek in op internet: eon.chart (channel: 'my-graph', genereer: bindto: '#myGraph');
Ik zal de details van het gebruik van EON doornemen, omdat we hier zowel aan een hardware- als een software-oefening werken. Laten we beginnen!
Laten we eerst een circuit voor de temperatuursensor bouwen! De generieke sensor en onderdelen moeten behoorlijk goedkoop zijn.
Hardware die u nodig hebt:
Een typische DS18B20 digitale temperatuursensor meet van -55 ° C tot 125 ° C (Celsius) met een nauwkeurigheid van ± 0,5 ° C over een groot deel van het bereik. Een ingebouwde analoog / digitaal-omzetter (ADC) converteert deze analoge temperatuurmeting naar een digitale waarde met maximaal 12 bits precisie.
De DS18B20-sensor communiceert via een gepatenteerde 1-draads bus. Wanneer u apparaten met het speciale protocol gebruikt, heeft Johnny-Five de 1-draads specifieke module nodig, die gebruik maakt van de ConfigurableFirmata schetsen.
Dus laten we je Arduino laden met ConfigurableFirmata voor de bedrading van de sensor:
Laten we ze nu aansluiten. Het circuit is vrij eenvoudig - zorg ervoor dat je een 4,7kΩ-weerstand gebruikt wanneer je de sensor voedt met de 5V-bron van de Arduino.
Laten we verder gaan met de software. Het lezen van de digitale waarden van de sensor is supereenvoudig wanneer u Johnny-Five gebruikt.
Zorg ervoor dat Node.js op uw computer is geïnstalleerd. Installeer Johnny-Five in een geschikte dev-directory met behulp van de NPM pakket manager.
$ npm installeer johnny-five
Maak een bestand, temperature.js, en gebruik de onderstaande code om de waarden af te drukken:
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');););Voer de code uit vanaf een console met knooppunt temperatuur.js. Zodra het hardwarebord klaar is, ziet u de temperatuurwaarden als volgt op de console afgedrukt:
Laten we nu de gegevens van de temperatuursensor publiceren en de waarden in een grafiek plotten!
Eerst moet u de module pubnub Node.js installeren met npm:
$ npm install pubnub
PubNub Data Stream Network (DSN) biedt de wereldwijde infrastructuur en stelt u in staat om real-time apps en IoT-apparaten vrij eenvoudig te bouwen en te schalen. In mijn vorige artikel gebruikte je PubNub om gegevens te ontvangen van een webbrowser, maar deze keer gebruik je PubNub om de sensorgegevens te publiceren die in de browser moeten worden gelezen.
Nadat u de pubnub-module hebt geïnstalleerd, moet u deze initialiseren met uw API-sleutels.
var pubnub = require ('pubnub') (publication_key: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...'); Laten we ook een kanaalnaam maken.
var channel = 'temperature-ds18b20';
Wanneer u een grafiek plot, moet u de gepubliceerde gegevens van dezelfde kanaalnaam pakken.
Zodra je temperatuurgegevens hebt verzameld over de gegevensgebeurtenis met Johnny-Five die je in het vorige gedeelte van de zelfstudie hebt gemaakt, bewaar de gegevens dan als een variabele, in plaats van alleen console.log.
var temp = 0; temperature.on ('data', function () temp = this.celsius;);U kunt elk gegevensbestand publiceren in PubNub, maar de sensor kan het evenement te vaak activeren. Dus laten we de gegevens elke drie seconden verzenden.
setInterval (publiceer, 3000);
Gebruik PublicNub in de publiceerfunctie publiceren() methode om de gegevens in object (of JSON) te verzenden.
function publish () var data = 'temperature': temp,; pubnub.publish (channel: channel, message: data,);
De volledige code voor de Arduino is beschikbaar in deze GitHub-repo.
Nu vergeet Arduino. U maakt nu een afzonderlijke webpagina om een grafiek te tekenen.
Voeg eerst toe eon.css in je HTML-bestand:
Voeg dan toe pubnub.js:
Maak vervolgens een leeg element met een ID:
Dit is waar de grafiek wordt gegenereerd op uw pagina. Nu moet u PubNub initialiseren, net zoals u deed in de node.js bestand eerder voor Arduino:
var pubnub = PUBNUB.init (publicatienaam: 'pub-c-156a ...', subscribe_key: 'sub-c-f762f ...');
Genereer vervolgens een eenvoudig staafdiagram met behulp van EON's grafiek (), zodra het de gegevens van PubNub ontvangt. U kunt de gegevens ontvangen die zijn verzonden vanaf de temperatuursensor door dezelfde kanaalnaam te gebruiken, temperatuur-DS18B20:
eon.chart (pubnub: pubnub, channel: 'temperature-ds18b20', genereert: bindto: '#chart', transform: function (m) return eon: temperature: m.temperature );
De transformeren() De functie past de onbewerkte gegevens aan die door de sensor worden verzonden om in het schema te passen dat EON kan begrijpen.
Voer zowel de HTML- als de Node.js-code uit voor Arduino.
Voilà, je hebt een real-time datavisualisatie in je browser!
U kunt de grafiek verder aanpassen met optionele C3.js-parameters, zoals lijnkleuren en breedte!
Als u bijvoorbeeld de balkkleur in paars wilt wijzigen zoals deze gif-animatie hierboven, kunt u de kleur van de kleur toevoegen gegevens parameter:
... genereren: bindto: '#chart, data: type:' line ', colors: temperature:' # 663399 ',
U kunt de as parameter om ook de x-as en y-as te labelen en op te maken.
Als u een ander soort grafiek wilt, probeer dan de 'lijn', wat een standaardwaarde is voor type, naar 'Spline', en kijk wat er gebeurt.
Raadpleeg de GitHub-repo voor de volledige code. Er zijn nog enkele voorbeelden als u verschillende sensoren zoals een omgevingslichtsensor en verschillende soorten grafieken wilt proberen.
Ik hoop dat je de tutorial leuk vond!
