feat: example with multiple various functionallity

examples/multimatrix/MultiMatrixService.cpp

@@ -0,0 +1,249 @@
+#include "MultiMatrixService.h"
+#include "spore/core/ApiServer.h"
+#include "spore/util/Logging.h"
+#include <ArduinoJson.h>
+#include <SoftwareSerial.h>
+
+namespace {
+constexpr uint8_t DEFAULT_VOLUME = 15;
+constexpr char API_STATUS_ENDPOINT[] = "/api/audio/status";
+constexpr char API_CONTROL_ENDPOINT[] = "/api/audio";
+constexpr char EVENT_TOPIC[] = "audio/player";
+}
+
+MultiMatrixService::MultiMatrixService(NodeContext& ctx, TaskManager& taskManager, uint8_t rxPin, uint8_t txPin, uint8_t potentiometerPin)
+    : m_ctx(ctx),
+      m_taskManager(taskManager),
+      m_serial(std::make_unique<SoftwareSerial>(rxPin, txPin)),
+      m_potentiometerPin(potentiometerPin),
+      m_volume(DEFAULT_VOLUME),
+      m_playerReady(false),
+      m_loopEnabled(false) {
+    pinMode(m_potentiometerPin, INPUT);
+    m_serial->begin(9600);
+    
+    // DFPlayer Mini requires time to initialize after power-on
+    delay(1000);
+    
+    if (m_player.begin(*m_serial)) {
+        m_playerReady = true;
+        m_player.setTimeOut(500);
+        m_player.EQ(DFPLAYER_EQ_NORMAL);
+        m_player.volume(m_volume);
+        LOG_INFO("MultiMatrixService", "DFPlayer initialized successfully");
+        publishEvent("ready");
+    } else {
+        LOG_ERROR("MultiMatrixService", "Failed to initialize DFPlayer");
+    }
+    registerTasks();
+}
+
+void MultiMatrixService::registerEndpoints(ApiServer& api) {
+    api.addEndpoint(API_STATUS_ENDPOINT, HTTP_GET,
+        [this](AsyncWebServerRequest* request) { handleStatusRequest(request); },
+        std::vector<ParamSpec>{});
+
+    api.addEndpoint(API_CONTROL_ENDPOINT, HTTP_POST,
+        [this](AsyncWebServerRequest* request) { handleControlRequest(request); },
+        std::vector<ParamSpec>{
+            ParamSpec{String("action"), true, String("body"), String("string"),
+                {String("play"), String("stop"), String("pause"), String("resume"), String("next"), String("previous"), String("volume"), String("loop")}},
+            ParamSpec{String("volume"), false, String("body"), String("numberRange"), {}, String("15")},
+            ParamSpec{String("loop"), false, String("body"), String("boolean"), {}}
+        });
+}
+
+bool MultiMatrixService::isReady() const {
+    return m_playerReady;
+}
+
+uint8_t MultiMatrixService::getVolume() const {
+    return m_volume;
+}
+
+bool MultiMatrixService::isLoopEnabled() const {
+    return m_loopEnabled;
+}
+
+void MultiMatrixService::play() {
+    if (!m_playerReady) {
+        return;
+    }
+    m_player.play();
+    publishEvent("play");
+    LOG_INFO("MultiMatrixService", "Playback started");
+}
+
+void MultiMatrixService::stop() {
+    if (!m_playerReady) {
+        return;
+    }
+    m_player.stop();
+    publishEvent("stop");
+    LOG_INFO("MultiMatrixService", "Playback stopped");
+}
+
+void MultiMatrixService::pause() {
+    if (!m_playerReady) {
+        return;
+    }
+    m_player.pause();
+    publishEvent("pause");
+    LOG_INFO("MultiMatrixService", "Playback paused");
+}
+
+void MultiMatrixService::resume() {
+    if (!m_playerReady) {
+        return;
+    }
+    m_player.start();
+    publishEvent("resume");
+    LOG_INFO("MultiMatrixService", "Playback resumed");
+}
+
+void MultiMatrixService::next() {
+    if (!m_playerReady) {
+        return;
+    }
+    m_player.next();
+    publishEvent("next");
+    LOG_INFO("MultiMatrixService", "Next track");
+}
+
+void MultiMatrixService::previous() {
+    if (!m_playerReady) {
+        return;
+    }
+    m_player.previous();
+    publishEvent("previous");
+    LOG_INFO("MultiMatrixService", "Previous track");
+}
+
+void MultiMatrixService::setVolume(uint8_t volume) {
+    if (!m_playerReady) {
+        return;
+    }
+    const uint8_t clampedVolume = std::min<uint8_t>(volume, MAX_VOLUME);
+    if (clampedVolume == m_volume) {
+        return;
+    }
+    applyVolume(clampedVolume);
+}
+
+void MultiMatrixService::setLoop(bool enabled) {
+    if (!m_playerReady) {
+        return;
+    }
+    m_loopEnabled = enabled;
+    if (enabled) {
+        m_player.enableLoop();
+    } else {
+        m_player.disableLoop();
+    }
+    publishEvent("loop");
+    LOG_INFO("MultiMatrixService", String("Loop ") + (enabled ? "enabled" : "disabled"));
+}
+
+void MultiMatrixService::registerTasks() {
+    m_taskManager.registerTask("multimatrix_potentiometer", POTENTIOMETER_SAMPLE_INTERVAL_MS,
+        [this]() { pollPotentiometer(); });
+}
+
+void MultiMatrixService::pollPotentiometer() {
+    if (!m_playerReady) {
+        return;
+    }
+
+    const uint16_t rawValue = analogRead(static_cast<uint8_t>(m_potentiometerPin));
+    const uint8_t targetVolume = calculateVolumeFromPotentiometer(rawValue);
+    
+    if (targetVolume > m_volume + POT_VOLUME_EPSILON || targetVolume + POT_VOLUME_EPSILON < m_volume) {
+        applyVolume(targetVolume);
+    }
+}
+
+uint8_t MultiMatrixService::calculateVolumeFromPotentiometer(uint16_t rawValue) const {
+    // Clamp raw value to prevent underflow (analogRead can return 1024)
+    const uint16_t clampedValue = std::min<uint16_t>(rawValue, 1023U);
+    // Invert: all down (0) = max volume, all up (1023) = min volume
+    const uint16_t invertedValue = 1023U - clampedValue;
+    const uint8_t scaledVolume = static_cast<uint8_t>((static_cast<uint32_t>(invertedValue) * MAX_VOLUME) / 1023U);
+    return std::min<uint8_t>(scaledVolume, MAX_VOLUME);
+}
+
+void MultiMatrixService::applyVolume(uint8_t targetVolume) {
+    m_volume = targetVolume;
+    m_player.volume(m_volume);
+    publishEvent("volume");
+    LOG_INFO("MultiMatrixService", String("Volume set to ") + String(m_volume));
+}
+
+void MultiMatrixService::handleStatusRequest(AsyncWebServerRequest* request) {
+    StaticJsonDocument<192> doc;
+    doc["ready"] = m_playerReady;
+    doc["volume"] = static_cast<int>(m_volume);
+    doc["loop"] = m_loopEnabled;
+
+    String json;
+    serializeJson(doc, json);
+    request->send(200, "application/json", json);
+}
+
+void MultiMatrixService::handleControlRequest(AsyncWebServerRequest* request) {
+    String action = request->hasParam("action", true) ? request->getParam("action", true)->value() : "";
+    bool ok = true;
+
+    if (action.equalsIgnoreCase("play")) {
+        play();
+    } else if (action.equalsIgnoreCase("stop")) {
+        stop();
+    } else if (action.equalsIgnoreCase("pause")) {
+        pause();
+    } else if (action.equalsIgnoreCase("resume")) {
+        resume();
+    } else if (action.equalsIgnoreCase("next")) {
+        next();
+    } else if (action.equalsIgnoreCase("previous")) {
+        previous();
+    } else if (action.equalsIgnoreCase("volume")) {
+        if (request->hasParam("volume", true)) {
+            int volumeValue = request->getParam("volume", true)->value().toInt();
+            setVolume(static_cast<uint8_t>(std::max(0, std::min(static_cast<int>(MAX_VOLUME), volumeValue))));
+        } else {
+            ok = false;
+        }
+    } else if (action.equalsIgnoreCase("loop")) {
+        if (request->hasParam("loop", true)) {
+            String loopValue = request->getParam("loop", true)->value();
+            bool enabled = loopValue.equalsIgnoreCase("true") || loopValue == "1";
+            setLoop(enabled);
+        } else {
+            ok = false;
+        }
+    } else {
+        ok = false;
+    }
+
+    StaticJsonDocument<256> resp;
+    resp["success"] = ok;
+    resp["ready"] = m_playerReady;
+    resp["volume"] = static_cast<int>(m_volume);
+    resp["loop"] = m_loopEnabled;
+    if (!ok) {
+        resp["message"] = "Invalid action";
+    }
+
+    String json;
+    serializeJson(resp, json);
+    request->send(ok ? 200 : 400, "application/json", json);
+}
+
+void MultiMatrixService::publishEvent(const char* action) {
+    StaticJsonDocument<192> doc;
+    doc["action"] = action;
+    doc["volume"] = static_cast<int>(m_volume);
+    doc["loop"] = m_loopEnabled;
+    String payload;
+    serializeJson(doc, payload);
+    m_ctx.fire(EVENT_TOPIC, &payload);
+}

