From f8ec407a455a8680b506e5498c8bb9035c4b4966 Mon Sep 17 00:00:00 2001
From: Jake Wilkinson <realrobotshk@gmail.com>
Date: Sun, 23 Nov 2025 21:36:03 +0800
Subject: [PATCH] time slider now in visual editor overlay

---
 curveEditor.js                        | 13 +++++++++--
 ros_robot_visualiser/URDFEditor.js    |  7 +++++-
 ros_robot_visualiser/ViewerOverlay.js | 17 ++++++++++++---
 script.js                             | 31 +++++++++++----------------
 4 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/curveEditor.js b/curveEditor.js
index ddcd50d..eb65fe3 100644
--- a/curveEditor.js
+++ b/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);
diff --git a/ros_robot_visualiser/URDFEditor.js b/ros_robot_visualiser/URDFEditor.js
index 1184c0b..0eb6362 100644
--- a/ros_robot_visualiser/URDFEditor.js
+++ b/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");
diff --git a/ros_robot_visualiser/ViewerOverlay.js b/ros_robot_visualiser/ViewerOverlay.js
index 88a1a56..bfe2e33 100644
--- a/ros_robot_visualiser/ViewerOverlay.js
+++ b/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,
-            0, 100, 50,
-            (val) => console.log("Slider value:", val)
+            panel.x + panel.w * 0.025,
+            panel.y + panel.h * 0.85,
+            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;
diff --git a/script.js b/script.js
index 4bafa34..d0ab2ce 100644
--- a/script.js
+++ b/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