add loading on the page and animation at start

hand_tracker_v2/main.py

@@ -7,9 +7,10 @@ from reachy_mini import ReachyMini, ReachyMiniApp
 from hand_tracker_v2.hand_tracker import HandTracker
 from scipy.spatial.transform import Rotation as R
 from hand_tracker_v2.utils import finger_orientation_deg, allow_multiturn
-from hand_tracker_v2.recorded_moves import RecordedMoves
+# from hand_tracker_v2.recorded_moves import RecordedMoves
 from fastapi.responses import StreamingResponse
 from pydantic import BaseModel
+from reachy_mini.motion.recorded_move import RecordedMove, RecordedMoves
 
 
 DEBUG = True
@@ -52,17 +53,20 @@ class HandTrackerV2(ReachyMiniApp):
         self.preferred_side = "Left"
         self.antenna_mode = "Same Movement"
 
-        # Recorded moves / sounds
-        self.recorded_moves = RecordedMoves(
-            "pollen-robotics/reachy-mini-emotions-library"
-        )
+        self.app_ready = False
+
         self.last_frame = None
 
         @self.settings_app.get("/video_feed")
         def video_feed():
             return StreamingResponse(self.frame_generator(),
                                      media_type="multipart/x-mixed-replace; boundary=frame")
-        
+    
+        @self.settings_app.get("/ready")
+        async def ready():
+            print("[READY ENDPOINT] called, app_ready =", self.app_ready)
+            return {"ready": self.app_ready}
+                
         class UIState(BaseModel):
             video: bool | None = None
             tracking: bool | None = None
@@ -208,6 +212,8 @@ class HandTrackerV2(ReachyMiniApp):
 
 
         while not stop_event.is_set():
+            t0 = time.time()
+
             self.hand_count_history.append(self.number_hands)
             if len(self.hand_count_history) > self.hand_count_buffer_size:
                 self.hand_count_history.pop(0)
@@ -222,7 +228,6 @@ class HandTrackerV2(ReachyMiniApp):
 
                     self.previous_number_hands = stable_hand_count
 
-            t0 = time.time()
             time_since_last_hand = time.time() - self.last_hand_seen
 
             if time_since_last_hand > self.idle_timeout or (not self.track_mode and not self.antenna_tracking):
@@ -310,15 +315,29 @@ class HandTrackerV2(ReachyMiniApp):
 
             time.sleep(max(0, (1.0 / FREQUENCY) - (time.time() - t0)))
 
+    def play_recorded_move(self, reachy_mini: ReachyMini, move_name: str):
+        move: RecordedMove = self.recorded_moves.get(move_name)
+        reachy_mini.play_move(move, initial_goto_duration=1.0)
+
+
 
     def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        self.recorded_moves = RecordedMoves(
+            "pollen-robotics/reachy-mini-emotions-library"
+        )
+        self.play_recorded_move(reachy_mini, "success2")
         reachy_mini.goto_target(np.eye(4), [0.0, 0.0], body_yaw=0.0, duration=1.0)
 
+
+        self.app_ready = True
+
         tracking_thread = threading.Thread(
             target=self.track, args=(reachy_mini, stop_event)
         )
         tracking_thread.start()
 
+
+
         while not stop_event.is_set():
             t0 = time.time()
             im = reachy_mini.media.get_frame()

hand_tracker_v2/static/index.html

@@ -30,7 +30,7 @@
                 Blue and green dots: used to calculate the index finger angle to determine antenna orientation.
             </p>
 
-            <img id="video-feed" src="/video_feed" class="video-display">
+            <img id="video-feed" src="" class="video-display">
         </section>
 
         <!-- Two side cards -->
@@ -86,8 +86,15 @@
 
         </div>
     </main>
-
+    <div id="loading-overlay">
+        <div class="loader">
+            <div class="spinner"></div>
+            <p>Starting Hand Tracking…</p>
+        </div>
+    </div>
     <script src="/static/main.js"></script>
 </body>
 
+
+
 </html>

hand_tracker_v2/static/main.js

@@ -5,15 +5,12 @@ const toggleAntenna = document.getElementById("toggle-antennas");
 
 
 
-// Sauvegarder l'URL du flux
 const videoSrc = "/video_feed";
 
 toggleVideo.addEventListener("change", () => {
     if (toggleVideo.checked) {
-        // reconnecter le flux
         videoFeed.src = videoSrc;
     } else {
-        // couper le flux
         videoFeed.src = "";
     }
 });
