feat: use gateway

README.md

@@ -23,7 +23,8 @@ LEDLab is a tool for streaming animations to LED matrices connected to SPORE nod
 
 The Node.js server provides the backend for SPORE LEDLab:
 
-- **UDP Discovery**: Listens on port 4210 to automatically discover SPORE nodes
+- **Gateway Integration**: Queries spore-gateway for node discovery (requires spore-gateway to be running)
+- **UDP Frame Streaming**: Sends animation frames to SPORE nodes via UDP on port 4210
 - **WebSocket API**: Real-time bidirectional communication with the web UI
 - **Preset Management**: Manages animation presets with configurable parameters
 - **Multi-Node Streaming**: Streams different presets to individual nodes simultaneously
@@ -50,6 +51,7 @@ Web UI (Browser) <--WebSocket--> Server <--UDP--> SPORE Nodes
                               Preset Engine
                                    |
                           Frame Generation (60fps)
+                          Gateway API (Discovery)
 ```
 
 ## Build
@@ -58,6 +60,7 @@ Web UI (Browser) <--WebSocket--> Server <--UDP--> SPORE Nodes
 
 - Node.js (v14 or higher)
 - npm (v6 or higher)
+- spore-gateway must be running on port 3001
 
 ### Installation
 
@@ -83,7 +86,8 @@ This will install:
 spore-ledlab/
 ├── server/              # Backend server
 │   ├── index.js        # Main server & WebSocket handling
-│   └── udp-discovery.js # UDP node discovery
+│   ├── gateway-client.js # Gateway client for node discovery
+│   └── udp-discovery.js # UDP sender for frame streaming
 ├── presets/            # Animation preset implementations
 │   ├── preset-registry.js
 │   ├── base-preset.js
@@ -117,17 +121,18 @@ npm run dev
 ```
 
 The server will:
-- Start the HTTP server on port 3000
+- Start the HTTP server on port 8080 (default)
 - Initialize WebSocket server
-- Begin UDP discovery on port 4210
-- Serve the web UI at http://localhost:3000
+- Connect to spore-gateway for node discovery
+- Initialize UDP sender for frame streaming
+- Serve the web UI at http://localhost:8080
 
 ### Access the Web UI
 
 Open your browser and navigate to:
 
 ```
-http://localhost:3000
+http://localhost:8080
 ```
 
 ### Configure SPORE Nodes
@@ -136,8 +141,30 @@ Ensure your SPORE nodes are:
 1. Connected to the same network as the LEDLab server
 2. Running firmware with PixelStreamController support
 3. Listening on UDP port 4210
+4. Discovered by spore-gateway
+5. Labeled with `app: pixelstream` (LEDLab only displays nodes with this label)
 
-The nodes will automatically appear in the LEDLab grid view once discovered.
+The nodes will automatically appear in the LEDLab grid view once they are discovered by spore-gateway and have the `app: pixelstream` label.
+
+### Node Labeling
+
+To display nodes in LEDLab, you must set the `app: pixelstream` label on your SPORE nodes. This can be done via the spore-gateway API or from the SPORE node itself.
+
+**From SPORE Node:**
+Nodes should advertise their labels via the UDP heartbeat. The PixelStreamController firmware automatically sets the `app: pixelstream` label.
+
+**Manual via Gateway:**
+You can also set labels manually using the spore-gateway API or spore-ui interface.
+
+### Disabling Filtering
+
+To display all nodes without filtering, set the environment variable:
+
+```bash
+FILTER_APP_LABEL= npm start
+```
+
+Or leave it empty to show all discovered nodes.
 
 ## Usage
 
@@ -190,16 +217,26 @@ In the Settings view:
 
 ### Server Configuration
 
-Edit `server/index.js` to modify:
+Edit `server/index.js` or use environment variables:
 
 ```javascript
-const PORT = 3000;           // HTTP/WebSocket port
-const UDP_PORT = 4210;       // UDP discovery port
-const DEFAULT_FPS = 20;      // Default frame rate
-const MATRIX_WIDTH = 16;     // Default matrix width
-const MATRIX_HEIGHT = 16;    // Default matrix height
+const PORT = 8080;                    // HTTP/WebSocket port
+const UDP_PORT = 4210;               // UDP frame streaming port
+const GATEWAY_URL = 'http://localhost:3001'; // spore-gateway URL
+const FILTER_APP_LABEL = 'pixelstream'; // Filter nodes by app label
+const DEFAULT_FPS = 20;              // Default frame rate
+const MATRIX_WIDTH = 16;             // Default matrix width
+const MATRIX_HEIGHT = 16;            // Default matrix height
 ```
 
+Environment variables:
+- `PORT` - HTTP server port (default: 8080)
+- `UDP_PORT` - UDP port for frame streaming (default: 4210)
+- `GATEWAY_URL` - spore-gateway URL (default: http://localhost:3001)
+- `FILTER_APP_LABEL` - Filter nodes by app label (default: pixelstream, set to empty string to disable filtering)
+- `MATRIX_WIDTH` - Default matrix width (default: 16)
+- `MATRIX_HEIGHT` - Default matrix height (default: 16)
+
 ### Adding Custom Presets
 
 1. Create a new preset file in `presets/`:
@@ -323,14 +360,17 @@ See `presets/examples/README.md` for detailed documentation.
 
 ### Nodes Not Appearing
 
+- Ensure spore-gateway is running on port 3001
 - Verify nodes are on the same network
 - Check firewall settings allow UDP port 4210
 - Ensure nodes are running PixelStreamController firmware
+- Verify spore-gateway has discovered the nodes
+- **IMPORTANT**: Nodes must have the `app: pixelstream` label set. LEDLab only displays nodes with this label. Check node labels in spore-gateway.
 
 ### WebSocket Connection Issues
 
 - Check browser console for errors
-- Verify server is running on port 3000
+- Verify server is running on port 8080 (default)
 - Try refreshing the browser
 
 ### Animation Not Streaming
@@ -351,7 +391,8 @@ See `presets/examples/README.md` for detailed documentation.
 - Node.js
 - Express.js (HTTP server)
 - ws (WebSocket server)
-- UDP (Node discovery and frame streaming)
+- HTTP client (for querying spore-gateway)
+- UDP (Frame streaming only)
 
 **Frontend:**
 - Vanilla JavaScript (ES6+)