2020-04-02

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.

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 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 LED Dimmer Tab

LED mittels PWM in ihrer Helligkeit über Webinterface steuern.

Sketch LED Dimmer Tab

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

slider.html

Esp8266 Nodemcu Slider

Esp8266 Wemos D1 Slider

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

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 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 bis Core Version 2.5.2

Sketch Spiffs Datei Manager ab Core Version 2.6.0

Sketch Datei Manager sortiert Alphabetisch ab Core Version 2.6.0

Sketch Datei Manager sortiert Dateigröße ab Core Version 2.6.0

spiffs.html
Standart Version

spiffs.html
Inklusive Sicherheitsabfrage beim Datei löschen.

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 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 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 bis Core Version 2.5.2

Sketch IPv4 Admin Tab ab Core Version 2.6.0

IPv4 admin.html

Sketch IPv6 Admin Tab ab Core Version 2.6.0

IPv6 admin.html

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

style.css

Download Esp8266 Admin Dateien

Esp8266 Admin Webinterface

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

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

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.

Sketch Zeitschaltuhr Tab

Die Html Datei muss im Spiffs des Esp gespeichert werden.

zeitschaltuhr.html

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.

Sketch Sonnen Auf/Untergang Tab

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

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

Sketch TX23 Tab

Die Html Datei muss im Spiffs des Esp8266 gespeichert werden.

wind.html

Esp8266 TX23 Webinterface

Zum umschalten der Anzeige einfach in die Windrose klicken.

Esp8266 TX23 Webinterface

Esp8266 TX23 Webinterface

49 Kommentare - Kommentar eintragen
Uwe S. ✪ ✪ ✪  ❘ 13.03.2019
Hallo Fips

Hab http://192.168.178.26/format aufgerufen, es kommt leider keine Meldung im serial Monitor. korrekt?
Danach wieder der Helfer, hochladen von Spiffs.html und style.css.
Aber leider ohne jeden Erfolg, es kommt immer nur der Helfer.

Sorry für die Probleme

Gruß Uwe

Antwort:
Ich vermute, das du in der IDE unter Werkzeuge -> FlashSize:
eine Option mit (no Spiffs) gewählt hast.

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

Ich habe gerade endeckt, dass es in der Arduini IDE eine Einstellung unter Tools gibt "No SPIFFS" bzw SPIFF mit 1, 2, oder M. Die ganze Zeit stand die Einstellung auf NO SPIFFS. Nun habe ich die Einstellung variiert. Bei alles Einstellungen mit SPIFFS (egal welcher Größe) kommt nun nach dem Hochladen immer der Inhalt der spiffs.html aber nicht die Spiffs Seite.

Gruß Uwe

Antwort:
Nach verstellen der Spiffs Größe sollte der Spiffs vormatiert werden, Dateien könnten beschädigt sein.

Du siehst den Quelltext der spiffs.html im Browser oder wie muss ich das verstehen.

Gruß Fips
Uwe S. ✪ ✪ ✪  ❘ 14.03.2019
Hallo Fips

So jetzt funktioniert alles prima, es waren eigentlich zwei Problempunkte:
1. Die Einstellung in der Arduino IDE, da muss auf jeden Fall die Option bei der Flash-Size mit SPIFFS gewählt werden.
2. Ich habe anscheinend eine falsche Datei als spiffs.html genutzt.

Nochmal Danke für die Hilfe

Gruß Uwe
Peter B ✪ ✪ ✪  ❘ 30.03.2019
Hallo

Bei mir kommt bei Eingabe in den Browser 192.168.178.99/spiffs.html kein Helfer zum senden von "spiffs.html" und die "style.css" !


In Arduino IDE --> Serieller Monitor hab ich:

Verbunden mit: FB 7490

Gib diese URL in deinem Browser ein: 192.168.178.99/spiffs.html

Relais1 aus
Relais2 aus

Also die Verbindung ist OK.

Benutze Chrome Browser! Hilfe was mache ich falsch?

Danke

Antwort:
Formatiere bitte mal den Spiffs.
Gib dazu "deineIP/format" im Browser ein.
Nach ungefähr 20 Sekunden "deineIP" eingeben.

Gruß Fips
Peter B ✪ ✪ ✪  ❘ 01.04.2019
Danke

So jetzt funktioniert die Wochenzeitschaltuhr8266!!

Es lag an dem schlechtem Wlan im Keller! (wider was gelernt!)
Als ich den Nodemcu im EG ausprobiert habe ging alles von alleine! Ich konnte den Helfe sehen und danach die Dateien nacheinander Hochladen!

Was bei der Wochenuhr nicht finktioniert ist der ON/OFF links neben der Uhrzeiteigabe , es bleibt immer auf OFF und die Zahlen von der Uhr sind nicht türkis sonder grau.

Beim ZeitschaltuhrDual8266.ino geht das mit ON/OFF.

Woran kann es liegen?

Danke

Anwort: Hast du das ganze Archiv runtergeladen oder es einzeln von der Webseite kopiert?