@@ -33,19 +30,35 @@ async function updateToggleState() {
             })
         });
         const data = await resp.json();
-        if (data.status === "ok") {
-            document.getElementById("status").textContent =
-                `✔ Settings updated`;
-        } else {
-            document.getElementById("status").textContent =
-                `✘ Failed to update settings`;
-        }
+
     } catch (e) {
         console.error(e);
         document.getElementById("status").textContent = "Server error";
     }
 }
 
+async function waitForAppReady() {
+    while (true) {
+        try {
+            const resp = await fetch("/ready");
+            console.log("ready status:", resp.status);
+            const data = await resp.json();
+            console.log("ready payload:", data);
+            if (data.ready) {
+                document.getElementById("loading-overlay").style.display = "none";
+                return;
+            }
+        } catch (e) {
+            console.error("ready fetch error", e);
+        }
+        await new Promise(r => setTimeout(r, 500));
+    }
+}
+
+
+waitForAppReady();
+
+
 // Ajouter un event listener à chaque toggle
 [toggleVideo, toggleTracking, toggleAntenna].forEach(toggle => {
     toggle.addEventListener("change", updateToggleState);

hand_tracker_v2/static/style.css

@@ -1,39 +1,49 @@
-/* General Layout */
+
 body {
     margin: 0;
     padding: 0;
-    background: #1f2937;
+    min-height: 100vh;
     font-family: "Inter", sans-serif;
     color: #222;
+
+    /* Reachy-style dark gradient */
+    background:
+        radial-gradient(1200px 600px at 50% -200px, #374151 0%, transparent 60%),
+        linear-gradient(180deg, #0f172a 0%, #1f2937 100%);
 }
 
-/* Header */
 .header {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 16px;
-    padding: 17px 0; /* reduced height */
+    padding: 14px 0;
     color: white;
 }
 
+.header h1 {
+    font-size: 30px;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+}
+
 .header .logo {
-    height: 50px; /* slightly smaller */
+    height: 48px;
 }
 
-/* Main container */
 .container {
     max-width: 1100px;
     margin: auto;
     padding: 20px;
 }
 
-/* Cards */
 .card {
     background: white;
     padding: 22px;
-    border-radius: 14px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    border-radius: 16px;
+    box-shadow:
+        0 10px 25px rgba(0, 0, 0, 0.15),
+        0 2px 6px rgba(0, 0, 0, 0.08);
     margin-bottom: 24px;
 }
 
@@ -49,23 +59,22 @@ body {
 .card h3 {
     margin: 0;
     font-size: 18px;
+    font-weight: 600;
 }
 
-/* Video Feed */
 .video-display {
     width: 100%;
-    border-radius: 12px;
+    border-radius: 14px;
     margin-top: 12px;
+    background: #000;
 }
 
-/* Card header with toggle */
 .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-/* Switch toggle */
 .toggle {
     position: relative;
     width: 46px;
@@ -81,10 +90,10 @@ body {
 .slider {
     position: absolute;
     cursor: pointer;
-    background: #ccc;
+    background: #d1d5db;
     border-radius: 24px;
     inset: 0;
-    transition: 0.3s;
+    transition: background 0.25s ease;
 }
 
 .slider::before {
@@ -96,7 +105,7 @@ body {
     bottom: 3px;
     background: white;
     border-radius: 50%;
-    transition: 0.3s;
+    transition: transform 0.25s ease;
 }
 
 input:checked + .slider {
@@ -107,25 +116,70 @@ input:checked + .slider::before {
     transform: translateX(22px);
 }
 
-/* Options */
 .option {
     margin-top: 12px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     background: #f3f4f6;
     padding: 10px 14px;
-    border-radius: 10px;
+    border-radius: 12px;
 }
 
 select {
     border: none;
     background: transparent;
     font-size: 14px;
+    outline: none;
+    cursor: pointer;
 }
 
-/* Description text */
 .desc {
     margin: 10px 0 14px;
     font-size: 14px;
-    color: #444;
+    color: #4b5563;
+    line-height: 1.45;
+}
+
+#loading-overlay {
+    position: fixed;
+    inset: 0;
+
+    /* semi-transparent to see UI behind */
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(6px);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+/* Loader content */
+.loader {
+    text-align: center;
+    color: white;
+}
+
+.loader p {
+    margin-top: 16px;
+    font-size: 16px;
+    opacity: 0.9;
+    letter-spacing: 0.3px;
+}
+
+.spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid rgba(255, 255, 255, 0.2);
+    border-top: 4px solid #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: auto;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }