added save/send button

index.html

@@ -75,6 +75,7 @@
     <br>
     <input type="text" id="input" placeholder="Type message here">
     <button id="send">Send</button>
+    <button id="saveAnimation">Save Animation</button>
 
     <script>
         let isInterpolating = false;
@@ -222,6 +223,56 @@
             ctx.lineWidth = 2;
             ctx.stroke();
         }
+        document.getElementById('saveAnimation').onclick = async () => {
+            if (!writer) {
+                alert("Serial not connected.");
+                return;
+            }
+
+            const totalFrames = 400;
+            const buffer = new ArrayBuffer(totalFrames * 5 * 2); // 5 motors × 2 bytes
+            const view = new DataView(buffer);
+
+            for (let frame = 0; frame < totalFrames; frame++) {
+                for (let ch = 0; ch < 5; ch++) {
+                    const keyframes = dialKeyframes[ch];
+                    let prevFrame = null, nextFrame = null;
+
+                    for (let f = frame; f >= 0; f--) {
+                        if (keyframes[f] !== undefined) {
+                            prevFrame = f;
+                            break;
+                        }
+                    }
+                    for (let f = frame; f <= totalFrames - 1; f++) {
+                        if (keyframes[f] !== undefined) {
+                            nextFrame = f;
+                            break;
+                        }
+                    }
+
+                    let value;
+                    if (prevFrame !== null && nextFrame !== null && prevFrame !== nextFrame) {
+                        const prevVal = keyframes[prevFrame];
+                        const nextVal = keyframes[nextFrame];
+                        const t = (frame - prevFrame) / (nextFrame - prevFrame);
+                        value = Math.round(prevVal + (nextVal - prevVal) * t);
+                    } else if (prevFrame !== null) {
+                        value = keyframes[prevFrame];
+                    } else if (nextFrame !== null) {
+                        value = keyframes[nextFrame];
+                    } else {
+                        value = 512;
+                    }
+
+                    view.setUint16((frame * 5 + ch) * 2, value, true); // little-endian
+                }
+            }
+            console.log(buffer);
+            await writer.write(buffer);
+            alert("Animation sent over serial.");
+        };
+
 
     </script>
 </body>