Update: 2024-02-03

Esp32 Webserver Arduino Tab

Seit 26.07.2018 lässt sich der ESP32, genau so leicht wie der ESP8266, per Arduino IDE Boards Manager installieren.

Wichtig!
Der Haupttab (Esp32 WebServer) und der Ordner (mit allen Tabs) müssen unbedingt den selben Namen haben.

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

Esp32 Bme280 Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

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.

Esp32 OnBoardLed Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Esp32 Led toggle

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

Esp32 Individual Button Tab

Auf der Webseite werden automatisch die Bezeichnungen der Schaltflächen die du im Sketch unter "NAME[]" einträgst angezeigt. Diese Namen werden nur beim ersten Aufruf der Webseite zum Browser gesendet und anschließend aus dem Local Storage gelesen.

Esp32 Individual Button Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Esp32 Individual Button

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

Esp32 Input Tab

Die Anzahl der Html Eingabefelder lässt sich im Sketch einstellen.

Esp32 Input Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Esp32 Input Integer

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

Esp32 Mail Tab

E-Mail versenden via smtp2go.com

Dazu brauchst du zunächst einen Smtp2Go Free Account.

Esp32 SMTP2GO.

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 Filesystem Manager

LittleFS Upload Download Delete von Dateien von einer HTML-Seite

Füge die "LittleFS.ino", vorzugsweise als Tab, zu deinem Webserver Sketch hinzu und rufe anschliesend unter Angabe der IP deines Esp32 die fs.html über die Adresszeile deines Browsers auf.

Filesystem Manager sortiert ab Core Version 2.0.6

Die Sortierung der Dateien ist mittels Klick auf den Pfeil im untersten Listeneintrag möglich.

Esp32 Filesystem Manager

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"

Esp32 Datei Manager sortiert bis Core Version 1.0.6

Esp32 Datei Manager sortiert ab Core Version 2.0.0

Grafik Favicon 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.

Nodemcu Dateimanager

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

Die Sortierung der Dateien ist mittels Klick auf den Pfeil im untersten Listeneintrag möglich.

Esp32 Dateimanager

Der Dateiname dient gleichzeitig als Link zur Seite bzw. zur Ansicht (Textdatei) im Browser.
Die Sortierung der Dateien ist mittels Klick auf den Pfeil im untersten Listeneintrag möglich.

ESP32 Spiffs Verwaltung

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

Esp32 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

Esp32 DHT22 Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Webseite DHT22

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

Webseite DHT22

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

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

Esp32 TX23 Tab und Webseite

Die Html Datei muss im Spiffs des Esp32 gespeichert werden.

Esp32 TX23 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.

Esp32 Admin Tab bis Core Version 1.0.5

Esp32 Admin Tab ab Core Version 1.0.6

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

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.

Esp32 Lokalzeit Tab und Webseite

Esp32 Sommerzeit

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.

Esp32 Zeitschaltuhr Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

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 Singel Tab

Zeitschaltuhr mit NTP Zeitsynchronisation Die Anzahl der möglichen Schaltzeiten lässt sich zwischen 1 und 60 einstellen.

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.

Zeitschaltuhr Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden. Der aktuelle Status "ON/OFF" wird neben dem Button zum manuellen schalten angezeigt.

Esp32 Zeitschaltuhr Webinterface

Es lassen sich alle Schaltzeiten zusammen aktivieren/deaktivieren.

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

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

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

Esp32 BH1750 Tab und Webseite

Die Html Datei muss im Spiffs des Esp32 gespeichert werden.

Esp32 BH1750 Webinterface

63 Kommentare - Kommentar eintragen
Hallo Fips ❘ 27.01.2024
Langsam taste ich mich an deine genialen Programme heran. Die LED kann ich schon schalten!
Frage: Ich stelle nachts mein WLAN ab (von 23-5.30). Wird die Single-Schaltuhr (brauch den Sonnenauf- und Untergang) trotzdem laufen oder macht sie mitternachts die Uhrsynchronisation?

Antwort:
Mit einer aktuellen Core Version sollte es klappen.

Gruß Fips
Dieter ❘ 21.01.2024
Hallo Fips,

