Quelltext der Seite ESP32-Webserver für Sensordaten

[[Kategorie:Elektronik]]

<div class="row">
  <div class="large-7 columns">
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.

__INHALTSVERZEICHNIS__
  </div>
  <div class="large-5 columns">
[[Datei:BP Elektronik Screenshot Magnetfeldmessung.png|1499px|thumb|right|Weboberfläche des Live-Sensor-Systems.]]
  </div>
</div>

== 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 <code>Chart.js</code>. 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 <b>[https://pastebin.com/raw/RrcJJ4YJ Link zum Download]</b> 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 <code>WiFi.h</code>, <code>Wire.h</code> und <code>Adafruit_BMP280.h</code>; die Einrichtung für den ESP32 kann gemäß Abschnitt 3 der [https://joy-it.net/files/files/Produkte/SBC-NodeMCU-ESP32/SBC-NodeMCU-ESP32-Anleitung-2021-06-29.pdf 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 ==

<div class="row">
  <div class="large-7 columns">

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 <code>GRD</code>- und <code>VIN</code>-Pins verwendet werden (z. B. mittels drei in Reihe geschalteten 1,5-Volt-Batterien).

[[Datei:BP Elektronik Sensor Schaltplan.png|500px|thumb|left|Schaltplan für das ESP32-Sensor-Modul.]]

  </div>
  <div class="large-5 columns">
[[Datei:BP Elektronik Sensor Schaltung.jpg|300px|thumb|right|Schaltung für das ESP32-Sensor-Modul.]]
  </div>
</div>

== 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 <code>NAME</code> verändert werden; das WLAN-Passwort in der Variablen <code>PASS</code>.
* 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 <i>Erfassung starten</i> 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 <i>Diagramm herunterladen</i> und <i>Daten herunterladen</i> 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 <code>loop()</code>-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 <code>GET</code>-Anfrage an die Seite <code>/data</code> geschickt, die in der <code>loop()</code>-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 <code>/start</code> 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 <code>Graph.js</code> verwendet, die im Code integriert ist, um eine einfach zu implementierende Lösung in einer einzelnen Datei zu erreichen. In einer <code>while</code>-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 <code><script></code>-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 <code>href</code>-Belegungen mittels JavaScript realisiert. Die CSV-Daten stammen aus dem 2D-Array, das während der Erfassung aufgebaut wird; die Bilddatei wird aus dem <code>canvas</code>-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.

<div class="row">
  <div class="large-4 large-centered columns">
    <ul class="example-orbit" data-orbit>
      <li>
        [[Datei:BP Elektronik Magnetfelddiagramm Sensor.png]]
      </li>
      <li>
        [[Datei:BP Elektronik Temperaturdiagramm Sensor.png]]
      </li>
      <li>
        [[Datei:BP Elektronik Druckdiagramm Sensor.png]]
      </li>
    </ul>
  </div>
</div>

{|
https://i.creativecommons.org/l/by-nc-sa/3.0/de/88x31.png
Universität Stuttgart, 5. Physikalisches Institut, AG Physik und ihre Didaktik, lizenziert unter [https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de CC BY-NC-SA 4.0]
|}