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

default to keyboard/joystick control

Browse Source
This commit is contained in:
Moonlit Productions
2025-11-17 10:22:20 -05:00
parent c225ee696a
commit c1aa7d2086
2 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -207,10 +207,10 @@ if scale < 1:
<legend>Translation &amp; Rotation</legend> <legend>Translation &amp; Rotation</legend>
<div class="control-group"> <div class="control-group">
<button id="control-mode-toggle" type="button">Switch to Keyboard/Joystick Controls</button> <button id="control-mode-toggle" type="button">Switch to Slider Controls</button>
</div> </div>
<div id="slider-controls"> <div id="slider-controls" style="display: none;">
<div class="control-group"> <div class="control-group">
<label for="vy-slider">Move Forward/Backward (pixels/s)</label> <label for="vy-slider">Move Forward/Backward (pixels/s)</label>
<input type="range" id="vy-slider" min="-300" max="300" step="10" value="0"> <input type="range" id="vy-slider" min="-300" max="300" step="10" value="0">
@ -232,7 +232,7 @@ if scale &lt; 1:
<button id="reset-btn" type="button">Reset Controls</button> <button id="reset-btn" type="button">Reset Controls</button>
</div> </div>
<div id="keyboard-controls" style="display: none;"> <div id="keyboard-controls">
<div class="control-group"> <div class="control-group">
<label for="keyboard-max-speed">Max Speed (pixels/s)</label> <label for="keyboard-max-speed">Max Speed (pixels/s)</label>
<input type="range" id="keyboard-max-speed" min="50" max="300" step="10" value="150"> <input type="range" id="keyboard-max-speed" min="50" max="300" step="10" value="150">

15
script.js
View File

@ -49,6 +49,9 @@ class Joystick {
} }
touchInRange(x, y) { touchInRange(x, y) {
if (!this.visible)
return false;
const deltaX = x - this.x; const deltaX = x - this.x;
const deltaY = y - this.y; const deltaY = y - this.y;
const dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY); const dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@ -399,7 +402,7 @@ const preset16OctBtn = document.getElementById('preset-16oct');
*/ */
// Control mode state // Control mode state
let isManualInputMode = false; // true = keyboard/gamepad mode, false = slider mode let isManualInputMode = true; // true = keyboard/gamepad mode, false = slider mode
// Keyboard state tracking // Keyboard state tracking
const keyState = { const keyState = {
@ -447,6 +450,9 @@ keyboardMaxRotation.addEventListener('input', (e) => {
}); });
keyboardMaxRotationOutput.textContent = parseFloat(keyboardMaxRotation.value); keyboardMaxRotationOutput.textContent = parseFloat(keyboardMaxRotation.value);
const supportsTouch = (navigator.maxTouchPoints > 0);
// Control mode toggle // Control mode toggle
controlModeToggle.addEventListener('click', () => { controlModeToggle.addEventListener('click', () => {
isManualInputMode = !isManualInputMode; isManualInputMode = !isManualInputMode;
@ -464,13 +470,15 @@ controlModeToggle.addEventListener('click', () => {
vxOutput.textContent = '0'; vxOutput.textContent = '0';
vyOutput.textContent = '0'; vyOutput.textContent = '0';
omegaOutput.textContent = '0'; omegaOutput.textContent = '0';
if (supportsTouch) {
leftJoystick.setIsVisible(true); leftJoystick.setIsVisible(true);
rightJoystick.setIsVisible(true); rightJoystick.setIsVisible(true);
}
} else { } else {
// Switch to slider mode // Switch to slider mode
sliderControls.style.display = 'block'; sliderControls.style.display = 'block';
keyboardControls.style.display = 'none'; keyboardControls.style.display = 'none';
controlModeToggle.textContent = 'Switch to Keyboard/Joystick Controls'; controlModeToggle.textContent = supportsTouch ? 'Switch to Keyboard/Joystick Controls' : 'Switch to Keyboard';
// Reset manual input state // Reset manual input state
Object.keys(keyState).forEach(key => keyState[key] = false); Object.keys(keyState).forEach(key => keyState[key] = false);
@ -991,9 +999,6 @@ function drawRobot(ctx, robot, heading) {
} }
// Initialize Variables // Initialize Variables
// Joysticks
const supportsTouch = (navigator.maxTouchPoints > 0);
// General robot // General robot
const robotSize = 200; const robotSize = 200;