Update app.py

app.py

@@ -305,25 +305,29 @@ def index():
             ws.onopen = () => document.getElementById('wsStatus').innerHTML = '🟢 Connected';
             ws.onclose = () => document.getElementById('wsStatus').innerHTML = '🔴 Disconnected';
             
-            // Mouse tracking - send via WebSocket
-            let mouseTimer;
-            img.addEventListener('mousemove', (e) => {
-                const rect = img.getBoundingClientRect();
-                const x = Math.round((e.clientX - rect.left) * 640 / rect.width);
-                const y = Math.round((e.clientY - rect.top) * 480 / rect.height);
-                
-                document.getElementById('mouseCoords').innerHTML = `X: ${x}, Y: ${y}`;
-                
-                // Throttle to 30fps
-                if (mouseTimer) clearTimeout(mouseTimer);
-                mouseTimer = setTimeout(() => {
-                    ws.send(JSON.stringify({
-                        type: 'mouse',
-                        x: x,
-                        y: y
-                    }));
-                }, 33);
-            });
+            // Mouse tracking with proper throttling
+let lastMouseSend = 0;
+const MOUSE_THROTTLE_MS = 33; // 30fps (change to 50 for 20fps)
+
+img.addEventListener('mousemove', (e) => {
+    const rect = img.getBoundingClientRect();
+    const x = Math.round((e.clientX - rect.left) * 640 / rect.width);
+    const y = Math.round((e.clientY - rect.top) * 480 / rect.height);
+    
+    // Update display immediately (no lag)
+    document.getElementById('mouseCoords').innerHTML = `X: ${x}, Y: ${y}`;
+    
+    // Throttle sends to 30fps
+    const now = Date.now();
+    if (now - lastMouseSend >= MOUSE_THROTTLE_MS) {
+        ws.send(JSON.stringify({
+            type: 'mouse',
+            x: x,
+            y: y
+        }));
+        lastMouseSend = now;
+    }
+});
             
             // Click handling - send via WebSocket
             img.addEventListener('click', (e) => {