2018-10-11

Esp32 Webserver Arduino Tab

Seit 27.06.2018 ist die "WebServer.h" jetzt endlich offizieller Bestandteil der "Arduino core for ESP32".

Achtung Neu
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 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 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.

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

Esp32 Zeitstempel Tab

Inclusive Sommerzeit
Einmal am Tag wird die aktuelle Zeit vom NTP Server geholt.

Sketch Zeitstempel Tab

zeit32.html

Esp32 Sommerzeit

zeitdatum32.html

ESP32 Sommerzeit Datum

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

Esp32 Zeitschaltuhr Tab

Zeitschaltuhr mit NTP Zeitsynchronisation

Der Zeitstempel 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

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

spiffs.html

style32.css

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 Dev Modul

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 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 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 Udp Sender Tab

Sendet Nachrichten per Udp

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

Sketch SendUdp 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


ESP Startseite