feature/relay-example-ui #6
305
data/public/relay.html
Normal file
305
data/public/relay.html
Normal 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
165
examples/base/data/public/index.html
Normal 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>
|
||||||
@@ -1,6 +1,13 @@
|
|||||||
# Relay Service Example
|
# 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>`.
|
- Default relay pin: `GPIO0` (ESP-01). Override with `-DRELAY_PIN=<pin>`.
|
||||||
- WiFi and API port are configured in `src/Config.cpp`.
|
- WiFi and API port are configured in `src/Config.cpp`.
|
||||||
@@ -25,7 +32,7 @@ RelayService* relayService = nullptr;
|
|||||||
void setup() {
|
void setup() {
|
||||||
spore.setup();
|
spore.setup();
|
||||||
|
|
||||||
relayService = new RelayService(spore.getTaskManager(), RELAY_PIN);
|
relayService = new RelayService(spore.getContext(), spore.getTaskManager(), RELAY_PIN);
|
||||||
spore.addService(relayService);
|
spore.addService(relayService);
|
||||||
|
|
||||||
spore.begin();
|
spore.begin();
|
||||||
@@ -42,6 +49,7 @@ The Spore framework automatically provides:
|
|||||||
- REST API server with core endpoints
|
- REST API server with core endpoints
|
||||||
- Task scheduling and execution
|
- Task scheduling and execution
|
||||||
- Node status monitoring
|
- Node status monitoring
|
||||||
|
- Static file serving for web interfaces (core service)
|
||||||
|
|
||||||
## Build & Upload
|
## 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).
|
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
|
## Relay API
|
||||||
|
|
||||||
- Get relay status
|
- Get relay status
|
||||||
|
|||||||
305
examples/relay/data/public/index.html
Normal file
305
examples/relay/data/public/index.html
Normal 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>
|
||||||
@@ -30,6 +30,7 @@ void setup() {
|
|||||||
spore.begin();
|
spore.begin();
|
||||||
|
|
||||||
LOG_INFO(spore.getContext(), "Main", "Relay service registered and ready!");
|
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() {
|
void loop() {
|
||||||
|
|||||||
@@ -29,6 +29,9 @@ public:
|
|||||||
std::function<void(AsyncWebServerRequest*, const String&, size_t, uint8_t*, size_t, bool)> uploadHandler,
|
std::function<void(AsyncWebServerRequest*, const String&, size_t, uint8_t*, size_t, bool)> uploadHandler,
|
||||||
const std::vector<ParamSpec>& params);
|
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);
|
static const char* methodToStr(int method);
|
||||||
|
|
||||||
// Access to endpoints for endpoints endpoint
|
// Access to endpoints for endpoints endpoint
|
||||||
|
|||||||
@@ -15,10 +15,4 @@ private:
|
|||||||
static const String name;
|
static const String name;
|
||||||
NodeContext& ctx;
|
NodeContext& ctx;
|
||||||
ApiServer& apiServer;
|
ApiServer& apiServer;
|
||||||
|
|
||||||
void handleRootRequest(AsyncWebServerRequest* request);
|
|
||||||
void handleStaticFileRequest(AsyncWebServerRequest* request);
|
|
||||||
void handleNotFound(AsyncWebServerRequest* request);
|
|
||||||
String getContentType(const String& filename);
|
|
||||||
bool fileExists(const String& path);
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
[platformio]
|
[platformio]
|
||||||
;default_envs = esp01_1m
|
;default_envs = esp01_1m
|
||||||
src_dir = .
|
src_dir = .
|
||||||
|
data_dir = ${PROJECT_DIR}/examples/${PIOENV}/data
|
||||||
|
|
||||||
[common]
|
[common]
|
||||||
monitor_speed = 115200
|
monitor_speed = 115200
|
||||||
@@ -18,7 +19,7 @@ lib_deps =
|
|||||||
esp32async/ESPAsyncWebServer@^3.8.0
|
esp32async/ESPAsyncWebServer@^3.8.0
|
||||||
bblanchon/ArduinoJson@^7.4.2
|
bblanchon/ArduinoJson@^7.4.2
|
||||||
|
|
||||||
[env:esp01_1m]
|
[env:base]
|
||||||
platform = platformio/espressif8266@^4.2.1
|
platform = platformio/espressif8266@^4.2.1
|
||||||
board = esp01_1m
|
board = esp01_1m
|
||||||
framework = arduino
|
framework = arduino
|
||||||
@@ -57,7 +58,7 @@ build_src_filter =
|
|||||||
+<src/spore/types/*.cpp>
|
+<src/spore/types/*.cpp>
|
||||||
+<src/internal/*.cpp>
|
+<src/internal/*.cpp>
|
||||||
|
|
||||||
[env:esp01_1m_relay]
|
[env:relay]
|
||||||
platform = platformio/espressif8266@^4.2.1
|
platform = platformio/espressif8266@^4.2.1
|
||||||
board = esp01_1m
|
board = esp01_1m
|
||||||
framework = arduino
|
framework = arduino
|
||||||
@@ -67,6 +68,27 @@ board_build.filesystem = littlefs
|
|||||||
board_build.flash_mode = dout
|
board_build.flash_mode = dout
|
||||||
board_build.ldscript = eagle.flash.1m64.ld
|
board_build.ldscript = eagle.flash.1m64.ld
|
||||||
lib_deps = ${common.lib_deps}
|
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 =
|
build_src_filter =
|
||||||
+<examples/relay/*.cpp>
|
+<examples/relay/*.cpp>
|
||||||
+<src/spore/*.cpp>
|
+<src/spore/*.cpp>
|
||||||
|
|||||||
@@ -81,6 +81,11 @@ void ApiServer::addService(Service& service) {
|
|||||||
LOG_INFO(ctx, "API", "Added service: " + String(service.getName()));
|
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() {
|
void ApiServer::begin() {
|
||||||
// Register all service endpoints
|
// Register all service endpoints
|
||||||
for (auto& service : services) {
|
for (auto& service : services) {
|
||||||
|
|||||||
@@ -16,95 +16,7 @@ void StaticFileService::registerEndpoints(ApiServer& api) {
|
|||||||
}
|
}
|
||||||
LOG_INFO(ctx, "StaticFileService", "LittleFS mounted successfully");
|
LOG_INFO(ctx, "StaticFileService", "LittleFS mounted successfully");
|
||||||
|
|
||||||
// Root endpoint - serve index.html
|
// Use the built-in static file serving from ESPAsyncWebServer
|
||||||
api.addEndpoint("/", HTTP_GET,
|
api.serveStatic("/", LittleFS, "/public", "max-age=3600");
|
||||||
[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>{});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user