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

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() {