started work on time scrolling

SizzinSeal · SizzinSeal · commit bf916fa4bf98 · 2022-09-28T10:07:03.000-07:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "pros.showInstallOnStartup": false
+}
diff --git a/index.css b/index.css
@@ -47,15 +47,15 @@ body {
  * This css is used to style the sliders when in debug mode
  */
 .debugContainer {
-    display: flex;
+    display: none;
     flex-wrap: wrap;
     padding-left: 0;
     padding-top: 49px;
 }
 
 .debugContainer input {
     list-style: none;
-    flex-basis: 40%;
+    flex-basis: 100%;
     color: white;
 }
 
@@ -73,7 +73,10 @@ body {
 
 .debugContainer button {
     list-style: none;
-    flex-basis: 100%;
+    flex-basis: 10%;
+    width:50px;
+    height:50px;
+    font-size:30px;
     color: black;
 }
 
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 
 <html>
     <head>
+        <meta charset="utf-8"/>
         <title>Path Generator</title>
         <link rel="icon" type="image/x-icon" href="/images/icon.png">
         <link rel="stylesheet" href="index.css">
@@ -105,13 +106,19 @@
         <div class="debugContainer">
             <input type="file" id="uploadDebugBtn"></input>
             <label for="uploadDebugBtn" id="uploadDebugLabel">Upload Robot Debug Data</label>
+            <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">
+            <output class="text" id="timeSliderVal">0</output>
+
         </div>
         
         <script src="scripts/point.js"></script>
         <script src="scripts/userInput.js"></script>
         <script src="scripts/spline.js"></script>
         <script src="scripts/robot.js"></script>
-        <script src="scripts/index.js"></script>
+        <script src="scripts/render.js"></script>
         <script src="scripts/events.js"></script>
     </body>
 </html>
diff --git a/scripts/events.js b/scripts/events.js
@@ -18,7 +18,7 @@ window.onload = function() {
   path.genPoints(precision, 10);
 
   // draw path every x seconds
-  setInterval(render, 1000/60);
+  intervalId = setInterval(render, 1000/fps);
 };
 
 
@@ -495,6 +495,10 @@ modeBtn.onclick = function() {
   const cols2 = document.getElementsByClassName('debugContainer');
   if (cols[0].style.display === 'none') {
     mode = 0;
+    // set the interval on the render function
+    debugRun = false;
+    clearInterval(intervalId);
+    intervalId = setInterval(render, 1000/fps);
     // show create mode sliders
     for (i = 0; i < cols.length; i++) {
       cols[i].style.display = 'flex';
@@ -505,6 +509,10 @@ modeBtn.onclick = function() {
     }
   } else {
     mode = 1;
+    // clear the interval on render
+    clearInterval(intervalId);
+    // run the render function once
+    render();
     // hide create mode sliders
     for (i = 0; i < cols.length; i++) {
       cols[i].style.display = 'none';
@@ -515,3 +523,37 @@ modeBtn.onclick = function() {
     }
   }
 };
+
+
+/**
+ * @brief rewind button pressed
+ */
+rewindBtn.onclick = function() {
+  if (debugDataTime > 0) {
+    debugDataTime--;
+  }
+};
+
+
+/**
+ * @brief pause/play button pressed
+ */
+pauseBtn.onclick = function() {
+  debugRun = !debugRun;
+  if (debugRun == true) {
+    clearInterval(intervalId);
+    intervalId = setInterval(render, 10);
+  } else {
+    clearInterval(intervalId);
+  }
+};
+
+
+/**
+ * @brief fast forward button pressed
+ */
+forwardBtn.onclick = function() {
+  if (debugDataTime < debugDataList.length-1) {
+    debugDataTime++;
+  }
+};
diff --git a/scripts/render.js b/scripts/render.js
@@ -1,8 +1,11 @@
 let path = new Path(); // robot path
+let intervalId;
 let debugPath = [];
 let debugDataList = [];
 let debugDataTime = 0;
 let debugSet = false;
+let debugRun = false;
+const fps = 60;
 
 
 // program mode
@@ -70,6 +73,20 @@ function getInput() {
 };
 
 
+/**
+ * @brief render the field
+ */
+function renderField() {
+  // draw field
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  // draw the field
+  ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
+      0, 0, canvas.width, canvas.height); // destination rectangle
+  // reset line width
+  ctx.lineWidth = 1.0;
+}
+
+
 /**
  * @brief function to create a field
  */
@@ -204,13 +221,8 @@ function renderDebug() {
  * @brief draw the spline
  */
 function render() {
-  // clear the canvas
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  // draw the field
-  ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
-      0, 0, canvas.width, canvas.height); // destination rectangle
-  // reset line width
-  ctx.lineWidth = 1.0;
+  // render the field
+  renderField();
 
   // create mode render
   if (mode == 0) {
diff --git a/scripts/userInput.js b/scripts/userInput.js
@@ -1,7 +1,3 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable prefer-const */
-
-
 // sliders
 const lookaheadSlider = document.getElementById('lookahead');
 const decelSlider = document.getElementById('decel');
@@ -65,6 +61,9 @@ const downloadPathBtn = document.getElementById('downloadPathBtn');
 const uploadDebugBtn = document.getElementById('uploadDebugBtn');
 const uploadPathBtn = document.getElementById('uploadPathBtn');
 const modeBtn = document.getElementById('modeBtn');
+const rewindBtn = document.getElementById('debugBackBtn');
+const pauseBtn = document.getElementById('debugPauseBtn');
+const forwardBtn = document.getElementById('debugForwardBtn');
 
 // user settings
 let lookahead = 0.5; // lookahead

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "pros.showInstallOnStartup": false`
	`3`	`+}`