can play animation files from control panel, animation now via keyframe, not individual frames

index.html

@@ -49,11 +49,13 @@
     <label for="filenameInput">Filename:</label>
     <input type="text" id="filenameInput" />
     <button id="saveAnimation">Save Animation</button>
+    <button id="clearAnimation">Clear</button>
 
     <div id="fileListWrapper">
       <div id="fileListHeader">
         <span>Animations</span>
         <div id="fileActions">
+          <button id="playFile" >Play</button>
           <button id="loadFile" disabled>Load</button>
           <button id="deleteFile" disabled>Delete</button>
         </div>

script.js

@@ -7,6 +7,7 @@ window.onload = () => {
     const disconnectBtn = document.getElementById('disconnect');
     const connectBtn = document.getElementById('connect');
     const syncCheckbox = document.getElementById("syncCheckbox");
+    const clearBtn = document.getElementById("clearAnimation");
 
     // Limits rate of move commands sent while sliding timeslider
     let lastSyncTime = 0; // global or outer-scope variable
@@ -15,7 +16,6 @@ window.onload = () => {
     let isInterpolating = false;
     let currentFrame = 0;
     let dialKeyframes = Array.from({ length: 5 }, () => ({}));
-    let currentAnimation = null;
 
     let selectedDial = null;
     let draggingKeyframe = null; // { dialIndex, originalFrame }
@@ -35,6 +35,7 @@ window.onload = () => {
 
     // Animation File List
     const fileListElement = document.getElementById('fileList');
+    const playButton = document.getElementById('playFile');
     const loadButton = document.getElementById('loadFile');
     const deleteButton = document.getElementById('deleteFile');
 
@@ -67,6 +68,30 @@ window.onload = () => {
         fileListElement.appendChild(li);
     }
 
+    playButton.addEventListener('click', () => {
+        if (!selectedFile) return;
+
+        const filename = selectedFile;
+        console.log("Sanitized filename for delete:", filename);
+
+        const filenameBytes = new TextEncoder().encode(filename);
+        const filenameLength = filenameBytes.length;
+
+        // Total size: 2 bytes for length + filename bytes
+        const buffer = new ArrayBuffer(2 + filenameLength);
+        const view = new DataView(buffer);
+        let offset = 0;
+
+        // 🔹 Filename block
+        view.setUint16(offset, filenameLength, true); offset += 2;
+        filenameBytes.forEach(byte => view.setUint8(offset++, byte));
+
+        const payload = new Uint8Array(buffer);
+        //serial.deleteFile(payload); // CMD_DELETE_FILE
+
+        serial.requestPlayFile(payload);
+    });
+
     loadButton.addEventListener('click', () => {
         if (!selectedFile || loadButton.disabled) return;
 
@@ -259,6 +284,7 @@ window.onload = () => {
                         document.getElementById('log').value += `File deleted\n`;
                         // 🔹 Do something with the file
                         //handleLoadedFile(fileData);
+                        serial.requestFileList();
                         break;
                     case 0x05:  // CMD_SAVE_FILE
 
@@ -267,6 +293,7 @@ window.onload = () => {
                         document.getElementById('log').value += `Saved file Response Recieved\n`;
                         // 🔹 Do something with the file
                         //handleLoadedFile(fileData);
+                        serial.requestFileList();
                         break;
 
                     case 0x06:  // CMD_MESSAGE
@@ -288,6 +315,11 @@ window.onload = () => {
                         // 🔹 Do something with the file
                         //handleLoadedFile(fileData);
                         break;
+
+                    case 0x08: // CMD_PLAY_FILE
+                        console.log(`Anim file played`);
+                        console.log(new Uint8Array(payload));
+                        document.getElementById('log').value += `Anim file played\n`;
                     // Add more cases as needed
                     default:
                         document.getElementById('log').value += `Unknown command ${command}\n`;
@@ -386,6 +418,8 @@ window.onload = () => {
         deleteButton.disabled = false;
 
         document.getElementById("filenameInput").value = selectedFile.replace(/\.anim$/i, "");
+
+        drawTimelineMarkers();
     }
 
     function sanitizeFilename(input) {
@@ -512,6 +546,12 @@ window.onload = () => {
     });
 
 
+    clearBtn.addEventListener('click', () => {
+        currentFrame = 0;
+        dialKeyframes = Array.from({ length: 5 }, () => ({}));
+        drawTimelineMarkers();
+    });
+
 
     document.getElementById('send').onclick = async () => {
         const text = document.getElementById('input').value + '\n';

serial.js

@@ -10,6 +10,7 @@ const CMD_LOAD_FILE = 0x03;
 const CMD_SAVE_FILE = 0x05;
 const CMD_DELETE_FILE = 0x04;
 const CMD_SET_POSITION = 0x07;
+const CMD_PLAY_FILE = 0x08;
 
 export class SerialManager {
     constructor() {
@@ -58,6 +59,12 @@ export class SerialManager {
         await this.send(CMD_LOAD_FILE, payload); // CMD_LOAD_FILE
     }
 
+    async requestPlayFile(payload){
+        console.log("Playing File: " + "filename");
+        await this.send(CMD_PLAY_FILE, payload);
+
+    }
+
     async saveFile(payload) {
         console.log("Saving File: " + "filename");
         await this.send(CMD_SAVE_FILE, payload);

todo.md

@@ -1,3 +1,2 @@
-Add play animation command
 play combined animations
 play combined animations with masks