im LogIn Manager Modul ist ein Fehler, der dazu führt dass trotz erfolgreichem Einwählen ins WLAN ein eigenes aufgespannt wird:

if (WiFi.status() != WL_NO_SSID_AVAIL || i > 19) { // Ist der Router nicht erreichbar, wird ein eigenes Netzwerk erstellt.

Das sollte so aussehen, wie auch im LoginMagaer des ESP8266:

if (WiFi.status() == WL_NO_SSID_AVAIL || i > 19) {

Gruß,
Dieter

Antwort:
Danke für die Info! Gefixed!

Gruß Fips
Helge ✪ ✪ ✪ 15.01.2024
Hallo Fips,
nach jetzt doch mehr Integration deiner ESP32 Vorlagen in meinen Sketch ist mir aufgefallen, dass es zumindest bei mir und einem NodeMCU32 nicht möglich ist, den "Zeitschaltuhr SingleTab" und den "Sonnenauf- und Untergangs Tab" für den ESP32 gleichzeitig zu nutzen. Immer wenn void twilight aufgerufen wird und die Zeiten im z. B. "Datum-Uhrzeit Tab" angezeigt werden, was sehr gut funktioniert, ist ein "Auto aktiv" auf der Zeitschaltuhr-Page nicht mehr möglich. Das liegt wohl daran was ich bisher herausgefunden habe, das nach einem einmaligen Aufruf von void twillight der Wert des eeprom(1, fixed) den Wert von 58 annimmt. Warum auch immer, entzieht sich momentan noch meiner Kenntnis. Auch ein überschreiben der eeprom-Adresse mit einem neuen "true" oder "false" ändert leider nichts daran. Stehe momentan leider noch auf dem bekanntlichen Schlauch.
Viele Grüße Helge

Antwort:
Diese Tab's sind nur bis CoreVersion 1.0.4 von mir getestet. Könnte also bei einer aktuellen Version schief gehen!

Gruß Fips
Helge ✪ ✪ ✪ 10.01.2024
Hallo Fips,
Dir auch noch als erstes ein gutes Neues Jahr. Ist nicht immer selbstverständlich in dieser Zeit.
Zu dem Problem mit dem nicht aktivieren der Zeitschaltuhr wollte ich Dir (und allen anderen) nur noch mitteilen, dass es nicht ausreicht, den Flash zu löschen.
Bei einem neuen ESP32, egal welchen Typs wie z. B. NodeMCU oder Wroom, muss in dem Sketch einmalig das "EEPROM.put(1, fixed);" fest auf "true" geschrieben werden. Habe ich mir über ein weiteres "bool fixed_1 = true" realisiert. Danach die Zeile wieder löschen oder kommentieren und den Sketch erneut hochladen. Und schon ist die Zeitschaltuhr aktivierbar und auch deaktivierbar.
Herzliche Grüße Helge

Antwort:
Danke für deine Info!

Gruß Fips
Helge ✪ ✪ ✪ 20.12.2023
Hallo Fips,
ich versuche nachdem ich einen Node-MCU-32S mit Deiner Schaltuhr geladen habe, die Schaltuhr zum Laufen zu bekommen. Leider ohne Erfolg.
Es lässt sich leider der Button "Auto aktive" nicht toogeln. In der Konsole wird immer nur "Zeitschaltuhr Automatik deaktiviert" angezeigt. Nach einem Reset wird immer folgendes ausgegeben: "Zeitschaltuhr Automatik deaktiviert".
Eine Datei swtime.dat wird auch nach dem Speichern erstellt, dessen Inhalt so ausschaut:

SOH SOH NUL NUL .....
20:41
21:39
20:53
20:59
0
0

Auch die Schrift schaltet nicht auf die blaue Farbe um. Im Sketch habe ich wie in der html-Page als Wert für "count" bei beiden 12 eingegeben.
Ein manuelles Ein- oder Ausschalten des angeschlossenen Relais funktioniert übrigens einwandfrei. Es werden dann auch die Meldungen "Relais an" bzw. "Relais aus" ausgegeben.
Hast Du da einen Tipp?
Der Fehler ist übrigens bei allen Deiner Zeitschaltuhr Varianten leider gleich.
Viele Grüße Helge

Antwort:
Bitte einmal den Flash komplett leeren.
In der IDE unter Werkzeuge "Erase All Flash Befor Sketch Upload:"

Gruß Fips
Matthias ✪ ✪ ✪ 09.12.2023
Hallo Fips

Vielen Dank für die sehr coole 😎 & hilfreiche Seite. Habe heute Abend meine ersten Gehversuche mit ESP32 unternommen und deine Seiten und Code haben dabei super geholfen. Kudos.

Beste Grüße, Matthias


Antwort:
Viel Erfolg!

Gruß Fips
mat-sche ❘ 06.12.2023
HAllo Fips,
habe nun seit längerem versucht Deinen Code zu verstehen, bekomme jedoch keine Lösung.
In der "Esp32 Zeitschaltuhr Dual Tab" vermisse ich die Möglichkeit die Wochentage für eine Programmierung der Schaltuhr zu nutzen, vergleichbar zu der ESP8286 dual Schaltuhr. Könntest Du bitte die Wochentage für die ESP32-DualSchaltuhr mit einbinden?
Vielen Dank!
MAT

Antwort:
Vorrang haben momentan andere Aktualisierungen.
Nimm den Code vom Esp8266 und pass den für den Esp32 an.

Gruß Fips
Helge ❘ 12.11.2023
In der Arduino IDE 2.2.1 habe ich übrigens als Board das "Arduino Nano ESP32" selektiert. Bei den zahlreichen anderen Boards in der Rubrik "esp32" wüsste ich erstmal nicht, welches ich anwählen sollte.

Antwort:
Im Boardverwalter sah ich einen eigenen Core für den "Arduino Nano ESP32". Vielleicht hilft das!

Gruß Fips
Helge ❘ 12.11.2023
Hi Fips,
ich verwende einen original Arduino NANO ESP32 (VID: 0x2341) und versuche es mit der neuen Arduino IDE v2.2.1 zum laufen zu bekommen. Der Sketch wird kompiliert, und es wird der Webserver auch gestartet, aber es werden wohl keine Daten bzw. Datei aus dem Ordner "Data" mit hochgeladen. Auch ein nachladen der Dateien über die angezeigte Seite wie oben beschrieben, lässt keine html-Seite anzeigen. Ist die Funktion littlefs mit dem Nano ESP32 und der IDE 2.2.1 evtl. nicht kompatibel? Oder ist das Filesystem nicht richtig angelegt bzw. wird noch zusätzlich eine bestimmte Bibliothek benötigt?
Im Forum (https://www.arduinoforum.de/) hatte ich diesbezüglich von Dir und anderen Usern auch schon einiges gesehen und gelesen. Hatte mich dort gestern neu angemeldet aber noch keine Mail zur "Aktivierung" erhalten. Somit kann ich dort leider noch keine Fragen detaillierte mit Screenshot stellen.
Aber evtl. kannst Du mir ja auch weiterhelfen. Auf jeden Fall schon mal vielen Dank.

Antwort:
Ich habe keinen Arduino NANO ESP32. Kann es nicht testen.
Forum ist gut, dort kann das eher geklärt werden.

Gruß Fips
Helge ✪ ✪ ✪ 10.11.2023
Hallo Fips,
danke Dir zunächst auch für die vielen "Helferlein". ich scheitere mom. aber an der Aufsetzung des Nano-ESP32 mit deinem Programm. Es wird alles geladen und nach dem Verbinden wird auch die Seite mit "Lade die littlefs.html hoch." im Browser angezeigt. Lade ich dann aber die Dateien littlefs.html, style.css, WebSocket.js, bme280.html etc. hoch, wird keine html-Page angezeigt. Es bleibt im bei der Aufforderung "Lade die littlefs.html hoch." stehen. Im Monitor sehe ich das da etwas passiert. Z. B. "handleFileUpload Name: /littlefs.html" mit "Data und Size.
Was mache ich falsch. Bin für jeden Tipp sehr dankbar.
Viele Grüße
Helge

Antwort:
Welche Arduino ESP32 Version verwendest du?

Gruß Fips
Kommentar eintragen

*