ESP32: Per Browser steuern und informieren

Mit einem kostengünstigen ESP32 Mikrocontroller kann die Kontrolle über Sensoren und Aktoren direkt vom Webbrowser aus erfolgen, ohne Cloud-Abhängigkeit. Der ESP32 fungiert in diesem Beispiel als Mini-Webserver, damit Daten angezeigt und angeschlossene Aktoren gesteuert werden können.
In diesem Versuchsaufbau mit einem DHT22 Sensor, der Temperatur und Luftfeuchtigkeit misst, die auf der Webseite angezeigt und eine LED per Mausklick geschaltet werden kann. Die soll demonstrieren das auch ohne großen Aufwand, selbst ein kleines personalisiertes, intelligentes Zuhause mit vielfältigen Möglichkeiten schnell eingerichtet werden kann.

Hardware:
ESP32
DHT22 Sensor
LED (optional mit Farbwechsel. Es gibt diese als langsam und schnell wechselnd)

Um einen DHT22-Sensor mit einem ESP32 zu verwenden, muss zunächst der Sensor an das Entwicklungsboard angeschlossen werden und die erforderlichen Bibliotheken installieren.
Pin 1 des DHT22 mit Pluszeichen an den 3,3 Volt Anschluss des ESP32, der mittlere zweite Pin sollte mit einem digitalen Pin (in diesem Beispiel Pin 15) und Pin 3 mit dem Minuszeichen, mit dem GND-Pin am ESP32 verbinden.

Wer die ESP32 Bibliothek Vers 3.0.1 in der Board-Verwaltung installiert hat, findet den im Video vorgestellten Beispiel-Sketch „SimpleWifiServer“.
Wie unter Einstellungen zusätzliche Board URL hinzugefügt werden, um diese Version zu finden, hatte ich hier beschrieben.
Dann wie im Video gezeigt, wird die DHT-Sensor-Bibliothek von Adafruit Vers 1.4.6 aus der Bibliotheksverwaltung benötigt, um wie gezeigt im vorhandenen Sketch zu ergänzen.

LED immer mit einem Vorwiderstand verwenden, der an Pin 5 kommt.
Tipp: Welche LED benötigt welchen Vorwiderstand

Verdrahtung:

Code:

#include <WiFi.h>
#include "DHT.h"

const char *ssid = "euer SSID Name";
const char *password = "SSID Password";

#define DHTTYPE DHT22  // DHT 22  (AM2302), AM2321
DHT dht(15, DHTTYPE);

NetworkServer server(80);