Michael ✪ ✪ ✪  ❘ 05.04.2019
Hallo,

bin gerade mit grosser begeisterung am testen deiner Sketche,


Stehe aber im moment bei der Zeitschaltuhr an.
Bekomme immer den fehler beim üerprüfen des Sketch:



Arduino: 1.8.8 (Windows 10), Board: "NodeMCU 0.9 (ESP-12 Module), 80 MHz, Flash, Disabled, 4M (2M SPIFFS), v2 Lower Memory, Disabled, None, Only Sketch, 115200"

C:\Users\Michael\Documents\Arduino\sketch_apr05a\setupSchaltUhr.ino: In lambda function:

setupSchaltUhr:92:43: error: expected primary-expression before ')' token

strftime (buf, sizeof(buf), "%T ", &tm);

^

C:\Users\Michael\Documents\Arduino\sketch_apr05a\setupSchaltUhr.ino: In function 'void dualSchaltuhr()':

setupSchaltUhr:113:33: error: 'aktiv' was not declared in this scope

static uint8_t lastState[] = {aktiv, aktiv};

^

setupSchaltUhr:115:9: error: expected primary-expression before '.' token

if (tm.tm_min != lastmin) {

^

setupSchaltUhr:116:17: error: expected primary-expression before '.' token

lastmin = tm.tm_min;

^

setupSchaltUhr:118:47: error: expected primary-expression before '.' token

snprintf(buf, sizeof(buf), "%.2d:%.2d", tm.tm_hour, tm.tm_min);

^

setupSchaltUhr:118:59: error: expected primary-expression before '.' token

snprintf(buf, sizeof(buf), "%.2d:%.2d", tm.tm_hour, tm.tm_min);

^

exit status 1
expected primary-expression before ')' token

This report would have more information with
"Show verbose output during compilation"
option enabled in File -> Preferences.


Teste das ganze mit einem:
NodeMCU Lua Amica Module V2 ESP8266 ESP-12E WiFi WiFi

Vielen dank das du hier so eine tolle arbeit leistest und somit auch neulinge wie ich was zum laufen bekommen.

Antwort: Anhand der Fehlermeldung vermute ich das der Lokalzeit Tab nicht eingebunden wurde.
Michael ✪ ✪ ✪  ❘ 06.04.2019
Hallo,

danke für deine schnelle Antwort.

Habe aber den Sketch mit "Esp8266 NTP Lokalzeit Tab" am laufen
und auch eine Korekte zeitangabe auf der Seite.
Habe ca. die Helfte deiner Sketches getestet, alle mit erfolg.

Aber ich bekomme die 2 Zeitschalt Sketches einfach nicht zum laufen. "Esp8266 Zeitschaltuhr Tab" und "Esp8266 Zeitschaltuhr Dual Tab".

Der fehler bezieht sich immer, so wie ich das sehe auf:


tm.tm_hour; und tm.tm_hour; und tm.tm_sec;
^ ^ ^

exit status 1
expected primary-expression before '.' token

Das wäre der log von dem "Esp8266 Zeitschaltuhr Tab"


Der erste Post war der Log vom "Esp8266 Zeitschaltuhr Dual Tab"

Es sind leider beim ersten Post die zeichen etwas verschoben.
Sorry für die umstände

Antwort: Der Lokalzeit Tab muss in deinem Sketch vor dem Zeitschaltuhr Tab stehen oder du verschiebst das includieren der "time.h" und deklarieren der "struct tm" vom Lokalzeit Tab in den Webserver Tab.

Gruß Fips
Michael ✪ ✪ ✪  ❘ 06.04.2019
Danke Fips,
jetzt gehts
Michael ✪ ✪ ✪  ❘ 07.04.2019
Hallo nochmal,

Bin jetzt am Pushbullet testen,
Habe meinen Token eingetragen,
bekomme aber im Serial Monitor sofort folgende Meldung wenn ich eine meldung senden will:

"Pushbullet Verbindung fehlgeschlagen !"

Antwort:
Ich habe den Pushbullet Tab gerade überprüft. Mit Arduino Core Version 2.4.2 kommt die Push Nachricht auf dem Handy an!

Gruß Fips


Jürgen ✪ ✪ ✪  ❘ 07.04.2019
Hallo,
ich hatte bisher nur Erfahrungen mit Atmel Studio, habe vor ein paar Wochen deine Seite gefunden und mit dem ESP8266 begonnen. Ich habe schon viel gelernt aus deinen Sketches. Die Übergabe der Daten an den Webserver ist allerdings für mich nicht verständlich. Gibt es eine Doku zur Verwendung von fetch mit dem ESP?
Vielen Dank, Jürgen

Antwort:
Fetch ist eine allgemeine Webtechnologie wie Html oder Ajax die im Client(Browser) ausgeführt wird, das hat mit dem Esp.. nichts zu tun. Einfach mal nach "fetch API" suchen.
Tipp: https://davidwalsh.name/fetch

Gruß Fips
Kommentar eintragen

 

*

 

Zurück nach oben Kommentar