2019-02-25

Esp8266 Webserver Arduino Tab

Alle Tabs sind für Arduino Core Version 2.4.2 optimiert und geprüft.

Wichtig!
Der Haupttab (Esp8266 WebServer) und der Ordner (mit allen Tabs) müssen unbedingt den selben Namen haben.
Als Haupttab bezeichne ich den Tab der "setup()" und "loop()" enthält.

Esp8266 WebServer Tab

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

Sketch WebServer Tab

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

Esp8266 Connect Tab

Ist natürlich notwendig um die Verbindung zum Router aufzubauen. Der Verbindungsaufbau wird durch die OnBoard Led des Nodemcu oder Wemos D1 angezeigt.

Sketch Connect Tab

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

Esp8266 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 ESP gefolgt von "/led" ein. zB.: "http://192.168.179.44/led"

Sketch EspBoardLed Tab

Esp8266 Nodemcu Led schalten

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

Esp8266 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

Esp8266 Nodemcu Led toggle

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

Esp8266 DS18B20 Tab

Die Temperatur wird zur Anzeige auf der Webseite jede Sekunde aktuallisiert.
Der Messwert wird vom Client per Fetch.Api vom Server angefordert.

Sketch Ds18B20 Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

ds18b20.html

Nodemcu Webseite DS18B20

Sollte der Ds18b20 Sensor nicht gefunden werden, wird Fehler angezeigt.

Esp8266 Webseite DS18B20

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

Esp8266 DS18B20 Liste Tab

Beliebig Anzahl Sensoren werden angezeigt. Zuerst die Adressen und Namen deiner Sensoren im Sketch eintragen.

Adressen deiner Sensoren scannen

Die Temperatur wird zur Anzeige auf der Webseite jede zweite Sekunde aktuallisiert.

Sketch Ds18B20 Liste Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

ds18b20list.html

Wemos D1 Mini Webinterface DS18B20

Sollte die Anzahl der Ds18b20 Sensoren nicht mit der der Adressen übereinstimmen, wird Fehler angezeigt.

Esp8266 Webseite DS18B20

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

Esp8266 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

Die Webseite für zwei Esp8266 mit BME280

bme280InOut.html

Webseite BME280

Sollte der Bme280 Sensor nicht gefunden werden, wird Fehler angezeigt.

Webseite BME280

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

Esp8266 mit zwei BME280 Tab

Zwei BME280 mit der selben I2C Adresse lassen sich, dank "Pin mapping", mit dem Esp8266 auslesen.
Beide Sensoren werden jede Sekunde nacheinander abgefragt. Entgegen allem was ich bis jetzt über den I2C Bus gelesen habe, hängt der Aussensensor erfolgreich an einem 5 Meter langen Anschlußkabel.

Sketch mit zwei Bme280 Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

duobme280.html

Webinterface BME280

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

Esp8266 BH1750 Tab

Beleuchtungsstärke in LUX

Installiere die Library für den BH1750 Tab

Sketch BH1750 Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

bh1750.html

Esp8266 BH1750 Webinterface

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

Esp8266 Dual Relais Tab

2-Kanal Relais schalten ohne die Webseite zu erneuern. Dazu brauchst du kein JQuery oder Ajax.
Der Tab Dual Relais ist für LOW und HIGH aktive Relais, Solid State Relais oder Mosfet geeignet. Dies muss vor dem Hochladen einmalig im Tab eingestellt werden. Der Schaltzustand der Relais wird beim öffnen der Webseite eingelesen. Der Buttontext und die Kontrolleuchten werden bei jedem Schalten aktualisiert.

Sketch DualRelais Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

dualrelais.html

Nodemcu Relay Webinterface

Esp8266 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 Esp8266 die spiffs.html über die Adresszeile deines Browsers auf. Beispielsweise so "http://192.168.179.44/spiffs.html"

Sketch Spiffs Datei Manager

spiffs.html

style.css

Download Esp8266 Spiffs Dateien

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

Wemos D1 mini Pro Dateimanager.

Hast du die "spiffs.html" erfolgreich in den Speicher deines Esp8266 geladen siehst du die Esp8266 Datei Verwaltung.

