feat: improve UI

server/index.js

@@ -15,6 +15,7 @@ class LEDLabServer {
     this.udpPort = options.udpPort || 4210;
     this.matrixWidth = options.matrixWidth || 16;
     this.matrixHeight = options.matrixHeight || 16;
+    this.fps = options.fps || 20;
 
     this.app = express();
     this.server = http.createServer(this.app);
@@ -56,10 +57,11 @@ class LEDLabServer {
     this.app.get('/api/status', (req, res) => {
       res.json({
         streaming: this.currentPreset !== null,
-        currentPreset: this.currentPreset ? this.currentPreset.getMetadata().name : null,
+        currentPreset: this.currentPresetName || null,
         matrixSize: { width: this.matrixWidth, height: this.matrixHeight },
         nodeCount: this.udpDiscovery.getNodeCount(),
         currentTarget: this.currentTarget,
+        fps: this.fps,
       });
     });
 
@@ -116,11 +118,12 @@ class LEDLabServer {
       // Send current status to new client
       const currentState = {
         streaming: this.currentPreset !== null,
-        currentPreset: this.currentPreset ? this.currentPreset.getMetadata().name : null,
+        currentPreset: this.currentPresetName || null,
         matrixSize: { width: this.matrixWidth, height: this.matrixHeight },
         nodes: this.udpDiscovery.getNodes(),
         presetParameters: this.currentPreset ? this.currentPreset.getParameters() : null,
         currentTarget: this.currentTarget,
+        fps: this.fps,
       };
 
       this.sendToClient(ws, {
@@ -164,6 +167,10 @@ class LEDLabServer {
         this.broadcastToAllNodes(data.message);
         break;
 
+      case 'updateFrameRate':
+        this.updateFrameRate(data.fps);
+        break;
+
       default:
         console.warn('Unknown WebSocket message type:', data.type);
     }
@@ -211,9 +218,10 @@ class LEDLabServer {
       console.log(`Started preset: ${presetName} (${width}x${height})`);
 
       // Start streaming interval
+      const intervalMs = Math.floor(1000 / this.fps);
       this.streamingInterval = setInterval(() => {
         this.streamFrame();
-      }, 50); // 20 FPS
+      }, intervalMs);
 
       // Notify clients
       this.broadcastToClients({
@@ -275,8 +283,8 @@ class LEDLabServer {
         this.saveCurrentConfiguration(this.currentTarget);
       }
 
-      // Also send updated state to keep all clients in sync
-      this.broadcastCurrentState();
+      // Don't broadcast full state on every parameter change to avoid UI flickering
+      // State is already updated via presetParameterUpdated event
     }
   }
 
@@ -335,11 +343,12 @@ class LEDLabServer {
   broadcastCurrentState() {
     const currentState = {
       streaming: this.currentPreset !== null,
-      currentPreset: this.currentPreset ? this.currentPreset.getMetadata().name : null,
+      currentPreset: this.currentPresetName || null,
       matrixSize: { width: this.matrixWidth, height: this.matrixHeight },
       nodes: this.udpDiscovery.getNodes(),
       presetParameters: this.currentPreset ? this.currentPreset.getParameters() : null,
       currentTarget: this.currentTarget,
+      fps: this.fps,
     };
 
     this.broadcastToClients({
@@ -348,6 +357,31 @@ class LEDLabServer {
     });
   }
 
+  updateFrameRate(fps) {
+    if (fps < 1 || fps > 60) {
+      console.warn('Invalid FPS value:', fps);
+      return;
+    }
+
+    this.fps = fps;
+    console.log(`Frame rate updated to ${fps} FPS`);
+
+    // If streaming is active, restart the interval with new frame rate
+    if (this.currentPreset && this.streamingInterval) {
+      clearInterval(this.streamingInterval);
+      const intervalMs = Math.floor(1000 / this.fps);
+      this.streamingInterval = setInterval(() => {
+        this.streamFrame();
+      }, intervalMs);
+    }
+
+    // Notify clients
+    this.broadcastToClients({
+      type: 'frameRateUpdated',
+      fps: this.fps
+    });
+  }
+
   // Node selection and configuration management
   selectNode(nodeIp) {
     this.currentTarget = nodeIp;