83 lines
2.3 KiB
Markdown
83 lines
2.3 KiB
Markdown
# Static Web Server Example
|
|
|
|
This example demonstrates how to serve static HTML files from LittleFS using the Spore framework.
|
|
|
|
## Features
|
|
|
|
- Serves static files from LittleFS filesystem
|
|
- Beautiful web interface with real-time status updates
|
|
- Responsive design that works on mobile and desktop
|
|
- Automatic API endpoint discovery and status monitoring
|
|
|
|
## Files
|
|
|
|
- `main.cpp` - Main application entry point
|
|
- `data/index.html` - Web interface (served from LittleFS)
|
|
|
|
## Web Interface
|
|
|
|
The web interface provides:
|
|
|
|
- **Node Status** - Shows uptime and system information
|
|
- **Network Status** - Displays WiFi connection status
|
|
- **Task Status** - Shows active background tasks
|
|
- **Cluster Status** - Displays cluster membership
|
|
- **API Links** - Quick access to all available API endpoints
|
|
|
|
## Building and Flashing
|
|
|
|
### Build for D1 Mini (recommended for web interface)
|
|
|
|
```bash
|
|
# Build the firmware
|
|
pio run -e d1_mini_static_web
|
|
|
|
# Flash to device
|
|
pio run -e d1_mini_static_web -t upload
|
|
```
|
|
|
|
### Upload Files to LittleFS
|
|
|
|
After flashing the firmware, you need to upload the HTML files to the LittleFS filesystem:
|
|
|
|
```bash
|
|
# Upload data directory to LittleFS
|
|
pio run -e d1_mini_static_web -t uploadfs
|
|
```
|
|
|
|
## Usage
|
|
|
|
1. Flash the firmware to your ESP8266 device
|
|
2. Upload the data files to LittleFS
|
|
3. Connect to the device's WiFi network
|
|
4. Open a web browser and navigate to `http://<device-ip>/`
|
|
5. The web interface will load and display real-time status information
|
|
|
|
## API Endpoints
|
|
|
|
The web interface automatically discovers and displays links to all available API endpoints:
|
|
|
|
- `/api/node/status` - Node status and system information
|
|
- `/api/network/status` - Network and WiFi status
|
|
- `/api/tasks/status` - Task management status
|
|
- `/api/cluster/members` - Cluster membership
|
|
- `/api/node/endpoints` - Complete API endpoint list
|
|
|
|
## Customization
|
|
|
|
To customize the web interface:
|
|
|
|
1. Modify `data/index.html` with your desired content
|
|
2. Add additional static files (CSS, JS, images) to the `data/` directory
|
|
3. Re-upload the files using `pio run -e d1_mini_static_web -t uploadfs`
|
|
|
|
## File Structure
|
|
|
|
```
|
|
data/
|
|
├── index.html # Main web interface
|
|
└── (other static files) # Additional web assets
|
|
```
|
|
|
|
The StaticFileService automatically serves files from the LittleFS root directory, so any files placed in the `data/` directory will be accessible via HTTP.
|