Aber genau hier kommt der großartige Vorteil der Library ins Spiel. Ihr könnt alles umsetzen, was ich in der Arduino IDE eben umsetzen könnt. 
Dann wäre es noch einfacherer gewesen.
Werkzeuge -> ESP8266 Sketch Data Upload
Bildschirmfoto 2021-05-21 um 22.30.38.png
Note: Der Upload funktioniert nur, wenn der serielle Monitor geschlossen ist. :heh:
Der Uploader sollte bei neueren Version der Arduino IDE schon standardmäßig vorhanden sein, ansonsten muss die Erweiterung manuell installiert werden.
Der ProgrammcodeWLAN-Daten und Hostname bearbeiten:
// WLAN-Zugangsdaten const char* ssid = "SSID"; const char* password = "PSK"; // Hostname des ESPs -> http://spiffinger.local/ const char* espHostname = "spiffinger";Sketch hochladen:
// // Einfacher Webserver der Dateien aus dem SPIFFS (Filesystem) ausliefert // CC by cooper @ makesmart.net // mehr Infos unter: https://my.makesmart.net/topic/206/ // void setupServerRoutes(); void setupFilePaths(); // WLAN #include <ESP8266WiFi.h> #include <ESP8266mDNS.h> // Webserver #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> // Filesystem #include <FS.h> // Standard HTTP-Port 80 AsyncWebServer server(80); // WLAN-Zugangsdaten const char* ssid = "SSID"; const char* password = "PSK"; // Hostname des ESPs -> http://spiffinger.local/ const char* espHostname = "spiffinger"; // Was passiert, wenn eine Seite nicht gefunden werden kann void notFound(AsyncWebServerRequest *request) { request->send(404, "text/html", "<center><h1>404 error - Seite nicht gefunden</h1></center>"); } void setup() { delay(500); Serial.begin(115200); Serial.println(); delay(500); // Dateisystem initialisieren if(SPIFFS.begin()){ Serial.println("Dateisystem: initialisiert"); }else{ Serial.println("Dateisystem: Fehler beim initialisieren"); } WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); if (WiFi.waitForConnectResult() != WL_CONNECTED) { Serial.println("WLAN Verbindung fehlgeschlagen"); return; } Serial.print("Verbunden! IP-Adresse: "); Serial.println(WiFi.localIP()); // Starten des mDNS-Servers if (!MDNS.begin(espHostname)) { Serial.println("Fehler beim Staren des mDNS-Servers!"); } // Server Routen werden in einer eigenen Funktion definiert setupServerRoutes(); // Datei Routen werden in einer eigenen Funktion definiert setupFilePaths(); server.begin(); } void loop() { MDNS.update(); } void setupServerRoutes(){ // Als Document-Root wird der Ordner "data" // Alle Pfade müssen relativ vom Ordner "data" definiert werden // Datei index.html wird ausgeliefert server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html"); }); server.onNotFound(notFound); } void setupFilePaths(){ // In der index.html Datei wird eine .js und eine .css Datei verlinkt // diese können ohne die folgenden Zeilen nicht gefunden werden // Der erste Pfad bezieht sich auf die .html-Datei // dort ist als Pfad zur CSS-Datei "assets/css/style.css" hinterlegt server.on("/assets/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request){ // also soll auch die Datei aus dem SPIFFS dementsprechend ausgeliefert werden request->send(SPIFFS, "/assets/css/style.css", "text/css"); }); server.on("/assets/js/script.js", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/assets/js/script.js", "text/javascript"); }); // Gleiches kann man auch mit Bildern anderen Dateien machen } Webserver mit HTML-Dateien feiernAusgabe im seriellen Monitor beachten:
22:21:26.396 -> Dateisystem: initialisiert 22:21:27.490 -> Verbunden! IP-Adresse: 192.168.178.89Webseite öffnen und freuen, dass die HTML-Datei aus dem Dateisystem angezeigt wird.
Bildschirmfoto 2021-05-21 um 22.28.09.png
Die HTML-, CSS- und Javascript-Dateien können jetzt mit einem beliebigem Editor bearbeitet und im Browser gedebugged / designed und anschließend wieder mit Punkt 4 hochgeladen werden. Der Sketch muss dafür nicht immer wieder neu hochgeladen werden. 👍 Freuen dass jetzt auch echte HTML-Dateien mit CSS und Javascript über den Webserver auf dem ESP angezeigt werden können. :programmingparrot:
Wird noch ausgearbeitet und dient aktuell als Entwurf :heh:
