Echtzeit-Temperatursensor und Dashboard-

10 Schritt:Schritt 1: Das Konzept Schritt 2: Hardware Schritt 3: Erste Schritte: Software Schritt 4: Anschließen der Hardware Schritt 5: Die Software Schritt 6: Fügen Sie die folgenden Zeilen in pubnubAtmel / src / main.h Schritt 7: In pubnubAtmel / src / main.c, fügen Sie den Namen des Kanals und Pub, Unterschlüssel. Schritt 8: Erstellen Sie (F7 / Build -> Build-Lösung), führen Sie (weiter / grünen Pfeil / F5 / debug -> weiter). Schritt 9: Starten Sie Streaming-Daten Schritt 10: Visualisierung der Data Stream

Mikrocontroller werden immer billiger, leistungsfähiger und flexibler. Neue Module und Sensoren weiterhin neue Anwendungsfälle zu erstellen, und das Internet der Dinge weiter in die Höhe schnellen.
Darüber hinaus nur zu sammeln oder Erfassen von Daten, wollen wir etwas mit unseren Daten zu tun. Wir dachten, eine gute Möglichkeit, eine Anwendung dieser Art zu präsentieren wäre, einen Temperatursensor, der Daten in Echtzeit-Streams zu einem Live-Aktualisierung Dashboard erstellen.
In diesem Tutorial verwenden wir einen Atmel MCU , um die Temperatur und die sammeln EON, ein Open Source-JavaScript-Framework für das Streamen und die Daten an unsere Dashboard zu veröffentlichen. Die PubNub API versorgt die Daten-Streaming.

Der gesamte Code Sie für dieses Tutorial benötigen finden Sie hier

Schritt 1: Das Konzept

Schritt 2: Hardware

Schritt 3: Erste Schritte: Software

Voraussetzung ist, dass Sie die Firmware für SAMD21 Upgrade mit der BAT-Datei mit dem PubNub Atmel Beispiel vorgesehen, bevor Sie diese Demo laufen. Achten Sie darauf, keine andere Software wie Kitt oder TeraTerm wird mit dem COM-Port). Schließen Atmel Studio und der Kitt-Terminal. Die Aktualisierung der Firmware ist erfolgreich, wenn Sie einen PASS-Zeichen auf dem Terminal nach dem Ausführen des Codes zu sehen.

Schritt 4: Anschließen der Hardware

Schritt 5: Die Software

Lassen Sie uns Codierung!
Öffnen Sie die PubNub Beispiel: pubnubAtmel / PubNub_EXAMPLE.atsln ( im Code-Download enthalten ) in Atmel Studio, und Sie werden auf der folgenden Seite sehen. Stellen Sie sicher, dass Sie den Debugger / Programmer und Interface wählen wie im Bild gezeigt

Schritt 6: Fügen Sie die folgenden Zeilen in pubnubAtmel / src / main.h

  #define TEST_MODE_SSID "Enter-your-SSID" (wählen Sie die Wi-Fi-Zugangspunkt Sie den Chip möchten, eine Verbindung zu)
 #define TEST_MODE_PASSWORD "Enter-Kennwort-for-the-SSID" (geben Sie das Passwort für das gleiche Wi-Fi-Verbindung)
 #define TEST_MODE_WITHOUT_PROVISION

Schritt 7: In pubnubAtmel / src / main.c, fügen Sie den Namen des Kanals und Pub, Unterschlüssel.

Schritt 8: Erstellen Sie (F7 / Build -> Build-Lösung), führen Sie (weiter / grünen Pfeil / F5 / debug -> weiter).

Schritt 9: Starten Sie Streaming-Daten

Öffnen PubNub Developer Console , die gleiche Kanalnamen und ein Pub, Unterschlüssel wie im Code und abonnieren.
Wenn alles gut geht, sollten Sie einen konstanten Strom von Nachrichten im folgenden Format angezeigt: {"Säulen": [["Temperatur", "55.00"]]}

Schritt 10: Visualisierung der Data Stream

Sagen wir EON an die Arbeit! Der gesamte Code Sie brauchen, ist an den Anfang des Blog-Post.
Das Charting und grafische Komponente der EON auf C3.js basiert , einem Open-Source Charting-Bibliothek. Damit können Sie in Echtzeit Linien-, Balken-, Kreis-, Manometer, und Ringdiagramme bauen. Wenn neue Daten übertragen werden Übergänge animiert und Änderungen werden in Echtzeit wieder. Keine manuelle erfrischenden erforderlich!
Wir haben nicht nur wollen, um Rohdaten aus dem Sensor als Live-Aktualisierung Nummer anzuzeigen. Das ist langweilig. Also meine Partner-in-Kriminalität Tomomi gebaut unserer schönen Temperatur Visualisierung, die Sie oben sehen können! Es spottet Kindergarten oder Gewächshaus-Monitor (ein typisches, Realworld Anwendungsfall für Echtzeit-Temperatursensoren).
Die Schnittstelle ist im Browser läuft, und die Technologie dahinter ist ganz einfach, mit PubNub JavaScript-APIs , um die von der Atmel-Chip gesendeten Daten abonnieren. Weil unsere Schnittstelle ist einfach, leicht und vollständig in JavaScript gebaut, es ist zugänglich von jedem Ort der Welt mit jeder Art von Gerät - Handys, Tablets und jeder intelligente Geräte, so lange wie Sie einen Web-Browser verfügen. Der Hauptzweck dahinter ist, um Informationen in die effizienteste Art und Weise ohne die Genauigkeit zu verlieren, zu präsentieren.
In diesem Szenario zeigt die Benutzeroberfläche die aktuelle Temperatur, auch ein einfaches Liniendiagramm, die Aktualisierung in Echtzeit, so dass Sie die relativen Veränderungen der Temperatur kann sagen, das Anheben und Fallenlassen. Diese besondere Daten ist einfach, aber wenn Sie mehrere, komplizierter Daten haben, spielt die Datenvisualisierung mehr entscheidende Rolle.