diff --git a/curveEditor.js b/curveEditor.js index 4328018..5c8ad69 100644 --- a/curveEditor.js +++ b/curveEditor.js @@ -8,6 +8,8 @@ export class CurveEditor { this.offset = { x: 0, y: 0 }; this.pixelsPerSecond = 48; + this.exportRange = [0, 4095]; + this.currentTime = timelineLength * this.pixelsPerSecond / 2; this.motorButtons = { @@ -40,15 +42,15 @@ export class CurveEditor { this.panStart = { x: 0, y: 0 }; // Default curve - // this.setCurves([ - // { - // startPoint: { x: this.valueToX(0), y: this.valueToY(0) }, - // startPointHandle: { x: this.valueToX(timelineLength / 2), y: this.valueToY(0.5) }, - // endPointHandle: { x: this.valueToX(timelineLength / 2), y: this.valueToY(-0.5) }, - // endPoint: { x: this.valueToX(timelineLength), y: this.valueToY(0) } - // } - // ]); - // this.curveSets[this.selectedMotorID] = this.curves; + this.setCurves([ + { + startPoint: { x: this.valueToX(0), y: this.valueToY(0) }, + startPointHandle: { x: this.valueToX(timelineLength / 2), y: this.valueToY(0.5) }, + endPointHandle: { x: this.valueToX(timelineLength / 2), y: this.valueToY(-0.5) }, + endPoint: { x: this.valueToX(timelineLength), y: this.valueToY(0) } + } + ]); + this.curveSets[this.selectedMotorID] = this.curves; // let othercurves = [ // { @@ -71,14 +73,14 @@ export class CurveEditor { // this.curveSets[7] = othercurves; - // this.setSelectedMotor(5); + this.setSelectedMotor(4); this.initEvents(); this.draw(); console.log(this.curveSets); } - setLength(endTime){ + setLength(endTime) { this.timelineLength = endTime / this.pixelsPerSecond; console.log("new endtime: " + endTime); //this.currentTime = this.timelineLength * this.pixelsPerSecond / 2; @@ -115,10 +117,31 @@ export class CurveEditor { return (this.canvas.height / 2 - v * (this.canvas.height / 2)) * this.scale + this.offset.y; } + // Maps pixel value of y axis to -1 to 1 normalised value yToValue(y) { return ((this.canvas.height / 2 - (y - this.offset.y) / this.scale) / (this.canvas.height / 2)); } + // Maps normalised -1 to 1 value to motor range (0, 4095) + yToExportRange(y) { + const [minOut, maxOut] = this.exportRange; + // Normalize y from [-1, 1] to [0, 1] + const normalized = (this.yToValue(y) + 1) / 2; + // Scale to export range + return Math.round(normalized * (maxOut - minOut) + minOut); + } + + exportRangeToY(value) { + const [minOut, maxOut] = this.exportRange; + // Reverse the scaling + const normalized = (value - minOut) / (maxOut - minOut); + // Convert from [0, 1] back to [-1, 1] + const yValue = normalized * 2 - 1; + // Apply inverse mapping from value space to editor Y + return this.valueToY(yValue); + } + + valueToX(t) { return t * this.pixelsPerSecond * this.scale + this.offset.x; } @@ -635,6 +658,8 @@ export class CurveEditor { curve.startPointHandle.y += deltaY; this.dragControlPoint(curve, 'startPointHandle', curve.startPointHandle.x, curve.startPointHandle.y, index); + + console.log(this.yToExportRange(curve.startPoint.y)); } else if (key === 'endPoint') { const oldX = curve.endPoint.x; const oldY = curve.endPoint.y; @@ -660,6 +685,7 @@ export class CurveEditor { this.dragControlPoint(curve, 'endPointHandle', curve.endPointHandle.x, curve.endPointHandle.y, index); const nextCurve = this.curves[index + 1]; + console.log(curve.endPoint.y); if (nextCurve) { nextCurve.startPoint.x = curve.endPoint.x; nextCurve.startPoint.y = curve.endPoint.y; diff --git a/index.html b/index.html index 10acb34..3ffc948 100644 --- a/index.html +++ b/index.html @@ -155,7 +155,7 @@
- +
diff --git a/script.js b/script.js index 84380a9..0f5fc4e 100644 --- a/script.js +++ b/script.js @@ -424,34 +424,34 @@ window.onload = () => { offset += 1; const startTime = view.getUint16(offset, true); offset += 2; const endTime = view.getUint16(offset, true); offset += 2; - const startPointY = view.getUint16(offset, true); offset += 2; + const startPointY = view.getInt16(offset, true); offset += 2; const startHandleX = view.getUint16(offset, true); offset += 2; - const startHandleY = view.getUint16(offset, true); offset += 2; + const startHandleY = view.getInt16(offset, true); offset += 2; const endHandleX = view.getUint16(offset, true); offset += 2; - const endHandleY = view.getUint16(offset, true); offset += 2; - const endPointY = view.getUint16(offset, true); offset += 2; + const endHandleY = view.getInt16(offset, true); offset += 2; + const endPointY = view.getInt16(offset, true); offset += 2; console.log("RECEIVED VALUES RAW:"); - console.log(startTime, endTime); + console.log(startTime, endTime, startPointY, endPointY); const toFloat = v => (v / 65535) * 2 - 1; const curve = { startPoint: { x: startTime, - y: curveEditor.valueToY(toFloat(startPointY)) + y: curveEditor.exportRangeToY(startPointY) }, startPointHandle: { x: startHandleX, - y: curveEditor.valueToY(toFloat(startHandleY)) + y: curveEditor.exportRangeToY(startHandleY) }, endPointHandle: { x: endHandleX, - y: curveEditor.valueToY(toFloat(endHandleY)) + y: curveEditor.exportRangeToY(endHandleY) }, endPoint: { x: endTime, - y: curveEditor.valueToY(toFloat(endPointY)) + y: curveEditor.exportRangeToY(endPointY) } }; @@ -561,23 +561,27 @@ window.onload = () => { view.setUint16(offset, curveCount, true); offset += 2; // ๐Ÿ”น Curve segments + curveSegments.forEach(seg => { view.setUint8(offset++, seg.motorID); view.setUint16(offset, seg.startTime, true); offset += 2; view.setUint16(offset, seg.endTime, true); offset += 2; - view.setUint16(offset, seg.startPointY, true); offset += 2; + view.setInt16(offset, curveEditor.yToExportRange(seg.startPointY), true); offset += 2; + + console.log(curveEditor.yToExportRange(seg.startPointY)); view.setUint16(offset, seg.startHandleX, true); offset += 2; - view.setUint16(offset, seg.startHandleY, true); offset += 2; - console.log("STARTHANDLEY: " + seg.startHandleY); + view.setInt16(offset, curveEditor.yToExportRange(seg.startHandleY), true); offset += 2; view.setUint16(offset, seg.endHandleX, true); offset += 2; - view.setUint16(offset, seg.endHandleY, true); offset += 2; - view.setUint16(offset, seg.endPointY, true); offset += 2; + view.setInt16(offset, curveEditor.yToExportRange(seg.endHandleY), true); offset += 2; + view.setInt16(offset, curveEditor.yToExportRange(seg.endPointY), true); offset += 2; }); console.log("๐Ÿงต Curve segments packed:", curveSegments.length); console.log(curveSegments); + // ๐Ÿ”น Send to ESP32 const payload = new Uint8Array(buffer); + console.log() console.log(payload); serial.saveFile(payload); // CMD_SAVE_ANIMATION }