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> <legend>Translation &amp; Rotation</legend>
<div class="control-group"> <div class="control-group">
<label for="vx-slider">Move Forward/Backward (pixels/s)</label> <label for="vx-slider">Strafe Left/Right (pixels/s)</label>
<input type="range" id="vx-slider" min="-300" max="300" step="0.1" value="0"> <input type="range" id="vx-slider" min="-300" max="300" step="10" value="0">
<output id="vx-value">0.0</output> <output id="vx-value">0</output>
</div> </div>
<div class="control-group"> <div class="control-group">
<label for="vy-slider">Strafe Left/Right (pixels/s)</label> <label for="vy-slider">Move Forward/Backward (pixels/s)</label>
<input type="range" id="vy-slider" min="-300" max="300" step="0.1" value="0"> <input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
<output id="vy-value">0.0</output> <output id="vy-value">0</output>
</div> </div>
<div class="control-group"> <div class="control-group">
<label for="omega-slider">Rotation (rad/s)</label> <label for="omega-slider">Rotation (rad/s)</label>
<input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0"> <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> </div>
<button id="reset-btn" type="button">Reset Controls</button> <button id="reset-btn" type="button">Reset Controls</button>
@ -51,8 +51,8 @@
<div class="control-group"> <div class="control-group">
<label for="max-speed-slider">Max Module Speed (pixels/s)</label> <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"> <input type="range" id="max-speed-slider" min="1" max="300" step="10" value="150">
<output id="max-speed-value">4.0</output> <output id="max-speed-value">0</output>
</div> </div>
</fieldset> </fieldset>
</section> </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 // Take in a requested speeds and update every module
this.modules.forEach(module => this.modules.forEach(module =>
module.calculateState(velocityX, velocityY, turnSpeed) 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 // 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); const maxCalculated = Math.max(...this.modules.map(m => m.speed), 0);
if (maxCalculated > maxSpeed) { if (maxCalculated > maxModuleSpeed) {
const scale = maxSpeed / maxCalculated; const scale = maxModuleSpeed / maxCalculated;
this.modules.forEach(module => { this.modules.forEach(module => {
module.velocity.x *= scale; module.velocity.x *= scale;
module.velocity.y *= scale; module.velocity.y *= scale;
@ -169,19 +169,33 @@ const preset8WheelBtn = document.getElementById('preset-8wheel');
// Add event listeners for drive controls // Add event listeners for drive controls
vxSlider.addEventListener('input', (e) => { 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) => { 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) => { 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) => { 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 // Update speeds based on sliders
xSpeed = parseFloat(vxSlider.value); xSpeed = parseFloat(vxSlider.value);
ySpeed = parseFloat(vySlider.value); ySpeed = -parseFloat(vySlider.value);
turnSpeed = parseFloat(omegaSlider.value); turnSpeed = parseFloat(omegaSlider.value);
// Animate the grid with robot movement // Animate the grid with robot movement
@ -360,7 +374,7 @@ function animate() {
drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation); drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation);
drawRobot(ctx, robot); drawRobot(ctx, robot);
robot.drive(xSpeed, ySpeed, turnSpeed, 500); robot.drive(xSpeed, ySpeed, turnSpeed, parseFloat(maxSpeedSlider.value));
// Do it all over again // Do it all over again
ctx.restore(); ctx.restore();