Tobias Scheible Cyber Security & IT-Forensik Dozent
Pnorama Balingen bei Nacht

Webcam – Temperatur, Luftfeuchtigkeit und Luftdruck

Um die aktuelle Temperatur, Luftfeuchtigkeit und den aktuellen Luftdruck anzuzeigen, habe ich die Funktionen meiner Webcam, die die Stadt Balingen zeigt, erweitert. Realisiert habe ich das Ganze mit einem BME280 Sensor und dem WeMos D1 Mini Pro (ESP8266) Entwicklungsboard.

Sonntag, 09. August 2020
0 Kommentare

Die Technik von Netzwerkkameras faszinierte mich schon immer – alleine schon, weil hier meine beiden Interessensgebiete Fotografie und Rechnersysteme aufeinandertreffen. Selbst betreibe ich eine öffentliche Webcam, die hier über den Blog erreichbar ist. Die Webcam befindet sich im nördlichen Teil der Stadt Balingen in der Nähe des Stadtteils Schmieden auf dem Stettberg. Balingen selbst befindet sich in Baden-Württemberg im Zentrum des Zollernalbkreises.

Die Webcam ist südlich ausgerichtet und bietet einen Blick über die Stadt Balingen. Gut zu erkennen ist die zentral am Marktplatz liegende Stadtkirche und der Albtrauf im Hintergrund. Zudem zeigt die Webcam einen Ausschnitt des Himmels, womit ein Blick auf die Wetterlage in Balingen geworfen werden kann.

Programmierung des Sensors

Der Sensor befindet sich außerhalb des Hauses an der Unterseite einer Box für Elektronik, die speziell für den Außenbereich entwickelt wurde. Die Kommunikation erfolgt drahtlos per WLAN. Ich verwende das Entwicklungsboard WeMos D1 Mini Pro, da eine externe Antenne angeschlossen werden kann. Dadurch können auch größere WLAN-Strecken überprüft werden, da die Antenne optimal ausgerichtet werden kann.

Konfiguration des WeMos D1 Mini Pro

Als Sensor verwende ich den BME280, der per I2C mit dem WeMos D1 Mini Pro kommuniziert. Dazu müssen die beiden Pins für die Stromversorgung verbunden werden und der SDA Pin mit dem Pin D2 (intern Pin 4) und SCL mit dem Pin D1 (intern Pin 5) verbunden werden. Zur Ansteuerung verwende ich die Bibliothek Adafruit_BME280.

#include  #include  #include  #include  #include "Adafruit_BME280.h" #define I2C_SDA 4 #define I2C_SCL 5 #define SEALEVELPRESSURE_HPA (1013.25) #define BME280_ADD 0x76 Adafruit_BME280 bme(I2C_SDA, I2C_SCL); #ifndef STASSID #define STASSID "SSID" #define STAPSK "PASSWORD" #endif const char* ssid = STASSID; const char* password = STAPSK; ESP8266WebServer server(80); String handleRequest(){ String response = "{"; response +="\"temperatur\": "+String(bme.readTemperature())+", "; response +="\"luftfeuchtigkeit\": "+String(bme.readHumidity())+", "; response +="\"luftdruck\": "+String(bme.readPressure() / 100.0F)+", "; response +="}"; return response; } void setup(void) { Serial.begin(9600); WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); while(WiFi.status()!= WL_CONNECTED){ Serial.println("WIFI NOT CONNECTED"); delay(4000); } Serial.println(""); Serial.println("WiFi connected."); Serial.print("IP address: "); Serial.println(WiFi.localIP()); if (MDNS.begin("esp8266")) { Serial.println("MDNS responder started"); } server.on("/", []() { server.send(200, "application/json\nAccess-Control-Allow-Origin:*", handleRequest()); }); server.onNotFound(handleRequest); server.begin(); Serial.println("HTTP server started"); bool status; status = bme.begin(BME280_ADD); delay(1000); if (!status) { Serial.println("Could not find a valid BME280 sensor, check wiring!"); } } void loop(void) { server.handleClient(); MDNS.update(); }

Auslesen und Übertragen der Werte

Beim Aufruf der IP-Adresse des WeMos D1 Mini Pro im Webbrowser werden die Werte im JSON-Format ausgegeben. Der Controller könnte die Daten direkt auf den Webserver übertragen. Da ich einen Server zur zentralen Steuerung verwende, holt dieser die Daten ab und lädt sie auf den Webserver.

Einbindung in die Website

Nachdem die JSON-Datei auf dem Webserver hochgeladen wurde, werden die Daten vom Webbrowser asynchron geladen. Für jeden Wert wird ein entsprechendes DIV-Element mit eindeutiger ID verwendet und die Werte per JavaScript geladen und ausgegeben:

var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open('GET', 'https://scheible.it/webcam/temp.json?a='+Date.now(), true); xobj.onreadystatechange = function () { if (xobj.readyState == 4 && xobj.status == "200") { var jdata = JSON.parse(xobj.responseText); document.getElementById("temperatur").innerHTML = 'Temperatur: '+jdata.temperatur+' ℃'; document.getElementById("luftfeuchtigkeit").innerHTML = 'Relative Feuchte: '+jdata.luftfeuchtigkeit+' %'; document.getElementById("luftdruck").innerHTML = 'Luftdruck: '+jdata.luftdruck+' hPa'; }}; xobj.send(null); 

Webcam Artikelserie

Dieser Artikel ist Teil der Artikelserie Webcam Stadt Balingen. Die Webcam steht in Balingen auf dem Stettberg. Balingen befindet sich südlich von Stuttgart auf halbem Weg zum Bodensee und im Zentrum des Zollernalbkreises. Die Webcam ist nach Süden ausgerichtet mit Blick auf die Innenstadt von Balingen und den dahinter liegenden Albtrauf. In dieser Artikelserie beschreibe ich die Einrichtung und Nutzung der Webcam in den folgenden Blog-Beiträgen:

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.