Update animation UI

Author: Matteo-it

examples/led-matrix-painter/assets/app.js

@@ -7,6 +7,7 @@ const gridEl = document.getElementById('grid');
 const vectorEl = document.getElementById('vector');
 const exportBtn = document.getElementById('export');
 const playAnimationBtn = document.getElementById('play-animation');
+const stopAnimationBtn = document.getElementById('stop-animation');
 const clearBtn = document.getElementById('clear');
 const invertBtn = document.getElementById('invert');
 const rotate180Btn = document.getElementById('rotate180');
@@ -257,8 +258,6 @@ async function initEditor(){
 
     if (data && data.ok && data.frame) {
       const frame = data.frame;
-      loadedFrame = frame;
-      loadedFrameId = frame.id;
 
       // Populate grid
       setGridFromRows(frame.rows || []);
@@ -314,14 +313,36 @@ async function exportH(){
 makeGrid();
 if (exportBtn) exportBtn.addEventListener('click', exportH); else console.warn('[ui] export button not found');
 
+let animationTimeout = null;
+
+function displayFrame(frame) {
+  if (!frame) return;
+
+  // Populate grid
+  setGridFromRows(frame.rows || []);
+  
+  // Populate name input
+  if (frameTitle) frameTitle.textContent = frame.name || `Frame ${frame.id}`;
+
+  // Mark as loaded in sidebar
+  markLoaded(frame);
+}
+
 async function playAnimation() {
   if (!playAnimationBtn) return;
 
+  // Stop any previous animation loop
+  if (animationTimeout) {
+    clearTimeout(animationTimeout);
+    animationTimeout = null;
+  }
+
   try {
     playAnimationBtn.disabled = true;
     const frameIds = sessionFrames.map(f => f.id);
     if (frameIds.length === 0) {
       showError('No frames to play');
+      playAnimationBtn.disabled = false; // re-enable button
       return;
     }
 
@@ -340,20 +361,51 @@ async function playAnimation() {
 
     if (data.error) {
       showError('Error: ' + data.error);
+      playAnimationBtn.disabled = false;
     } else {
       console.debug('[ui] Animation played successfully, frames=', data.frames_played);
       showVectorText('Animation played: ' + data.frames_played + ' frames');
+
+      // Start frontend animation simulation
+      let currentFrameIndex = 0;
+      const animateNextFrame = () => {
+        if (currentFrameIndex >= sessionFrames.length) {
+          // Animation finished
+          playAnimationBtn.disabled = false;
+          animationTimeout = null;
+          return;
+        }
+
+        const frame = sessionFrames[currentFrameIndex];
+        displayFrame(frame);
+        
+        const duration = frame.duration_ms || 1000;
+        currentFrameIndex++;
+        
+        animationTimeout = setTimeout(animateNextFrame, duration);
+      };
+      animateNextFrame();
     }
 
   } catch (err) {
     console.error('[ui] playAnimation failed', err);
-  } finally {
-    playAnimationBtn.disabled = false;
+    playAnimationBtn.disabled = false; // re-enable on error
   }
 }
 
 if (playAnimationBtn) playAnimationBtn.addEventListener('click', playAnimation); else console.warn('[ui] play animation button not found');
 
+if (stopAnimationBtn) {
+  stopAnimationBtn.addEventListener('click', () => {
+    if (animationTimeout) {
+      clearTimeout(animationTimeout);
+      animationTimeout = null;
+      playAnimationBtn.disabled = false;
+      showVectorText('Animation stopped');
+    }
+  });
+}
+
 // Save frame button removed - auto-persist replaces it
 const animControls = document.getElementById('anim-controls');
 const animNameInput = document.getElementById('anim-name');
@@ -589,8 +641,6 @@ async function loadFrameIntoEditor(id){
 
     if(data && data.ok && data.frame){
       const f = data.frame;
-      loadedFrame = f;
-      loadedFrameId = f.id;
 
       // Populate grid
       setGridFromRows(f.rows || []);
@@ -661,8 +711,6 @@ async function handleNewFrameClick() {
     }, 'json', 'create new frame');
 
     if (data && data.ok && data.frame) {
-      loadedFrame = data.frame;
-      loadedFrameId = data.frame.id;
       // Set name to the backend-assigned name (Frame {id})
       if(frameTitle) frameTitle.textContent = data.frame.name || `Frame ${data.frame.id}`;
 

examples/led-matrix-painter/assets/style.css

@@ -464,6 +464,10 @@ input:checked + .slider:before {
   background: #008184;
 }
 
+#play-animation:disabled {
+  background: #006567; /* Darken background when animation is running */
+}
+
 #stop-animation {
   background: rgba(0, 129, 132, 0.2); /* #008184 with 20% alpha */
 }

examples/led-matrix-painter/python/main.py

@@ -7,6 +7,7 @@
 from app_frame import AppFrame  # user module defining AppFrame
 import store  # user module for DB operations
 import logging
+import threading
 
 BRIGHTNESS_LEVELS = 8  # must match the frontend slider range (0..BRIGHTNESS_LEVELS-1)
 
@@ -272,6 +273,13 @@ def export_frames(payload: dict = None):
         return {'header': header}
 
 
+def play_animation_thread(animation_bytes):
+    try:
+        Bridge.call("play_animation", bytes(animation_bytes))
+        logger.info("Animation sent to board successfully")
+    except Exception as e:
+        logger.warning(f"Failed to send animation to board: {e}")
+
 def play_animation(payload: dict):
     """Play animation sequence on the board.
     
@@ -314,15 +322,11 @@ def play_animation(payload: dict):
 
     logger.debug(f"Animation data prepared: {len(animation_bytes)} bytes ({len(animation_bytes)//20} frames)")
 
-    # Send to board via Bridge as bytes (not list)
-    # Bridge expects bytes object for std::vector<uint8_t>
-    try:
-        Bridge.call("play_animation", bytes(animation_bytes))
-        logger.info("Animation sent to board successfully")
-        return {'ok': True, 'frames_played': len(frames)}
-    except Exception as e:
-        logger.warning(f"Failed to send animation to board: {e}")
-        return {'error': str(e)}
+    # Run Bridge.call in a separate thread
+    thread = threading.Thread(target=play_animation_thread, args=(animation_bytes,))
+    thread.start()
+
+    return {'ok': True, 'frames_played': len(frames)} # Return immediately
 
 
 ui.expose_api('POST', '/update_board', update_board)