\n
![\"\"](\"http:\/\/blog.herrwolff.org\/wp-content\/uploads\/2014\/06\/sample-chart-150x75.png\")
<\/a>\n\t\t\t<\/div><\/figure>![\"\"](\"http:\/\/blog.herrwolff.org\/wp-content\/uploads\/2014\/06\/WebApp-150x75.png\")
<\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<\/p>\n
Eine Node-WebApp um die gesendeten Daten auf einer WebSeite darzustellen <\/h2>\n
Die WebApp besteht aus drei Teil:<\/p>\n
- \n
- Dem Arduino Uno Sketch sendet JSON-Daten<\/li>\n
- Dem Backend: Ein ExpressJS-WebServer mit Datensteicherung<\/li>\n
- Dem Frontend: Darstellung der Daten mit Hilfe der JS-Bibliothek d3js<\/li>\n<\/ul>\n
Download: WebServer.zip<\/a>
\n<\/p>\n
Der ArduinoSketch <\/h2>\n
Der ArduinoSketch hat die Aufgabe eine Serielle Verbindung zum WebServer aufzubauen und
\ndie (gemessenen) Daten im JSON-Format: {„time“: time,“a0″:a0,“a1″,a1, … } zu \u00fcbermitteln. Dabei ist das Feld „time“ unverzichtbar. „a0“, „a1“ und … sind dann die jeweiligen Messdaten. <\/p>\n[js_markieren]
\n<\/p>\n\n\r\n\/*\r\n JSON ubs client\r\n\r\n This sketch sends Data in JSON-Format to a NodeJS WebServer \r\n over usb-link.\r\n\r\n \r\n SensorPins:\r\n * Not implemented jet\r\n \r\n \r\n created 01 Jun 2014\r\n by Wolfgang Wolff\r\n \r\n*\/\r\n \r\n\r\n\/\/ the time is important \r\nint time = 0;\r\n\r\n\/\/ two variables to hold the sensor data\r\ndouble a0 = 0.0; \r\ndouble a1 = 3.0;\r\n\r\nvoid setup(void) {\r\n pinMode(ledPin, OUTPUT); \/\/1\r\n Serial.begin(9600);\r\n \r\n digitalWrite(ledPin, LOW);\r\n \r\n}\r\n \r\nvoid loop(void) { \r\n \/\/ JSON-Format: {\"time\": time,\"a0\":a0,\"a1\",a1, ... } \r\n \/\/ important: the filed \"time\" is necessary\r\n Serial.print(\"{\\\"time\\\":\");\r\n Serial.print(time);\r\n Serial.print(\",\\\"a0\\\":\");\r\n Serial.print(a0);\r\n Serial.print(\",\\\"a1\\\":\");\r\n Serial.print(a1); \r\n Serial.print(\"}\");\r\n Serial.println();\r\n \r\n \/\/ time to wait before the next dataset is taken:\r\n delay(5000);\r\n \/\/ readout sensor data \r\n \/\/ here using a sin and cos-function to simulate real data\r\n time = time + 5;\r\n a0 = 3*sin(time);\r\n a1 = 2*cos(time); \r\n}\r\n<\/pre>\n<\/div>\n<\/br> <\/p>\n
Der WebServer <\/h2>\n
Als Basis f\u00fcr den WebServer dient das GitHub Projekt arduino-livechart<\/a>. Damit arduino-livechart auf mit der Aktuellen NodeJS Version funktioniert m\u00fcssen im ExpressJS-Code ein paar \u00c4nderungen vorgenommen werden. Diese \u00c4nderungen sind n\u00f6tig, da in der neueren Version von Express Middleware in eigenen Module ausgelagert wurde. <\/p>\n
- \n
- Das Module body-phraser<\/a> ist der Ersatz f\u00fcr die ExpressJS-Funktion:
express.bodyParser()<\/code>.<\/li>\n- Das Module morgan<\/a> ist der Ersatz f\u00fcr die ExpressJS-Funktion:
express.logger()<\/code><\/li>\n<\/ul>\nKonkret muss in der WebServer.js (in der original Quelle ist das die Datei index.js) der Code<\/p>\n
\r\nvar util = require('util');\r\nvar express = require('express');\r\nvar app = express();\r\n\r\napp.configure(function () {\r\n\tapp.use(express.logger());\r\n\tapp.use(express.bodyParser());\r\n});\r\n<\/pre>\ndurch <\/p>\n
\r\nvar util = require('util');\r\nvar express = require('express');\r\nvar app = express();\r\nvar bodyParser = require('body-parser');\r\n\r\n\r\nvar env = process.env.NODE_ENV || 'development';\r\nif ('development' == env) {\r\n app.use(require('morgan')('dev'));\r\n\t app.use(bodyParser());\r\n}\r\n<\/pre>\nersetzt werden. Damit alle Abh\u00e4ngigkeiten installiert werden k\u00f6nnen muss noch die Datei package.json<\/em> um die fehlenden Module erg\u00e4nzt werden:<\/p>\n
\r\n{\r\n\t\"name\": \"arduino-livechart\",\r\n\t\"version\": \"0.0.1\",\r\n\t\"private\": true,\r\n\t\"author\": \"Bill Roy<\/br>
\nDer Befehl
\nnpm install<\/code>
\ninstalliert alle Module im Ordner node_modules. Jetzt ist der WebServer bereit f\u00fcr den Einsatz.<\/p>\nDas Frontend: index.html<\/h2>\n
Am Frontend habe ich bisher keine Ver\u00e4nderungen vorgenommen. <\/p>\n
Das Starten der App <\/h2>\n
- \n
- Zuerst solle der Arduino-Sketch auf den Arduino Uno aufgespielt werden. Der Arduino sollte mit USB-Kabel mit dem PC verbunden ein und zus\u00e4tzlich mit dem lokalen Netzwerk per EthernetShield verbunden sein. <\/li>\n
- Dann sollte der Node-WebServer gestartet werde:
\n
\nnode WebServer.js
\n<\/code> <\/li>\n- Jetzt kann \u00fcber die URL http:\/\/localhost:8080 auf den WebServer zugegriffen werden. Wenn alles funktioniert sieht der Inhalt der WebSeite wie folgt aus:<\/li>\n
![\"\"](\"http:\/\/blog.herrwolff.org\/wp-content\/uploads\/2014\/06\/sample-chart.png\")
<\/p>\n<\/ol>\nWas noch zu tun ist <\/h2>\n
Viel, aber zuerst muss ich erst einmal noch etwas besser d3js lernen.
\nDenkbar w\u00e4re dieses Projekt mit Hilfe eines Wetter-Sensoren (Temperatur,Druck,Feuchte) zu einer Wetterstation auszubauen. Dazu muss aber der ArduinoSketch und das Frontend entsprechend erweitert werden. <\/p>\nQuellen:<\/h2>\n
- \n
- arduino-livechart<\/a><\/li>\n
- Nummer 5 lebt! Oder wie mein Arduino Board mit JavaScript gesteuert werden kann<\/a><\/li>\n
- JavaScript: Arduino Programming on Node.js<\/a><\/li>\n
- JavaScript-based Arduino Uno communication<\/a><\/li>\n
- Principles of Writing Consistent, Idiomatic JavaScript<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Zusammenfassung In diesem Beitrag soll erkl\u00e4rt werden, wie mit einem Arduino Uno Daten erfasst werden und mittels JSON an einen WebServer \u00fcbermittelt werden k\u00f6nnen. Mit Hilfe von NodeJS wird ein WebSever aufgebaut, der die vom Arduino \u00fcbermittelten Daten verarbeitet und in einem Diagramm dargestellt. Ich verwende dazu das GitHub Projekt arduino-livechart, bei dem (da in … Arduino — Datenvisualisierung mit NodeJS<\/span> weiterlesen
- Nummer 5 lebt! Oder wie mein Arduino Board mit JavaScript gesteuert werden kann<\/a><\/li>\n
- Jetzt kann \u00fcber die URL http:\/\/localhost:8080 auf den WebServer zugegriffen werden. Wenn alles funktioniert sieht der Inhalt der WebSeite wie folgt aus:<\/li>\n
- Das Module morgan<\/a> ist der Ersatz f\u00fcr die ExpressJS-Funktion:
- Das Module body-phraser<\/a> ist der Ersatz f\u00fcr die ExpressJS-Funktion: