added basic debug time slider

Author: SizzinSeal

index.html

@@ -109,7 +109,7 @@
             <button type="button" id="debugBackBtn">&#x23EE;</button>
             <button type="button" id="debugPauseBtn">&#x23EF;</button>
             <button type="button" id="debugForwardBtn">&#x23ED;</button>
-            <input type="range" value ="0" min="0" max="100" step="0.1" oninput="this.nextElementSibling.value = this.value" id="timeSlider">
+            <input type="range" value ="0" min="0" max="100" step="1" oninput="this.nextElementSibling.value = this.value" id="timeSlider">
             <output class="text" id="timeSliderVal">0</output>
 
         </div>

scripts/events.js

@@ -460,7 +460,7 @@ uploadDebugBtn.onchange = function() {
     //     leftVel, rightVel
     //
     // loop to get debug data
-    for (i++; i < lines.length; i++) {
+    for (i++; i < lines.length-1; i++) {
       const line = lines[i].split(', ');
       const timestamp = parseFloat(line[0]);
       const rbtX = parseFloat(line[1]);
@@ -541,6 +541,9 @@ rewindBtn.onclick = function() {
 pauseBtn.onclick = function() {
   debugRun = !debugRun;
   if (debugRun == true) {
+    if (debugDataTime == debugDataList.length-1) {
+      debugDataTime = 0;
+    }
     clearInterval(intervalId);
     intervalId = setInterval(render, 10);
   } else {
@@ -557,3 +560,15 @@ forwardBtn.onclick = function() {
     debugDataTime++;
   }
 };
+
+
+/**
+ * @brief debug time slider changed
+ */
+debugTimeSlider.oninput = function() {
+  debugDataTime = this.value;
+  if (debugSet == true) {
+    renderField();
+    renderDebug();
+  }
+};

scripts/render.js

@@ -159,6 +159,10 @@ function renderCreate() {
  * @brief render for debug mode
  */
 function renderDebug() {
+  // get debug data time
+  debugTimeSlider.max = debugDataList.length-1;
+  const debugTime = debugTimeSlider.value;
+
   // render the path
   for (let i = 0; i < debugPath.length; i++) {
     const p1 = coordToPx(debugPath[i]);
@@ -214,6 +218,15 @@ function renderDebug() {
   ctx.lineTo(headingVecPx.x, headingVecPx.y);
   ctx.stroke();
   ctx.closePath();
+
+  // update the time
+  if (debugDataTime < debugDataList.length - 1) {
+    debugDataTime++;
+  } else {
+    debugRun = false;
+    clearInterval(intervalId);
+  }
+  debugTimeSlider.value = debugDataTime;
 };
 
 

scripts/userInput.js

@@ -26,6 +26,8 @@ const rDSlider = document.getElementById('rD');
 const rBSlider = document.getElementById('rB');
 const rGSlider = document.getElementById('rG');
 
+const debugTimeSlider = document.getElementById('timeSlider');
+
 // slider values
 const lookaheadVal = document.getElementById('lookaheadVal');
 const decelVal = document.getElementById('decelVal');
@@ -54,6 +56,8 @@ const rDVal = document.getElementById('rDVal');
 const rBVal = document.getElementById('rBVal');
 const rGVal = document.getElementById('rGVal');
 
+const debugTimeVal = document.getElementById('timeSliderVal');
+
 
 // buttons
 const downloadRobotBtn = document.getElementById('downloadRobotBtn');