Esp32 Webserver

Esp32 WebServer Tab

Der Webserver ist der erste Tab, auf dem sich alles aufbauen lässt.
Inklusive Arduino OTA um Updates online zum ESP32 zu senden.

Sketch WebServermodular Tab

............................................

Esp32 Connect Tab

Ist natürlich notwendig um die Verbindung zum Router aufzubauen.

Sketch Connect Tab

............................................

Esp32 Access Point Tab

Den Esp32 autark betreiben.

Sketch Access-Point Tab

............................................

Esp32 Login Manager Tab

Mit dem Login Manager für deine ESP32 Projekte brauchst du die Netzwerk-Zugangsdaten (SSID und Passwort) nicht mehr fest codieren.
Eingabe der Zugangsdaten über ein Webinterface. Es wird ein Access-Point mit dem Namen "EspConfig" erstellt. Die Zugangsdaten werden im Spiffs des Esp32 gespeichert.

Sketch Login Manager Tab

Esp32 Login Manager Webinterface

Nach erfolgreicher Übertragung.

Esp32 Login Manager Webinterface

Nach verbinden zum Heimnetz unter der IP des Esp32.

Esp32 Login Manager Webinterface

............................................

Esp32 BME280 Tab

Die Klimadaten werden zur Anzeige auf der Webseite jede Sekunde aktuallisiert.
Die Messwerte werden mittels Javascript "Fetch.Api" zum Browser übertragen.

Installiere die Library für den Bme280 Tab

Sketch Bme280 Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

bme280.html

Webseite BME280

Sollte der Bme280 Sensor nicht angeschlossen sein, wird Fehler angezeigt.

Webseite BME280

............................................

Esp32 EspBoardLed Tab

Dies ist die Klassiche Version, bei jedem schalten wird die komplette Webseite neu gesendet. Um die Webseite im Browsers aufzurufen gib die IP deines ESP32 gefolgt von "/led" ein. zB.: "http://192.168.179.57/led"

Sketch EspBoardLed Tab

Esp32 Led toggle

............................................

Esp32 OnBoardLed Tab

Dies ist die Moderne Version, beim schalten wird, mittels Javascript "Fetch.Api", nur der Text und die Farbe vom Button aktualisiert.

Sketch OnBoardLed Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

onboardled.html

Esp32 Led toggle

............................................

Esp32 Mail Tab

E-Mail versenden via smtp2go.com

Dazu brauchst du zunächst einen Smtp2Go Free Account.

Sketch ESP32 Mail Tab

Achtung!

SMTP2GO Free hat ein Limit von 25 E-Mails pro Stunde / 1.000 E-Mails pro Monat.
Deshalb die Funktion "sendmails();" niemals unlimitiert aufrufen.

Die Serverantwort von smtp2go.com, ob die Übertragung erfolgreich war, wird nicht blockierend ausgewertet. Bei Zeitüberschreitung wird eine Fehlermeldung gesendet.

............................................

Esp32 Pushbullet Tab

Push Nachrichten vom Esp32 in Echtzeit zum Smartphones und/oder PC schicken.

Dazu brauchst du zunächst einen Pushbullet Account.

Ausserdem die für dein Gerät passende Pushbullet APP.

Sketch Pushbullet Tab

Smartphone Ansicht Pushbullet

............................................

Esp32 TX23 Tab

Windgeschwindigkeit- und Richtung mit Fifo Puffer für die Anzeige der maximalen Geschwindigkeit der letzten Stunde. Esp32 TX23 Windsensor

Installiere die Library für den TX23 Tab

Sketch TX23 Tab

Die Html Datei muss im Spiffs des Esp32 gespeichert werden.

wind.html

Esp32 TX23 Webinterface

Esp32 Spiffs Datei Manager

Spiffs Upload Download Delete von Dateien von einer HTML-Seite

Füge die "spiffs.ino", vorzugsweise als Tab, zu deinem Webserver Sketch hinzu und rufe anschliesend unter Angabe der IP deines Esp32 die spiffs.html über die Adresszeile deines Browsers auf. Beispielsweise so "http://192.168.179.46/spiffs.html"

Sketch Spiffs Datei Manager

Sketch Datei Manager sortiert Alphabetisch

spiffs.html
Standart Version

spiffs.html
Inklusive Sicherheitsabfrage beim Datei löschen.

style32.css

Das Favicon für den Browser, im Spiffs speichern.

Wenn sich im Spiffs (Speicher) des Esp32 noch keine "spiffs.html" befindet wird ein kleiner Helfer zu deinen Browser gesendet mit dem du die "spiffs.html" und die "style32.css" hochladen kannst.

ESP32 Spiffs Helper.

Hast du die "spiffs.html" und "style32.css" erfolgreich in den Speicher deines Esp32 geladen siehst du den Esp32 Datei Manager.

ESP32 Dateimanager.

Jetzt kannst du loslegen. Upload Download Delete Html CSS usw. hochladen LOG Dateien einsehen/runterladen.

ESP32 Spiffs.

Der Dateiname dient gleichzeitig als Link zur Seite bzw. zur Ansicht (Textdatei) im Browser.

ESP32 Spiffs Verwaltung.

Es ist nicht möglich Dateien hochzuladen, die größer sind als der noch verfügbare Speicher.

ESP32 Spiffs Dateimanager.

Die "spiffs.html" lässt sich nur durch formatieren des Speichers löschen.

ESP32 Format Spiffs.

Getestet mit ESP32 NodeMCU-32s

............................................

Esp32 Udp Sender Tab

Sendet Nachrichten per Udp

Es wird nur gesendet, es findet keine Auswertung der Antwort statt.

Sketch SendUdp Tab

............................................

Esp32 DHT22 Tab

Die Klimadaten werden zur Anzeige auf der Webseite aller zwei Sekunden aktuallisiert.

Installiere die Library für den DHT22 Tab

Sketch DHT22 Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

dht22.html

Webseite DHT22

Sollte der DHT22 Sensor nicht gefunden werden, wird Timeout angezeigt.

Webseite DHT22

............................................

Esp32 Sonnen Auf/Untergang Tab

Die Zeiten für den Sonnenaufgang und Sonnenuntergang werden einmal am Tag berechnet und im "struct sun" gespeichert.

Der Lokalzeit Tab ist für die Berechnung erforderlich

Du musst die geographische Länge, Breite und die Zeitzone für den Ort, für den du die Zeiten berechnen möchtest beim Aufruf der Funktion angeben.

Sketch Sonnen Auf/Untergang Tab

............................................

Esp32 BH1750 Tab

Beleuchtungsstärke in LUX

Installiere die Library für den BH1750 Tab

Sketch BH1750 Tab

Die Html Datei muss im Spiffs des Esp32 gespeichert werden.

bh1750.html

Esp32 BH1750 Webinterface

Esp32 Admin Webinterface

Füge die "admin.ino", vorzugsweise als Tab, zu deinem Webserver Sketch hinzu und lade anschliesend mit Hilfe des Esp32 Datei Manager die admin.html in den Spiffs.

Die Spiffs.ino ist zum ausführen der Admin.ino erforderlich.

Die Esp32 "Admin.ino" funktioniert derzeit nur unter Windows.

Sketch Admin

admin.html

Für die Darstellung ist die style32.css analog Spiffs Verwaltung, erforderlich.

style32.css

Esp32 Admin Webinterface

............................................

Esp32 Lokalzeit Tab

Inclusive automatische Umstellung Sommerzeit - Normalzeit
Du kannst die Zeitzone für deinen Standort im Sketch anpassen. Einmal am Tag wird die aktuelle Zeit vom NTP Server geholt.

Sketch Lokalzeit Tab

zeit32.html

Esp32 Sommerzeit

zeitdatum32.html

ESP32 Sommerzeit Datum

............................................

Esp32 Zeitschaltuhr Dual Tab

Zeitschaltuhr mit NTP Zeitsynchronisation

Der Lokalzeit Tab ist für die Zeitschaltuhr erforderlich

Der Sketch Zeitschaltuhrdual ist für LOW und HIGH aktive Relais, Solid State Relais oder Mosfet geeignet. Dies muss vor dem Hochladen einmalig im Sketch, im Tab Zeitschaltuhr.ino, eingestellt werden. Die optische Schaltzustandsanzeige ist gleichzeitig der Button zum manuellen Ein-/Ausschalten der Ausgänge.

Sketch Zeitschaltuhr Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

zeitschaltuhr32.html

Esp32 Zeitschaltuhr Webinterface

Die Schaltzeiten können mittels Schaltfläche ON/OFF aktiviert oder deaktiviert werden. Das erfolgreiche speichern der Schaltzeiten auf dem Esp32 Webserver wird im Webinterface angezeigt.

Esp32 Zeitschaltuhr Webinterface

Ansicht Zeiteinstellung Mobil Device Android

Esp32 Zeitschaltuhr Webinterface

............................................

Esp32 Zeitschaltuhr Tab

Zeitschaltuhr mit NTP Zeitsynchronisation

Der Lokalzeit Tab ist für die Zeitschaltuhr erforderlich

Die Schaltzeiten werden im Spiffs des Esp32 gespeichert. Auf der Webseite werden die aktuell eingestellten Schaltzeiten angezeigt.

Sketch Zeitschaltuhr Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

zeitschaltuhr32.html

Esp32 Tageszeitschaltuhr Webinterface

Das erfolgreiche speichern der Schaltzeiten auf dem Esp32 Webserver wird im Webinterface angezeigt.

Esp32 Tageszeitschaltuhr Webinterface

18 Kommentare - Kommentar eintragen

Brain ✪ ✪ ✪ ❘ 27.10.2018: Vielen Dank für die vielen und sehr gut nachvollziehbaren Beispiele. Es bleiben keine Wünsche offen !!!

Dieter ✪ ✪ ✪ ❘ 30.10.2018: Super, lief so gut wie auf Anhieb. Musste für mein ESP32 DevBoard nur noch ein
#define LED_BUILTIN 2
einfügen.

Eigentlich wollte ich ja nur den Dateimanager einbauen, jetzt ist es etwas mehr geworden. Damit konnte ich aber meinen Codeverhau so neu sortieren, dass er zukünftig vielleicht auch noch lesbar ist.

Antwort:
Wenn du als Board NodeMCU-32s oder ähnliche einstellst sollte es auch ohne #define klappen.
siehe dazu: Esp32 Varianten

Dieter ❘ 04.11.2018: Danke für den Hinweis, war nicht so einfach bei der Menge an Varianten den richtigen zu finden. Jetzt geht es auch ohne.

Und noch was: ich finde den Login-Manager Tab auf der Seite schlecht positioniert, habe ihn nur per Zufall gefunden. Direkt unter dem Connect-Tab, quasi als erweiterte Version, wäre imho hilfreich.

Ulf S ❘ 02.12.2018: Zur Aktivierung der Zeitschaltuhr muss der Zeitstempel.ino so umbenannt werden, dass er im Alphabet vor der Zeitschaltuhr.ino kommt. Sonst ist die Zeitvariable tm nicht bekannt.
Beispiel Zeitstempel.ino in Zeitastempel.ino umbennen

Antwort:
Danke für den Hinweis, auf den Fehler!
Habe es analog zu meinem Testsketch auf "Zeit.ino" geändert.
Edit:
Ich habe den Tab komplett überarbeitet.

Markus ❘ 05.12.2018: Hallo,

ich habe den Webserver mit dem SPIFFS-Tab laufen. Das ganze läuft als Task auf einem ESP32 solange kein anderer Task aktiv ist sehr gut. Wenn jetzt aber ein zweiter RTOS Task dazu kommt der z.B. auf ein Display über SPI schriebt oder eine andere etwas zeitintensivere Operation ausführt führt dies am Webserver zu seltsamen Fehlern wie z.B. Darstellungsfehler oder der Webserver verheddert sich so dass gar nichts mehr geht. Ich habe auch schon versucht über eine Semaphore(Mutex) die Tasks gegeneinander zu verriegeln so dass immer nur einer läuft. Das löst aber das Problem auch nicht. Es scheint so als ob "server.handleClient()" nicht schnell genug wieder aufgerufen wird wenn nebenbei noch etwas zeitintensiveres passiert. Ist dieses Verhalten bekannt und gibt es da evtl. eine Lösung?

Antwort:
Dabei kann ich dir nicht helfen, da ich noch nie, mit Task gearbeitet habe. Ich befasse mich momentan ausschließlich mit der Kommunikation über Wlan. Ich würde es mal ohne Task versuchen. Weitere Tipps kann ich dir als Hobbyprogrammierer nicht geben.
Gruß Fips

