Skip to content

Commit

Permalink
added buttons to also control slider values
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarkRoss-Eviden
MarkRoss-Eviden committed Jan 29, 2025
1 parent 346bbdc commit 7ba527a
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 62 deletions.
126 changes: 87 additions & 39 deletions new/src/pages/recalibrate-speed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,38 @@ export default function RecalibrateSpeedPage() {
setBackwardValue(detail.value);
};

const handleStoppedSliderLeft = () => {
setStoppedValue(prev => Math.max(prev - 1, -30));
};

const handleStoppedSliderRight = () => {
setStoppedValue(prev => Math.min(prev + 1, 30));
};

const handleForwardSliderLeft = () => {
setForwardValue(prev => Math.max(prev - 1, 0));
};

const handleForwardSliderRight = () => {
setForwardValue(prev => Math.min(prev + 1, 50));
};

const handleBackwardSliderLeft = () => {
setBackwardValue(prev => Math.max(prev - 1, -50));
};

const handleBackwardSliderRight = () => {
setBackwardValue(prev => Math.min(prev + 1, 0));
};

const handleDirectionSliderLeft = () => {
setStoppedValue(prev => Math.max(prev - 1, 0));
};

const handleDirectionSliderRight = () => {
setStoppedValue(prev => Math.min(prev + 1, 50));
};

