feat: example with multiple various functionallity

examples/multimatrix/MultiMatrixService.cpp

@@ -17,7 +17,8 @@ MultiMatrixService::MultiMatrixService(NodeContext& ctx, TaskManager& taskManage
       m_serial(std::make_unique<SoftwareSerial>(rxPin, txPin)),
       m_potentiometerPin(potentiometerPin),
       m_volume(DEFAULT_VOLUME),
-      m_playerReady(false) {
+      m_playerReady(false),
+      m_loopEnabled(false) {
     pinMode(m_potentiometerPin, INPUT);
     m_serial->begin(9600);
     
@@ -46,8 +47,9 @@ void MultiMatrixService::registerEndpoints(ApiServer& api) {
         [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("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("volume"), false, String("body"), String("numberRange"), {}, String("15")},
+            ParamSpec{String("loop"), false, String("body"), String("boolean"), {}}
         });
 }
 
@@ -59,6 +61,10 @@ uint8_t MultiMatrixService::getVolume() const {
     return m_volume;
 }
 
+bool MultiMatrixService::isLoopEnabled() const {
+    return m_loopEnabled;
+}
+
 void MultiMatrixService::play() {
     if (!m_playerReady) {
         return;
@@ -124,6 +130,20 @@ void MultiMatrixService::setVolume(uint8_t volume) {
     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(); });
@@ -137,17 +157,7 @@ void MultiMatrixService::pollPotentiometer() {
     const uint16_t rawValue = analogRead(static_cast<uint8_t>(m_potentiometerPin));
     const uint8_t targetVolume = calculateVolumeFromPotentiometer(rawValue);
     
-    // Debug: fire event on significant change
     if (targetVolume > m_volume + POT_VOLUME_EPSILON || targetVolume + POT_VOLUME_EPSILON < m_volume) {
-        StaticJsonDocument<128> debugDoc;
-        debugDoc["action"] = "pot_debug";
-        debugDoc["raw"] = rawValue;
-        debugDoc["target"] = targetVolume;
-        debugDoc["current"] = m_volume;
-        String debugPayload;
-        serializeJson(debugDoc, debugPayload);
-        m_ctx.fire(EVENT_TOPIC, &debugPayload);
-        
         applyVolume(targetVolume);
     }
 }
@@ -169,9 +179,10 @@ void MultiMatrixService::applyVolume(uint8_t targetVolume) {
 }
 
 void MultiMatrixService::handleStatusRequest(AsyncWebServerRequest* request) {
-    StaticJsonDocument<128> doc;
+    StaticJsonDocument<192> doc;
     doc["ready"] = m_playerReady;
     doc["volume"] = static_cast<int>(m_volume);
+    doc["loop"] = m_loopEnabled;
 
     String json;
     serializeJson(doc, json);
@@ -201,14 +212,23 @@ void MultiMatrixService::handleControlRequest(AsyncWebServerRequest* request) {
         } 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<192> resp;
+    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";
     }
@@ -219,9 +239,10 @@ void MultiMatrixService::handleControlRequest(AsyncWebServerRequest* request) {
 }
 
 void MultiMatrixService::publishEvent(const char* action) {
-    StaticJsonDocument<128> doc;
+    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

@@ -18,6 +18,7 @@ public:
 
     bool isReady() const;
     uint8_t getVolume() const;
+    bool isLoopEnabled() const;
 
     void play();
     void stop();
@@ -26,6 +27,7 @@ public:
     void next();
     void previous();
     void setVolume(uint8_t volume);
+    void setLoop(bool enabled);
 
 private:
     static constexpr uint16_t POTENTIOMETER_SAMPLE_INTERVAL_MS = 200;
@@ -47,4 +49,5 @@ private:
     uint8_t m_potentiometerPin;
     uint8_t m_volume;
     bool m_playerReady;
+    bool m_loopEnabled;
 };

examples/multimatrix/data/public/index.html

@@ -3,48 +3,335 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Multi-Matrix Audio Control</title>
+    <title>Multi-Matrix Audio Player</title>
     <style>
-        body { font-family: Arial, sans-serif; background: #111; color: #f4f4f4; margin: 0; padding: 2rem; }
+        * {
-        h1 { color: #4caf50; }
+            margin: 0;
-        button { margin: 0.25rem; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 4px; cursor: pointer; }
+            padding: 0;
-        button { background: #4caf50; color: #fff; }
+            box-sizing: border-box;
-        button.secondary { background: #1976d2; }
+        }
-        button.danger { background: #f44336; }
+
-        .controls { display: flex; flex-wrap: wrap; margin-bottom: 1.5rem; }
+        body {
-        .status { margin-top: 1.5rem; }
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-        .status span { font-weight: bold; }
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        .volume-control { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
+            min-height: 100vh;
-        input[type="range"] { width: 200px; }
+            display: flex;
-        .card { background: #1f1f1f; border-radius: 8px; padding: 1.5rem; box-shadow: 0 0 10px rgba(0,0,0,0.4); max-width: 400px; }
+            align-items: center;
-        .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 0.5rem; }
+            justify-content: center;
-        .status-indicator.ready { background: #4caf50; }
+            padding: 1rem;
-        .status-indicator.not-ready { background: #f44336; }
+        }
+
+        .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="card">
+    <div class="player-container">
-        <h1>Multi-Matrix Audio</h1>
+        <div class="player-header">
-        <div class="controls">
+            <h1 class="player-title">Multi-Matrix Audio</h1>
-            <button onclick="sendAction('play')">Play</button>
+            <div class="status-badge">
-            <button class="secondary" onclick="sendAction('pause')">Pause</button>
+                <span class="status-dot" id="statusDot"></span>
-            <button class="secondary" onclick="sendAction('resume')">Resume</button>
+                <span id="statusText">Connecting...</span>
-            <button class="danger" onclick="sendAction('stop')">Stop</button>
+            </div>
-            <button onclick="sendAction('previous')">Previous</button>
-            <button onclick="sendAction('next')">Next</button>
         </div>
-        <div class="volume-control">
+
-            <label for="volume">Volume</label>
+        <div class="main-controls">
-            <input type="range" id="volume" min="0" max="30" value="15" oninput="updateVolumeDisplay(this.value)" onchange="setVolume(this.value)">
+            <button class="control-btn" onclick="sendAction('previous')" title="Previous">
-            <span id="volumeValue">15</span>
+                <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="status">
+
-            <p>Player Status: <span id="playerStatus">Unknown</span><span id="statusIndicator" class="status-indicator not-ready"></span></p>
+        <div class="secondary-controls">
-            <p>Volume: <span id="currentVolume">-</span></p>
+            <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');
@@ -52,18 +339,42 @@
                     throw new Error('Status request failed');
                 }
                 const status = await response.json();
-                document.getElementById('playerStatus').textContent = status.ready ? 'Ready' : 'Not Ready';
+                updateUIStatus(status);
-                document.getElementById('currentVolume').textContent = status.volume;
-                document.getElementById('volume').value = status.volume;
-                document.getElementById('volumeValue').textContent = status.volume;
-                document.getElementById('statusIndicator').className = 'status-indicator ' + (status.ready ? 'ready' : 'not-ready');
             } catch (error) {
-                document.getElementById('playerStatus').textContent = 'Error';
+                document.getElementById('statusText').textContent = 'Error';
-                document.getElementById('statusIndicator').className = 'status-indicator not-ready';
+                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 });
@@ -73,11 +384,16 @@
                     body: formData
                 });
                 const result = await response.json();
-                document.getElementById('playerStatus').textContent = result.ready ? 'Ready' : 'Not Ready';
+                updateUIStatus(result);
-                document.getElementById('currentVolume').textContent = result.volume;
+
-                document.getElementById('volume').value = result.volume;
+                if (action === 'play' || action === 'resume') {
-                document.getElementById('volumeValue').textContent = result.volume;
+                    isPlaying = true;
-                document.getElementById('statusIndicator').className = 'status-indicator ' + (result.ready ? 'ready' : 'not-ready');
+                    updatePlayButton();
+                } else if (action === 'pause' || action === 'stop') {
+                    isPlaying = false;
+                    updatePlayButton();
+                }
+
                 if (!result.success) {
                     alert(result.message || 'Action failed');
                 }
@@ -86,50 +402,104 @@
             }
         }
 
+        function togglePlayPause() {
+            if (isPlaying) {
+                sendAction('pause');
+            } else {
+                sendAction('play');
+            }
+        }
+
+        function updatePlayButton() {
+            const playIcon = document.getElementById('playIcon');
+            playIcon.textContent = isPlaying ? '⏸' : '▶';
+        }
+
         function updateVolumeDisplay(value) {
-            document.getElementById('volumeValue').textContent = 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);
-                        if ('volume' in data) {
+                        
-                            document.getElementById('volume').value = data.volume;
+                        // Skip debug messages
-                            document.getElementById('volumeValue').textContent = data.volume;
+                        if (data.action === 'pot_debug') {
-                            document.getElementById('currentVolume').textContent = data.volume;
+                            return;
                         }
-                        if (data.action) {
+
-                            let statusText = data.action.charAt(0).toUpperCase() + data.action.slice(1);
+                        if ('volume' in data) {
-                            if (data.action === 'play' || data.action === 'resume' || data.action === 'next' || data.action === 'previous') {
+                            document.getElementById('volumeSlider').value = data.volume;
-                                statusText = 'Playing';
+                            document.getElementById('volumeDisplay').textContent = data.volume;
-                            } else if (data.action === 'pause') {
+                        }
-                                statusText = 'Paused';
+
-                            } else if (data.action === 'stop') {
+                        if ('loop' in data) {
-                                statusText = 'Stopped';
+                            loopEnabled = data.loop;
-                            } else if (data.action === 'ready') {
+                            const loopToggle = document.getElementById('loopToggle');
-                                statusText = 'Ready';
+                            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';
                             }
-                            document.getElementById('playerStatus').textContent = statusText;
-                            const indicatorClass = (data.action === 'stop') ? 'not-ready' : 'ready';
-                            document.getElementById('statusIndicator').className = 'status-indicator ' + indicatorClass;
                         }
                     }
                 } catch (err) {
                     console.error('WebSocket parse error', err);
                 }
             };
+
+            ws.onclose = () => {
+                setTimeout(setupWebSocket, 3000);
+            };
         }
 
         setupWebSocket();

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;