Mirko ✪ ✪ ✪ ❘ 01.03.2019: Für den ESP32 Einstieg super um endlich mal die Materie schneller zu begreifen und den Knoten im Hirn zu lösen - vor allem wie ich einfach (Mess)Werte mit einer im SPIFFS abgelegten Datei darstellen kann. Danke ! Danke ! und nochmals Danke !
Die Darstellung unter Linux-Firefox könnte noch verfeinert werden wenn die Umlaute/Sonderzeichen mit den HTML Bezeichnern durchgeführt werden.
° -> °
ä -> ä (ä,ö usw. sinngemäß weiter)
ß -> ß

Weiter so ! Ich werde immer mal vorbeischauen.

Antwort:
Freut mich wenn es dir hilft den Knoten zu lösen!
Wenn du die HTML Dateien, UTF-8 kodiert, abspeicherst wird es auch unter Linux/FF ordentlich dargestellt.

Gruß Fips

Martin S. ✪ ✪ ✪ ❘ 08.04.2019: Bin begeistert!
Vielen vielen Dank!
Das sind für mich die wertvollsten Codzeilen die ich jemals für den ESP32 gefunden habe!!!
Bin gerade dabei eigenen Code mit hineinzupacken.
Bist du auch in einem Forum unterwegs?

LG Martin

Antwort:
www.arduinoforum.de

Gruß Fips

Hotsystems ✪ ✪ ✪ ❘ 02.08.2019: Wie schon viele vor mir angemerkt haben, das sind super Tools.
Auch die Unterstützung von Fips ist perfekt.
Jetzt kann ich endlich meinen ESP32 aktiv einsetzen.
Nochmals danke und Gruß

Infoschwab ✪ ✪ ✪ ❘ 08.08.2019: Einfach Klasse aufgebaut.
Super, so einen Dateiserver: SPIFFS ist super.
Ich hab in Connect.ino in der Zeile vor WiFi.begin(ssid, password); diese Zeile eingebaut.
WiFi.config(INADDR_NONE, INADDR_NONE, INADDR_NONE);
Ebenso in admin.ino von WiFi.setHostname(...
Dadurch wird ein Fehler im ESP32 bezüglich des setzen des Hostnamens gefixt. Siehe https://github.com/espressif/arduino-esp32/issues/2537
Ob beide Einträge nötig sind kann ich nicht sagen, jetzt klappt das setzen des Hostnamens über die Adminseite.
Danke und Gruß

Anwort: Danke für die Info, momentan habe ich keinen Esp32 frei um es zu prüfen. Werde ich bei Gelegenheit nachholen.

Gruß Fips

Willem ✪ ✪ ✪ ❘ 13.11.2019: Dear Fips,

I have used a version of your "ESP8266 Datei Manager" and that works great.
Now I'm moving to the ESP32 and downloaded your "ESP32 Datei Manager" .. but it does not work!

The WebServer library for the ESP32 does not read files (spiffs.html, spiffs.ccp) from SPIFFS (which is a bug).
So I get the option to load spiffs.html but thats already on my SPIFFS file system (in fact, in the Serial Console I see at startup all the files that are on my SPIFFS and spiffs.html and spiffs.css are there and ik I call the server with "/json" I also se all the files in the JSON string).

I'm on the latest Arduino 1.8 IDE and have the latest ESP32 core (1.04) installed.

How did you test this version? What (special) libraries have you used.

Appreciate your help!

Antwort:
Für den Spiffs Datei Manager wurden nur Standard Bibliotheken verwendet.
Die Angabe mit welcher Core Version ich getestet habe befindet sich Kopf der einzelnen Tabs.
// Software: Esp32 Arduino Core 1.0.0 - 1.0.2

Gruß Fips

Esp32 Webserver Arduino Tab

Esp32 WebServer Tab

Esp32 Connect Tab

Esp32 Access Point Tab

Esp32 Login Manager Tab

Esp32 BME280 Tab

Esp32 EspBoardLed Tab

Esp32 OnBoardLed Tab

Esp32 Mail Tab

Esp32 Pushbullet Tab

Esp32 TX23 Tab

Esp32 Spiffs Datei Manager

Esp32 Udp Sender Tab

Esp32 DHT22 Tab

Esp32 Sonnen Auf/Untergang Tab

Esp32 BH1750 Tab

Esp32 Admin Webinterface

Esp32 Lokalzeit Tab

Esp32 Zeitschaltuhr Dual Tab

Esp32 Zeitschaltuhr Tab