keyframe data from esp32 now loads correctly

script.js

@@ -14,7 +14,7 @@ window.onload = () => {
     const frameDisplay = document.getElementById('frameDisplay');
     const canvas = document.getElementById('timelineCanvas');
     const ctx = canvas.getContext('2d');
-    const totalFrames = 400;
+    const totalFrames = 500;
 
 
 
@@ -142,16 +142,31 @@ window.onload = () => {
             frames.push(positions);
         }
 
-        console.log(frames);
+        // Move offset to end of reserved 10 seconds of animation, to keyframe data
+        offset = 5016;
+
+        const keyFrameCount = view.getUint16(offset, true); offset += 2;
+        let keyframes = [];
+        for (var i = 0; i < keyFrameCount; i++) {
+            let motorID = view.getUint8(offset); offset += 1;
+            let frame = view.getUint16(offset, true); offset += 2;
+            let position = view.getUint16(offset, true); offset += 2;
+            keyframes.push({ motorID, frame, position });
+        }
+
+        console.log(keyFrameCount);
+        console.log(keyframes);
 
         // Populate from parsed animation frames
-        frames.forEach((positions, frameIndex) => {
-            positions.forEach((val, motorId) => {
-                dialKeyframes[motorId][frameIndex] = val;
-            });
+        keyframes.forEach(({ motorID, frame, position }) => {
+            if (!dialKeyframes[motorID]) {
+                dialKeyframes[motorID] = []; // Initialize if missing
+            }
+            dialKeyframes[motorID][frame] = position;
         });
 
 
+
         return {
             header: { magic, version, frameCount, frameRate },
             frames