Share
In meinem letzten Artikel habe ich Ihnen gezeigt, wie Sie mit Johnny-Five und PubNub ein Internet of Things-System prototypisieren. In diesem Lernprogramm haben Sie gelernt, wie Sie eine webgesteuerte LED à la Philips HUE erstellen können.
Dieses Mal möchte ich Ihnen zeigen, wie Sie Daten von Sensoren lesen, die an einem Arduino angeschlossen sind, und eine Grafik im Web darstellen!
In dieser Übung werden Sie:
Sie benötigen ein Arduino (Genuino) Uno-Board und grundlegende Kenntnisse zur Einrichtung des Arduino für Johnny-Five. Es ist eine gute Idee, das zu überprüfen Arduino einrichten Schritt in Schritt Tutorial, aber Sie müssen nicht installieren StandardFirmata weil Sie diesmal etwas anderes installieren werden.
Stellen Sie außerdem sicher, dass Node.js auf Ihrem Computer ausgeführt wird.
Project EON ist ein Open-Source-JavaScript-Framework für das Charting und Mapping, das von PubNub erstellt wurde.
Da die Diagramm- und Grafikkomponente von EON auf C3.js basiert, einem Wrapper für D3.js, können Sie mit EON in Echtzeit Diagramme erstellen, ohne zu wissen, wie Sie die weitaus kompliziertere D3-Bibliothek verwenden.
Die grundlegenden Schritte zur Visualisierung der Sensordaten sind so einfach wie folgt:
Daten aus einer Quelle veröffentlichen:
PUBNUB.publish (channel: 'my-graph', Nachricht: 'eon': 'Meine Daten 1': 39, 'Meine Daten 2': 23); 2. Betten Sie eine Grafik in das Web ein: eon.chart (channel: 'my-graph', generieren: bindto: '#myGraph');
Ich werde die Details zur Verwendung von EON durchgehen, da wir hier sowohl an einer Hardware- als auch an einer Software-Übung arbeiten. Also fangen wir an!
Bauen wir zuerst eine Schaltung für den Temperatursensor auf! Der generische Sensor und die Teile sollten ziemlich preiswert sein.
Hardware, die Sie benötigen:
Ein typischer digitaler Temperatursensor DS18B20 misst von -55 ° C bis 125 ° C (Celsius) mit einer Genauigkeit von ± 0,5 ° C über einen Großteil des Bereichs. Ein eingebauter Analog-Digital-Wandler (ADC) wandelt diese analoge Temperaturmessung mit einer Genauigkeit von bis zu 12 Bit in einen digitalen Wert um.
Der DS18B20-Sensor kommuniziert über einen proprietären 1-Wire-Bus. Wenn Sie Geräte mit dem speziellen Protokoll verwenden, benötigt Johnny-Five das 1-Wire-spezifische Modul, das das verwendet KonfigurierbareFirmata skizzieren.
Laden wir also Ihr Arduino mit KonfigurierbareFirmata vor dem Verdrahten des Sensors:
Nun lassen Sie uns sie verdrahten. Die Schaltung ist ziemlich einfach. Stellen Sie nur sicher, dass Sie einen 4,7-kΩ-Widerstand verwenden, wenn Sie den Sensor mit der 5-V-Quelle vom Arduino einschalten.
Gehen wir weiter zur Softwareseite. Das Lesen der digitalen Werte vom Sensor ist beim Einsatz von Johnny-Five extrem einfach.
Stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist. Installieren Sie in einem geeigneten dev-Verzeichnis Johnny-Five mit der npm Paket-Manager.
$ npm installiere johnny-five
Erstellen Sie eine Datei, Temperature.js, und verwenden Sie den folgenden Code, um die Werte auszudrucken:
Accentsconagua
var five = erfordern ('johnny-five'); five.Board (). on ('ready', Funktion () var temperature = new five.Thermometer (Controller: 'DS18B20', Pin: 2); temperature.on ('data', function () Konsole .log (this.celsius + '° C', this.fahrenheit + '° F');););Führen Sie den Code von einer Konsole aus mit aus Knotentemperatur.js. Sobald die Hardwareplatine bereit ist, sollten die Temperaturwerte auf der Konsole folgendermaßen angezeigt werden:
Lassen Sie uns nun die Daten des Temperatursensors veröffentlichen und die Werte in einem Diagramm darstellen!
Zunächst müssen Sie das pubnub Node.js-Modul mit npm installieren:
$ npm install pubnub
PubNub Data Stream Network (DSN) stellt die globale Infrastruktur bereit und ermöglicht das einfache Erstellen und Skalieren von Echtzeit-Apps und IoT-Geräten. In meinem vorherigen Artikel haben Sie PubNub verwendet, um Daten von einem Webbrowser zu empfangen. Diesmal verwenden Sie PubNub, um die Sensordaten zu veröffentlichen, die im Browser gelesen werden sollen.
Nachdem Sie das pubnub-Modul installiert haben, müssen Sie es mit Ihren API-Schlüsseln initialisieren.
var pubnub = required ('pubnub') (publish_key: 'pub-c-156a…'), subscribe_key: 'sub-c-f762f…'); Lassen Sie uns auch einen Kanalnamen erstellen.
var channel = 'temperatur-ds18b20';
Wenn Sie ein Diagramm zeichnen, müssen Sie die veröffentlichten Daten unter demselben Kanalnamen abrufen.
Wenn Sie Temperaturdaten für das Datenereignis mit Johnny-Five abrufen, die Sie im vorherigen Abschnitt des Lernprogramms erstellt haben, behalten Sie die Daten statt nur als Variable console.log.
var temp = 0; temperature.on ('data', function () temp = this.celsius;);Sie können alle Daten in PubNub veröffentlichen, aber der Sensor löst das Ereignis möglicherweise zu häufig aus. Senden wir die Daten also alle drei Sekunden.
setInterval (publish, 3000);
Verwenden Sie in der Publish-Funktion den PubNub veröffentlichen() Methode zum Senden der Daten in Objekt (oder JSON).
function publish () var data = 'Temperatur': Temp,; pubnub.publish (channel: channel, message: data,);
Der gesamte Code für das Arduino ist in diesem GitHub-Repo verfügbar.
Vergessen Sie jetzt Arduino. Sie erstellen jetzt eine separate Webseite, um ein Diagramm zu zeichnen.
Zuerst einschließen eon.css in Ihrer HTML-Datei:
Dann einschließen pubnub.js:
Dann erstellen Sie ein leeres Element mit einer ID:
Hier wird das Diagramm auf Ihrer Seite erstellt. Nun müssen Sie PubNub genauso initialisieren wie im node.js Datei früher für Arduino:
var pubnub = PUBNUB.init (publish_key: 'pub-c-156a…'), subscribe_key: 'sub-c-f762f…');
Dann generieren Sie ein einfaches Balkendiagramm mit EONs Diagramm(), sobald er die Daten von PubNub erhält. Sie können die vom Temperatursensor gesendeten Daten mit demselben Kanalnamen empfangen, Temperatur-ds18b20:
eon.chart (pubnub: pubnub, channel: 'temperature-ds18b20'), generiere: bindto: '#chart', transform: function (m) return eon: Temperatur: Temperatur );
Das verwandeln() Die Funktion passt die vom Sensor gesendeten Rohdaten an das Schema an, das EON verstehen kann.
Führen Sie den HTML-Code und den Node.js-Code für Arduino aus.
Voilà, Sie haben eine Echtzeit-Datenvisualisierung in Ihrem Browser!
Sie können den Graphen mit optionalen C3.js-Parametern wie Linienfarben und -breite stärker anpassen!
Wenn Sie beispielsweise die Balkenfarbe wie in dieser Gif-Animation oben in Lila ändern möchten, können Sie die Farbe der Farbe hinzufügen Daten Parameter:
… Generieren: bindto: '#chart, Daten: Typ:' Linie ', Farben: Temperatur:' # 663399 ',
Du kannst den ... benutzen Achse Parameter zum Beschriften und Formatieren der x-Achse und der y-Achse.
Wenn Sie eine andere Art von Grafik wünschen, ändern Sie die 'Linie', Dies ist ein Standardwert für Typ, bis "Spline", und sehen was passiert.
Den vollständigen Code finden Sie im GitHub-Repo. Es gibt einige weitere Beispiele, wenn Sie verschiedene Sensoren ausprobieren möchten, z. B. einen Umgebungslichtsensor und verschiedene Arten von Diagrammen.
Ich hoffe, dir hat das Tutorial gefallen!
