feat: use gateway

2025-10-27 09:37:20 +01:00
parent 7b2f600f8c
commit 858be416eb
8 changed files with 279 additions and 255 deletions
--- a/docs/MULTI_NODE_UPDATE.md
+++ b/docs/MULTI_NODE_UPDATE.md
@@ -0,0 +1,234 @@
+# Multi-Node Canvas Grid Update
+
+## Overview
+
+The SPORE LEDLab interface has been redesigned to display all SPORE nodes simultaneously with individual canvases in a responsive grid layout. Each node can be controlled independently with its own preset and parameters.
+
+## Key Changes
+
+### 1. UI Layout Redesign
+
+**Before:**
+- Single canvas display in center
+- Node list in right sidebar
+- Controls always visible in right sidebar
+
+**After:**
+- Full-width grid layout displaying all nodes
+- Each node has its own canvas card
+- Floating control panel appears when a node is selected
+- Maximizes screen space for displaying multiple nodes
+
+### 2. New Components
+
+#### `NodeCanvasGrid` Component
+- **Location:** `/public/scripts/node-canvas-grid.js`
+- **Purpose:** Manages the grid of node canvases
+- **Features:**
+  - Displays all discovered SPORE nodes in a responsive grid
+  - Each node card shows:
+    - Node IP address
+    - Connection status (connected/streaming)
+    - Live canvas with streaming visualization
+  - Click on any node to select it and show controls
+  - Supports both individual node selection and broadcast mode
+  - Real-time frame rendering for each node
+
+#### Updated `PresetControls` Component
+- **Location:** `/public/scripts/preset-controls.js`
+- **Changes:**
+  - Now works with floating control panel
+  - Tracks parameters per node (using Map)
+  - Restores node-specific settings when switching between nodes
+  - Sends node-specific commands to server
+
+### 3. CSS Styling
+
+#### New Classes
+- `.matrix-grid-section` - Full-width container for node grid
+- `.node-canvas-grid` - CSS grid layout for node cards
+- `.node-canvas-item` - Individual node card styling
+  - Hover effects
+  - Selected state (green border glow)
+  - Streaming animation
+- `.floating-controls` - Floating control panel
+  - Appears when node is selected
+  - Slides in from right (desktop) or bottom (mobile)
+  - Closes when clicking X or deselecting node
+
+#### Responsive Design
+- Desktop: 3-4 columns based on screen width
+- Tablet: 2-3 columns
+- Mobile: 1-2 columns with controls sliding from bottom
+
+### 4. Server-Side Multi-Node Streaming
+
+#### Updated `LEDLabServer` Class
+- **Location:** `/server/index.js`
+- **New Features:**
+  - `nodeStreams` Map: Tracks active streams per node
+  - `nodeConfigurations` Map: Stores per-node settings
+  - Simultaneous streaming to multiple nodes
+  - Per-node preset instances and parameters
+
+#### Key Methods Updated
+- `startPreset(presetName, width, height, nodeIp, parameters)`
+  - Now accepts nodeIp to target specific node
+  - Supports initial parameter values
+  
+- `stopStreaming(nodeIp)`
+  - Stops streaming for specific node or all nodes
+  
+- `updatePresetParameter(parameter, value, nodeIp)`
+  - Updates parameters for specific node or broadcast to all
+  
+- `streamFrameForNode(nodeIp)`
+  - Generates and sends frames for specific node
+  - Multiple intervals running simultaneously
+
+### 5. HTML Structure
+
+#### Stream View (Main View)
+```html
+<section class="matrix-grid-section">
+  <div class="node-canvas-grid">
+    <!-- Node cards dynamically created here -->
+  </div>
+</section>
+
+<aside class="floating-controls">
+  <!-- Control panel content -->
+</aside>
+```
+
+### 6. User Workflow
+
+1. **Node Discovery**
+   - Nodes automatically discovered via UDP
+   - Each node appears as a card in the grid
+
+2. **Node Selection**
+   - Click any node card to select it
+   - Floating control panel appears
+   - Node card highlights with green border
+
+3. **Configure Node**
+   - Select preset from dropdown
+   - Adjust parameters with sliders
+   - Changes apply only to selected node
+
+4. **Start Streaming**
+   - Click "Start Streaming" button
+   - Node card shows "streaming" status
+   - Canvas displays live animation
+
+5. **Multi-Node Operation**
+   - Select different node
+   - Configure with different preset/parameters
+   - Start streaming independently
+   - Multiple nodes can stream simultaneously
+
+6. **Broadcast Mode**
+   - Click "Broadcast to All" button
+   - Control panel shows "Broadcast to All"
+   - Preset and parameters apply to all nodes
+
+## Technical Details
+
+### Per-Node State Management
+
+#### Client-Side (PresetControls)
+```javascript
+this.nodeParameters = new Map(); // nodeIp -> {presetName, parameters}
+```
+- Stores preset selection and parameters for each node
+- Restores settings when switching between nodes
+- Maintains independent state per node
+
+#### Server-Side (LEDLabServer)
+```javascript
+this.nodeStreams = new Map(); // nodeIp -> {preset, presetName, interval, matrixSize}
+this.nodeConfigurations = new Map(); // nodeIp -> {presetName, parameters, matrixSize}
+```
+- Active streams run independently with separate intervals
+- Configurations saved per node
+- Multiple presets can run simultaneously
+
+### WebSocket Messages
+
+#### Enhanced Messages
+All streaming-related messages now include optional `nodeIp` field:
+```javascript
+{
+  type: 'startPreset',
+  presetName: 'lava-lamp',
+  width: 16,
+  height: 16,
+  nodeIp: '192.168.1.100', // or null for broadcast
+  parameters: {speed: 1.5, scale: 2.0}
+}
+```
+
+### Frame Rendering
+
+Each node has its own canvas with:
+- Independent rendering context
+- Automatic sizing based on container
+- Serpentine pixel order support
+- Glow effects for bright pixels
+- Smooth animations
+
+## Benefits
+
+1. **Visual Overview** - See all nodes at once
+2. **Independent Control** - Each node can run different animations
+3. **Space Efficient** - Responsive grid maximizes screen usage
+4. **Scalable** - Works with 1-20+ nodes
+5. **Intuitive** - Click to select, visual feedback
+6. **Flexible** - Individual or broadcast mode
+
+## Backwards Compatibility
+
+- Old single-stream API still supported
+- Settings view unchanged
+- Existing presets work without modification
+- UDP discovery unchanged
+
+## File Changes Summary
+
+### New Files
+- `/public/scripts/node-canvas-grid.js` - New component
+
+### Modified Files
+- `/public/index.html` - Updated layout
+- `/public/styles/main.css` - New grid and floating control styles
+- `/public/scripts/preset-controls.js` - Per-node parameter tracking
+- `/public/scripts/ledlab-app.js` - Initialize new component
+- `/server/index.js` - Multi-node streaming support
+
+### Unchanged Files
+- All preset files (`/presets/*.js`)
+- `/server/udp-discovery.js`
+- `/public/scripts/framework.js`
+- `/public/scripts/theme-manager.js`
+- `/public/scripts/navigation.js`
+
+## Testing Recommendations
+
+1. Test with single node
+2. Test with multiple nodes (2-4)
+3. Test node selection and switching
+4. Test broadcast mode
+5. Test parameter independence
+6. Test starting/stopping individual streams
+7. Test responsive layout on different screen sizes
+8. Test node disconnection/reconnection
+
+## Future Enhancements
+
+- Drag to reorder nodes
+- Group nodes for collective control
+- Save/load multi-node scenes
+- Node status graphs
+- Performance metrics per node
+