void setup() {
  Serial.begin(115200);
  dht.begin();
  pinMode(5, OUTPUT);  // Setze den Modus des LED-Pins auf Ausgang

  delay(10);  

  Serial.println();
  Serial.println();
  Serial.print("Verbindung zu ");
  Serial.println(ssid);

  WiFi.begin(ssid, password); // Verbindung zu deinem WiFi-Netzwerk

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi verbunden.");
  Serial.println("IP-Adresse: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {

  float h = dht.readHumidity();
  // Temperatur als Celsius lesen (Standard)
  float t = dht.readTemperature(false);

  float f = dht.readTemperature(true);

  // Überprüfung DHT-Sensor
  if (isnan(h) || isnan(t) || isnan(f)) {
    Serial.println(F("Fehler beim Lesen vom DHT-Sensor!"));
    return;
  }

  // Auslesen in Fahrenheit (Standard)
  float hif = dht.computeHeatIndex(f, h);
  // Auslesen in Celsius (isFahreheit = false)
  float hic = dht.computeHeatIndex(t, h, false);

  delay(15);

  NetworkClient client = server.accept();  // Auf eingehende Clients warten

  if (client) {                       
    Serial.println("Neuer Client.");  
    String currentLine = "";          
    while (client.connected()) {      
      if (client.available()) {       
        char c = client.read();       
        Serial.write(c);              
        if (c == '\n') {              

          if (currentLine.length() == 0) {
            // HTTP-Header beginnen immer mit einem Antwortcode (z.B. HTTP/1.1 200 OK)
            // und einem Content-Type, damit der Client weiß, was kommt, dann eine leere Zeile:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.print("<br><b>Statusanzeige und Steuern per Browser</b>");
            client.print("<br><br>Klicke <a href=\"/H\">hier</a> um die LED an Pin 5 einzuschalten.<br>");
            client.print("<br>Klicke <a href=\"/L\">hier</a> um die LED an Pin 5 auszuschalten.<br>");
            client.println();
            client.println("<style> body { font-size: 40px; } </style>");  // Setzt die Schriftgröße auf 40px
            client.print("<br><br>Die Temperatur im Raum ist ");
            client.print(t);
            client.print(" Grad");
            client.print("<br><br>Die Luftfeuchtigkeit im Raum ist ");
            client.print(h);
            client.print(" %");
            // Aus der Schleife ausbrechen:
            break;
          } else {  // Wenn Sie einen Zeilenumbruch erhalten haben, dann löschen Sie currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  
          currentLine += c;      
        }

        // Überprüfe, ob die Client-Anforderung "GET /H" oder "GET /L" war:
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(5, HIGH);  // GET /H schaltet die LED ein
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(5, LOW);  // GET /L schaltet die LED aus
        }
      }
    }
    // Verbindung schließen:
    client.stop();
    Serial.println("Client getrennt.");
  }
}

In dem dann wie hier zu sehenden Quellcode, nur noch deine Wifi-SSID und Passwort eintragen und schon kann es verwendet werden.

Nach dem Upload kann im seriellen Monitor die erhaltene IP-Adresse abgelesen werden.
Dann an einem im gleichen Netzwerk befindlichen PC, Tablett oder Smartphone einen Browser aufrufen, der URL mit HTTP erlaubt und diese IP-Adresse aufrufen.
Zum Beispiel wie bei mir die http://172.20.0.18 oder 172.20.0.18:80
Mit dem Edge Browser kann diese Webseite mit den Standardeinstellungen nicht geöffnet werden. Dieser erlaubt derzeit dann nur HTTPS Seiten. Entweder die Einstellungen ändern oder es mit dem Firefox probieren. Aktuell kann mit dem Firefox Browser diese unverschlüsselte Seite ohne Änderung der Einstellungen angezeigt und verwendet werden.

Nun kann wie in diesem Beispiel die LED geschaltet und die Werte des Sensors ausgelesen werden.

Macht was draus:
Probiert nun eure eigenen Sensoren und Aktoren aus.
Denkbar wäre zB. ein an der Tür befindlicher Magnetschalter, der euch überall anzeigt ob die Tür auf ist.
Oder im Briefkasten ob die Post gekommen ist. Oder ob im Keller noch Licht brennt. Oder oder oder…

Video:

Funktionserklärung der Schaltung der LED im Code:

Das href-Attribut in einem <a>-Tag definiert die URL-Seite, die geöffnet wird, wenn du auf den Link klickst. Zeile des Sketches:

client.print(„<br><br>Klicke <a href=\“/H\“>hier</a> um die LED an Pin 5 einzuschalten.<br>“);

Hier erstellt das <a href=\“/H\“>hier</a> einen Hyperlink, der den Text “hier” enthält. Beim Anklicken auf diesen Link, sendet der Browser eine GET-Anfrage an den Server mit dem Zusatz im Pfad /H.
Dein Server, der auf dem Mikrocontroller läuft, erkennt diese Anfrage und führt den Code aus, der der Bedingung if (currentLine.endsWith(„GET /H“)) entspricht, was in diesem Fall das Einschalten der LED an Pin 5 bedeutet:

if (currentLine.endsWith(„GET /H“)) {
digitalWrite(5, HIGH);
// GET /H schaltet die LED ein
}

Das href-Attribut kann auf jede gültige URL oder einen Pfad zu einer Ressource verweisen. In Ihrem Fall sind /H und /L Pfade, die vom Server erkannt werden, um die LED ein- oder auszuschalten.

,