time slider now in visual editor overlay

curveEditor.js

@@ -111,6 +111,11 @@ export class CurveEditor {
         return new Uint8Array(buffer.slice(0, offset));
     }
 
+    setCurrentTime(time) {
+        this.currentTime = parseFloat(time);
+        this.draw();
+    }
+
     addChannel(motorID) {
         this.setCurves([
             {
@@ -128,7 +133,7 @@ export class CurveEditor {
     setLength(endTime) {
         this.timelineLength = endTime / this.pixelsPerSecond;
         this.slider.max = this.timelineLength * this.pixelsPerSecond;
-        console.log(this.slider.max, this.slider.value);
+        //console.log(this.slider.max, this.slider.value);
         if (this.slider.value > this.slider.max) {
             this.slider.value = this.slider.max;
         }
@@ -138,6 +143,10 @@ export class CurveEditor {
         this.draw();
     }
 
+    getLength(){
+        return this.timelineLength * this.pixelsPerSecond;
+    }
+
     loadCurveSets(curveSets) {
         this.curveSets = []
         this.curveSets = curveSets;
@@ -152,7 +161,7 @@ export class CurveEditor {
         console.log("LOADED");
         console.log(this.curveSets);
         console.log(Object.keys(curveSets)[0]);
-        setSelectedMotor(parseInt(Object.keys(curveSets)[0])); 
+        setSelectedMotor(parseInt(Object.keys(curveSets)[0]));
         // hello
 
         //this.selectAdjacentMotor(1);

ros_robot_visualiser/URDFEditor.js

@@ -18,10 +18,11 @@ const SyncMode = {
 };
 
 export class URDFEditor {
-  constructor(canvas, sendMotorPosition, serial) {
+  constructor(canvas, sendMotorPosition, serial, curveEditor) {
     this.canvas = canvas;
     this.sendMotorPosition = sendMotorPosition;
     this.serial = serial;
+    this.curveEditor = curveEditor;
     this.scene = new THREE.Scene();
     this.scene.background = new THREE.Color(0xaaaaaa);
 
@@ -154,6 +155,10 @@ export class URDFEditor {
     this.overlay.resetEditor();
   }
 
+  setAnimationLength(totalFrames) {
+    //this.overlay.
+  }
+
   async loadURDF() {
     if (this.robot) {
       console.log("resetting editor");

ros_robot_visualiser/ViewerOverlay.js

@@ -153,11 +153,22 @@ export class ViewerOverlay {
         panel.addElement(rb3);
 
         const slider = new Slider(
-            panel.x + panel.w * 0.025, panel.y + panel.h * 0.85, panel.w * 0.925, 20,
+            panel.x + panel.w * 0.025,
-            0, 100, 50,
+            panel.y + panel.h * 0.85,
-            (val) => console.log("Slider value:", val)
+            panel.w * 0.925,
+            20,
+            0,   // min
+            this.parent.curveEditor.getLength(), // max
+            50,  // initial
+            (val) => {
+                this.parent.curveEditor.setCurrentTime(val.toFixed(0));   // update parent
+                if (slider.max != this.parent.curveEditor.getLength()) {
+                    slider.max = this.parent.curveEditor.getLength();
+                }
+            }
         );
 
+
         panel.addElement(slider);
 
         return panel;

script.js

@@ -11,9 +11,7 @@ import { URDFEditor } from './ros_robot_visualiser/URDFEditor.js';
 
 window.onload = () => {
 
-    const serial = new SerialManager();
+
-    const urdfCanvas = document.getElementById('urdfCanvas');
-    const visualEditor = new URDFEditor(urdfCanvas, sendMotorPosition, serial);
 
 
     const servoMotors = [[], []]; // index 0 = channel 0, index 1 = channel 1
@@ -35,18 +33,20 @@ window.onload = () => {
 
     let draggingKeyframe = null; // { dialIndex, originalFrame }
     let isDragging = false;
-
+    
-
+    
-
-    const frameSlider = document.getElementById('frameSlider');
-    const frameDisplay = document.getElementById('frameDisplay');
-
-
-
 
     const curveCanvas = document.getElementById('curveCanvas');
     const curveEditor = new CurveEditor(curveCanvas, 10, frameSlider);
 
+    const serial = new SerialManager();
+    const urdfCanvas = document.getElementById('urdfCanvas');
+    const visualEditor = new URDFEditor(urdfCanvas, sendMotorPosition, serial, curveEditor);
+
+
+
+
+
 
     // Animation File List
     const fileListElement = document.getElementById('fileList');
@@ -212,14 +212,6 @@ window.onload = () => {
             deleteButton.disabled = true;
         }
     });
-
-
-
-
-
-
-
-
     // Timeline
 
     frameSlider.oninput = () => {
@@ -517,6 +509,7 @@ window.onload = () => {
 
         curveEditor.loadCurveSets(curveSets);
         curveEditor.setLength(latestEndTime);
+        visualEditor.setAnimationLength(latestEndTime);
         if (offset < view.byteLength) {
             const nodeGraphData = raw.slice(offset);  // grab remaining bytes
             nodeEditor.loadFromBinary(nodeGraphData); // call your editor's loader