useEffect(() => {
const fetchCalibrationValues = async () => {
const calibrationData = await getCalibrationThrottle();
Expand Down Expand Up @@ -193,8 +225,8 @@ export default function RecalibrateSpeedPage() {
<div>
<TextContent>
<h1>Vehicle Speed Recalibration</h1>
<h2>Raise your vehicle</h2>
<p>Ensure your vehicle is raised off the ground to prevent it from moving during calibration.</p>
<h2>Raise vehicle</h2>
<p>Raise your vehicle to keep wheels from touching the ground and to key them moving freely.</p>
<Alert
statusIconAriaLabel="Warning"
type="warning"
Expand All @@ -214,16 +246,20 @@ export default function RecalibrateSpeedPage() {
<div>
<TextContent>
<h1>Vehicle Speed Recalibration</h1>
<h2>Calibrate stopped speed</h2>
<p>Adjust the stopped speed value to ensure your vehicle remains stationary when no throttle is applied.</p>
<p>Stopped speed value = {stoppedValue}</p>
<Slider
onChange={handleStoppedSliderChange}
value={stoppedValue}
max={30}
min={-30}
referenceValues={[-20, -10, 0, 10, 20]}
/>
<h2>Stopped speed</h2>
<p>With the vehicle’s wheels free to spin, increase or decrease the Stopped value below until the wheels stop spinning.</p>
<p>Stopped value = {stoppedValue}</p>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleStoppedSliderLeft}>{'<'}</Button>
<Slider
onChange={handleStoppedSliderChange}
value={stoppedValue}
max={30}
min={-30}
referenceValues={[-20, -10, 0, 10, 20]}
/>
<Button onClick={handleStoppedSliderRight}>{'>'}</Button>
</div>
</TextContent>
</div>
<div>
Expand All @@ -237,15 +273,19 @@ export default function RecalibrateSpeedPage() {
<TextContent>
<h1>Vehicle Speed Recalibration</h1>
<h2>Set forward direction</h2>
<p>Ensure the vehicle moves forward when the forward throttle is applied.</p>
<Slider
onChange={handleStoppedSliderChange}
value={stoppedValue}
max={50}
min={0}
referenceValues={[10, 20, 30, 40]}
/>
<Alert
<p>Point the vehicle’s front to the right as shown in the diagram. Push the left or right arrow to make the wheels turn. The vehicle will drive forward if the wheels turns clock-wise.</p>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleDirectionSliderLeft}>{'<'}</Button>
<Slider
onChange={handleStoppedSliderChange}
value={stoppedValue}
max={50}
min={0}
referenceValues={[10, 20, 30, 40]}
/>
<Button onClick={handleDirectionSliderRight}>{'>'}</Button>
</div>
<Alert
statusIconAriaLabel="Warning"
type="warning"
>
Expand All @@ -271,16 +311,20 @@ export default function RecalibrateSpeedPage() {
<div>
<TextContent>
<h1>Vehicle Speed Recalibration</h1>
<h2>Calibrate maximum forward speed</h2>
<p>Adjust the maximum forward speed value to set the top speed of your vehicle when moving forward.</p>
<h2>Maximum forward speed</h2>
<p>Move the slider to set the maximum forward speed on the vehicle so that the Estimated speed value matches, precisely or approximately, the value specified in training the model that is or will be loaded to the vehicle’s inference engine.</p>
<p>Maximum forward speed value = {forwardValue}</p>
<Slider
onChange={handleForwardSliderChange}
value={forwardValue}
max={50}
min={0}
referenceValues={[10, 20, 30, 40]}
/>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleForwardSliderLeft}>{'<'}</Button>
<Slider
onChange={handleForwardSliderChange}
value={forwardValue}
max={50}
min={0}
referenceValues={[10, 20, 30, 40]}
/>
<Button onClick={handleForwardSliderRight}>{'>'}</Button>
</div>
</TextContent>
</div>
<div>
Expand All @@ -293,16 +337,20 @@ export default function RecalibrateSpeedPage() {
<div>
<TextContent>
<h1>Vehicle Speed Recalibration</h1>
<h2>Calibrate maximum backward speed</h2>
<p>Adjust the maximum backward speed value to set the top speed of your vehicle when moving backward.</p>
<h2>Maximum backward speed</h2>
<p>Move the slider to set the maximum backward speed on the vehicle so that the Estimated speed value matches, precisely or approximately, the value specified in training the model that is or will be loaded to the vehicle’s inference engine.</p>
<p>Maximum backward speed value = {backwardValue}</p>
<Slider
onChange={handleBackwardSliderChange}
value={backwardValue}
max={0}
min={-50}
referenceValues={[-40, -30, -20, -10]}
/>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleBackwardSliderLeft}>{'<'}</Button>
<Slider
onChange={handleBackwardSliderChange}
value={backwardValue}
max={0}
min={-50}
referenceValues={[-40, -30, -20, -10]}
/>
<Button onClick={handleBackwardSliderRight}>{'>'}</Button>
</div>
</TextContent>
</div>
<div>
Expand Down
110 changes: 87 additions & 23 deletions new/src/pages/recalibrate-steering.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,58 @@ export default function RecalibrateSteeringPage() {
setSteeringAngle(invertedValue);
};

const handleCenterSliderLeft = () => {
setCenterValue(prev => {
const newValue = Math.max(prev - 1, -30);
setSteeringAngle(newValue);
return newValue;
});
};

const handleCenterSliderRight = () => {
setCenterValue(prev => {
const newValue = Math.min(prev + 1, 30);
setSteeringAngle(newValue);
return newValue;
});
};

const handleLeftSliderLeft = () => {
setLeftValue(prev => {
const newValue = Math.max(prev - 1, -50);
const invertedValue = newValue > 0 ? -newValue : Math.abs(newValue);
setSteeringAngle(invertedValue);
return newValue;
});
};

const handleLeftSliderRight = () => {
setLeftValue(prev => {
const newValue = Math.min(prev + 1, 10);
const invertedValue = newValue > 0 ? -newValue : Math.abs(newValue);
setSteeringAngle(invertedValue);
return newValue;
});
};

const handleRightSliderLeft = () => {
setRightValue(prev => {
const newValue = Math.max(prev - 1, -10);
const invertedValue = newValue > 0 ? -newValue : Math.abs(newValue);
setSteeringAngle(invertedValue);
return newValue;
});
};

const handleRightSliderRight = () => {
setRightValue(prev => {
const newValue = Math.min(prev + 1, 50);
const invertedValue = newValue > 0 ? -newValue : Math.abs(newValue);
setSteeringAngle(invertedValue);
return newValue;
});
};

useEffect(() => {
const fetchCalibrationValues = async () => {
const calibrationData = await getCalibrationAngle();
Expand Down Expand Up @@ -236,13 +288,17 @@ export default function RecalibrateSteeringPage() {
<h2>Center steering</h2>
<p>Increase or decrease the Center value to center your vehicle. It is centered when any of the wheels points forward. Use a ruler or straight edge to ensure it is aligned with the rear wheel.</p>
<p>Center value = {centerValue}</p>
<Slider
onChange={handleCenterSliderChange}
value={centerValue}
max={30}
min={-30}
referenceValues={[-20, -10, 0, 10, 20]}
/>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleCenterSliderLeft}>{'<'}</Button>
<Slider
onChange={handleCenterSliderChange}
value={centerValue}
max={30}
min={-30}
referenceValues={[-20, -10, 0, 10, 20]}
/>
<Button onClick={handleCenterSliderRight}>{'>'}</Button>
</div>
<Alert
statusIconAriaLabel="Info"
>
Expand All @@ -264,14 +320,18 @@ export default function RecalibrateSteeringPage() {
<h2>Maximum left steering</h2>
<p>Increase the Value to turn the front wheels to the left until they stop turning.</p>
<p>Value = {leftValue > 0 ? -leftValue : Math.abs(leftValue)}</p>
<Slider
onChange={handleLeftSliderChange}
value={leftValue}
valueFormatter={value => value > 0 ? -value : Math.abs(value)}
max={10}
min={-50}
referenceValues={[-40, -30, -20, -10, 0]}
/>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleLeftSliderLeft}>{'<'}</Button>
<Slider
onChange={handleLeftSliderChange}
value={leftValue}
valueFormatter={value => value > 0 ? -value : Math.abs(value)}
max={10}
min={-50}
referenceValues={[-40, -30, -20, -10, 0]}
/>
<Button onClick={handleLeftSliderRight}>{'>'}</Button>
</div>
<p>Estimated angle:</p>
</TextContent>
</div>
Expand All @@ -288,14 +348,18 @@ export default function RecalibrateSteeringPage() {
<h2>Maximum right steering</h2>
<p>Increase the Value to turn the front wheels to the right until they stop turning.</p>
<p>Value = {rightValue > 0 ? -rightValue : Math.abs(rightValue)}</p>
<Slider
onChange={handleRightSliderChange}
value={rightValue}
valueFormatter={value => value > 0 ? -value : Math.abs(value)}
max={50}
min={-10}
referenceValues={[0, 10, 20, 30, 40]}
/>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleRightSliderLeft}>{'<'}</Button>
<Slider
onChange={handleRightSliderChange}
value={rightValue}
valueFormatter={value => value > 0 ? -value : Math.abs(value)}
max={50}
min={-10}
referenceValues={[0, 10, 20, 30, 40]}
/>
<Button onClick={handleRightSliderRight}>{'>'}</Button>
</div>
<p>Estimated angle:</p>
</TextContent>
</div>
Expand Down

0 comments on commit 7ba527a

Please sign in to comment.