Vorbereitungen
ESPAsyncWebserver installieren
makesmart HTML-Template herunterladen
Die Dateien entpacken und in einen Order names data packen. Sieht dann ungefähr so aus:
/
├── data
│ ├── assets
│ │ ├── css
│ │ │ └── style.css
│ │ ├── img
│ │ └── js
│ │ └── script.js
│ └── index.html
└── webserver_filesystem.ino
Den Order Data via Arduino IDE hochladen
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 Programmcode
WLAN-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 feiern
Ausgabe im seriellen Monitor beachten:
22:21:26.396 -> Dateisystem: initialisiert
22:21:27.490 -> Verbunden! IP-Adresse: 192.168.178.89
Webseite ö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:
