feat: node canvas grid

public/scripts/ledlab-app.js

@@ -33,26 +33,26 @@ class LEDLabApp {
     }
 
     initComponents() {
-        // Initialize Matrix Display component
+        // Initialize Node Canvas Grid component (new multi-canvas view)
+        const gridSection = document.querySelector('.matrix-grid-section');
+        if (gridSection) {
+            this.nodeCanvasGrid = new NodeCanvasGrid(gridSection, this.viewModel, this.eventBus);
+            this.nodeCanvasGrid.mount();
+        }
+
+        // Initialize Preset Controls component (now works with floating controls)
+        const floatingControls = document.querySelector('#floating-controls');
+        if (floatingControls) {
+            this.presetControls = new PresetControls(floatingControls, this.viewModel, this.eventBus);
+            this.presetControls.mount();
+        }
+
+        // Keep old Matrix Display component for backwards compatibility with settings view
         const matrixContainer = document.querySelector('.matrix-section');
         if (matrixContainer) {
             this.matrixDisplay = new MatrixDisplay(matrixContainer, this.viewModel, this.eventBus);
             this.matrixDisplay.mount();
         }
-
-        // Initialize Preset Controls component
-        const controlsContainer = document.querySelector('.control-section');
-        if (controlsContainer) {
-            this.presetControls = new PresetControls(controlsContainer, this.viewModel, this.eventBus);
-            this.presetControls.mount();
-        }
-
-        // Initialize Node Discovery component
-        const nodeContainer = document.querySelector('#node-list').parentElement;
-        if (nodeContainer) {
-            this.nodeDiscovery = new NodeDiscovery(nodeContainer, this.viewModel, this.eventBus);
-            this.nodeDiscovery.mount();
-        }
     }
 
     connectWebSocket() {
@@ -180,13 +180,6 @@ class LEDLabApp {
             });
         });
 