examples/multimatrix/MultiMatrixService.h

@@ -0,0 +1,53 @@
+#pragma once
+#include <Arduino.h>
+#include <algorithm>
+#include <memory>
+#include <SoftwareSerial.h>
+#include <DFRobotDFPlayerMini.h>
+#include "spore/Service.h"
+#include "spore/core/TaskManager.h"
+#include "spore/core/NodeContext.h"
+
+class ApiServer;
+class AsyncWebServerRequest;
+class MultiMatrixService : public Service {
+public:
+    MultiMatrixService(NodeContext& ctx, TaskManager& taskManager, uint8_t rxPin, uint8_t txPin, uint8_t potentiometerPin);
+    void registerEndpoints(ApiServer& api) override;
+    const char* getName() const override { return "MultiMatrixAudio"; }
+
+    bool isReady() const;
+    uint8_t getVolume() const;
+    bool isLoopEnabled() const;
+
+    void play();
+    void stop();
+    void pause();
+    void resume();
+    void next();
+    void previous();
+    void setVolume(uint8_t volume);
+    void setLoop(bool enabled);
+
+private:
+    static constexpr uint16_t POTENTIOMETER_SAMPLE_INTERVAL_MS = 200;
+    static constexpr uint8_t MAX_VOLUME = 30;
+    static constexpr uint8_t POT_VOLUME_EPSILON = 2;
+
+    void registerTasks();
+    void pollPotentiometer();
+    void handleStatusRequest(AsyncWebServerRequest* request);
+    void handleControlRequest(AsyncWebServerRequest* request);
+    uint8_t calculateVolumeFromPotentiometer(uint16_t rawValue) const;
+    void applyVolume(uint8_t targetVolume);
+    void publishEvent(const char* action);
+
+    NodeContext& m_ctx;
+    TaskManager& m_taskManager;
+    std::unique_ptr<SoftwareSerial> m_serial;
+    DFRobotDFPlayerMini m_player;
+    uint8_t m_potentiometerPin;
+    uint8_t m_volume;
+    bool m_playerReady;
+    bool m_loopEnabled;
+};

