Update StepTimeTredmill View

Updated scaling so regardless of the values for step_time and target_zones will be properly represented in the visualization. Updated visualization css to clearly identify the visualizion and add a key. Updated the positions for targetZones so there is at least 1 on the screen at all times. Updated useStepTime so the initial values are 0 for everything like they were initially to ensure no other files have issues.

frontend/src/StepTimeTreadmil.js

@@ -1,22 +1,38 @@
 import "./StepTimeTreadmill.css"
 
 function StepTimeTreadmill({ stepTime }) {
-  const leftOffsetMin = (stepTime.left - stepTime.targetZones.left.min);
-  const leftOffsetMax = (stepTime.left - stepTime.targetZones.left.max) * -1;
-  const rightOffsetMin = (stepTime.right - stepTime.targetZones.right.min);
-  const rightOffsetMax = (stepTime.right - stepTime.targetZones.right.max) * -1;
+  const scaleFactor = 50;
+  const leftScaleFactor = scaleFactor / stepTime.left;
+  const rightScaleFactor = scaleFactor / stepTime.right;
+  const leftOffsetMin = (stepTime.left - stepTime.targetZones.left.min) * -leftScaleFactor;
+  const leftOffsetMax = (stepTime.left - stepTime.targetZones.left.max) * leftScaleFactor;
+  const rightOffsetMin = (stepTime.right - stepTime.targetZones.right.min) * -rightScaleFactor;
+  const rightOffsetMax = (stepTime.right - stepTime.targetZones.right.max) * rightScaleFactor;
 
+  // Based on a 100x100 viewbox, ensures at least 1 target-zone is visible to imply that the other is too far 
+  let leftMinPosition = Math.max(scaleFactor - leftOffsetMin, 0);
+  let leftMaxPosition = Math.min(scaleFactor + leftOffsetMax, 100);
+  let rightMinPositon = Math.max(scaleFactor - rightOffsetMin, 0);
+  let rightMaxPosition = Math.min(scaleFactor + rightOffsetMax, 100);
+
   return (
     <div data-testid='step-time-treadmill-view' className="StepTimeTreadmill">
+      <div className='visual-key'>
+        <ul>
+          <li><strong><u>Key</u></strong></li>
+          <li><strong>Vertical Lines:</strong> The blue line represents the upper echlon of the target zone and the orange line represents the bottom line of the target zone for left and right target zones respectively.</li>
+          <li><strong>X's:</strong> The left and right x's represent the left and right current step time respectively.</li>
+        </ul>
+      </div>
       <svg data-testid="treadmill-svg" className="Treadmill" viewBox="0 0 100 100" preserveAspectRatio='none'>
         <g data-testid='target-zones' className='TargetZones'>
-          <g data-testid='left-target-zones' className='LeftTargetZones'>ß
-            <line x1='24' x2='26' y1={50 - leftOffsetMin} y2={50 - leftOffsetMin} />
-            <line x1='24' x2='26' y1={50 + leftOffsetMax} y2={50 + leftOffsetMax} />
+          <g data-testid='left-target-zones' className='LeftTargetZones'>
+            <line className='max-zone' x1='24' x2='26' y1={leftMaxPosition} y2={leftMaxPosition} />
+            <line className='min-zone' x1='24' x2='26' y1={leftMinPosition} y2={leftMinPosition} />
           </g>
           <g data-testid='right-target-zones' className='RightTargetZones'>
-            <line x1='74' x2='76' y1={50 - rightOffsetMin} y2={50 - rightOffsetMin} />
-            <line x1='74' x2='76' y1={50 + rightOffsetMax} y2={50 + rightOffsetMax} />
+            <line className='max-zone' x1='74' x2='76' y1={rightMaxPosition} y2={rightMaxPosition} />
+            <line className='min-zone' x1='74' x2='76' y1={rightMinPositon} y2={rightMinPositon} />
           </g>
         </g>
         <g data-testid='step-time-values' className='StepTimeValues'>

frontend/src/StepTimeTreadmill.css

@@ -1,18 +1,46 @@
 .Treadmill {
     width: 70vw;
-    height: 85vh;
-    margin: 5vh 0;
-    background-color: grey;
+    height: 80vh;
+    margin: 1vh 0;
+    border-color: darkgray;
+    border-style: solid;
+    border-width: .25vw;
+    background-color: gray;
 }
 
 .Treadmill line {
     stroke-width: .02vw;
 }
 
-.TargetZones line {
+.TargetZones .max-zone {
+    stroke: blue;
+}
+
+.TargetZones .min-zone {
     stroke: orange;
 }
 
 .StepTimeValues line {
     stroke: black;
-}
+}
+
+.visual-key {
+    margin-top: 1vh;
+    padding: 0 0;
+    border-radius: 1vh;
+    border-color: white;
+}
+
+.visual-key ul {
+    margin-top: .5vh;
+    list-style-type: none;  
+    padding: .25vh .25vw;     
+    margin: 0;   
+}
+
+.visual-key ul li {
+    font-size: 1vw; 
+    padding: .25vh 0;
+    text-align:left;
+}
+

frontend/src/useStepTime.js

@@ -3,11 +3,11 @@ import { useState, useEffect } from 'react';
 function useStepTime() {
   // TODO: update default values, check w/ line 14 comment
   const [stepTime, setStepTime] = useState({
-    left: 27, 
-    right: 30,
+    left: 0, 
+    right: 0,
     targetZones: {
-      left: { min: 25, max: 35 },
-      right: { min: 25, max: 35 }
+      left: { min: 0, max: 0 },
+      right: { min: 0, max: 0 }
     } 
   });