-        this.eventBus.subscribe('broadcastToAll', (data) => {
-            this.sendWebSocketMessage({
-                type: 'broadcastToAll',
-                ...data
-            });
-        });
-
         this.eventBus.subscribe('selectNode', (data) => {
             this.sendWebSocketMessage({
                 type: 'selectNode',
@@ -194,13 +187,6 @@ class LEDLabApp {
             });
         });
 
-        this.eventBus.subscribe('selectBroadcast', (data) => {
-            this.sendWebSocketMessage({
-                type: 'selectBroadcast',
-                ...data
-            });
-        });
-
         this.eventBus.subscribe('updateFrameRate', (data) => {
             this.sendWebSocketMessage({
                 type: 'updateFrameRate',
@@ -235,10 +221,6 @@ class LEDLabApp {
     sendToNode(nodeIp, message) {
         this.viewModel.publish('sendToNode', { nodeIp, message });
     }
-
-    broadcastToAll(message) {
-        this.viewModel.publish('broadcastToAll', { message });
-    }
 }
 
 // Initialize the app when DOM is loaded

public/scripts/node-canvas-grid.js

@@ -0,0 +1,486 @@
+// Node Canvas Grid Component - Displays multiple SPORE nodes with individual canvases
+
+class NodeCanvasGrid extends Component {
+    constructor(container, viewModel, eventBus) {
+        super(container, viewModel, eventBus);
+        this.nodes = [];
+        this.selectedNode = null;
+        this.nodeCanvases = new Map(); // Store canvas contexts for each node
+        this.nodeFrameData = new Map(); // Store frame data for each node
+        this.matrixWidth = 16;
+        this.matrixHeight = 16;
+        this.pendingRenders = new Set(); // Track which nodes need rendering
+        this.animationFrameId = null; // Track animation frame
+    }
+
+    mount() {
+        super.mount();
+        this.setupEventListeners();
+        this.setupViewModelListeners();
+        this.loadNodes();
+        this.startPeriodicRefresh();
+    }
+
+    setupEventListeners() {
+        // Settings toggle button
+        const settingsToggleBtn = document.getElementById('settings-toggle-btn');
+        if (settingsToggleBtn) {
+            this.addEventListener(settingsToggleBtn, 'click', () => {
+                if (window.navigationManager) {
+                    window.navigationManager.switchView('settings');
+                }
+            });
+        }
+
+        // Close controls button
+        const closeControlsBtn = document.getElementById('close-controls-btn');
+        if (closeControlsBtn) {
+            this.addEventListener(closeControlsBtn, 'click', () => {
+                this.deselectNode();
+            });
+        }
+    }
+
+    setupViewModelListeners() {
+        this.subscribeToEvent('nodeDiscovered', (data) => {
+            this.addOrUpdateNode(data.node);
+        });
+
+        this.subscribeToEvent('nodeLost', (data) => {
+            this.removeNode(data.node.ip);
+        });
+
+        this.subscribeToEvent('frame', (data) => {
+            // Update frame data for specific node
+            if (data.nodeIp) {
+                this.nodeFrameData.set(data.nodeIp, data.data);
+                this.scheduleRender(data.nodeIp);
+            }
+        });
+
+        this.subscribeToEvent('matrixSizeChanged', (data) => {
+            this.matrixWidth = data.size.width;
+            this.matrixHeight = data.size.height;
+            this.renderAllCanvases();
+        });
+
+        this.subscribeToEvent('streamingStarted', (data) => {
+            if (data.nodeIp) {
+                this.updateNodeStreamingStatus(data.nodeIp, true);
+            }
+        });
+
+        this.subscribeToEvent('streamingStopped', (data) => {
+            if (data.nodeIp) {
+                this.updateNodeStreamingStatus(data.nodeIp, false);
+            }
+        });
+
+        this.subscribeToEvent('status', (data) => {
+            // Update UI to reflect current server state
+            if (data.data.nodes) {
+                this.nodes = data.data.nodes;
+                this.renderNodeGrid();
+            }
+            if (data.data.matrixSize) {
+                this.matrixWidth = data.data.matrixSize.width;
+                this.matrixHeight = data.data.matrixSize.height;
+            }
+        });
+    }
+
+    async loadNodes() {
+        try {
+            const response = await fetch('/api/nodes');
+            const data = await response.json();
+
+            // Filter out any broadcast nodes
+            this.nodes = (data.nodes || []).filter(node => node.ip !== 'broadcast');
+            this.renderNodeGrid();
+
+        } catch (error) {
+            console.error('Error loading nodes:', error);
+            this.showError('Failed to load nodes');
+        }
+    }
+
+    startPeriodicRefresh() {
+        // Refresh node list every 5 seconds
+        setInterval(() => {
+            this.loadNodes();
+        }, 5000);
+    }
+
+    addOrUpdateNode(node) {
+        // Never add broadcast nodes
+        if (node.ip === 'broadcast') {
+            return;
+        }
+
+        const existingIndex = this.nodes.findIndex(n => n.ip === node.ip);
+
+        if (existingIndex >= 0) {
+            // Update existing node
+            this.nodes[existingIndex] = { ...node, lastSeen: Date.now() };
+        } else {
+            // Add new node
+            this.nodes.push({ ...node, lastSeen: Date.now() });
+        }
+
+        this.renderNodeGrid();
+    }
+
+    removeNode(nodeIp) {
+        // Don't process broadcast nodes
+        if (nodeIp === 'broadcast') {
+            return;
+        }
+
+        this.nodes = this.nodes.filter(node => node.ip !== nodeIp);
+        this.nodeCanvases.delete(nodeIp);
+        this.nodeFrameData.delete(nodeIp);
+        
+        // If the removed node was selected, deselect it
+        if (this.selectedNode === nodeIp) {
+            this.deselectNode();
+        }
+        
+        this.renderNodeGrid();
+    }
+
+    renderNodeGrid() {
+        const gridContainer = document.getElementById('node-canvas-grid');
+        if (!gridContainer) return;
+
+        // Clear existing content
+        gridContainer.innerHTML = '';
+
+        // Filter out broadcast nodes one more time for safety
+        const validNodes = this.nodes.filter(node => node.ip !== 'broadcast');
+
+        if (validNodes.length === 0) {
+            gridContainer.innerHTML = '<div class="empty-state">No nodes discovered. Waiting for SPORE nodes...</div>';
+            return;
+        }
+
+        validNodes.forEach(node => {
+            const nodeItem = this.createNodeCanvasItem(node);
+            gridContainer.appendChild(nodeItem);
+        });
+
+        // Update visual selection
+        this.updateNodeSelection();
+    }
+
+    createNodeCanvasItem(node) {
+        const nodeItem = document.createElement('div');
+        nodeItem.className = `node-canvas-item ${node.status || 'connected'}`;
+        nodeItem.dataset.nodeIp = node.ip;
+
+        // Create header
+        const header = document.createElement('div');
+        header.className = 'node-canvas-header';
+
+        const title = document.createElement('div');
+        title.className = 'node-canvas-title';
+
+        const ip = document.createElement('div');
+        ip.className = 'node-canvas-ip';
+        ip.textContent = node.ip;
+
+        const status = document.createElement('div');
+        status.className = `node-canvas-status ${node.status || 'connected'}`;
+        status.textContent = node.status || 'connected';
+
+        title.appendChild(ip);
+        header.appendChild(title);
+        header.appendChild(status);
+
+        // Create canvas container
+        const canvasContainer = document.createElement('div');
+        canvasContainer.className = 'node-canvas-container';
+
+        const canvas = document.createElement('canvas');
+        canvas.className = 'node-canvas';
+        canvas.dataset.nodeIp = node.ip;
+
+        canvasContainer.appendChild(canvas);
+
+        // Assemble node item
+        nodeItem.appendChild(header);
+        nodeItem.appendChild(canvasContainer);
+
+        // Setup canvas
+        this.setupNodeCanvas(node.ip, canvas);
+
+        // Add click handler for node selection
+        nodeItem.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.selectNode(node.ip);
+        });
+
+        return nodeItem;
+    }
+
+    setupNodeCanvas(nodeIp, canvas) {
+        const ctx = canvas.getContext('2d', { alpha: false });
+        if (!ctx) {
+            console.error('Failed to get canvas context for node:', nodeIp);
+            return;
+        }
+
+        // Create off-screen canvas for double buffering
+        const offscreenCanvas = document.createElement('canvas');
+        const offscreenCtx = offscreenCanvas.getContext('2d', { alpha: false });
+
+        // Set initial size for offscreen canvas
+        offscreenCanvas.width = canvas.width || 320;
+        offscreenCanvas.height = canvas.height || 320;
+
+        // Configure both contexts
+        [ctx, offscreenCtx].forEach(context => {
+            context.imageSmoothingEnabled = false;
+            context.webkitImageSmoothingEnabled = false;
+            context.mozImageSmoothingEnabled = false;
+            context.msImageSmoothingEnabled = false;
+        });
+
+        // Store both canvas contexts
+        this.nodeCanvases.set(nodeIp, { 
+            canvas, 
+            ctx, 
+            offscreenCanvas, 
+            offscreenCtx,
+            resizeTimer: null 
+        });
+
+        // Function to update canvas size
+        const updateCanvasSize = () => {
+            const container = canvas.parentElement;
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+
+            // Calculate pixel size to maximize canvas space
+            const maxPixelWidth = Math.floor(containerWidth / this.matrixWidth);
+            const maxPixelHeight = Math.floor(containerHeight / this.matrixHeight);
+            const pixelSize = Math.min(maxPixelWidth, maxPixelHeight);
+
+            const newWidth = this.matrixWidth * pixelSize;
+            const newHeight = this.matrixHeight * pixelSize;
+
+            // Only update if size actually changed
+            if (canvas.width !== newWidth || canvas.height !== newHeight) {
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+                offscreenCanvas.width = newWidth;
+                offscreenCanvas.height = newHeight;
+                this.renderNodeCanvas(nodeIp);
+            }
+        };
+
+        // Initial size - call immediately and wait for next frame
+        requestAnimationFrame(() => {
+            updateCanvasSize();
+            // Render initial frame if we have data
+            if (this.nodeFrameData.has(nodeIp)) {
+                this.renderNodeCanvas(nodeIp);
+            }
+        });
+
+        // Handle resize with debouncing
+        let resizeTimer = null;
+        const resizeObserver = new ResizeObserver(() => {
+            // Clear existing timer
+            if (resizeTimer) {
+                clearTimeout(resizeTimer);
+            }
+            
+            // Set new timer with debounce
+            resizeTimer = setTimeout(() => {
+                updateCanvasSize();
+            }, 100);
+        });
+
+        resizeObserver.observe(canvas.parentElement);
+    }
+
+    scheduleRender(nodeIp) {
+        // Add node to pending renders
+        this.pendingRenders.add(nodeIp);
+        
+        // Schedule animation frame if not already scheduled
+        if (!this.animationFrameId) {
+            this.animationFrameId = requestAnimationFrame(() => {
+                this.renderPendingFrames();
+            });
+        }
+    }
+
+    renderPendingFrames() {
+        // Render all pending nodes
+        this.pendingRenders.forEach(nodeIp => {
+            this.renderNodeCanvas(nodeIp);
+        });
+        
+        // Clear pending renders and animation frame ID
+        this.pendingRenders.clear();
+        this.animationFrameId = null;
+    }
+
+    renderNodeCanvas(nodeIp) {
+        const canvasData = this.nodeCanvases.get(nodeIp);
+        if (!canvasData) return;
+
+        const { canvas, ctx, offscreenCanvas, offscreenCtx } = canvasData;
+        const frameData = this.nodeFrameData.get(nodeIp);
+
+        // Check if canvases are properly sized
+        if (!canvas.width || !canvas.height || !offscreenCanvas.width || !offscreenCanvas.height) {
+            console.warn(`Canvas not sized for ${nodeIp}`);
+            return;
+        }
+
+        // Skip if no frame data to prevent unnecessary clears
+        if (!frameData || !frameData.startsWith('RAW:')) {
+            return;
+        }
+
+        const pixelData = frameData.substring(4);
+        const pixelSize = offscreenCanvas.width / this.matrixWidth;
+
+        // Render to off-screen canvas (not visible, no flicker)
+        offscreenCtx.fillStyle = '#000000';
+        offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+
+        // Batch render all pixels to off-screen canvas
+        for (let row = 0; row < this.matrixHeight; row++) {
+            for (let col = 0; col < this.matrixWidth; col++) {
+                // Calculate serpentine index
+                const hardwareIndex = (row % 2 === 0) ?
+                    (row * this.matrixWidth + col) :
+                    (row * this.matrixWidth + (this.matrixWidth - 1 - col));
+                const pixelStart = hardwareIndex * 6;
+
+                if (pixelStart + 5 < pixelData.length) {
+                    const hexColor = pixelData.substring(pixelStart, pixelStart + 6);
+                    
+                    // Quick parse RGB
+                    const r = parseInt(hexColor.substring(0, 2), 16);
+                    const g = parseInt(hexColor.substring(2, 4), 16);
+                    const b = parseInt(hexColor.substring(4, 6), 16);
+
+                    // Skip black pixels for performance
+                    if (r === 0 && g === 0 && b === 0) continue;
+
+                    // Draw pixel to off-screen canvas
+                    const x = col * pixelSize;
+                    const y = row * pixelSize;
+                    offscreenCtx.fillStyle = `rgb(${r},${g},${b})`;
+                    offscreenCtx.fillRect(x, y, pixelSize, pixelSize);
+                }
+            }
+        }
+
+        // Copy the complete off-screen canvas to visible canvas in one operation (smooth!)
+        ctx.drawImage(offscreenCanvas, 0, 0);
+    }
+
+
+    renderAllCanvases() {
+        this.nodes.forEach(node => {
+            this.renderNodeCanvas(node.ip);
+        });
+    }
+
+    selectNode(nodeIp) {
+        this.selectedNode = nodeIp;
+        this.updateNodeSelection();
+        this.showFloatingControls(nodeIp);
+        
+        // Notify other components
+        this.viewModel.publish('selectNode', { nodeIp });
+    }
+
+    deselectNode() {
+        this.selectedNode = null;
+        this.updateNodeSelection();
+        this.hideFloatingControls();
+    }
+
+    updateNodeSelection() {
+        const gridContainer = document.getElementById('node-canvas-grid');
+        if (!gridContainer) return;
+
+        // Remove selected class from all items
+        gridContainer.querySelectorAll('.node-canvas-item').forEach(item => {
+            item.classList.remove('selected');
+        });
+
+        // Add selected class to the selected node
+        if (this.selectedNode) {
+            const selectedItem = gridContainer.querySelector(`[data-node-ip="${this.selectedNode}"]`);
+            if (selectedItem) {
+                selectedItem.classList.add('selected');
+            }
+        }
+    }
+
+    showFloatingControls(nodeIp) {
+        const floatingControls = document.getElementById('floating-controls');
+        const selectedNodeName = document.getElementById('selected-node-name');
+        
+        if (floatingControls && selectedNodeName) {
+            selectedNodeName.textContent = nodeIp;
+            floatingControls.style.display = 'flex';
+        }
+    }
+
+    hideFloatingControls() {
+        const floatingControls = document.getElementById('floating-controls');
+        if (floatingControls) {
+            floatingControls.style.display = 'none';
+        }
+    }
+
+    updateNodeStreamingStatus(nodeIp, isStreaming) {
+        const gridContainer = document.getElementById('node-canvas-grid');
+        if (!gridContainer) return;
+
+        const nodeItem = gridContainer.querySelector(`[data-node-ip="${nodeIp}"]`);
+        if (nodeItem) {
+            if (isStreaming) {
+                nodeItem.classList.add('streaming');
+            } else {
+                nodeItem.classList.remove('streaming');
+            }
+
+            const statusElement = nodeItem.querySelector('.node-canvas-status');
+            if (statusElement) {
+                statusElement.textContent = isStreaming ? 'streaming' : 'connected';
+                statusElement.className = `node-canvas-status ${isStreaming ? 'streaming' : 'connected'}`;
+            }
+        }
+    }
+
+    showError(message) {
+        const gridContainer = document.getElementById('node-canvas-grid');
+        if (gridContainer) {
+            gridContainer.innerHTML = `<div class="error">${this.escapeHtml(message)}</div>`;
+        }
+    }
+
+    escapeHtml(str) {
+        return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+}
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = NodeCanvasGrid;
+}
+

public/scripts/node-discovery.js

@@ -1,178 +0,0 @@
-// Node Discovery Component
-
-class NodeDiscovery extends Component {
-    constructor(container, viewModel, eventBus) {
-        super(container, viewModel, eventBus);
-        this.nodes = [];
-        this.currentTarget = null;
-    }
-
-    mount() {
-        super.mount();
-        this.setupEventListeners();
-        this.setupViewModelListeners();
-        this.loadNodes();
-        this.startPeriodicRefresh();
-    }
-
-    setupEventListeners() {
-        // Broadcast button
-        const broadcastBtn = this.findElement('#broadcast-btn');
-        if (broadcastBtn) {
-            this.addEventListener(broadcastBtn, 'click', () => {
-                this.selectBroadcastTarget();
-            });
-        }
-    }
-
-    setupViewModelListeners() {
-        this.subscribeToEvent('nodeDiscovered', (data) => {
-            this.addOrUpdateNode(data.node);
-        });
-
-        this.subscribeToEvent('nodeLost', (data) => {
-            this.removeNode(data.node.ip);
-        });
-
-        this.subscribeToEvent('status', (data) => {
-            // Update UI to reflect current server state
-            if (data.data.nodes) {
-                this.nodes = data.data.nodes;
-                this.currentTarget = data.data.currentTarget;
-                this.renderNodeList();
-            }
-        });
-    }
-
-    async loadNodes() {
-        try {
-            const response = await fetch('/api/nodes');
-            const data = await response.json();
-
-            this.nodes = data.nodes || [];
-            this.renderNodeList();
-
-        } catch (error) {
-            console.error('Error loading nodes:', error);
-            this.showError('Failed to load nodes');
-        }
-    }
-
-    startPeriodicRefresh() {
-        // Refresh node list every 5 seconds
-        setInterval(() => {
-            this.loadNodes();
-        }, 5000);
-    }
-
-    addOrUpdateNode(node) {
-        const existingIndex = this.nodes.findIndex(n => n.ip === node.ip);
-
-        if (existingIndex >= 0) {
-            // Update existing node
-            this.nodes[existingIndex] = { ...node, lastSeen: Date.now() };
-        } else {
-            // Add new node
-            this.nodes.push({ ...node, lastSeen: Date.now() });
-        }
-
-        this.renderNodeList();
-    }
-
-    removeNode(nodeIp) {
-        this.nodes = this.nodes.filter(node => node.ip !== nodeIp);
-        this.renderNodeList();
-    }
-
-    renderNodeList() {
-        const nodeListContainer = this.findElement('#node-list');
-        if (!nodeListContainer) return;
-
-        if (this.nodes.length === 0) {
-            nodeListContainer.innerHTML = '<div class="empty-state">No nodes discovered</div>';
-            return;
-        }
-
-        const html = this.nodes.map(node => `
-            <div class="node-item ${node.status} ${node.ip === this.currentTarget ? 'selected' : ''}" data-ip="${this.escapeHtml(node.ip)}" style="cursor: pointer;">
-                <div class="node-indicator ${node.status}"></div>
-                <div class="node-info">
-                    <div class="node-ip">${this.escapeHtml(node.ip === 'broadcast' ? 'Broadcast' : node.ip)}</div>
-                    <div class="node-status">${node.status} • Port ${node.port}</div>
-                </div>
-            </div>
-        `).join('');
-
-        nodeListContainer.innerHTML = html;
-
-        // Add click handlers for node selection
-        this.nodes.forEach(node => {
-            const nodeElement = nodeListContainer.querySelector(`[data-ip="${node.ip}"]`);
-            if (nodeElement) {
-                this.addEventListener(nodeElement, 'click', () => {
-                    this.selectNode(node.ip);
-                });
-            }
-        });
-    }
-
-    selectNode(nodeIp) {
-        this.currentTarget = nodeIp;
-        this.viewModel.publish('selectNode', { nodeIp });
-
-        // Update visual selection
-        const nodeListContainer = this.findElement('#node-list');
-        if (nodeListContainer) {
-            nodeListContainer.querySelectorAll('.node-item').forEach(item => {
-                item.classList.remove('selected');
-            });
-            const selectedNode = nodeListContainer.querySelector(`[data-ip="${nodeIp}"]`);
-            if (selectedNode) {
-                selectedNode.classList.add('selected');
-            }
-        }
-    }
-
-    selectBroadcast() {
-        this.currentTarget = 'broadcast';
-        this.viewModel.publish('selectBroadcast', {});
-
-        // Update visual selection
-        const nodeListContainer = this.findElement('#node-list');
-        if (nodeListContainer) {
-            nodeListContainer.querySelectorAll('.node-item').forEach(item => {
-                item.classList.remove('selected');
-            });
-            const broadcastNode = nodeListContainer.querySelector(`[data-ip="broadcast"]`);
-            if (broadcastNode) {
-                broadcastNode.classList.add('selected');
-            }
-        }
-    }
-
-    showError(message) {
-        const nodeListContainer = this.findElement('#node-list');
-        if (nodeListContainer) {
-            nodeListContainer.innerHTML = `<div class="error">${this.escapeHtml(message)}</div>`;
-        }
-    }
-
-    // Public method to select broadcast (called from outside)
-    selectBroadcastTarget() {
-        this.selectBroadcast();
-    }
-
-    escapeHtml(str) {
-        return String(str)
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    }
-}
-
-// Export for use in other modules
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = NodeDiscovery;
-}

public/scripts/preset-controls.js

@@ -6,6 +6,8 @@ class PresetControls extends Component {
         this.presets = {};
         this.currentPreset = null;
         this.presetControls = new Map();
+        this.selectedNode = null; // Track which node is currently selected
+        this.nodeParameters = new Map(); // Store parameters per node: nodeIp -> { presetName, parameters }
     }
 
     mount() {
@@ -80,28 +82,36 @@ class PresetControls extends Component {
     }
 
     setupViewModelListeners() {
-        this.subscribeToEvent('streamingStarted', (data) => {
-            this.updateStreamingState(true, data.preset);
+        // Listen for node selection
+        this.subscribeToEvent('selectNode', (data) => {
+            this.selectedNode = data.nodeIp;
+            this.loadNodeSettings();
         });
 
-        this.subscribeToEvent('streamingStopped', () => {
-            this.updateStreamingState(false);
+        this.subscribeToEvent('streamingStarted', (data) => {
+            this.updateStreamingState(true, data.preset, data.nodeIp);
+        });
+
+        this.subscribeToEvent('streamingStopped', (data) => {
+            this.updateStreamingState(false, null, data.nodeIp);
         });
 
         this.subscribeToEvent('presetParameterUpdated', (data) => {
-            // Update control display without triggering another update
-            const control = this.presetControls.get(data.parameter);
-            if (control) {
-                if (control.type === 'range') {
-                    control.value = data.value;
-                    const valueDisplay = control.parentElement.querySelector('.preset-value');
-                    if (valueDisplay) {
-                        valueDisplay.textContent = parseFloat(data.value).toFixed(2);
+            // Only update if this is for the currently selected node
+            if (data.nodeIp === this.selectedNode) {
+                const control = this.presetControls.get(data.parameter);
+                if (control) {
+                    if (control.type === 'range') {
+                        control.value = data.value;
+                        const valueDisplay = control.parentElement.querySelector('.preset-value');
+                        if (valueDisplay) {
+                            valueDisplay.textContent = parseFloat(data.value).toFixed(2);
+                        }
+                    } else if (control.type === 'color') {
+                        control.value = this.hexToColorValue(data.value);
+                    } else {
+                        control.value = data.value;
                     }
-                } else if (control.type === 'color') {
-                    control.value = this.hexToColorValue(data.value);
-                } else {
-                    control.value = data.value;
                 }
             }
         });
@@ -202,9 +212,60 @@ class PresetControls extends Component {
         }
 
         this.currentPreset = this.presets[presetName];
+        
+        // Store preset selection for current node
+        if (this.selectedNode) {
+            const nodeParams = this.nodeParameters.get(this.selectedNode) || {};
+            nodeParams.presetName = presetName;
+            this.nodeParameters.set(this.selectedNode, nodeParams);
+        }
+        
         this.createPresetControls();
     }
 
+    loadNodeSettings() {
+        if (!this.selectedNode) return;
+
+        // Get stored parameters for this node
+        const nodeParams = this.nodeParameters.get(this.selectedNode);
+        
+        if (nodeParams && nodeParams.presetName) {
+            // Load the preset and restore parameters
+            const presetSelect = this.findElement('#preset-select');
+            if (presetSelect && presetSelect.value !== nodeParams.presetName) {
+                presetSelect.value = nodeParams.presetName;
+                this.selectPreset(nodeParams.presetName);
+            }
+            
+            // Restore parameter values
+            if (nodeParams.parameters) {
+                Object.entries(nodeParams.parameters).forEach(([param, value]) => {
+                    const control = this.presetControls.get(param);
+                    if (control) {
+                        if (control.type === 'range') {
+                            control.value = value;
+                            const valueDisplay = control.parentElement.querySelector('.preset-value');
+                            if (valueDisplay) {
+                                valueDisplay.textContent = parseFloat(value).toFixed(2);
+                            }
+                        } else if (control.type === 'color') {
+                            control.value = this.hexToColorValue(value);
+                        } else {
+                            control.value = value;
+                        }
+                    }
+                });
+            }
+        } else {
+            // Reset to default
+            const presetSelect = this.findElement('#preset-select');
+            if (presetSelect) {
+                presetSelect.value = '';
+                this.clearPresetControls();
+            }
+        }
+    }
+
     createPresetControls() {
         const controlsContainer = this.findElement('#preset-controls');
         if (!controlsContainer) return;
@@ -313,13 +374,24 @@ class PresetControls extends Component {
     }
 
     updatePresetParameter(parameter, value) {
+        // Store parameter for current node
+        if (this.selectedNode) {
+            const nodeParams = this.nodeParameters.get(this.selectedNode) || {};
+            if (!nodeParams.parameters) {
+                nodeParams.parameters = {};
+            }
+            nodeParams.parameters[parameter] = value;
+            this.nodeParameters.set(this.selectedNode, nodeParams);
+        }
+
         // Send parameter update to server immediately (real-time)
         this.viewModel.publish('updatePresetParameter', {
             parameter,
-            value
+            value,
+            nodeIp: this.selectedNode
         });
         
-        console.log(`Parameter updated: ${parameter} = ${value}`);
+        console.log(`Parameter updated for ${this.selectedNode}: ${parameter} = ${value}`);
     }
 
     clearPresetControls() {
@@ -355,21 +427,39 @@ class PresetControls extends Component {
             return;
         }
 
+        if (!this.selectedNode) {
+            alert('Please select a node first');
+            return;
+        }
+
         const width = parseInt(this.findElement('#matrix-width')?.value) || 16;
         const height = parseInt(this.findElement('#matrix-height')?.value) || 16;
 
+        // Get current parameters for this node
+        const nodeParams = this.nodeParameters.get(this.selectedNode);
+        const parameters = nodeParams?.parameters || {};
+
         this.viewModel.publish('startPreset', {
             presetName: presetSelect.value,
             width,
-            height
+            height,
+            nodeIp: this.selectedNode,
+            parameters
         });
     }
 
     stopStreaming() {
-        this.viewModel.publish('stopStreaming', {});
+        this.viewModel.publish('stopStreaming', {
+            nodeIp: this.selectedNode
+        });
     }
 
     sendTestFrame() {
+        if (!this.selectedNode) {
+            alert('Please select a node first');
+            return;
+        }
+
         // Create a test frame with a simple pattern in serpentine order
         const width = parseInt(this.findElement('#matrix-width')?.value) || 16;
         const height = parseInt(this.findElement('#matrix-height')?.value) || 16;
@@ -390,12 +480,18 @@ class PresetControls extends Component {
             }
         }
 
-        this.viewModel.publish('broadcastToAll', {
+        this.viewModel.publish('sendToNode', {
+            nodeIp: this.selectedNode,
             message: frameData
         });
     }
 
     clearMatrix() {
+        if (!this.selectedNode) {
+            alert('Please select a node first');
+            return;
+        }
+
         // Send a frame with all black pixels in serpentine order
         const width = parseInt(this.findElement('#matrix-width')?.value) || 16;
         const height = parseInt(this.findElement('#matrix-height')?.value) || 16;
@@ -411,7 +507,8 @@ class PresetControls extends Component {
             }
         }
 
-        this.viewModel.publish('broadcastToAll', {
+        this.viewModel.publish('sendToNode', {
+            nodeIp: this.selectedNode,
             message: frameData
         });
     }
@@ -425,7 +522,12 @@ class PresetControls extends Component {
         }
     }
 
-    updateStreamingState(isStreaming, preset) {
+    updateStreamingState(isStreaming, preset, nodeIp) {
+        // Only update UI if this is for the currently selected node
+        if (nodeIp !== this.selectedNode && nodeIp !== null) {
+            return;
+        }
+
         const toggleBtn = this.findElement('#toggle-stream-btn');
         const btnIcon = toggleBtn?.querySelector('.btn-icon');
         const btnText = toggleBtn?.querySelector('.btn-text');