examples/multimatrix/README.md

@@ -0,0 +1,19 @@
+# Multi-Matrix
+
+This example combines different capabilities:
+- Spore base stack
+- use PixelStreamController in Matrix mode 16x16
+- DFRobotDFPlayerMini audio playback
+- analog potentiometer to controll audio volume
+- API and web interface to control the audio player (start, stop, pause, next / previous track, volume)
+
+## MCU
+- Wemos D1 Mini
+
+## Pin Configuration
+```
+#define MP3PLAYER_PIN_RX D3
+#define MP3PLAYER_PIN_TX D4
+#define MATRIX_PIN D2 
+#define POTI_PIN A0
+```

examples/multimatrix/data/public/index.html

@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Matrix Audio Player</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+        }
+
+        .player-container {
+            background: rgba(255, 255, 255, 0.98);
+            border-radius: 24px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 3rem 2.5rem;
+            max-width: 420px;
+            width: 100%;
+            backdrop-filter: blur(10px);
+        }
+
+        .player-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .player-title {
+            font-size: 1.75rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 0.5rem;
+        }
+
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.4rem 1rem;
+            background: rgba(102, 126, 234, 0.1);
+            border-radius: 20px;
+            font-size: 0.875rem;
+            color: #667eea;
+            font-weight: 500;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #10b981;
+            animation: pulse 2s infinite;
+        }
+
+        .status-dot.inactive {
+            background: #ef4444;
+            animation: none;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        .main-controls {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1.5rem;
+            margin: 2.5rem 0;
+        }
+
+        .control-btn {
+            width: 52px;
+            height: 52px;
+            border-radius: 50%;
+            border: none;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+            font-size: 1.2rem;
+        }
+
+        .control-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+        }
+
+        .control-btn:active {
+            transform: translateY(0);
+        }
+
+        .play-btn {
+            width: 72px;
+            height: 72px;
+            font-size: 1.5rem;
+            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
+        }
+
+        .secondary-controls {
+            display: flex;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+            justify-content: center;
+        }
+
+        .secondary-btn {
+            padding: 0.6rem 1.25rem;
+            border: 2px solid #667eea;
+            background: white;
+            color: #667eea;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+
+        .secondary-btn:hover {
+            background: #667eea;
+            color: white;
+            transform: translateY(-1px);
+        }
+
+        .secondary-btn:active {
+            transform: translateY(0);
+        }
+
+        .volume-section {
+            margin: 2rem 0;
+        }
+
+        .volume-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.75rem;
+            font-size: 0.875rem;
+            color: #64748b;
+            font-weight: 600;
+        }
+
+        .volume-value {
+            color: #667eea;
+            font-weight: 700;
+            font-size: 1rem;
+        }
+
+        .volume-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
+            outline: none;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+
+        .volume-slider:hover {
+            opacity: 1;
+        }
+
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: white;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
+            border: 2px solid #667eea;
+        }
+
+        .volume-slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: white;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
+            border: 2px solid #667eea;
+        }
+
+        .loop-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem 1.25rem;
+            background: rgba(102, 126, 234, 0.05);
+            border-radius: 12px;
+            margin-top: 1.5rem;
+        }
+
+        .loop-label {
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: #475569;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 52px;
+            height: 28px;
+            background: #cbd5e1;
+            border-radius: 14px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+
+        .toggle-switch.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        .toggle-slider {
+            position: absolute;
+            top: 3px;
+            left: 3px;
+            width: 22px;
+            height: 22px;
+            background: white;
+            border-radius: 50%;
+            transition: transform 0.3s ease;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .toggle-switch.active .toggle-slider {
+            transform: translateX(24px);
+        }
+
+        .icon {
+            display: inline-block;
+        }
+
+        @media (max-width: 480px) {
+            .player-container {
+                padding: 2rem 1.5rem;
+            }
+
+            .player-title {
+                font-size: 1.5rem;
+            }
+
+            .control-btn {
+                width: 48px;
+                height: 48px;
+            }
+
+            .play-btn {
+                width: 64px;
+                height: 64px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="player-container">
+        <div class="player-header">
+            <h1 class="player-title">Multi-Matrix Audio</h1>
+            <div class="status-badge">
+                <span class="status-dot" id="statusDot"></span>
+                <span id="statusText">Connecting...</span>
+            </div>
+        </div>
+
+        <div class="main-controls">
+            <button class="control-btn" onclick="sendAction('previous')" title="Previous">
+                <span class="icon">⏮</span>
+            </button>
+            <button class="control-btn play-btn" id="playBtn" onclick="togglePlayPause()" title="Play/Pause">
+                <span class="icon" id="playIcon">▶</span>
+            </button>
+            <button class="control-btn" onclick="sendAction('next')" title="Next">
+                <span class="icon">⏭</span>
+            </button>
+        </div>
+
+        <div class="secondary-controls">
+            <button class="secondary-btn" onclick="sendAction('stop')">⏹ Stop</button>
+            <button class="secondary-btn" onclick="sendAction('resume')">▶ Resume</button>
+        </div>
+
+        <div class="volume-section">
+            <div class="volume-header">
+                <span>🔊 Volume</span>
+                <span class="volume-value" id="volumeDisplay">15</span>
+            </div>
+            <input type="range" 
+                   class="volume-slider" 
+                   id="volumeSlider" 
+                   min="0" 
+                   max="30" 
+                   value="15" 
+                   oninput="updateVolumeDisplay(this.value)" 
+                   onchange="setVolume(this.value)">
+        </div>
+
+        <div class="loop-toggle">
+            <div class="loop-label">
+                <span>🔁 Loop Mode</span>
+            </div>
+            <div class="toggle-switch" id="loopToggle" onclick="toggleLoop()">
+                <div class="toggle-slider"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let isPlaying = false;
+        let loopEnabled = false;
+
+        async function fetchStatus() {
+            try {
+                const response = await fetch('/api/audio/status');
+                if (!response.ok) {
+                    throw new Error('Status request failed');
+                }
+                const status = await response.json();
+                updateUIStatus(status);
+            } catch (error) {
+                document.getElementById('statusText').textContent = 'Error';
+                document.getElementById('statusDot').className = 'status-dot inactive';
+                console.error(error);
+            }
+        }
+
+        function updateUIStatus(status) {
+            const statusDot = document.getElementById('statusDot');
+            const statusText = document.getElementById('statusText');
+            
+            if (status.ready) {
+                statusDot.className = 'status-dot';
+                statusText.textContent = 'Ready';
+            } else {
+                statusDot.className = 'status-dot inactive';
+                statusText.textContent = 'Not Ready';
+            }
+
+            if ('volume' in status) {
+                document.getElementById('volumeSlider').value = status.volume;
+                document.getElementById('volumeDisplay').textContent = status.volume;
+            }
+
+            if ('loop' in status) {
+                loopEnabled = status.loop;
+                const loopToggle = document.getElementById('loopToggle');
+                if (loopEnabled) {
+                    loopToggle.classList.add('active');
+                } else {
+                    loopToggle.classList.remove('active');
+                }
+            }
+        }
+
+        async function sendAction(action, params = {}) {
+            try {
+                const formData = new URLSearchParams({ action, ...params });
+                const response = await fetch('/api/audio', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: formData
+                });
+                const result = await response.json();
+                updateUIStatus(result);
+
+                if (action === 'play' || action === 'resume') {
+                    isPlaying = true;
+                    updatePlayButton();
+                } else if (action === 'pause' || action === 'stop') {
+                    isPlaying = false;
+                    updatePlayButton();
+                }
+
+                if (!result.success) {
+                    alert(result.message || 'Action failed');
+                }
+            } catch (error) {
+                alert('Request failed: ' + error.message);
+            }
+        }
+
+        function togglePlayPause() {
+            if (isPlaying) {
+                sendAction('pause');
+            } else {
+                sendAction('play');
+            }
+        }
+
+        function updatePlayButton() {
+            const playIcon = document.getElementById('playIcon');
+            playIcon.textContent = isPlaying ? '⏸' : '▶';
+        }
+
+        function updateVolumeDisplay(value) {
+            document.getElementById('volumeDisplay').textContent = value;
+        }
+
+        function setVolume(value) {
+            sendAction('volume', { volume: value });
+        }
+
+        function toggleLoop() {
+            loopEnabled = !loopEnabled;
+            const loopToggle = document.getElementById('loopToggle');
+            if (loopEnabled) {
+                loopToggle.classList.add('active');
+            } else {
+                loopToggle.classList.remove('active');
+            }
+            sendAction('loop', { loop: loopEnabled });
+        }
+
+        fetchStatus();
+        setInterval(fetchStatus, 5000);
+
+        function setupWebSocket() {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const ws = new WebSocket(protocol + '//' + window.location.host + '/ws');
+            
+            ws.onmessage = (event) => {
+                try {
+                    const payload = JSON.parse(event.data);
+                    if (payload.event === 'audio/player' && payload.payload) {
+                        const data = JSON.parse(payload.payload);
+                        
+                        // Skip debug messages
+                        if (data.action === 'pot_debug') {
+                            return;
+                        }
+
+                        if ('volume' in data) {
+                            document.getElementById('volumeSlider').value = data.volume;
+                            document.getElementById('volumeDisplay').textContent = data.volume;
+                        }
+
+                        if ('loop' in data) {
+                            loopEnabled = data.loop;
+                            const loopToggle = document.getElementById('loopToggle');
+                            if (loopEnabled) {
+                                loopToggle.classList.add('active');
+                            } else {
+                                loopToggle.classList.remove('active');
+                            }
+                        }
+
+                        if (data.action) {
+                            const statusText = document.getElementById('statusText');
+                            const statusDot = document.getElementById('statusDot');
+                            
+                            if (data.action === 'play' || data.action === 'resume' || data.action === 'next' || data.action === 'previous') {
+                                statusText.textContent = 'Playing';
+                                statusDot.className = 'status-dot';
+                                isPlaying = true;
+                                updatePlayButton();
+                            } else if (data.action === 'pause') {
+                                statusText.textContent = 'Paused';
+                                statusDot.className = 'status-dot';
+                                isPlaying = false;
+                                updatePlayButton();
+                            } else if (data.action === 'stop') {
+                                statusText.textContent = 'Stopped';
+                                statusDot.className = 'status-dot inactive';
+                                isPlaying = false;
+                                updatePlayButton();
+                            } else if (data.action === 'ready') {
+                                statusText.textContent = 'Ready';
+                                statusDot.className = 'status-dot';
+                            }
+                        }
+                    }
+                } catch (err) {
+                    console.error('WebSocket parse error', err);
+                }
+            };
+
+            ws.onclose = () => {
+                setTimeout(setupWebSocket, 3000);
+            };
+        }
+
+        setupWebSocket();
+    </script>
+</body>
+</html>

examples/multimatrix/main.cpp

@@ -0,0 +1,54 @@
+#include <Arduino.h>
+#include <memory>
+#include "spore/Spore.h"
+#include "spore/util/Logging.h"
+#include "../pixelstream/PixelStreamController.h"
+#include "MultiMatrixService.h"
+
+namespace {
+constexpr uint8_t MATRIX_PIN = D2;
+constexpr uint16_t MATRIX_PIXEL_COUNT = 256;
+constexpr uint8_t MATRIX_BRIGHTNESS = 40;
+constexpr uint16_t MATRIX_WIDTH = 16;
+constexpr bool MATRIX_SERPENTINE = false;
+constexpr neoPixelType MATRIX_PIXEL_TYPE = NEO_GRB + NEO_KHZ800;
+constexpr uint8_t MP3PLAYER_PIN_RX = D3;
+constexpr uint8_t MP3PLAYER_PIN_TX = D4;
+constexpr uint8_t POTENTIOMETER_PIN = A0;
+}
+
+Spore spore({
+    {"app", "multimatrix"},
+    {"role", "media"},
+    {"matrix", String(MATRIX_PIXEL_COUNT)}
+});
+
+std::unique_ptr<PixelStreamController> pixelController;
+std::shared_ptr<MultiMatrixService> audioService;
+
+void setup() {
+    spore.setup();
+
+    PixelStreamConfig config{
+        MATRIX_PIN,
+        MATRIX_PIXEL_COUNT,
+        MATRIX_BRIGHTNESS,
+        MATRIX_WIDTH,
+        MATRIX_SERPENTINE,
+        MATRIX_PIXEL_TYPE
+    };
+
+    pixelController = std::make_unique<PixelStreamController>(spore.getContext(), config);
+    pixelController->begin();
+
+    audioService = std::make_shared<MultiMatrixService>(spore.getContext(), spore.getTaskManager(), MP3PLAYER_PIN_RX, MP3PLAYER_PIN_TX, POTENTIOMETER_PIN);
+    spore.addService(audioService);
+
+    spore.begin();
+
+    LOG_INFO("MultiMatrix", "Setup complete");
+}
+
+void loop() {
+    spore.loop();
+}

include/spore/core/NodeContext.h

@@ -19,7 +19,7 @@ public:
     IPAddress localIP;
     NodeInfo self;
     std::map<String, NodeInfo>* memberList;
-    Config config;
+    ::Config config;
 
     using EventCallback = std::function<void(void*)>;
     std::map<std::string, std::vector<EventCallback>> eventRegistry;

platformio.ini

@@ -130,7 +130,7 @@ upload_speed = 115200
 monitor_speed = 115200
 board_build.filesystem = littlefs
 board_build.flash_mode = dout
-board_build.ldscript = eagle.flash.1m256.ld
+board_build.ldscript = eagle.flash.4m1m.ld
 lib_deps = ${common.lib_deps}
     adafruit/Adafruit NeoPixel@^1.15.1
 build_flags = -DPIXEL_PIN=TX -DPIXEL_COUNT=256 -DMATRIX_WIDTH=16
@@ -142,3 +142,26 @@ build_src_filter =
     +<src/spore/types/*.cpp>
     +<src/spore/util/*.cpp>
     +<src/internal/*.cpp>
+
+[env:multimatrix]
+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}
+    adafruit/Adafruit NeoPixel@^1.15.1
+    dfrobot/DFRobotDFPlayerMini@^1.0.6
+build_src_filter = 
+    +<examples/multimatrix/*.cpp>
+    +<examples/pixelstream/PixelStreamController.cpp>
+    +<src/spore/*.cpp>
+    +<src/spore/core/*.cpp>
+    +<src/spore/services/*.cpp>
+    +<src/spore/types/*.cpp>
+    +<src/spore/util/*.cpp>
+    +<src/internal/*.cpp>

test/pixelstream/snek/server.js

@@ -8,7 +8,7 @@ const HTTP_PORT = process.env.PORT || 3000;
 // UDP settings
 // Default broadcast; override with unicast address via UDP_ADDR if you have a single receiver
 const UDP_BROADCAST_PORT = Number(process.env.UDP_PORT) || 4210;
-const UDP_BROADCAST_ADDR = process.env.UDP_ADDR || '10.0.1.144';
+const UDP_BROADCAST_ADDR = process.env.UDP_ADDR || '255.255.255.255';
 
 // NeoPixel frame properties for basic validation/logging (no transformation here)
 const MATRIX_WIDTH = Number(process.env.MATRIX_WIDTH) || 16;

test/pixelstream/tetris/server.js

@@ -6,7 +6,7 @@ const { WebSocketServer } = require('ws');
 
 const HTTP_PORT = process.env.PORT || 3000;
 const UDP_BROADCAST_PORT = Number(process.env.UDP_PORT) || 4210;
-const UDP_BROADCAST_ADDR = process.env.UDP_ADDR || '10.0.1.144';
+const UDP_BROADCAST_ADDR = process.env.UDP_ADDR || '255.255.255.255';
 
 const MATRIX_WIDTH = Number(process.env.MATRIX_WIDTH) || 16;
 const MATRIX_HEIGHT = Number(process.env.MATRIX_HEIGHT) || 16;