feat: website
This commit is contained in:
358
public/index.html
Normal file
358
public/index.html
Normal file
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SPORE - Sprocket Orchestration Engine</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- Prism.js for syntax highlighting -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<div class="brand">
|
||||
<h1>SPORE</h1>
|
||||
<p class="tagline">Sprocket Orchestration Engine</p>
|
||||
</div>
|
||||
<button class="burger" id="menu-toggle" aria-label="Menu" aria-controls="site-nav" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="site-nav" class="site-nav">
|
||||
<div class="container">
|
||||
<a href="#overview">Overview</a>
|
||||
<a href="#spore">Core</a>
|
||||
<a href="#ui">UI</a>
|
||||
<a href="#apps">Apps</a>
|
||||
<a href="#docs">Docs</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="overview" class="hero">
|
||||
<div class="container">
|
||||
<img src="assets/spore.png" alt="SPORE" class="hero-image">
|
||||
<p>A totally based cluster engine for ESP8266 microcontrollers with automatic node discovery, health monitoring, and over-the-air updates. Built for real-time control of distributed embedded systems.</p>
|
||||
</div>
|
||||
<p class="subtitle">
|
||||
</section>
|
||||
|
||||
<section id="spore" class="content-section">
|
||||
<div class="container">
|
||||
<h2>Core</h2>
|
||||
<p class="subtitle">Cluster engine firmware for ESP8266 microcontrollers</p>
|
||||
<p class="repo-link"><a href="https://git.dcentral.systems/iot/spore" target="_blank" rel="noopener">Repository: spore</a></p>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>Auto Discovery</h3>
|
||||
<p>UDP-based node discovery with automatic cluster membership on port 4210</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Health Monitoring</h3>
|
||||
<p>Real-time node status tracking with resource monitoring and automatic failover</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Event System</h3>
|
||||
<p>Local and cluster-wide event publishing/subscription with WebSocket and UDP streaming API</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>OTA Updates</h3>
|
||||
<p>Seamless firmware updates across the cluster via HTTP API</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Service Registry</h3>
|
||||
<p>Dynamic API endpoint discovery and registration for custom services</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Task Scheduler</h3>
|
||||
<p>Cooperative multitasking system for background operations</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Quick Start</h3>
|
||||
<pre><code class="language-cpp">#include <Arduino.h>
|
||||
#include "spore/Spore.h"
|
||||
#include "spore/Service.h"
|
||||
#include "spore/core/ApiServer.h"
|
||||
#include "spore/core/TaskManager.h"
|
||||
|
||||
class HelloService : public Service {
|
||||
public:
|
||||
HelloService() {}
|
||||
|
||||
const char* getName() const override { return "hello"; }
|
||||
|
||||
void registerEndpoints(ApiServer& api) override {
|
||||
api.addEndpoint("/api/hello", HTTP_GET, [](AsyncWebServerRequest* req) {
|
||||
req->send(200, "application/json", "{\"message\":\"hello\"}");
|
||||
});
|
||||
}
|
||||
|
||||
void registerTasks(TaskManager& taskManager) override {
|
||||
taskManager.registerTask("heartbeat", 1000, [this]() { this->heartbeat(); });
|
||||
}
|
||||
|
||||
private:
|
||||
void heartbeat() {
|
||||
// e.g., blink LED, publish telemetry, etc.
|
||||
}
|
||||
};
|
||||
|
||||
Spore spore({
|
||||
{"app", "my_app"},
|
||||
{"role", "controller"}
|
||||
});
|
||||
|
||||
void setup() {
|
||||
spore.setup();
|
||||
spore.addService(new HelloService());
|
||||
spore.begin();
|
||||
}
|
||||
|
||||
void loop() {
|
||||
spore.loop();
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Technical Specifications</h3>
|
||||
<ul>
|
||||
<li><strong>Supported Hardware:</strong> ESP-01/ESP-01S (1MB Flash), Wemos D1 (4MB Flash)</li>
|
||||
<li><strong>Discovery Protocol:</strong> UDP broadcast on port 4210</li>
|
||||
<li><strong>API Interface:</strong> RESTful HTTP + WebSocket streaming</li>
|
||||
<li><strong>Dependencies:</strong> ESPAsyncWebServer, ArduinoJson</li>
|
||||
<li><strong>Framework:</strong> Arduino with PlatformIO build system</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="ui" class="content-section alt">
|
||||
<div class="container">
|
||||
<h2>UI</h2>
|
||||
<p class="subtitle">Zero-configuration web interface for cluster monitoring and management</p>
|
||||
<p class="repo-link"><a href="https://git.dcentral.systems/iot/spore-ui" target="_blank" rel="noopener">Repository: spore-ui</a></p>
|
||||
|
||||
<div class="screenshot-grid">
|
||||
<div class="screenshot">
|
||||
<img src="assets/cluster.png" alt="Cluster monitoring view">
|
||||
<p>Real-time cluster member overview with auto-discovery</p>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="assets/topology.png" alt="Network topology visualization">
|
||||
<p>Network topology visualization with node relationships</p>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="assets/monitoring.png" alt="Node monitoring dashboard">
|
||||
<p>Detailed system metrics and task monitoring</p>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="assets/firmware.png" alt="Firmware management interface">
|
||||
<p>Clusterwide over-the-air firmware updates</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Features</h3>
|
||||
<ul>
|
||||
<li>Cluster monitoring with real-time status updates</li>
|
||||
<li>Node details including running tasks and available endpoints</li>
|
||||
<li>Direct HTTP API access to all nodes in the cluster</li>
|
||||
<li>Over-the-air firmware updates for entire cluster</li>
|
||||
<li>WebSocket terminal for direct node interaction</li>
|
||||
<li>UDP auto-discovery eliminates hardcoded IP addresses</li>
|
||||
<li>Responsive design for all devices</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Technology Stack</h3>
|
||||
<ul>
|
||||
<li><strong>Backend:</strong> Express.js, Node.js</li>
|
||||
<li><strong>Frontend:</strong> Vanilla JavaScript, CSS3, HTML5</li>
|
||||
<li><strong>Architecture:</strong> Custom component-based framework</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="apps" class="content-section">
|
||||
<div class="container">
|
||||
<h2>Apps</h2>
|
||||
<p class="subtitle">Application suite built on SPORE</p>
|
||||
<div class="content-block">
|
||||
<p>Explore applications that extend SPORE.</p>
|
||||
<ul>
|
||||
<li><a href="#ledlab">LEDLab</a> — Real-time LED matrix animation streaming and visual preset editor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="ledlab" class="content-section">
|
||||
<div class="container">
|
||||
<h2>LEDLab</h2>
|
||||
<p class="subtitle">Real-time LED matrix animation streaming and visual preset editor</p>
|
||||
<p class="repo-link"><a href="https://git.dcentral.systems/iot/spore-ledlab" target="_blank" rel="noopener">Repository: spore-ledlab</a></p>
|
||||
|
||||
<div class="screenshot-grid">
|
||||
<div class="screenshot">
|
||||
<img src="assets/ledlab.png" alt="LEDLab interface">
|
||||
<p>Multi-node management with live canvas preview</p>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<img src="assets/editor.png" alt="Preset editor">
|
||||
<p>Visual preset editor with building blocks</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Firmware Requirements</h3>
|
||||
<p>LEDLab requires SPORE nodes running the <strong>PixelStreamController</strong> firmware, which handles UDP-based RGB data streaming to NeoPixel strips and matrices. The firmware subscribes to <code>udp/raw</code> cluster events and converts incoming hex-encoded pixel data into real-time LED animations.</p>
|
||||
<p>Key firmware features include support for both strip and matrix configurations, serpentine (zig-zag) wiring patterns, and configurable pixel counts, brightness, and matrix dimensions. The controller automatically remaps pixel coordinates for proper matrix display.</p>
|
||||
<p>See <a href="https://git.dcentral.systems/iot/spore/src/branch/main/examples/pixelstream/README.md" target="_blank" rel="noopener">PixelStream documentation</a> for more information.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Capabilities</h3>
|
||||
<ul>
|
||||
<li>Multi-node management with individual control</li>
|
||||
<li>Real-time canvas preview for each node</li>
|
||||
<li>10+ built-in animation presets (rainbow, lava lamp, aurora, etc.)</li>
|
||||
<li>Visual preset editor with reusable building blocks</li>
|
||||
<li>Live parameter control with instant feedback</li>
|
||||
<li>Import/export custom presets as JSON</li>
|
||||
<li>Auto-discovery of SPORE nodes on network</li>
|
||||
<li>Configurable FPS (1-60) and matrix dimensions</li>
|
||||
<li>Requires SPORE nodes running PixelStreamController</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<h3>Building Blocks</h3>
|
||||
<div class="building-blocks">
|
||||
<div>
|
||||
<strong>Shapes:</strong> Circle, Rectangle, Triangle, Blob, Point, Line
|
||||
</div>
|
||||
<div>
|
||||
<strong>Patterns:</strong> Trail, Radial, Spiral
|
||||
</div>
|
||||
<div>
|
||||
<strong>Colors:</strong> Solid, Gradient, Palette, Rainbow
|
||||
</div>
|
||||
<div>
|
||||
<strong>Animations:</strong> Move, Rotate, Pulse, Oscillate, Fade
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="docs" class="content-section">
|
||||
<div class="container">
|
||||
<h2>Documentation</h2>
|
||||
</div>
|
||||
|
||||
<div class="doc-grid">
|
||||
<div class="doc-card">
|
||||
<h3>SPORE Core</h3>
|
||||
<ul>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/docs/Architecture.md" target="_blank" rel="noopener">Architecture Guide</a> - System design and implementation</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/docs/API.md" target="_blank" rel="noopener">API Reference</a> - Complete REST API documentation</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/docs/Development.md" target="_blank" rel="noopener">Development Guide</a> - Build, deployment, configuration</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/docs/TaskManagement.md" target="_blank" rel="noopener">Task Management</a> - Background task system</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/docs/ClusterBroadcast.md" target="_blank" rel="noopener">Cluster Broadcast</a> - Event distribution protocol</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/docs/StreamingAPI.md" target="_blank" rel="noopener">Streaming API</a> - WebSocket integration</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="doc-card">
|
||||
<h3>SPORE UI</h3>
|
||||
<ul>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/README.md" target="_blank" rel="noopener">Getting Started</a> - Installation and setup</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/docs/DISCOVERY.md" target="_blank" rel="noopener">UDP Auto Discovery</a> - Network discovery protocol</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/api/openapi.yaml" target="_blank" rel="noopener">API Spec</a> - Backend API reference (OpenAPI)</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/docs/FRAMEWORK_README.md" target="_blank" rel="noopener">Component Framework</a> - Custom UI architecture</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="doc-card">
|
||||
<h3>SPORE LEDLab</h3>
|
||||
<ul>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ledlab/src/branch/main/README.md" target="_blank" rel="noopener">Quick Start</a> - Installation and usage</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ledlab/src/branch/main/PRESET_EDITOR.md" target="_blank" rel="noopener">Preset Editor</a> - Visual animation builder</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ledlab/src/branch/main/presets/examples" target="_blank" rel="noopener">Custom Presets</a> - JSON format and examples</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ledlab/src/branch/main/presets/building-blocks.js" target="_blank" rel="noopener">Building Blocks</a> - Reusable components</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore-ledlab/src/branch/main/MULTI_NODE_UPDATE.md" target="_blank" rel="noopener">Multi-Node Management</a> - Cluster control</li>
|
||||
<li><a href="https://git.dcentral.systems/iot/spore/src/branch/main/examples/pixelstream/README.md" target="_blank" rel="noopener">PixelStream Controller</a> - Required SPORE node firmware</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="getting-started">
|
||||
<h3>Getting Started</h3>
|
||||
<div class="start-grid">
|
||||
<div class="start-card">
|
||||
<h4>SPORE Core</h4>
|
||||
<pre><code># Build and flash firmware
|
||||
./ctl.sh build target esp01
|
||||
./ctl.sh flash target esp01</code></pre>
|
||||
</div>
|
||||
<div class="start-card">
|
||||
<h4>SPORE UI</h4>
|
||||
<pre><code># Install and start
|
||||
npm install
|
||||
npm start
|
||||
|
||||
# Open browser
|
||||
http://localhost:3001</code></pre>
|
||||
</div>
|
||||
<div class="start-card">
|
||||
<h4>SPORE LEDLab</h4>
|
||||
<pre><code># Install and start
|
||||
npm install
|
||||
npm start
|
||||
|
||||
# Open browser
|
||||
http://localhost:3000</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>SPORE - Sprocket Orchestration Engine</p>
|
||||
<p>
|
||||
Source:
|
||||
<a href="https://git.dcentral.systems/iot/spore" target="_blank" rel="noopener">spore</a> ·
|
||||
<a href="https://git.dcentral.systems/iot/spore-ui" target="_blank" rel="noopener">spore-ui</a> ·
|
||||
<a href="https://git.dcentral.systems/iot/spore-ledlab" target="_blank" rel="noopener">spore-ledlab</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Lightbox Overlay for screenshots -->
|
||||
<div id="lightbox" class="lightbox" aria-hidden="true" role="dialog">
|
||||
<div class="lightbox-backdrop" data-close></div>
|
||||
<figure class="lightbox-content">
|
||||
<img id="lightbox-image" alt="Expanded screenshot" />
|
||||
<figcaption id="lightbox-caption"></figcaption>
|
||||
<button class="lightbox-close" type="button" title="Close" aria-label="Close" data-close>×</button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<!-- Prism.js for syntax highlighting -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/components/prism-core.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user