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:

• Webcam – Aufbau und Technik
• Webcam – Speichern des Streams
• Webcam – Zuschneiden und Upload
• Webcam – Einbindung per JavaScript
• Webcam – Temperatur, Luftfeuchtigkeit und Luftdruck