2020-05-23

Esp8266 Webserver Arduino Tab

Kein Support für Arduino Core Version vor 2.4.2.

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 Access Point Tab

Den Esp8266 autark betreiben.

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

OnBoardLed Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Esp8266 Nodemcu Led toggle

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

Esp8266 Button Tab

Auf der Webseite werden automatisch die Button für die Pins die du im Sketch unter "buttonPin[]" einträgst angezeigt.

Button Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Esp8266 Nodemcu Button

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

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.

Ds18B20 Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

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.

Ds18B20 Liste Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

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

Bme280 Tab und Webseite

Es ist auch Möglich zwei Esp.. mit Bme280 Sensor auf einer Webseite darstellen.

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.

Duo Bme280 Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Webinterface BME280

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

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.

Dual Relais Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Nodemcu Relay Webinterface

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

Esp8266 LED Dimmer Tab

LED mittels PWM in ihrer Helligkeit über Webinterface steuern.

LED Dimmer Tab und Webseite

Die Webseite inklusive animierte SVG-Grafik zur Anzeige der Helligkeit.

Esp8266 Nodemcu Slider

Esp8266 Wemos D1 Slider

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"

Spiffs Datei Manager ab Core Version 2.4.2

Datei Manager alphabetisch sortiert ab Core Version 2.6.0

Datei Manager nach Größe sortiert ab Core Version 2.6.0

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.

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

Dht22 Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Webseite DHT22

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

Esp8266 BH1750 Tab

Beleuchtungsstärke in LUX

Installiere die Library für den BH1750 Tab

BH1750 Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

Esp8266 BH1750 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.

Admin Tab und Webseite bis Core Version 2.5.2

Admin IPv4 Tab und Webseite ab Core Version 2.6.0

Admin IPv6 Tab und Webseite ab Core Version 2.6.0

Grafik Webseite Admin

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

Esp8266 NTP Lokalzeit Tab

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

Lokalzeit Tab und Webseite

Webseite Uhrzeit

Webseite Uhrzeit

Webseite Uhrzeit und Datum

Webseite Datum

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

Esp8266 Zeitschaltuhr Dual Tab

Zeitschaltuhr mit NTP Zeitsynchronisation

Die Lokalzeit.ino 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.

Zeitschaltuhr Tab und Webseite

Die Html Datei muss im Spiffs des Esp gespeichert werden.

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

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

Esp8266 Zeitschaltuhr Webinterface

Es lassen sich alle Schaltzeiten zusammen aktivieren/deaktivieren.

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

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

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.

Sonnen Auf/Untergang Tab und Webseite

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

Esp8266 TX23 Tab

Windgeschwindigkeit- und Richtung mit Fifo Puffer für die Anzeige der maximalen und durchschnittlichen Geschwindigkeit der Stunde, des Tages und der Woche.
Esp8266 TX23 Windsensor

Installiere die Library für den TX23 Tab

TX23 Tab und Webseite

Die Html Datei muss im Spiffs des Esp8266 gespeichert werden.

Esp8266 TX23 Webinterface

Zum umschalten der Anzeige einfach in die Windrose klicken.

Esp8266 TX23 Webinterface

Esp8266 TX23 Webinterface

62 Kommentare - Kommentar eintragen
Ralf ✪ ✪ ✪ 24.05.2020
Hallo Fips,
ich habe zu voreilig geschrieben. Mit den jeweils neuesten Versionen funktioniert alles.

Gruß Ralf

Antwort:
Kein Problem!
Ich bin nicht frei von Fehlern, diesmal habe ich Glück gehabt.
Manchmal steht einen auch der Browsercache im Weg.

Gruß Fips
Ralf ✪ ✪ ✪ 24.05.2020
Hallo Fips,
ich melde mich nochmal, weil ich mehrere Sketche aus deinen Beispielen auf einem ESP8266 zusammengebracht habe, die vorher auf getrennten ESPs waren.
Dadurch wird der Zugriff komfortabler. Dabei ist mir aufgefallen, dass die aktuelle style.css zwar mit der ds18b20list.html korrekt anzeigt, aber die IPv4 admin.html wird nur mit der älteren Version von style.css richtig dargestellt (dabei stehen die Spalten nicht korrekt untereinander).
Kann man eine style.css im Mix aus beiden Versionen erstellen?

Gruß Ralf

Antwort:
Eine von beiden scheint, bei dir, nicht aktuell zu sein.
Die aktuelle "admin.ino" ist vom 30.04.2020.

Gruß Fips

Lothar ✪ ✪ ✪ 07.05.2020
Hallo Fips, danke für die schnelle Antwort. Lesen erleichtert das Leben! Ich hatte D3 als Pin für den 2. BME nicht beachtet.

Lonzo

Antwort:
Klasse, das die Lösung so einfach ist!
Viel Spass damit.

Gruß Fips
Lonzo ✪ ✪ ✪ 03.05.2020
Hallo, eine großartige Seite! Macht riesig Spass mit den ESPs.
Mein Problem: habe die ino + html für duobme280 eingebaut, bekomme aber bei Außenklima immer jeweils "nan" angezeigt.
Was mache ich falsch? Beide BMEs sind OK, nach Wechsel in der 1er Version spielen sie beide.

Lonzo

Antwort:
Hast du beide Bme280 wie beschrieben angeschloßen?

// SCL an D1 = GPIO5 --> BME280 1&2
// SDA an D2 = GPIO4 --> BME280 1
// SDA an D3 = GPIO0 --> BME280 2
// 4k7 Ohm Widerstand von VCC auf D1
// 4k7 Ohm Widerstand von VCC auf D2
// 4k7 Ohm Widerstand von VCC auf D3

Gruß Fips
Sigi D ✪ ✪ ✪ 02.05.2020
Hallo Fips

ich teste gerade deinen Pushbullit INO
leider kommt im Lo dauernd ein Reboot wegen dem Watchdog

18:19:25.644 -> Exception (3):
18:19:25.644 -> epc1=0x4020730c epc2=0x00000000 epc3=0x00000000 excvaddr=0x40251a72 depc=0x00000000
18:19:25.682 ->
18:19:25.682 -> >>>stack>>>
18:19:25.682 ->
18:19:25.682 -> ctx: cont
18:19:25.682 -> sp: 3ffffc70 end: 3fffffc0 offset: 01a0

hab schon die verschiedensten IDE Versionen probiert
immer das gleiche

hab auch schön 3 Tabs
einer mit Setup ( connect() ) und Loop ( pushbullet("test") )
einer mit dem WLAN gedöns
einer mit deinem Pushbullit Daten ( incl API Key )

Antwort:
Ich hatte gleich "PROGMEM" im Verdacht. Hab's geändert.
Achte auf das Datum oben Links auf der Webseite, das dir dein Browser die Seite nicht aus dem Cache anzeigt.

"pushbullet("test")" hast du hoffentlich nicht ungebremst im loop(). So viele Nachrichten willst du nicht!

Gruß Fips
Peter S ✪ ✪ ✪ 28.04.2020
Ich nutze deinen Esp8266 Spiffs Datei Manager. Finde gut das alles Modular aufgebaut ist, so hat man es leichter. Gut gemacht. Danke dafür.

Ich würde gern die Dateien von einer SD-Karte lesen die angeschlossen ist mit einem SD-Karten Modul. Leider fehlen mir die Kenntnisse dazu. Hast du vielleicht Lust eine SD Version zu machen? Oder könntest du erklären wo Veränderungen gemacht werden müssen?

Danke.
mfg

Antwort:
Dabei kann ich nicht helfen, besitze kein SD-Karten Modul.
Wüsste auch nicht für was ich eines brauchen könnte.

Gruß Fips
Pascal ✪ ✪ ✪ 27.04.2020
Funktioniert alles bestens. Danke!

Ich würde gerne platformio nutzen. Damit bekomme ich aber Fehler. Weiß jemand was man in platformio ändern muss damit es funktioniert?

Antwort:
PlatformIO habe ich noch nie benutzt.
Anhand der Fehlermeldungen könnte man vielleicht einen Rat geben.

Gruß Fips

Stefan ❘ 26.04.2020
Ich bekomme immer in Amdon
exit status 1
invalid conversion from 'const char*' to 'char*' [-fpermissive]

X:\PoolTFT\WebServer\admin.ino: In function 'void handleonce()':

admin:77:71: error: invalid conversion from 'const char*' to 'char*' [-fpermissive]

char *pos = strrchr((__FILE__), strstr (__FILE__, "\\") ? '\\' : '/'); *pos = '\0';

Antwort:
Verwende den Tab für deine Esp Core Version.
Die CoreVersion wird dir beim Kompilieren in der IDE angezeigt.

Serial.println(ESP.getCoreVersion());
Zeigt sie dir im Seriellen Monitor an.

Gruß Fips
Ralf ✪ ✪ ✪ 14.04.2020
Hallo Fips,
danke für die modifizierte "ds18b20list.html". Die "°C" werden jetzt korrekt angezeigt. Jetzt suche ich noch nach der Stelle, weswegen die Sensornamen alle nebeneinander ohne Lücke stehen,gefolgt von den Temperaturwerten, ebenfalls ohne Lücke. Alles in einer breiten Zeile. Kann es sein, dass die Ursache innerhalb der "ds18b20list.html" liegt bei der Zusammenstellung/Aufbau des 'DOMContentLoaded' ?

Gruß Ralf

Antwort:
Mit der aktuellen ds18b20list.html vom 2020-04-14 und der style.css vom 2020-01-26 dürfte es keine Probleme mit der Darstellung geben.

Gruß Fips
Ralf ✪ ✪ ✪ 13.04.2020
Hallo Fips,
ich habe noch den Fehler gefunden, dass ich die ds18b20.html statt der ds18b20list.html hochgeladen hatte. Es kommt jetzt unter IP/ds18b20list.html schonmal ein breiter Balken, auf dem die Sensornamen ohne Lücke hintereinander stehen, gefolgt von den korrekten Temperaturen in einer Reihe. Die °C sind dabei als kleine Raute mit Fragezeichen darin dargestellt (Zeichensatz?).

Gruß Ralf

Antwort:
Mein Fehler!
Ich hatte die "style.css" geändert und dabei nicht beachtet das die "ds18b20list.html" angepasst werden muss.
Erledigt!

Für die Korrekte Darstellung müssen die "html" Dateien im Editor als UTF-8 ohne BOM gespeichert werden.
Diese Optionen findest du bei einfachen Editoren bei "Speichern unter...".

Gruß Fips
Kommentar eintragen

*