Nodemcu Dateimanager.

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

Sonoff Switch Dateiverwaltung.

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

Sonoff Dual Dateiverwaltung.

Es ist nicht möglich Dateien hochzuladen, die größer sind als der noch verfügbare Speicher. Eine gute Erklärung für die notwendige Begrenzung findest du auf Ullis Roboter Seite.

Esp8266 Dateiverwaltung.

Getestet von 1 MB bis 16 MB Flash. Getestet mit Nodmcu, Wemos D1 Mini Pro, Sonoff Switch, Sonoff Dual

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

Esp8266 Mail Tab

E-Mail versenden via smtp2go.com

Dazu brauchst du zunächst einen Smtp2Go Free Account.

Esp8266 Esp32 SMTP2GO.

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

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

Esp8266 Udp Sender Tab

Sendet Nachrichten per Udp

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

Sketch Send Udp Tab

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

Esp8266 Login Manager Tab

Mit dem Login Manager für deine ESP8266 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 Esp8266 gespeichert.

Sketch Login Manager Tab

Esp8266 Login Manager Webinterface

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

Esp8266 Http Client Tab

Mit dem Http Client kannst du Daten von einen anderen Esp8266 Webserver holen.

Sketch Http Client Tab

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

Esp8266 Pushbullet Tab

Push Nachrichten vom Esp8266 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 Pushbullet

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

Esp8266 Sonoff Dual Tab

Das Sonoff Dual mit zwei integrierten Relais benutze ich zum schalten meiner Aussenbeleuchtung.
Mit integrierten Betriebsstundenzähler seperat für jeden LED Fluter.

Sonoff flashen

Arduino IDE unter Werkzeuge einstellen.

Die erste Programmierung des Sonoff Dual erfolgt mittels eines USB to TTL Serial Adapter, der für 3.3V geeignet ist. Danach über Arduino OTA.

Sketch Sonoff Dual Tab

Sonoff Dual Connect Tab

Die Html Datei muss im Spiffs des Sonoff gespeichert werden.

index.html

Sonoff Dual Webinterface

Esp8266 Admin Webinterface

Füge die "admin.ino", vorzugsweise als Tab, zu deinem Webserver Sketch hinzu und lade anschliesend mit Hilfe der Esp8266 Dateiverwaltung die admin.html in den Spiffs.

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

Die "Admin.ino" funktioniert jetzt auch mit Linux. Danke an Gerhard für die freundliche Unterstüzung.

Sketch Admin Tab

admin.html

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

style.css

Download Esp8266 Admin Dateien

Esp8266 Admin Webinterface

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

Esp8266 DHT22 Tab

Temperatur Luftfeuchte Taupunkt Hitzeindex

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

Funktioniert erst ab Arduino Core Version 2.4.0 aufwärts.

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

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

Esp8266 NTP Lokalzeit Tab

Inclusive automatische Umstellung Sommerzeit - Normalzeit
Aller 24 Stunden wird die Zeit mit dem NTP Server syncronisiert.

Sketch Lokalzeit Tab

zeit.html

Webseite Uhrzeit

zeitdatum.html

Webseite Uhrzeit

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

Esp8266 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. Es lassen sich bis zu 8 Ein-/Aus-Programme pro Gerät einstellen. Die Anzahl der Schaltprogramme muss im Sketch analog der Anzahl im Html Dokument eingestellt sein! 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.

zeitschaltuhrdual.html

Esp8266 Zeitschaltuhr Webinterface

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

Esp8266 Zeitschaltuhr Webseite

Ansicht Zeiteinstellung Mobil Device Android

Esp8266 Zeitschaltuhr Webinterface

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

Esp8266 Zeitschaltuhr Tab

Tageszeitschaltuhr

Der Lokalzeit Tab ist für die Zeitschaltuhr erforderlich.

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

Sketch Zeitschaltuhr Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

zeitschaltuhr.html

Der aktuelle Status "ON/OFF" wird angezeigt, und dient gleichzeitig als Button zum manuellen schalten.

Esp8266 Tageszeitschaltuhr Webinterface

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

Esp8266 Tageszeitschaltuhr Webinterface

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

