iot/spore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: serve static files, relay example

Browse Source
This commit is contained in:
0x1d
2025-09-16 12:12:27 +02:00
parent 0b63efece0
commit 2d85f560bb
11 changed files with 834 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
data/index.html → data/public/index.html
View File

305
data/public/relay.html Normal file
View File

@@ -0,0 +1,305 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relay Control - Spore</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
width: 90%;
}
h1 {
margin-bottom: 30px;
font-size: 2.2em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.relay-status {
margin-bottom: 30px;
}
.status-indicator {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
font-weight: bold;
transition: all 0.3s ease;
border: 4px solid rgba(255, 255, 255, 0.3);
}
.status-indicator.off {
background: rgba(255, 0, 0, 0.3);
color: #ff6b6b;
}
.status-indicator.on {
background: rgba(0, 255, 0, 0.3);
color: #51cf66;
box-shadow: 0 0 20px rgba(81, 207, 102, 0.5);
}
.status-text {
font-size: 1.5em;
margin-bottom: 10px;
}
.pin-info {
font-size: 0.9em;
opacity: 0.8;
}
.controls {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 25px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
min-width: 100px;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-primary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-success {
background: rgba(81, 207, 102, 0.8);
color: white;
border: 2px solid rgba(81, 207, 102, 1);
}
.btn-success:hover {
background: rgba(81, 207, 102, 1);
transform: translateY(-2px);
}
.btn-danger {
background: rgba(255, 107, 107, 0.8);
color: white;
border: 2px solid rgba(255, 107, 107, 1);
}
.btn-danger:hover {
background: rgba(255, 107, 107, 1);
transform: translateY(-2px);
}
.loading {
opacity: 0.6;
pointer-events: none;
}
.error {
color: #ff6b6b;
margin-top: 15px;
font-size: 0.9em;
}
.success {
color: #51cf66;
margin-top: 15px;
font-size: 0.9em;
}
.uptime {
margin-top: 20px;
font-size: 0.8em;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="container">
<h1>🔌 Relay Control</h1>
<div class="relay-status">
<div class="status-indicator off" id="statusIndicator">
OFF
</div>
<div class="status-text" id="statusText">Relay is OFF</div>
<div class="pin-info" id="pinInfo">Pin: Loading...</div>
</div>
<div class="controls">
<button class="btn btn-success" id="turnOnBtn" onclick="controlRelay('on')">
Turn ON
</button>
<button class="btn btn-danger" id="turnOffBtn" onclick="controlRelay('off')">
Turn OFF
</button>
<button class="btn btn-primary" id="toggleBtn" onclick="controlRelay('toggle')">
Toggle
</button>
</div>
<div id="message"></div>
<div class="uptime" id="uptime"></div>
</div>
<script>
let currentState = 'off';
let relayPin = '';
// Load initial relay status
async function loadRelayStatus() {
try {
const response = await fetch('/api/relay/status');
if (!response.ok) {
throw new Error('Failed to fetch relay status');
}
const data = await response.json();
currentState = data.state;
relayPin = data.pin;
updateUI();
updateUptime(data.uptime);
} catch (error) {
console.error('Error loading relay status:', error);
showMessage('Error loading relay status: ' + error.message, 'error');
}
}
// Control relay
async function controlRelay(action) {
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => btn.classList.add('loading'));
try {
const response = await fetch('/api/relay', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `state=${action}`
});
const data = await response.json();
if (data.success) {
currentState = data.state;
updateUI();
showMessage(`Relay turned ${data.state.toUpperCase()}`, 'success');
} else {
showMessage(data.message || 'Failed to control relay', 'error');
}
} catch (error) {
console.error('Error controlling relay:', error);
showMessage('Error controlling relay: ' + error.message, 'error');
} finally {
buttons.forEach(btn => btn.classList.remove('loading'));
}
}
// Update UI based on current state
function updateUI() {
const statusIndicator = document.getElementById('statusIndicator');
const statusText = document.getElementById('statusText');
const pinInfo = document.getElementById('pinInfo');
if (currentState === 'on') {
statusIndicator.className = 'status-indicator on';
statusIndicator.textContent = 'ON';
statusText.textContent = 'Relay is ON';
} else {
statusIndicator.className = 'status-indicator off';
statusIndicator.textContent = 'OFF';
statusText.textContent = 'Relay is OFF';
}
if (relayPin) {
pinInfo.textContent = `Pin: ${relayPin}`;
}
}
// Update uptime display
function updateUptime(uptime) {
const uptimeElement = document.getElementById('uptime');
if (uptime) {
const seconds = Math.floor(uptime / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
let uptimeText = `Uptime: ${seconds}s`;
if (hours > 0) {
uptimeText = `Uptime: ${hours}h ${minutes % 60}m ${seconds % 60}s`;
} else if (minutes > 0) {
uptimeText = `Uptime: ${minutes}m ${seconds % 60}s`;
}
uptimeElement.textContent = uptimeText;
}
}
// Show message to user
function showMessage(message, type) {
const messageElement = document.getElementById('message');
messageElement.textContent = message;
messageElement.className = type;
// Clear message after 3 seconds
setTimeout(() => {
messageElement.textContent = '';
messageElement.className = '';
}, 3000);
}
// Load status on page load
loadRelayStatus();
// Refresh status every 2 seconds
setInterval(loadRelayStatus, 2000);
</script>
</body>
</html>

165
examples/base/data/public/index.html Normal file
View File

@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spore</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.status-card {
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease;
}
.status-card:hover {
transform: translateY(-5px);
}
.status-value {
font-size: 2em;
font-weight: bold;
margin: 10px 0;
}
.api-section {
margin-top: 30px;
}
.api-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.api-link {
background: rgba(255, 255, 255, 0.2);
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.api-link:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.loading {
text-align: center;
font-style: italic;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="container">
<h1>🍄 Spore Node</h1>
<div class="status-grid">
<div class="status-card">
<h3>Node Status</h3>
<div class="status-value" id="nodeStatus">Loading...</div>
</div>
<div class="status-card">
<h3>Network</h3>
<div class="status-value" id="networkStatus">Loading...</div>
</div>
<div class="status-card">
<h3>Tasks</h3>
<div class="status-value" id="taskStatus">Loading...</div>
</div>
<div class="status-card">
<h3>Cluster</h3>
<div class="status-value" id="clusterStatus">Loading...</div>
</div>
</div>
<div class="api-section">
<h2>API Endpoints</h2>
<div class="api-links">
<a href="/api/node/status" class="api-link">Node Status</a>
<a href="/api/network/status" class="api-link">Network Status</a>
<a href="/api/tasks/status" class="api-link">Tasks Status</a>
<a href="/api/cluster/members" class="api-link">Cluster Members</a>
<a href="/api/node/endpoints" class="api-link">All Endpoints</a>
</div>
</div>
</div>
<script>
// Load initial data
async function loadStatus() {
try {
const [nodeResponse, networkResponse, taskResponse, clusterResponse] = await Promise.all([
fetch('/api/node/status').then(r => r.json()).catch(() => null),
fetch('/api/network/status').then(r => r.json()).catch(() => null),
fetch('/api/tasks/status').then(r => r.json()).catch(() => null),
fetch('/api/cluster/members').then(r => r.json()).catch(() => null)
]);
// Update node status
if (nodeResponse) {
document.getElementById('nodeStatus').textContent =
nodeResponse.uptime ? `${Math.floor(nodeResponse.uptime / 1000)}s` : 'Online';
}
// Update network status
if (networkResponse) {
document.getElementById('networkStatus').textContent =
networkResponse.connected ? 'Connected' : 'Disconnected';
}
// Update task status
if (taskResponse) {
const activeTasks = taskResponse.tasks ?
taskResponse.tasks.filter(t => t.status === 'running').length : 0;
document.getElementById('taskStatus').textContent = `${activeTasks} active`;
}
// Update cluster status
if (clusterResponse) {
const memberCount = clusterResponse.members ?
Object.keys(clusterResponse.members).length : 0;
document.getElementById('clusterStatus').textContent = `${memberCount} nodes`;
}
} catch (error) {
console.error('Error loading status:', error);
}
}
// Load status on page load
loadStatus();
// Refresh status every 5 seconds
setInterval(loadStatus, 5000);
</script>
</body>
</html>

26
examples/relay/README.md
View File

@@ -1,6 +1,13 @@
# Relay Service Example
A minimal example that demonstrates the Spore framework with a custom RelayService. The Spore framework automatically handles all core functionality (WiFi, clustering, API server, task management) while allowing easy registration of custom services.
A minimal example that demonstrates the Spore framework with a custom RelayService and web interface. The Spore framework automatically handles all core functionality (WiFi, clustering, API server, task management) while allowing easy registration of custom services.
## Features
- **API Control**: RESTful API endpoints for programmatic control
- **Web Interface**: Beautiful web UI for manual control at `http://<device-ip>/relay.html`
- **Real-time Status**: Live status updates and visual feedback
- **Toggle Functionality**: One-click toggle between ON/OFF states
- Default relay pin: `GPIO0` (ESP-01). Override with `-DRELAY_PIN=<pin>`.
- WiFi and API port are configured in `src/Config.cpp`.
@@ -25,7 +32,7 @@ RelayService* relayService = nullptr;
void setup() {
spore.setup();
relayService = new RelayService(spore.getTaskManager(), RELAY_PIN);
relayService = new RelayService(spore.getContext(), spore.getTaskManager(), RELAY_PIN);
spore.addService(relayService);
spore.begin();
@@ -42,6 +49,7 @@ The Spore framework automatically provides:
- REST API server with core endpoints
- Task scheduling and execution
- Node status monitoring
- Static file serving for web interfaces (core service)
## Build & Upload
@@ -61,6 +69,20 @@ pio device monitor -b 115200
Assume the device IP is 192.168.1.50 below (replace with your device's IP shown in serial output).
## Web Interface
The web interface is located in the `data/` folder and will be served by the core StaticFileService.
Access the web interface at: `http://192.168.1.50/relay.html`
The web interface provides:
- Visual status indicator (red for OFF, green for ON)
- Turn ON/OFF buttons
- Toggle button for quick switching
- Real-time status updates every 2 seconds
- Uptime display
- Error handling and user feedback
## Relay API
- Get relay status

305
examples/relay/data/public/index.html Normal file
View File

@@ -0,0 +1,305 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relay Control - Spore</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
width: 90%;
}
h1 {
margin-bottom: 30px;
font-size: 2.2em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.relay-status {
margin-bottom: 30px;
}
.status-indicator {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
font-weight: bold;
transition: all 0.3s ease;
border: 4px solid rgba(255, 255, 255, 0.3);
}
.status-indicator.off {
background: rgba(255, 0, 0, 0.3);
color: #ff6b6b;
}
.status-indicator.on {
background: rgba(0, 255, 0, 0.3);
color: #51cf66;
box-shadow: 0 0 20px rgba(81, 207, 102, 0.5);
}
.status-text {
font-size: 1.5em;
margin-bottom: 10px;
}
.pin-info {
font-size: 0.9em;
opacity: 0.8;
}
.controls {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 25px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
min-width: 100px;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-primary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-success {
background: rgba(81, 207, 102, 0.8);
color: white;
border: 2px solid rgba(81, 207, 102, 1);
}
.btn-success:hover {
background: rgba(81, 207, 102, 1);
transform: translateY(-2px);
}
.btn-danger {
background: rgba(255, 107, 107, 0.8);
color: white;
border: 2px solid rgba(255, 107, 107, 1);
}
.btn-danger:hover {
background: rgba(255, 107, 107, 1);
transform: translateY(-2px);
}
.loading {
opacity: 0.6;
pointer-events: none;
}
.error {
color: #ff6b6b;
margin-top: 15px;
font-size: 0.9em;
}
.success {
color: #51cf66;
margin-top: 15px;
font-size: 0.9em;
}
.uptime {
margin-top: 20px;
font-size: 0.8em;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="container">
<h1>🔌 Relay Control</h1>
<div class="relay-status">
<div class="status-indicator off" id="statusIndicator">
OFF
</div>
<div class="status-text" id="statusText">Relay is OFF</div>
<div class="pin-info" id="pinInfo">Pin: Loading...</div>
</div>
<div class="controls">
<button class="btn btn-success" id="turnOnBtn" onclick="controlRelay('on')">
Turn ON
</button>
<button class="btn btn-danger" id="turnOffBtn" onclick="controlRelay('off')">
Turn OFF
</button>
<button class="btn btn-primary" id="toggleBtn" onclick="controlRelay('toggle')">
Toggle
</button>
</div>
<div id="message"></div>
<div class="uptime" id="uptime"></div>
</div>
<script>
let currentState = 'off';
let relayPin = '';
// Load initial relay status
async function loadRelayStatus() {
try {
const response = await fetch('/api/relay/status');
if (!response.ok) {
throw new Error('Failed to fetch relay status');
}
const data = await response.json();
currentState = data.state;
relayPin = data.pin;
updateUI();
updateUptime(data.uptime);
} catch (error) {
console.error('Error loading relay status:', error);
showMessage('Error loading relay status: ' + error.message, 'error');
}
}
// Control relay
async function controlRelay(action) {
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => btn.classList.add('loading'));
try {
const response = await fetch('/api/relay', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `state=${action}`
});
const data = await response.json();
if (data.success) {
currentState = data.state;
updateUI();
showMessage(`Relay turned ${data.state.toUpperCase()}`, 'success');
} else {
showMessage(data.message || 'Failed to control relay', 'error');
}
} catch (error) {
console.error('Error controlling relay:', error);
showMessage('Error controlling relay: ' + error.message, 'error');
} finally {
buttons.forEach(btn => btn.classList.remove('loading'));
}
}
// Update UI based on current state
function updateUI() {
const statusIndicator = document.getElementById('statusIndicator');
const statusText = document.getElementById('statusText');
const pinInfo = document.getElementById('pinInfo');
if (currentState === 'on') {
statusIndicator.className = 'status-indicator on';
statusIndicator.textContent = 'ON';
statusText.textContent = 'Relay is ON';
} else {
statusIndicator.className = 'status-indicator off';
statusIndicator.textContent = 'OFF';
statusText.textContent = 'Relay is OFF';
}
if (relayPin) {
pinInfo.textContent = `Pin: ${relayPin}`;
}
}
// Update uptime display
function updateUptime(uptime) {
const uptimeElement = document.getElementById('uptime');
if (uptime) {
const seconds = Math.floor(uptime / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
let uptimeText = `Uptime: ${seconds}s`;
if (hours > 0) {
uptimeText = `Uptime: ${hours}h ${minutes % 60}m ${seconds % 60}s`;
} else if (minutes > 0) {
uptimeText = `Uptime: ${minutes}m ${seconds % 60}s`;
}
uptimeElement.textContent = uptimeText;
}
}
// Show message to user
function showMessage(message, type) {
const messageElement = document.getElementById('message');
messageElement.textContent = message;
messageElement.className = type;
// Clear message after 3 seconds
setTimeout(() => {
messageElement.textContent = '';
messageElement.className = '';
}, 3000);
}
// Load status on page load
loadRelayStatus();
// Refresh status every 2 seconds
setInterval(loadRelayStatus, 2000);
</script>
</body>
</html>

1
examples/relay/main.cpp
View File

@@ -30,6 +30,7 @@ void setup() {
spore.begin();
LOG_INFO(spore.getContext(), "Main", "Relay service registered and ready!");
LOG_INFO(spore.getContext(), "Main", "Web interface available at http://<node-ip>/relay.html");
}
void loop() {

3
include/spore/core/ApiServer.h
View File

@@ -29,6 +29,9 @@ public:
std::function<void(AsyncWebServerRequest*, const String&, size_t, uint8_t*, size_t, bool)> uploadHandler,
const std::vector<ParamSpec>& params);
// Static file serving
void serveStatic(const String& uri, fs::FS& fs, const String& path, const String& cache_header = "");
static const char* methodToStr(int method);
// Access to endpoints for endpoints endpoint

6
include/spore/services/StaticFileService.h
View File

@@ -15,10 +15,4 @@ private:
static const String name;
NodeContext& ctx;
ApiServer& apiServer;
void handleRootRequest(AsyncWebServerRequest* request);
void handleStaticFileRequest(AsyncWebServerRequest* request);
void handleNotFound(AsyncWebServerRequest* request);
String getContentType(const String& filename);
bool fileExists(const String& path);
};

26
platformio.ini
View File

@@ -11,6 +11,7 @@
[platformio]
;default_envs = esp01_1m
src_dir = .
data_dir = ${PROJECT_DIR}/examples/${PIOENV}/data
[common]
monitor_speed = 115200
@@ -18,7 +19,7 @@ lib_deps =
esp32async/ESPAsyncWebServer@^3.8.0
bblanchon/ArduinoJson@^7.4.2
[env:esp01_1m]
[env:base]
platform = platformio/espressif8266@^4.2.1
board = esp01_1m
framework = arduino
@@ -57,7 +58,7 @@ build_src_filter =
+<src/spore/types/*.cpp>
+<src/internal/*.cpp>
[env:esp01_1m_relay]
[env:relay]
platform = platformio/espressif8266@^4.2.1
board = esp01_1m
framework = arduino
@@ -67,6 +68,27 @@ board_build.filesystem = littlefs
board_build.flash_mode = dout
board_build.ldscript = eagle.flash.1m64.ld
lib_deps = ${common.lib_deps}
;data_dir = examples/relay/data
build_src_filter =
+<examples/relay/*.cpp>
+<src/spore/*.cpp>
+<src/spore/core/*.cpp>
+<src/spore/services/*.cpp>
+<src/spore/types/*.cpp>
+<src/internal/*.cpp>
[env:d1_mini_relay]
platform = platformio/espressif8266@^4.2.1
board = d1_mini
framework = arduino
upload_speed = 115200
monitor_speed = 115200
board_build.filesystem = littlefs
board_build.flash_mode = dio
board_build.flash_size = 4M
board_build.ldscript = eagle.flash.4m1m.ld
lib_deps = ${common.lib_deps}
data_dir = examples/relay/data
build_src_filter =
+<examples/relay/*.cpp>
+<src/spore/*.cpp>

5
src/spore/core/ApiServer.cpp
View File

@@ -81,6 +81,11 @@ void ApiServer::addService(Service& service) {
LOG_INFO(ctx, "API", "Added service: " + String(service.getName()));
}
void ApiServer::serveStatic(const String& uri, fs::FS& fs, const String& path, const String& cache_header) {
server.serveStatic(uri.c_str(), fs, path.c_str(), cache_header.c_str()).setDefaultFile("index.html");
LOG_INFO(ctx, "API", "Registered static file serving: " + uri + " -> " + path);
}
void ApiServer::begin() {
// Register all service endpoints
for (auto& service : services) {

92
src/spore/services/StaticFileService.cpp
View File

@@ -16,95 +16,7 @@ void StaticFileService::registerEndpoints(ApiServer& api) {
}
LOG_INFO(ctx, "StaticFileService", "LittleFS mounted successfully");
// Root endpoint - serve index.html
api.addEndpoint("/", HTTP_GET,
[this](AsyncWebServerRequest* request) { handleRootRequest(request); },
std::vector<ParamSpec>{});
// Static file serving for any path
api.addEndpoint("/*", HTTP_GET,
[this](AsyncWebServerRequest* request) { handleStaticFileRequest(request); },
std::vector<ParamSpec>{});
// Use the built-in static file serving from ESPAsyncWebServer
api.serveStatic("/", LittleFS, "/public", "max-age=3600");
}
void StaticFileService::handleRootRequest(AsyncWebServerRequest* request) {
// Serve index.html from root
String path = "/index.html";
if (!fileExists(path)) {
request->send(404, "text/plain", "File not found");
return;
}
File file = LittleFS.open(path, "r");
if (!file) {
request->send(500, "text/plain", "Failed to open file");
return;
}
String contentType = getContentType(path);
request->send(LittleFS, path, contentType);
file.close();
}
void StaticFileService::handleStaticFileRequest(AsyncWebServerRequest* request) {
String path = request->url();
// Remove leading slash for LittleFS path
if (path.startsWith("/")) {
path = path.substring(1);
}
// If path is empty or just "/", serve index.html
if (path.isEmpty() || path == "/") {
path = "index.html";
}
// Check if file exists
if (!fileExists("/" + path)) {
request->send(404, "text/plain", "File not found: " + path);
return;
}
String contentType = getContentType(path);
request->send(LittleFS, "/" + path, contentType);
}
void StaticFileService::handleNotFound(AsyncWebServerRequest* request) {
// Try to serve index.html as fallback
if (fileExists("/index.html")) {
request->send(LittleFS, "/index.html", "text/html");
} else {
request->send(404, "text/plain", "Not found");
}
}
String StaticFileService::getContentType(const String& filename) {
if (filename.endsWith(".html") || filename.endsWith(".htm")) {
return "text/html";
} else if (filename.endsWith(".css")) {
return "text/css";
} else if (filename.endsWith(".js")) {
return "application/javascript";
} else if (filename.endsWith(".json")) {
return "application/json";
} else if (filename.endsWith(".png")) {
return "image/png";
} else if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
return "image/jpeg";
} else if (filename.endsWith(".gif")) {
return "image/gif";
} else if (filename.endsWith(".svg")) {
return "image/svg+xml";
} else if (filename.endsWith(".ico")) {
return "image/x-icon";
} else if (filename.endsWith(".txt")) {
return "text/plain";
} else {
return "application/octet-stream";
}
}
bool StaticFileService::fileExists(const String& path) {
return LittleFS.exists(path);
}