From 92cf94c02b5486f76ad8f0823b12f734aeae29f9 Mon Sep 17 00:00:00 2001
From: Jake <realrobotshk@gmail.com>
Date: Sat, 27 Sep 2025 18:52:11 +0800
Subject: [PATCH] has 5 motors, time slider, can insert keyframes but not
 remove or move

---
 index.html | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 229 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..40e885b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>ESP32 Animation Creator</title>
+    <script src="https://unpkg.com/nexusui"></script>
+    <style>
+        body {
+            font-family: sans-serif;
+            text-align: center;
+        }
+
+        .dial-container {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            margin: 20px 0;
+        }
+
+        .dial {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        textarea {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <h2>ESP32 Animation Creator</h2>
+    <button id="connect">Connect</button>
+    <button id="sendFrame">Send Frame</button>
+
+    <div class="dial-container">
+        <div class="dial">
+            <label>Motor 1</label>
+            <div id="dial0"></div>
+            <span id="value0">512</span>
+        </div>
+        <div class="dial">
+            <label>Motor 2</label>
+            <div id="dial1"></div>
+            <span id="value1">512</span>
+        </div>
+        <div class="dial">
+            <label>Motor 3</label>
+            <div id="dial2"></div>
+            <span id="value2">512</span>
+        </div>
+        <div class="dial">
+            <label>Motor 4</label>
+            <div id="dial3"></div>
+            <span id="value3">512</span>
+        </div>
+        <div class="dial">
+            <label>Motor 5</label>
+            <div id="dial4"></div>
+            <span id="value4">512</span>
+        </div>
+    </div>
+
+    <canvas id="timelineCanvas" width="800" height="30" style="margin-bottom: 5px;"></canvas>
+
+
+    <div>
+        <label>Frame: <span id="frameDisplay">0</span></label><br>
+        <input type="range" id="frameSlider" min="0" max="399" value="0" style="width: 80%">
+    </div>
+
+    <textarea id="log" rows="10" cols="60" readonly></textarea>
+    <br>
+    <input type="text" id="input" placeholder="Type message here">
+    <button id="send">Send</button>
+
+    <script>
+        let isInterpolating = false;
+
+        let currentFrame = 0;
+        let dialKeyframes = Array.from({ length: 5 }, () => ({}));
+
+
+        const frameSlider = document.getElementById('frameSlider');
+        const frameDisplay = document.getElementById('frameDisplay');
+
+        frameSlider.oninput = () => {
+            currentFrame = parseInt(frameSlider.value);
+            frameDisplay.textContent = currentFrame;
+
+            isInterpolating = true;
+
+            for (let ch = 0; ch < 5; ch++) {
+                const keyframes = dialKeyframes[ch];
+                let prevFrame = null, nextFrame = null;
+
+                for (let f = currentFrame; f >= 0; f--) {
+                    if (keyframes[f] !== undefined) {
+                        prevFrame = f;
+                        break;
+                    }
+                }
+                for (let f = currentFrame; f <= 399; 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 = (currentFrame - 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;
+                }
+
+                dials[ch].value = value;
+                document.getElementById(`value${ch}`).textContent = value;
+            }
+
+            drawTimelineMarkers();
+            isInterpolating = false;
+        };
+
+
+
+        let port, reader, writer;
+        const dials = [];
+
+        // Initialize rotary dials
+        for (let i = 0; i < 5; i++) {
+            dials[i] = new Nexus.Dial(`#dial${i}`, {
+                size: [80, 80],
+                min: 0,
+                max: 1023,
+                value: 512
+            });
+
+            // Update display when dial changes
+            dials[i].on('change', (v) => {
+                if (isInterpolating) return;
+
+                const val = Math.round(v);
+                document.getElementById(`value${i}`).textContent = val;
+
+                dialKeyframes[i][currentFrame] = val;
+                drawTimelineMarkers();
+            });
+
+
+        }
+
+        // Connect to ESP32
+        document.getElementById('connect').onclick = async () => {
+            port = await navigator.serial.requestPort();
+            await port.open({ baudRate: 115200 });
+
+            writer = port.writable.getWriter();
+            reader = port.readable.getReader();
+
+            const decoder = new TextDecoder();
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) break;
+                document.getElementById('log').value += decoder.decode(value);
+            }
+        };
+
+        // Send typed message
+        document.getElementById('send').onclick = async () => {
+            const text = document.getElementById('input').value + '\n';
+            const encoder = new TextEncoder();
+            await writer.write(encoder.encode(text));
+            document.getElementById('input').value = '';
+        };
+
+        // Send current dial positions as a frame
+        document.getElementById('sendFrame').onclick = async () => {
+            const positions = dials.map(d => Math.round(d.value));
+            const message = `FRAME ${positions.join(',')}\n`;
+            const encoder = new TextEncoder();
+            await writer.write(encoder.encode(message));
+        };
+
+        const canvas = document.getElementById('timelineCanvas');
+        const ctx = canvas.getContext('2d');
+        const totalFrames = 400;
+
+        function drawTimelineMarkers() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const width = canvas.width;
+            const height = canvas.height;
+
+            // Draw keyframe ticks for all motors
+            for (let ch = 0; ch < 5; ch++) {
+                for (let frame in dialKeyframes[ch]) {
+                    const x = (frame / 400) * width;
+                    ctx.beginPath();
+                    ctx.moveTo(x, 0);
+                    ctx.lineTo(x, height);
+                    ctx.strokeStyle = ['red', 'green', 'blue', 'orange', 'purple'][ch];
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
+                }
+            }
+
+            // Draw current frame marker
+            const currentX = (currentFrame / 400) * width;
+            ctx.beginPath();
+            ctx.moveTo(currentX, 0);
+            ctx.lineTo(currentX, height);
+            ctx.strokeStyle = 'black';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        }
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
