909 lines
30 KiB
JavaScript
909 lines
30 KiB
JavaScript
import { SerialManager } from './serial.js';
|
||
|
||
const feetechModelsIDs = {
|
||
777: "STS3215",
|
||
521: "STS3012",
|
||
1029: "SCS0009"
|
||
};
|
||
|
||
|
||
window.onload = () => {
|
||
const serial = new SerialManager();
|
||
const statusText = document.getElementById('statusText');
|
||
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
|
||
const syncIntervalMs = 20; // e.g. 100ms = max 10 times per second
|
||
|
||
let isInterpolating = false;
|
||
let currentFrame = 0;
|
||
let dialKeyframes = Array.from({ length: 5 }, () => ({}));
|
||
|
||
let selectedDial = null;
|
||
let draggingKeyframe = null; // { dialIndex, originalFrame }
|
||
let isDragging = false;
|
||
const dialColors = ['red', 'green', 'blue', 'orange', 'purple'];
|
||
|
||
const dials = [];
|
||
const frameSlider = document.getElementById('frameSlider');
|
||
const frameDisplay = document.getElementById('frameDisplay');
|
||
const canvas = document.getElementById('timelineCanvas');
|
||
const ctx = canvas.getContext('2d');
|
||
const totalFrames = 500;
|
||
|
||
|
||
|
||
|
||
|
||
// Animation File List
|
||
const fileListElement = document.getElementById('fileList');
|
||
const playButton = document.getElementById('playFile');
|
||
const loadButton = document.getElementById('loadFile');
|
||
const deleteButton = document.getElementById('deleteFile');
|
||
|
||
let selectedFile = null;
|
||
|
||
function clearFileList() {
|
||
fileListElement.innerHTML = '';
|
||
selectedFile = null;
|
||
loadButton.disabled = true;
|
||
deleteButton.disabled = true;
|
||
}
|
||
|
||
|
||
function addFileToList(filename) {
|
||
const li = document.createElement('li');
|
||
li.textContent = filename;
|
||
|
||
li.addEventListener('click', () => {
|
||
// Deselect previous
|
||
const previouslySelected = fileListElement.querySelector('.selected');
|
||
if (previouslySelected) previouslySelected.classList.remove('selected');
|
||
|
||
// Select new
|
||
li.classList.add('selected');
|
||
selectedFile = filename;
|
||
loadButton.disabled = false;
|
||
deleteButton.disabled = false;
|
||
});
|
||
|
||
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;
|
||
|
||
const filename = "/" + selectedFile;
|
||
console.log(`Loading file: ${filename}`);
|
||
|
||
// 🧷 Lock buttons
|
||
loadButton.disabled = true;
|
||
deleteButton.disabled = true;
|
||
|
||
|
||
|
||
serial.requestFile(filename);
|
||
});
|
||
|
||
|
||
deleteButton.addEventListener('click', () => {
|
||
if (selectedFile) {
|
||
console.log(`Deleting file: ${selectedFile}`);
|
||
sendDeleteToESP32();
|
||
|
||
const selectedLi = fileListElement.querySelector('.selected');
|
||
if (selectedLi) selectedLi.remove();
|
||
selectedFile = null;
|
||
loadButton.disabled = true;
|
||
deleteButton.disabled = true;
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// Timeline
|
||
|
||
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;
|
||
|
||
|
||
syncMotorsWithTimeline();
|
||
|
||
|
||
};
|
||
|
||
for (let i = 0; i < 5; i++) {
|
||
dials[i] = new Nexus.Dial(`#dial${i}`, {
|
||
size: [80, 80],
|
||
min: 0,
|
||
max: 1023,
|
||
value: 512
|
||
});
|
||
|
||
dials[i].colorize("accent", dialColors[i]);
|
||
|
||
dials[i].on('change', (v) => {
|
||
if (isInterpolating) return;
|
||
const val = Math.round(v);
|
||
document.getElementById(`value${i}`).textContent = val;
|
||
dialKeyframes[i][currentFrame] = val;
|
||
drawTimelineMarkers();
|
||
|
||
|
||
syncMotorsWithTimeline();
|
||
|
||
});
|
||
|
||
|
||
}
|
||
|
||
function syncMotorsWithTimeline() {
|
||
const now = Date.now();
|
||
if (syncCheckbox.checked && now - lastSyncTime >= syncIntervalMs) {
|
||
lastSyncTime = now;
|
||
|
||
const motorPayloads = [];
|
||
|
||
for (let ch = 0; ch < dials.length; ch++) {
|
||
const value = dials[ch].value;
|
||
motorPayloads.push({ motorId: ch, position: value });
|
||
}
|
||
|
||
const buffer = new ArrayBuffer(motorPayloads.length * 3);
|
||
const view = new DataView(buffer);
|
||
|
||
motorPayloads.forEach(({ motorId, position }, i) => {
|
||
const offset = i * 3;
|
||
view.setUint8(offset, motorId);
|
||
view.setUint16(offset + 1, position, true); // little-endian
|
||
});
|
||
|
||
const payload = new Uint8Array(buffer);
|
||
serial.sendSetPositions(payload);
|
||
}
|
||
}
|
||
|
||
|
||
document.querySelectorAll('.dial').forEach(el => {
|
||
el.onclick = () => {
|
||
selectedDial = parseInt(el.dataset.index);
|
||
|
||
document.querySelectorAll('.dial').forEach(d => d.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
|
||
drawTimelineMarkers();
|
||
};
|
||
});
|
||
|
||
|
||
// Connect button
|
||
document.getElementById('connect').addEventListener('click', async () => {
|
||
try {
|
||
await serial.connect();
|
||
statusText.textContent = 'Connected ✅';
|
||
disconnectBtn.hidden = false;
|
||
connectBtn.hidden = true;
|
||
console.log("Serial connected");
|
||
let text = "";
|
||
serial.startReading((command, payload) => {
|
||
switch (command) {
|
||
case 0x01: // ID response
|
||
text = new TextDecoder().decode(new Uint8Array(payload));
|
||
document.getElementById('log').value += `ID Response: ${text}\n`;
|
||
break;
|
||
|
||
case 0x02: // File response
|
||
text = new TextDecoder().decode(new Uint8Array(payload));
|
||
const files = text.trim().split('\n');
|
||
document.getElementById('log').value += `File list Response: ${files}\n`;
|
||
clearFileList();
|
||
|
||
files.forEach(filename => {
|
||
if (filename) addFileToList(filename);
|
||
});
|
||
|
||
break;
|
||
case 0x03: // CMD_LOAD_FILE
|
||
const fileData = new Uint8Array(payload);
|
||
console.log(`Received file (${fileData.length} bytes)`);
|
||
document.getElementById('log').value += `Loaded file\n`;
|
||
// 🔹 Do something with the file
|
||
handleLoadedFile(fileData);
|
||
break;
|
||
|
||
case 0x04: // CMD_DELETE_FILE
|
||
console.log(`File deleted`);
|
||
console.log(new Uint8Array(payload));
|
||
document.getElementById('log').value += `File deleted\n`;
|
||
// 🔹 Do something with the file
|
||
//handleLoadedFile(fileData);
|
||
serial.requestFileList();
|
||
break;
|
||
case 0x05: // CMD_SAVE_FILE
|
||
|
||
console.log(`Saved file Response Recieved`);
|
||
console.log(new Uint8Array(payload));
|
||
document.getElementById('log').value += `Saved file Response Recieved\n`;
|
||
// 🔹 Do something with the file
|
||
//handleLoadedFile(fileData);
|
||
serial.requestFileList();
|
||
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;
|
||
|
||
case 0x07: // CMD_SET_POSITION
|
||
console.log(`Positions set`);
|
||
console.log(new Uint8Array(payload));
|
||
document.getElementById('log').value += `Positions set\n`;
|
||
// 🔹 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`;
|
||
break;
|
||
|
||
case 0x09: // CMD_SCAN_CHANNEL
|
||
console.log(new Uint8Array(payload));
|
||
handleScanChannelResponse(new Uint8Array(payload))
|
||
break;
|
||
|
||
// Add more cases as needed
|
||
default:
|
||
document.getElementById('log').value += `Unknown command ${command}\n`;
|
||
break;
|
||
}
|
||
});
|
||
|
||
|
||
// 🔹 Send ID request (CMD_ID_REQUEST = 0x01)
|
||
await serial.requestIDPacket();
|
||
|
||
await serial.requestFileList(); // or use a constant if defined
|
||
|
||
|
||
|
||
} catch (err) {
|
||
statusText.textContent = 'Connection failed ❌';
|
||
console.error("Connection error:", err);
|
||
}
|
||
});
|
||
|
||
function handleLoadedFile(data) {
|
||
// Ensure data is a Uint8Array
|
||
console.log(data.buffer);
|
||
const raw = new Uint8Array(data);
|
||
const view = new DataView(raw.buffer);
|
||
let offset = 0;
|
||
|
||
// 🔹 Parse header
|
||
const magic = String.fromCharCode(
|
||
view.getUint8(offset),
|
||
view.getUint8(offset + 1),
|
||
view.getUint8(offset + 2),
|
||
view.getUint8(offset + 3)
|
||
);
|
||
offset += 4;
|
||
|
||
const frameCount = view.getUint16(offset, true); offset += 2; // big-endian
|
||
const version = view.getUint8(offset++);
|
||
const frameRate = view.getUint8(offset++);
|
||
offset += 8; // reserved
|
||
|
||
if (magic !== "ANIM") {
|
||
console.error("Invalid file format");
|
||
return;
|
||
}
|
||
|
||
console.log("🧩 Magic:", magic);
|
||
console.log("🎞️ Frame Count:", frameCount);
|
||
console.log("📦 Version:", version);
|
||
console.log("⏱️ Frame Rate:", frameRate);
|
||
|
||
const NUM_CHANNELS = 5;
|
||
const HEADER_SIZE = 16;
|
||
const FRAME_SIZE = NUM_CHANNELS * 2;
|
||
//const frameCount = view.getUint16(4, true); // already parsed earlier
|
||
|
||
const frames = [];
|
||
//let offset = HEADER_SIZE;
|
||
|
||
for (let i = 0; i < frameCount; i++) {
|
||
const frame = [];
|
||
for (let c = 0; c < NUM_CHANNELS; c++) {
|
||
frame.push(view.getUint16(offset, true));
|
||
offset += 2;
|
||
}
|
||
frames.push(frame);
|
||
}
|
||
|
||
console.log(frames);
|
||
console.log(offset);
|
||
offset = 5016;
|
||
let 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);
|
||
dialKeyframes = Array.from({ length: 5 }, () => ({}));
|
||
keyframes.forEach(({ motorID, frame, position }) => {
|
||
if (!dialKeyframes[motorID]) {
|
||
dialKeyframes[motorID] = []; // Initialize if missing
|
||
}
|
||
dialKeyframes[motorID][frame] = position;
|
||
});
|
||
|
||
// 🔓 Unlock buttons
|
||
loadButton.disabled = false;
|
||
deleteButton.disabled = false;
|
||
|
||
document.getElementById("filenameInput").value = selectedFile.replace(/\.anim$/i, "");
|
||
|
||
drawTimelineMarkers();
|
||
}
|
||
|
||
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;
|
||
const version = 1;
|
||
|
||
const headerSize = 16;
|
||
const frameDataSize = frameCount * numChannels * 2;
|
||
const keyframeCount = dialKeyframes.reduce((sum, channel) => {
|
||
return sum + Object.keys(channel).length;
|
||
}, 0);
|
||
const keyframeDataSize = keyframeCount * 5;
|
||
|
||
// 🔹 Filename encoding
|
||
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));
|
||
view.setUint8(offset++, "I".charCodeAt(0));
|
||
view.setUint8(offset++, "M".charCodeAt(0));
|
||
view.setUint16(offset, frameCount, true); offset += 2;
|
||
view.setUint8(offset++, version);
|
||
view.setUint8(offset++, frameRate);
|
||
offset += 8; // reserved
|
||
|
||
// 🔹 Frame data (all zeroes)
|
||
//offset += frameDataSize;
|
||
|
||
// 🔹 Keyframe count
|
||
view.setUint16(offset, keyframeCount, true); offset += 2;
|
||
|
||
const keyframeList = [];
|
||
|
||
|
||
Object.entries(dialKeyframes).forEach(([motorIdStr, frameMap]) => {
|
||
const motorId = parseInt(motorIdStr, 10);
|
||
|
||
Object.entries(frameMap).forEach(([frameStr, position]) => {
|
||
const frame = parseInt(frameStr, 10);
|
||
if (position !== undefined) {
|
||
keyframeList.push({ motorId, frame, position });
|
||
}
|
||
});
|
||
});
|
||
|
||
// 🔹 Keyframes
|
||
keyframeList.forEach(({ motorId, frame, position }) => {
|
||
view.setUint8(offset++, motorId);
|
||
view.setUint16(offset, frame, true); offset += 2;
|
||
view.setUint16(offset, position, true); offset += 2;
|
||
});
|
||
|
||
console.log("Keyframe count: " + keyframeCount);
|
||
console.log(keyframeList);
|
||
|
||
// 🔹 Send to ESP32
|
||
const payload = new Uint8Array(buffer);
|
||
serial.saveFile(payload); // CMD_SAVE_ANIMATION
|
||
}
|
||
|
||
async function sendDeleteToESP32() {
|
||
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
|
||
}
|
||
|
||
|
||
// Disconnect button
|
||
disconnectBtn.addEventListener('click', () => {
|
||
serial.disconnect();
|
||
statusText.textContent = 'Disconnected';
|
||
disconnectBtn.hidden = true;
|
||
connectBtn.hidden = false;
|
||
console.log("Serial disconnected");
|
||
});
|
||
|
||
|
||
clearBtn.addEventListener('click', () => {
|
||
currentFrame = 0;
|
||
dialKeyframes = Array.from({ length: 5 }, () => ({}));
|
||
drawTimelineMarkers();
|
||
});
|
||
|
||
|
||
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 = '';
|
||
};
|
||
|
||
function drawTimelineMarkers() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
const width = canvas.width;
|
||
const height = canvas.height;
|
||
|
||
// Draw tick marks every 50 frames
|
||
ctx.strokeStyle = '#aaa';
|
||
ctx.lineWidth = 1;
|
||
for (let f = 0; f <= totalFrames; f += 25) {
|
||
const x = (f / totalFrames) * width;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, height * 0.75); // small tick at bottom
|
||
ctx.lineTo(x, height);
|
||
ctx.stroke();
|
||
}
|
||
for (let f = 0; f <= totalFrames; f += 50) {
|
||
const x = (f / totalFrames) * width;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, height * 0.65); // small tick at bottom
|
||
ctx.lineTo(x, height);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Draw label on tick marks
|
||
ctx.fillStyle = '#666';
|
||
ctx.font = '10px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
|
||
for (let f = 0; f <= totalFrames; f += 50) {
|
||
const x = (f / totalFrames) * width;
|
||
const seconds = f / 50;
|
||
ctx.fillText(seconds.toString() + "s", x, height - 12);
|
||
}
|
||
|
||
|
||
if (selectedDial !== null) {
|
||
for (let frame in dialKeyframes[selectedDial]) {
|
||
const x = (frame / 400) * width;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, 0);
|
||
ctx.lineTo(x, height);
|
||
ctx.strokeStyle = dialColors[selectedDial];
|
||
ctx.lineWidth = 2;
|
||
ctx.stroke();
|
||
}
|
||
} else {
|
||
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 = dialColors[ch];
|
||
ctx.lineWidth = 1;
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
|
||
const currentX = (currentFrame / 400) * width;
|
||
ctx.beginPath();
|
||
ctx.moveTo(currentX, 0);
|
||
ctx.lineTo(currentX, height);
|
||
ctx.strokeStyle = 'black';
|
||
ctx.lineWidth = 2;
|
||
ctx.stroke();
|
||
}
|
||
|
||
document.addEventListener('click', (e) => {
|
||
const ignoredTags = ['BUTTON', 'INPUT', 'TEXTAREA', 'CANVAS'];
|
||
const clickedInsideDial = e.target.closest('.dial');
|
||
const clickedControl = ignoredTags.includes(e.target.tagName);
|
||
|
||
if (!clickedInsideDial && !clickedControl && selectedDial !== null) {
|
||
selectedDial = null;
|
||
document.querySelectorAll('.dial').forEach(el => el.classList.remove('selected'));
|
||
drawTimelineMarkers();
|
||
}
|
||
|
||
});
|
||
|
||
canvas.addEventListener('mousedown', (e) => {
|
||
const x = e.offsetX;
|
||
const frame = Math.round((x / canvas.width) * totalFrames);
|
||
|
||
const dialIndices = selectedDial !== null ? [selectedDial] : [0, 1, 2, 3, 4];
|
||
|
||
for (let ch of dialIndices) {
|
||
for (let f in dialKeyframes[ch]) {
|
||
const fx = (f / totalFrames) * canvas.width;
|
||
if (Math.abs(fx - x) < 5) {
|
||
draggingKeyframe = { dialIndex: ch, originalFrame: parseInt(f) };
|
||
isDragging = true;
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
canvas.addEventListener('mousemove', (e) => {
|
||
if (!isDragging || !draggingKeyframe) return;
|
||
|
||
const x = e.offsetX;
|
||
const newFrame = Math.max(0, Math.min(totalFrames - 1, Math.round((x / canvas.width) * totalFrames)));
|
||
|
||
const { dialIndex, originalFrame } = draggingKeyframe;
|
||
const value = dialKeyframes[dialIndex][originalFrame];
|
||
|
||
if (newFrame !== originalFrame) {
|
||
delete dialKeyframes[dialIndex][originalFrame];
|
||
dialKeyframes[dialIndex][newFrame] = value;
|
||
draggingKeyframe.originalFrame = newFrame;
|
||
drawTimelineMarkers();
|
||
}
|
||
});
|
||
|
||
|
||
canvas.addEventListener('mouseup', () => {
|
||
isDragging = false;
|
||
draggingKeyframe = null;
|
||
});
|
||
|
||
canvas.addEventListener('dblclick', (e) => {
|
||
const x = e.offsetX;
|
||
const frame = Math.round((x / canvas.width) * totalFrames);
|
||
const dialIndices = selectedDial !== null ? [selectedDial] : [0, 1, 2, 3, 4];
|
||
|
||
for (let ch of dialIndices) {
|
||
if (dialKeyframes[ch][frame] !== undefined) {
|
||
delete dialKeyframes[ch][frame];
|
||
drawTimelineMarkers();
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
|
||
document.getElementById('saveAnimation').onclick = async () => {
|
||
await sendAnimationToESP32();
|
||
|
||
};
|
||
|
||
drawTimelineMarkers();
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// MOTOR CONTROL PANEL
|
||
|
||
function insertTableRow(channel, model, id, minAngle, maxAngle, position) {
|
||
const tableId = channel === 1 ? 'channel1-motor-table' :
|
||
channel === 2 ? 'channel2-motor-table' : null;
|
||
|
||
if (!tableId) {
|
||
console.error('Invalid channel number. Use 1 or 2.');
|
||
return;
|
||
}
|
||
|
||
const tbody = document.querySelector(`#${tableId} tbody`);
|
||
const newRow = document.createElement('tr');
|
||
newRow.setAttribute('data-row-id', id); // or any unique identifier
|
||
|
||
|
||
const cells = [model, id, minAngle, maxAngle, position];
|
||
const modelType = model.startsWith('SCS') ? 'SCS' :
|
||
model.startsWith('STS') ? 'STS' : null;
|
||
|
||
const rangeMin = 0;
|
||
const rangeMax = modelType === 'SCS' ? 1023 :
|
||
modelType === 'STS' ? 4095 : 180;
|
||
|
||
cells.forEach((value, index) => {
|
||
const td = document.createElement('td');
|
||
td.textContent = value;
|
||
|
||
if (index === 0) {
|
||
// Model cell: not editable
|
||
td.classList.add('non-editable');
|
||
} else {
|
||
td.classList.add('editable-cell');
|
||
td.setAttribute('contenteditable', 'true');
|
||
td.setAttribute('data-type', 'number');
|
||
|
||
// ID cell: 0–255
|
||
if (index === 1) {
|
||
td.setAttribute('data-min', '0');
|
||
td.setAttribute('data-max', '255');
|
||
} else {
|
||
// Angle/Position cells: based on model
|
||
td.setAttribute('data-min', rangeMin.toString());
|
||
td.setAttribute('data-max', rangeMax.toString());
|
||
}
|
||
|
||
td.addEventListener('input', function () {
|
||
const type = td.getAttribute('data-type');
|
||
const min = parseFloat(td.getAttribute('data-min'));
|
||
const max = parseFloat(td.getAttribute('data-max'));
|
||
let value = td.textContent.trim();
|
||
|
||
if (type === 'number') {
|
||
let num = parseFloat(value);
|
||
|
||
if (value === '' || isNaN(num)) {
|
||
num = min;
|
||
preserveCursor(td, num.toString(), true);
|
||
} else {
|
||
if (num < min) num = min;
|
||
if (num > max) num = max;
|
||
preserveCursor(td, num.toString());
|
||
}
|
||
td.classList.add('edited');
|
||
td.classList.add('bg-warning');
|
||
td.title = `Auto-corrected to ${num}`;
|
||
}
|
||
|
||
console.log("EDITED");
|
||
});
|
||
}
|
||
|
||
newRow.appendChild(td);
|
||
});
|
||
|
||
tbody.appendChild(newRow);
|
||
}
|
||
|
||
function collectChangePackets(channel) {
|
||
const tableId = channel === 1 ? 'channel1-motor-table' :
|
||
channel === 2 ? 'channel2-motor-table' : null;
|
||
|
||
const editedCells = document.querySelectorAll(`#${tableId} td.edited`);
|
||
const packets = [];
|
||
|
||
editedCells.forEach(cell => {
|
||
const row = cell.closest('tr');
|
||
const rowId = row.getAttribute('data-row-id');
|
||
const title = getColumnTitle(cell); // see below
|
||
const value = cell.textContent.trim();
|
||
|
||
packets.push({
|
||
id: rowId,
|
||
title,
|
||
value
|
||
});
|
||
});
|
||
|
||
return packets;
|
||
}
|
||
|
||
function getColumnTitle(cell) {
|
||
const headers = ['model', 'id', 'minAngle', 'maxAngle', 'position'];
|
||
const index = [...cell.parentNode.children].indexOf(cell);
|
||
return headers[index] || `col${index}`;
|
||
}
|
||
|
||
|
||
|
||
document.getElementById('btnSendChanges').onclick = async () => {
|
||
|
||
const packets = collectChangePackets(1); // or 2
|
||
console.log('Sending packets:', packets);
|
||
|
||
// Replace with actual send logic
|
||
// fetch('/api/send', { method: 'POST', body: JSON.stringify(packets) })
|
||
};
|
||
|
||
function preserveCursor(td, newText, forceEnd = false) {
|
||
const selection = window.getSelection();
|
||
let cursorOffset = 0;
|
||
|
||
if (!forceEnd && selection.rangeCount > 0 && selection.anchorNode === td.firstChild) {
|
||
const range = selection.getRangeAt(0);
|
||
cursorOffset = range.startOffset;
|
||
}
|
||
|
||
td.textContent = newText;
|
||
|
||
const newRange = document.createRange();
|
||
const offset = forceEnd ? newText.length : Math.min(cursorOffset, newText.length);
|
||
newRange.setStart(td.firstChild, offset);
|
||
newRange.collapse(true);
|
||
|
||
selection.removeAllRanges();
|
||
selection.addRange(newRange);
|
||
}
|
||
|
||
|
||
|
||
document.getElementById('btn_scan_channel_1').onclick = async () => {
|
||
// Clear table
|
||
document.querySelector("#channel1-motor-table tbody").innerHTML = "";
|
||
|
||
await serial.requestScan(0);
|
||
};
|
||
|
||
document.getElementById('btn_scan_channel_2').onclick = async () => {
|
||
// Clear table
|
||
document.querySelector("#channel2-motor-table tbody").innerHTML = "";
|
||
|
||
await serial.requestScan(1);
|
||
};
|
||
|
||
function handleScanChannelResponse(payload) {
|
||
console.log("received motor info packet: " + payload);
|
||
if (payload.length == 2) {
|
||
if (payload[1] == 255) {
|
||
console.log("SCAN COMPLETE");
|
||
document.getElementById('log').value += `Scan Complete\n`;
|
||
return;
|
||
}
|
||
} else if (payload.length != 10) {
|
||
console.log("ERROR: INCORRECT PACKET SIZE");
|
||
return;
|
||
}
|
||
const channel = payload[0]; // byte 0
|
||
const id = payload[1]; // byte 1
|
||
const model = (payload[2] << 8) | payload[3];
|
||
const minAngleLimit = (payload[4] << 8) | payload[5];
|
||
const maxAngleLimit = (payload[6] << 8) | payload[7];
|
||
const position = (payload[8] << 8) | payload[9];
|
||
let modelString = feetechModelsIDs[model]
|
||
if (!modelString) {
|
||
modelString = "UNKNOWN";
|
||
}
|
||
console.log(channel, id, modelString);
|
||
insertTableRow(channel + 1, modelString, id, minAngleLimit, maxAngleLimit, position);
|
||
}
|
||
|
||
|
||
|
||
|
||
};
|