repository·master·Indexed 41 days ago
https://github.com/cotestatnt/esp-fs-webserverA library for ESP8266 and ESP32 providing a comprehensive web server environment. Key features include a built-in file system browser and editor at /edit, a WiFi configuration manager with a captive portal at /setup, WebSocket support for real-time two-way communication, and OTA updates. It supports both FSWebServer and AsyncFsWebServer implementations, allowing for dynamic webpage generation, telemetry dashboards using ECharts 5, and secure credential management with AES-256-CBC encryption.
The localRFID example implements a simple access control system using RFID tags and the Arduino_MFRC522v2 library.
Key Features:
The library provides several integrated services for ESP8266/ESP32 devices:
/setup page for scanning networks and connecting to WiFi. Supports up to 5 different SSIDs. Passwords are encrypted using AES-256-CBC (hardware-accelerated on ESP32)./edit for browsing, viewing, uploading, and deleting files and folders.data folder to the ESP filesystem./ maps to the filesystem root /. If a directory is requested, the server looks for a default file, which is index.htm.The CredentialManager is integrated into the FSWebServer library to provide transparent, encrypted WiFi credential management.
/setup web page provided by FSWebServer.NVS on ESP32 or Filesystem on ESP8266).FSWebServer calls startWiFi(), which triggers an RSSI-based selection process.The library uses a WiFiService class to manage scanning, connections, captive portals, mDNS, and watchdog timers.
Connection Logic:
startWiFi() loads credentials from the CredentialManager.http://<hostname>.local).Reconnection Experience:
When a user changes SSIDs via the /setup page, the browser enters a polling loop. It polls http://<hostname>.local/getStatus (falling back to the captive AP if necessary). The /getStatus endpoint provides:
This allows the UI to automatically detect when the device has reappeared on the new network and update the user without a manual refresh.
WiFi credentials (SSID, password, DHCP/static IP settings) are handled by an internal CredentialManager and are stored separately from the application config.json for security.
/setup web interface communicates directly with the WiFi APIs (/wifi/credentials, /connect, etc.). You generally do not need to manually read or write WiFi data in your sketch.To use ESP-FS-WebServer, you need to initialize a filesystem (like LittleFS), instantiate the FSWebServer class with a port, the filesystem reference, and a hostname, and then call startWiFi() and begin(). You must call server.run() in your loop() to handle incoming requests.
Note: startWiFi(timeout) will attempt to connect to saved credentials or start a captive portal if no credentials are available.
#include <FS.h>
#include <LittleFS.h>
#if defined(ESP8266)
#include <ESP8266WiFi.h>
#else
#include <WiFi.h>
#endif
#include "FSWebServer.h"
// Use LittleFS
fs::FS& filesystem = LittleFS;
FSWebServer server(80, filesystem, "esphost");
void setup() {
Serial.begin(115200);
// Initialize Filesystem
if (!filesystem.begin()) {
Serial.println("Error mounting file system.");
return;
}
// Start WiFi (or captive portal if no credentials)
server.startWiFi(10000);
// Add a handler for the root page
server.on("/", []() {
server.send(200, "text/html", "<h1>Hello from FSWebServer!</h1>");
});
// Start the server
server.begin();
Serial.println("HTTP server started.");
}
void loop() {
server.run();
}The dashboard utilizes ECharts 5 for data visualization. It implements real-time line charts with a time axis and formatted tooltips.
To customize the appearance, behavior, or data mapping of the charts, you must modify the chart configuration options located in the data/index.htm file within the example directory.
For detailed configuration of chart types, axes, and series, refer to the official ECharts documentation.
/edit endpoint to modify files, and retrieve filesystem information.To enable the ACE-based web file editor, call server.enableFsCodeEditor(). Once enabled, the following endpoints become available for managing files via the browser:
GET /edit: Access the editor pageGET /list?dir=/: View directory listingsPOST /edit: Upload filesPUT /edit: Create or rename filesDELETE /edit: Delete filesserver.enableFsCodeEditor();By default, the localRFID example uses web pages embedded in the firmware as compressed Gzip C arrays. To use custom web pages instead, follow these steps:
login and rfid files (without extensions) in the data/ folder of the example./setup webpage functionality to upload these files directly to the microcontroller's flash memory.#define USE_EMBEDDED_HTM false.#define USE_EMBEDDED_HTM falsestartWiFi(), manage the captive portal, access the /setup configuration page, and manage device configuration settings.