Esp8266 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


24 Kommentare - Kommentar eintragen
Michael ✪ ✪ ✪ 28.10.2018
Hallo,

ich probiere mit begeisterung Deine Sketche aus ... dabei ist mir aufgefallen, wenn ich dem Router die IP Adresse vorgebe bekomme ich die aktuelle Zeit und Datum nicht mehr ... woran kann das liegen ?

mit begeistertem Gruß
Michael

Antwort:
Ich konnte das Problem reproduzieren aber leider noch nicht Prozesssicher beheben.
Die Webseite mit der Zeitausgabe sollte beim Sketchupload auf keinen Fall geöffnet sein

Edit:
Die Uhrzeit wird jetzt auch mit Statischer IP geholt. Ursache war das fehlende DNS Argument in der "WiFi.config();".
Gruß Fips
butzi ✪ ✪ ✪ 18.11.2018
Hallo Fips,

ich bin voll begeistert von deiner Seite und den Beispielen. Nur leider ist mein Problem noch nicht. Zur Erklärung hole ich ein wenig aus..
Also ich habe vor vielen Jahren eine Informationselektroniker Ausbildung und anschliesend den Techniker gemacht, seit dem arbeite ich im Netzwerkbereich. D. h. ich kenne mich mit Elektronik aus und habe auch etwas Ahnung vom Programieren (gelernt in Asembler, Pascal, C++,). Wovon ich jedoch keine Ahnung habe ist das ganze HTML Gedöns.
so unun zu meinem Problem. Letzendlich will ich über einen ESP2866 über Browser (und eventuell Android App) eine ganze Menge IO´s ansprechen (MCP23017 expander). Was ich aber nicht auf die Reihe bekomme ist eben das HTML. Einige HTML Grundlagen habe ich mir zwar schon zusammengesucht, komme aber nicht weiter.
Kannst du mir etwas empfehlen was ich als ´Grundlage nehmen kann und wo finde ich die ESP2866 HTML Referenz ?
Vielen Dank

Antwort:
Es gibt kein Html für den Esp, das Html ist für den Browser. Ein Esp liefert die Daten auf Anfrage zum Client, dabei ist ihm egal was da drin steht und ob es Valide ist.
Empfehlen kann ich dir www.selfhtml.org und www.mediaevent.de.

Gruß Fips
Roland ❘ 07.01.2019
Hallo Fips,

ich möchte Deinen Webserver ausprobieren. Ich habe eine dei Webserver.ino, Connect.ino und EppBoardLed.ino im Projekt. Wenn ich den Code überprüfen lasse, dann kommt immer die Fehlermeldung, er kann runtime() nicht finden in der Schleife beim Webserver. Ich finde die runtime() auch nicht im Quelltext, Was mache ich da falsch.
Viele Grüße
Roland

Antwort:
Danke für dein Feedback.
Die Funktion "runtime()" ist für den Admin Tab. Wenn du den nicht nutzen möchtest kannst du den Funktionsaufruf auskommentieren. Das sollte ich wohl echt noch besser beschreiben!

Gruß Fips
Roland ✪ ✪ ✪ 08.01.2019
Hallo Fips,
super danke für die schnelle Hilfe, soweit klar ich habe admin mit eingebunden. Wenn ich admin mit einbinde, binde ich auch spiffs.ino mit ein. Das klappt alles soweit. Dann komme ich beim Überprüfen vom Quellcode bis

fsUploadFile = SPIFFS.open("/" + server.urlDecode(upload.filename), "w");
dann kommt die Fehlermeldund within this context.
Da hänge ich jetzt.

Viele Grüße
Roland
Roland ✪ ✪ ✪ 08.01.2019
Hallo Fips,
ich habe mir die Fehlerausgabe nocheinmal genauer angesehen. Da kommen in meinen Bibliotheken Fehlermeldungen, muss ja bei mir irgendwo liegen. Ich werde die arduino ide noch aufspielen und dann wieder probieren. Bei allen anderen läuft es ja super auf den Rechnern.

Viele Grüße
Roland
Roland ✪ ✪ ✪ 09.01.2019
Hallo Fips,
läuft alles bestens, ich habe meine Arduinoumgebung neu aufgesetzt und es funktioniert bestens.

Viele Grüße
Roland

Antwort:
Schön das es jetzt funktioniert!
Uwe K ✪ ✪ ✪ 13.01.2019
Hallo Fips
tolle Seite, aber leider habe ich Probleme.... Ich hole mal etwas aus:
Also, ich habe die Teile Webserver, admin, connect und spiffs in einem Projekt. SSID und Passwort fürs WLAN sind ok.
Beim Start kommt
Sketchname: C:\Arduino\portable\sketchbook\WebServer\WebServer.ino
Build: Sun Jan 13 16:07:17 2019
SDK:2.2.1(cfd48f3)/Core:2.4.2/lwIP:2.0.3(STABLE-2_0_3_RELEASE/glue:arduino-2.4.1-13-g163bb82)/BearSSL:6d1cefc und nach ein paar Sekunden ist er im WLAN.
Wenn ich dann http://192.168.0.38/spiffs.html aufrufe kommt auch was , ich kann dann die HTML und CSS hochladen, dann sieht es auch schön(er) aus. So weit ok.
Aber ich sehe keine Dateien in Datei Manager und bei der ADMIN-Page kommen keine Infos,
Runtime ESP:0
WiFi RSSI: dbm
ADC/VCC:0
Sketch Name:0
Sketch Build:0 … usw.

Hast du da eine Idee ? Ich nicht …..

Viele Grüße Uwe
Uwe Köhl ✪ ✪ ✪ 13.01.2019
Hallo nochmals,
jetzt ist mir nochmals was aufgefallen:
im Sketch Esp8266 Connect Modular(Tab) mit optischer Anzeige gibt es ein void Connect().

auch im Sketch Esp8266 Login Manager Modular(Tab) wird
void Connect() definiert. Das geht schief....

Aber ich brauche ja beide wenn ich
- Login-Daten manuell eingeben will und
- ins WLAN connecten möchte.

Irgendwas verstehe ich da wohl nicht richtig.

Gruß Uwe

Antwort:
Es ist Absicht das in beiden Tabs die Funktion void Connect() heißt. Du kannst im Sketch nur einen von beiden nutzen. Was sollte es für einen Sinn ergeben die Zugangsdaten in den Sketch zu schreiben und Zusätzlich den Login Manager nutzen zu wollen?

Gruß Fips
Uwe S. ✪ ✪ ✪ 12.03.2019
Hallo

Hab den Webserver, Admin, Connect und Spiffs als TAB, compilieren und Laden ok
serial Monitor sagt connected mit dem WLAN.
Aufruf der per DHCP erhaltenen IP bringt die Spiffs-Hilfseite. Upload von Spiffs.html und style.css lauf seriam Monitor ok. Aber nun geht es nicht weiter, jeder Aufruf bringt nur wieder die Spiffs-Uploadseite.

Eine Idee?

Danke Uwe

Antwort:
Bekommst du den Helfer zum hochladen oder die richtige Dateiverwaltung zu sehen?
Das Problem taucht meist auf wenn man den Spiffs vorher mit einer anderen Größe (Einstellung beim hochladen in der Arduino Ide) genutzt hat. Abhilfe schafft in dem Fall das neu formatieren des Spiffs.

Gruß Fips
Uwe S. ✪ ✪ ✪ 13.03.2019
Hallo Fips

Danke für die Antwort, aber nein bekomme nur immer den Helfer, nie der Spiffs. Das Hochladen der beiden Dateien wird im Monitor ohne Fehler gemeldet, aber dann immer nur den Helfer.

Gruß Uwe

Antwort:
Formatieren des Spiffs sollte in dem Fall abhilfe schaffen. Lade den Sketch mit dem Spiffs Tab auf den Esp gib die Url des Esp gefolgt von "/format" in deinen Browser ein.
Beispiel: http://192.168.178.26/format
Der Vorgang dauert einige Sekunden!
Anschließend wird dir wieder der Helfer zum hochladen der Dateien angezeigt.

Gruß Fips
Kommentar eintragen

*