Munelit/swerve-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up user inputs for driving

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-28 10:20:12 -04:00
parent 5c4a6909eb
commit eb0942d890
2 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -26,21 +26,21 @@
<legend>Translation &amp; Rotation</legend>
<div class="control-group">
<label for="vx-slider">Move Forward/Backward (pixels/s)</label>
<input type="range" id="vx-slider" min="-300" max="300" step="0.1" value="0">
<output id="vx-value">0.0</output>
<label for="vx-slider">Strafe Left/Right (pixels/s)</label>
<input type="range" id="vx-slider" min="-300" max="300" step="10" value="0">
<output id="vx-value">0</output>
</div>
<div class="control-group">
<label for="vy-slider">Strafe Left/Right (pixels/s)</label>
<input type="range" id="vy-slider" min="-300" max="300" step="0.1" value="0">
<output id="vy-value">0.0</output>
<label for="vy-slider">Move Forward/Backward (pixels/s)</label>
<input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
<output id="vy-value">0</output>
</div>
<div class="control-group">
<label for="omega-slider">Rotation (rad/s)</label>
<input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0">
<output id="omega-value">0.0</output>
<output id="omega-value">0</output>
</div>
<button id="reset-btn" type="button">Reset Controls</button>
@ -51,8 +51,8 @@
<div class="control-group">
<label for="max-speed-slider">Max Module Speed (pixels/s)</label>
<input type="range" id="max-speed-slider" min="1" max="300" step="0.1" value="4">
<output id="max-speed-value">4.0</output>
<input type="range" id="max-speed-slider" min="1" max="300" step="10" value="150">
<output id="max-speed-value">0</output>
</div>
</fieldset>
</section>

32
script.js
View File

@ -55,7 +55,7 @@ class SwerveDrive {
);
}
drive(velocityX, velocityY, turnSpeed, maxSpeed) {
drive(velocityX, velocityY, turnSpeed, maxModuleSpeed) {
// Take in a requested speeds and update every module
this.modules.forEach(module =>
module.calculateState(velocityX, velocityY, turnSpeed)
@ -63,8 +63,8 @@ class SwerveDrive {
// If any speeds exceed the max speed, normalize down so we don't effect movement direction
const maxCalculated = Math.max(...this.modules.map(m => m.speed), 0);
if (maxCalculated > maxSpeed) {
const scale = maxSpeed / maxCalculated;
if (maxCalculated > maxModuleSpeed) {
const scale = maxModuleSpeed / maxCalculated;
this.modules.forEach(module => {
module.velocity.x *= scale;
module.velocity.y *= scale;
@ -169,19 +169,33 @@ const preset8WheelBtn = document.getElementById('preset-8wheel');
// Add event listeners for drive controls
vxSlider.addEventListener('input', (e) => {
vxOutput.textContent = parseFloat(e.target.value).toFixed(1);
vxOutput.textContent = parseFloat(e.target.value);
});
vxOutput.textContent = parseFloat(vxSlider.value);
vySlider.addEventListener('input', (e) => {
vyOutput.textContent = parseFloat(e.target.value).toFixed(1);
vyOutput.textContent = parseFloat(e.target.value);
});
vyOutput.textContent = parseFloat(vySlider.value);
omegaSlider.addEventListener('input', (e) => {
omegaOutput.textContent = parseFloat(e.target.value).toFixed(1);
omegaOutput.textContent = parseFloat(e.target.value);
});
omegaOutput.textContent = parseFloat(omegaSlider.value);
maxSpeedSlider.addEventListener('input', (e) => {
maxSpeedOutput.textContent = parseFloat(e.target.value).toFixed(1);
maxSpeedOutput.textContent = parseFloat(e.target.value);
});
maxSpeedOutput.textContent = parseFloat(maxSpeedSlider.value);
resetBtn.addEventListener('click', (e) => {
vxSlider.value = 0;
vySlider.value = 0;
omegaSlider.value = 0;
vxOutput.textContent = parseFloat(vxSlider.value);
vyOutput.textContent = parseFloat(vySlider.value);
omegaOutput.textContent = parseFloat(omegaSlider.value);
});
@ -338,7 +352,7 @@ function animate() {
// Update speeds based on sliders
xSpeed = parseFloat(vxSlider.value);
ySpeed = parseFloat(vySlider.value);
ySpeed = -parseFloat(vySlider.value);
turnSpeed = parseFloat(omegaSlider.value);
// Animate the grid with robot movement
@ -360,7 +374,7 @@ function animate() {
drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation);
drawRobot(ctx, robot);
robot.drive(xSpeed, ySpeed, turnSpeed, 500);
robot.drive(xSpeed, ySpeed, turnSpeed, parseFloat(maxSpeedSlider.value));
// Do it all over again
ctx.restore();