save/load custom names working

index.html

@@ -45,7 +45,8 @@
     <input type="range" id="frameSlider" min="0" max="399" value="0" style="width: 80%">
   </div>
 
-
+<label for="filenameInput">Filename:</label>
+<input type="text" id="filenameInput" />
   <button id="saveAnimation">Save Animation</button>
 
   <div id="fileListWrapper">

script.js

@@ -72,6 +72,8 @@ window.onload = () => {
         loadButton.disabled = true;
         deleteButton.disabled = true;
 
+
+
         serial.requestFile(filename);
     });
 
@@ -215,7 +217,17 @@ window.onload = () => {
                         //handleLoadedFile(fileData);
                         break;
 
+                    case 0x06:  // CMD_MESSAGE
 
+                        console.log(`Message Recieved`);
+                        const decoder = new TextDecoder();
+                        console.log(payload);
+                        const stringPayload = decoder.decode(new Uint8Array(payload));
+                        console.log(stringPayload);
+                        document.getElementById('log').value += "MSG: " + stringPayload + `\n`;
+                        // 🔹 Do something with the file
+                        //handleLoadedFile(fileData);
+                        break;
                     // Add more cases as needed
                     default:
                         document.getElementById('log').value += `Unknown command ${command}\n`;
@@ -312,9 +324,27 @@ window.onload = () => {
         // 🔓 Unlock buttons
         loadButton.disabled = false;
         deleteButton.disabled = false;
+
+        document.getElementById("filenameInput").value = selectedFile.replace(/\.anim$/i, "");
+    }
+
+    function sanitizeFilename(input) {
+        // Remove non-alphanumeric characters
+        const stripped = input.replace(/[^a-zA-Z0-9]/g, "");
+
+        // If nothing remains, fallback to default
+        const safeName = stripped || "default";
+
+        // Add leading slash and .anim extension
+        return "/" + safeName + ".anim";
     }
 
     async function sendAnimationToESP32() {
+        const rawInput = document.getElementById("filenameInput").value;
+        const filename = sanitizeFilename(rawInput);
+        console.log("Sanitized filename:", filename);
+
+
         const frameCount = 500;
         const numChannels = 5;
         const frameRate = 50;
@@ -325,22 +355,25 @@ window.onload = () => {
         const keyframeCount = dialKeyframes.reduce((sum, channel) => {
             return sum + Object.keys(channel).length;
         }, 0);
-
-
-        ///const keyframeCount = dialKeyframes.length;
         const keyframeDataSize = keyframeCount * 5;
-        for (var i = 0; i < 5; i++) {
-            console.log(dialKeyframes[i]);
-        }
-        console.log(dialKeyframes);
-        console.log(keyframeCount);
 
-        const totalSize = headerSize + 2 + keyframeDataSize;
+        // 🔹 Filename encoding
-        console.log(totalSize);
+        const filenameBytes = new TextEncoder().encode(filename);
+        const filenameLength = filenameBytes.length;
+
+
+        // Total packet size
+        const totalSize = 2 + filenameLength + headerSize + 2 + keyframeDataSize;
+
         const buffer = new ArrayBuffer(totalSize);
         const view = new DataView(buffer);
         let offset = 0;
 
+        // 🔹 Filename block
+        view.setUint16(offset, filenameLength, true); offset += 2;
+        filenameBytes.forEach(byte => view.setUint8(offset++, byte));
+
+
         // 🔹 Header
         view.setUint8(offset++, "A".charCodeAt(0));
         view.setUint8(offset++, "N".charCodeAt(0));