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

Keyboard input added

Browse Source
This commit is contained in:
Moonlit Productions
2025-11-03 10:51:46 -05:00
parent 83049815db
commit 5662142274
2 changed files with 185 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@ -199,24 +199,57 @@ if scale < 1:
<legend>Translation &amp; Rotation</legend>
<div class="control-group">
<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>
<button id="control-mode-toggle" type="button">Switch to Keyboard Controls (WASD + QE)</button>
</div>
<div class="control-group">
<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 id="slider-controls">
<div class="control-group">
<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="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="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</output>
</div>
<button id="reset-btn" type="button">Reset Controls</button>
</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</output>
</div>
<div id="keyboard-controls" style="display: none;">
<div class="control-group">
<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">
<output id="keyboard-max-speed-value">150</output>
</div>
<button id="reset-btn" type="button">Reset Controls</button>
<div class="control-group">
<label for="keyboard-max-rotation">Max Rotation (rad/s)</label>
<input type="range" id="keyboard-max-rotation" min="0.5" max="3" step="0.1" value="1.5">
<output id="keyboard-max-rotation-value">1.5</output>
</div>
<div class="keyboard-instructions">
<h4>Keyboard Controls:</h4>
<ul>
<li><strong>W:</strong> Move Forward</li>
<li><strong>A:</strong> Strafe Left</li>
<li><strong>S:</strong> Move Backward</li>
<li><strong>D:</strong> Strafe Right</li>
<li><strong>Q:</strong> Rotate Counter-Clockwise</li>
<li><strong>E:</strong> Rotate Clockwise</li>
</ul>
<p><em>Click on the canvas area to focus for keyboard input</em></p>
</div>
</div>
</fieldset>
<fieldset>