2020-04-13

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 Led toggle

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

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 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 Spiffs Datei Manager

Esp32 Datei Manager sortiert Alphabetisch

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.

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

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

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

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

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

31 Kommentare - Kommentar eintragen
Gimafood ✪ ✪ ✪ 29.05.2020
Hallo Fips,
auch von mir ein dickes lob für deine Seite, bis auf Anfangsschwierigkeiten (bin Anfänger), konnte ich auf meinen ESP32 Cam- Admin, LED, Spiffs, Schaltuhr Tabs erfolgreich installieren,
meine Idee (vorhaben) ist ein Türschloss für die Garagentür zu basteln, wenn man die LED Tabs so konfigurieren kann das es als Pin Tastatur fungiert, bei richtiger Pin eingabe schaltet das Relais. Hättest du ein Paar Tips für mich?

Als komfort Variante wäre ESP 32 Cam Gesichtserkennung mit Bluetooth LE, da ich mich mit der Bluetooht LE nicht so aus kenne, konnte ich noch nicht realisieren.
Da war meine Idee, ich nähere mich zur Tür, ESP32 Cam erkennt mein Handy über Bluetooth , gibt die Gesichtserkennung frei und die Gesichtserkennung schaltet das Reilas. Nur Gesichtserkennung war mir zu unsicher mit einem Foto kann man auch das Relais schalten. Kennst du dich evtl. mit Bluetooth LE aus?

Viele Grüße
Gim

Antwort:
Ich habe mich noch nie mit Tastaturen oder Bluetooth beschäftigt.

Gruß Fips
morfamy ✪ ✪ ✪ 29.05.2020
Ich möchte an diese Stelle einfach nur mal ein herzliches "Dankeschön" aussprechen ... Deine Seite bzw. das knowhow ist spitze und mich hat es sehr viel weiter gebracht. Der modulare Ansatz ist fantastisch!

Merci und thanx
(☞゚ヮ゚)☞

Antwort:
Danke, für dein Feedback!

Gruß Fips
Wolfgang ❘ 24.05.2020
Hallo und erst mal ein dickes Lob für diese Seite!
Im Arduinoforum habe ich den Tipp bekommen hier wegen des ESP32-CAM nachzufragen.
Ich möchte eine einfache Videoüberwachung mit der ESP32-CAM aufbauen wobei der ESP32 einen Accesspoint haben soll. Also mit dem Handy beim ESP32 anmelden, den Browser starten und den Videostream ansehen.
Die Beispiele die ich bisher im Netz gefunden habe lassen sich zwar installieren und auch die WLAN-Verbindung funktioniert aber leider wird die Seite im Browser nicht gefunden obwohl die IP stimmt. Jetzt suche ich ein Prog. was komplett funktioniert.
Kannst du mir dabei helfen?

LG

Wolfgang

Antwort:
Mit der ESP32-CAM kenne ich mich nicht aus. Mit dem Esp32 Access Point Tab funktioniert aber alles wie gewohnt.
Sollte also auch mit der Cam klappen.

Gruß Fips
Thomas ✪ ✪ ✪ 05.05.2020
Hallo,

besten Dank zunächst für die Seite!

Ich habe den WebServer runtergeladen und den SPIFFS eingebunden. Die erste Fehlermeldung lautet nun, dass er "runtime()" nicht findet. Auch all die Zeilen mit DEBUG meckert er an.

Nun denke ich, da müßte ich noch einiges mehr einbinden. Wo könnte ich denn suchen, das zu finden?

Antwort:
Den Aufruf der Funktion "runtime()" kannst du im WebserverTab auskommentieren wenn du den AdminTab nicht nutzen möchtest.

"DEBUG meckert er an" ist keine Fehlermeldung, dir mich das Problem erkennen läst!

Gruß Fips
Moritz ✪ ✪ ✪ 01.05.2020
Hi,
ich habe alles auf den esp hochgeladen aber es startet einfach nicht. ich resete den esp und im seriellen Monitor steht dann:ets Jun 8 2016 00:22:57

rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
modeIO, clock div:1
load:0x3fff0018,len:4
load:0x3fff001c,len:1216
ho 0 tail 12 room 4
load:0x40078000,len:10864
load:0x40080400,len:6432
entry 0x400806b8

aber danach passiert nichts mehr. Habs mehrfach neu hochgeladen und auch öfter resetet.

Antwort:
Hast du das Debugging aktiviert?
Funktioniert ein Beispielsketch aus der IDE?

Ein Tipp noch: C++ ist Case Sensitive


Gruß Fips
Hans ✪ ✪ ✪ 01.05.2020
Servus,
ich nochmal
Hab es nochmal mit dem neuen Servermodular probiert und nun kommt der Fehler DEBUG_P was not declared in this scope :/

Antwort:
Ich habe soeben nochmal alles ohne Fehlermeldung kompilieren können.
Vermutlich lädt dein Browser die Seiten aus dem Cache.
Oben links steht ein Datum auf jeder Webseite, das sollte aus dem Aktuellen Jahr sein und seid heute ist ein Download Button in jedem Codefenster zu sehen.

Gruß Fips
Stefan ✪ ✪ ✪ 28.04.2020
Hallo Fips,

nächstes Anfängerproblem:

Die Datei style32.css und favicon.ico kann ich nicht so runterladen, dass diese als Upload angenommen werden. Über den Link kann ich nur eine HTML-Datei speichern und wenn ich den Inhalt einfach in eine leere Textdatei kopiere und diese umbenenne, bleibt der "Upload"-Button grau.

Sorry, dass ich schon wieder nerve...sobald das "Grundgerüst" funktioniert, gelobe ich Besserung

Viele Grüße,
Stefan

Antwort:
Bei der style.css gibt es doch auch oben rechts den "Copy" Button.
Das Favicon kannst du mit Chrome oder Edge downloaden, nur der Firefox ignoriert das download Attribut im Quelltext.

Sollte es nicht klappen melde dich bitte über das Kontaktformular.

Gruß Fips
Stefan ✪ ✪ ✪ 28.04.2020
Hallo Fips,

vielen Dank, ich habe mich von dem Text oben im Kommentarfeld des Login-Managers verwirren lassen "// Die Funktion "Connect();" muss im Setup eingebunden werden."

Hat jetzt einwandfrei kompiliert, herzlichen Dank für die schnelle Hilfe!

Viele Grüße,
Stefan

Antwort:
Ich habe die Funktion im Login-Manager absichtlich auch "Connect();" benannt, so das auf keinen Fall beide Tabs in einem Sketch eingebunden werden können.
Wenn das eher verwirrt als erklärt werde ich das Konzept nochmal überdenken.

Gruß Fips
Stefan ✪ ✪ ✪ 28.04.2020
Hallo Fips,

vielen Dank! Jetzt hakts beim Kompilieren im "Loginmanager Tab":
"conflicting declaration "char ssid [33]"

Ich habe folgende Tabs: Webserver, Admin, Connect, Login und Spiffs.

Antwort:
Du kannst nur den "Loginmanager Tab" oder den "Connect Tab" verwenden.

Gruß Fips
Stefan ✪ ✪ ✪ 27.04.2020
Hallo und vielen Dank für die tollen Beispiele!

Ich bleibe leider gerade beim Kompilieren des Webserver-Tabs und ein paar weiteren hängen, bei mir kommen da Compilerfehler:
"DEBUG_F was not declared in this scope"
"DEBUG_P was not declared in this scope"

An was kann das denn liegen?

Vielen Dank für Eure Hilfe!
LG
Stefan

Antwort:
Mein Fehler, hatte eine alte Version vom Esp32 WebServer Tab auf den Webspace hochgeladen.

Gruß Fips
Kommentar eintragen

*