ESP32-Webserver für Sensordaten

Mit einem ESP32-Mikrocontroller wird ein Webserver aufgesetzt, über den Sensordaten in einem beliebigen Browser live ausgelesen und aufgezeichnet werden können. Das Diagramm aktualisiert sich während der Aufzeichnung automatisch. Zusätzlich gibt es die Möglichkeit zum Herunterladen des Diagramms als PNG-Datei und der Rohdaten als CSV-Datei.

Grundsätzlich gibt es zwei Modi.

Live-Anzeige der Daten aller Sensoren (aktualisiert sich jede Sekunde).
Messwertaufnahme für eine gewisse Messdauer (nimmt so viele Daten wie möglich auf und zeichnet sie live in ein Diagramm ein; Messgröße und Messdauer sind einstellbar).

Das Ziel ist eine möglichst flexible Möglichkeit zur Aufnahme von Sensordaten, unabhängig von kostenintensiven proprietären Lösungen der Lehrmittelhersteller.

Neben normaler Messwerterfassung (z. B. der aktuellen Temperatur) können damit im Unterricht besonders gut zeitveränderliche, dynamische Prozesse gezeigt werden, da sich das Diagramm während der Erfassung ständig aktualisiert.

Weboberfläche des Live-Sensor-Systems.

Software

Um eine einfache Implementierung zu erreichen, wurde bewusst auf eine Lösung in einer integrierten Datei gesetzt. Der gesamte Code ist daher in einer einzigen Datei vorhanden, inklusive der JavaScript-Bibliothek Chart.js. Damit müssen keine weiteren HTML-, CSS- oder JavaScript-Dateien auf den ESP32 geladen werden, sondern nur eine einzige Datei.

Die Datei wird unter folgendem Link zum Download angeboten.

Benötigtes Material

Zum Aufbau des Sensorsystems werden grundsätzlich folgende Materialien benötigt.

NODEMCU ESP32 (von Joy-IT)
Zwei kleine Steckbretter
Mehrere Verbindungskabel oder Steckbrückenkabel
Ein WLAN-fähiges Endgerät mit Browser
Arduino-Entwicklungsumgebung mit Bibliotheken WiFi.h, Wire.h und Adafruit_BMP280.h; die Einrichtung für den ESP32 kann gemäß Abschnitt 3 der offiziellen Anleitung vorgenommen werden
USB-A-Kabel
Optional eine grüne LED und ein 100-Ohm-Widerstand

Für den hier vorgestellten Aufbau werden beispielhaft folgende Sensoren verwendet. Für eigene Anwendungen können beliebige andere Sensoren mit dem ESP32 verbunden werden. Die Anpassung des zugehörigen Programmcodes beläuft sich dann auf wenige Zeilen.

Bihor-Magnetsensor (von Joy-IT, KY-035)
Temperatur-Druck-Sensor BMP280 (von Joy-IT, KY-052)

Hardware-Aufbau

Im Folgenden wird der Hardware-Aufbau in Form des Schaltplans beschrieben. Anstatt der Spannungsversorgung über das USB-A-Kabel an das Endgerät, mit dem man auch den Code hochlädt, kann alternativ auch eine Powerbank für freiere Beweglichkeit oder aber eine Batterie-Spannungsversorgung über die GRD- und VIN-Pins verwendet werden (z. B. mittels drei in Reihe geschalteten 1,5-Volt-Batterien).

Schaltplan für das ESP32-Sensor-Modul.

Schaltung für das ESP32-Sensor-Modul.

Verwendung

Nach dem Hochladen der Software auf den ESP32 über den USB-A-Anschluss wird im seriellen Monitor der Arduino-Entwicklungsumgebung eine IP-Adresse ausgegeben.
Man verbindet sich über das gewünschte Endgerät mit dem WLAN des ESP32. Dessen Name kann in der Variablen NAME verändert werden; das WLAN-Passwort in der Variablen PASS.
Man öffnet mit einem Browser die oben ausgegebene IP-Adresse.

Jede Sekunde werden die aktuellen Messwerte zu Magnetfeld, Temperatur und Druck abgefragt und angezeigt. Mit Klick auf die Schaltfläche Erfassung starten können Messwerte aufgezeichnet werden. Was und wie lange aufgezeichnet werden soll, kann über die Eingabe- und Auswahlfelder darüber eingestellt werden. Das zugehörige Diagramm wird aufgezeichnet und live aktualisiert; es wird die maximale Zahl an Messpunkte ausgegeben, die der ESP32 und die Sensoren erlauben. Zusätzlich können über die Schaltflächen Diagramm herunterladen und Daten herunterladen nach fertiger Messwerterfassung eine PNG-Datei des Diagramms bzw. eine CSV-Datei der aufgenommenen Messwerte heruntergeladen werden.

Funktionsweise des Codes

Im Folgenden wird die grundlegende Funktionsweise des Codes erklärt. Genaueres kann im oben herunterladbaren Code nachgeschaut werden (oder man verwendet ihn einfach als fertige Lösung für eigene Sensordaten; Anpassungen müssen für Anwendungen mit anderen Sensoren nur an denjenigen Stellen vorgenommen werden, an denen Sensordaten ausgegeben werden).

Im Code wird ein Webserver auf dem ESP32 geöffnet. In der loop()-Funktion wird auf einen Client gewartet und dann dessen Anfrage ausgelesen. Im Fall eines standardmäßigen Aufrufs der Webseite wird diese dann (mit HTML-, CSS- und JavaScript-Anteilen) ausgegeben. Jede Sekunde wird über JavaScript eine GET-Anfrage an die Seite /data geschickt, die in der loop()-Funktion dann dafür sorgt, dass nur der Teil der Seite mit den Messdaten ausgegeben wird; über JavaScript wird dann dieser Teil der Seite aktualisiert. So wird nicht alles neu geladen, sondern nur der relevante Sensor-Anteil. Bei Start der Datenaufnahme wird die Seite /start aufgerufen, wobei die GET-Parameter den Einstellungen (Messgröße, Messdauer) entsprechen, die daraus abgeleitet werden. Zuerst wird ein entsprechend skaliertes Rohdiagramm ausgegeben. Hierfür wird die Bibliothek Graph.js verwendet, die im Code integriert ist, um eine einfach zu implementierende Lösung in einer einzelnen Datei zu erreichen. In einer while-Schleife werden dann solange die Messdaten ausgegeben, bis die Messdauer abgelaufen ist. Das funktioniert dabei als asynchroner Aufruf; die Webseite lädt also so lange, bis die Erfassung beendet ist. Über Ausgaben von einzelnen JavaScript-Befehlen über <script>-Blöcke wird dabei garantiert, dass das Diagramm ständig aktualisiert wird. Die Daten werden dabei einerseits als 2D-Array gespeichert (für das spätere Herunterladen der CSV-Datei) und in das Objekt des Graphen gepusht. Zwecks Rechenzeit wird das Diagramm je nach Erfassungszeit dann mit den neuen Daten unterschiedlich oft aktualisiert (und zwar umso öfter, je kleiner die Messdauer ist). Die Download-Funktionen für die Bild- und CSV-Datei werden dabei über entsprechende href-Belegungen mittels JavaScript realisiert. Die CSV-Daten stammen aus dem 2D-Array, das während der Erfassung aufgebaut wird; die Bilddatei wird aus dem canvas-Objekt des Diagramms extrahiert.

Diagramme möglicher Anwendungen

Es folgen drei Diagramme möglicher Anwendungsszenarien des Sensor-Systems: Ein Zeit-Magnetfeld-Diagramm bei Hin- und Herbewegen eines Magneten in der Nähe des Magnetfeld-Sensors; eine Aufnahme steigender Temperatur bei Erwärmen des Temperatursensors mit einem Finger; und ein Zeit-Druck-Diagramm bei einer Aufzugfahrt von unten nach oben und wieder zurück.