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

Move the documentation dection to the top of the page

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-29 14:04:35 -04:00
parent ba710fcf5d
commit 83049815db
2 changed files with 94 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
index.html
View File

@ -14,94 +14,6 @@
<p>Interactive simulation of a swerve drive robot with configurable size, speeds, and number of wheels</p>
</header>
<main>
<section class="visualization-canvas">
<h2>Robot Visualization</h2>
<canvas id="swerve-canvas" width="800" height="800"></canvas>
</section>
<section class="control-panel">
<h2>Drive Controls</h2>
<fieldset>
<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>
</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>
</fieldset>
<fieldset>
<legend>Performance Limits</legend>
<div class="control-group">
<label for="max-speed-slider">Max Module Speed (pixels/s)</label>
<input type="range" id="max-speed-slider" min="200" max="1000" step="10" value="400">
<output id="max-speed-value">0</output>
</div>
</fieldset>
</section>
<section class="config-panel">
<h2>Robot Configuration</h2>
<fieldset>
<legend>Quick Presets</legend>
<div class="preset-buttons">
<button id="preset-2wheel" type="button">2-Wheel</button>
<button id="preset-3wheel" type="button">3-Wheel Triangle</button>
<button id="preset-4wheel" type="button">4-Wheel Square</button>
<button id="preset-4rect" type="button">4-Wheel Rectangle</button>
<button id="preset-6wheel" type="button">6-Wheel Hexagon</button>
<button id="preset-8wheel" type="button">8-Wheel Octagon</button>
<button id="preset-8square" type="button">8-Wheel Square</button>
<button id="preset-12hex" type="button">12-Wheel Hexagon</button>
<button id="preset-16oct" type="button">16-Wheel Octogon</button>
</div>
</fieldset>
<fieldset>
<legend>Custom Configuration</legend>
<div class="control-group">
<label for="module-count">Number of Modules</label>
<input type="number" id="module-count" min="2" max="12" value="4" step="1">
</div>
<button id="generate-inputs-btn" type="button">Generate Position Inputs</button>
<button id="delete-inputs-btn" type="button">Remove Position Inputs</button>
<div id="module-position-inputs" class="position-inputs">
<!-- Dynamically generated position inputs will appear here -->
</div>
<button id="apply-custom-btn" type="button" style="display: none;">Apply Custom Configuration</button>
</fieldset>
</section>
<section class="module-states">
<h2>Module States</h2>
<div id="current-config-info" class="config-info">
Current Configuration: <strong id="config-name">4-Wheel Rectangle</strong>
(<span id="module-count-display">4</span> modules)
<br>
Gyro Heading: <strong id="gyro-heading-display">0.0°</strong>
</div>
<div class="module-grid" id="module-grid">
<!-- Dynamically generated module data will appear here -->
</div>
</section>
<section class="documentation">
<h2>About This Project</h2>
<details>
@ -275,6 +187,95 @@ if scale &lt; 1:
</div>
</details>
</section>
<section class="visualization-canvas">
<h2>Robot Visualization</h2>
<canvas id="swerve-canvas" width="800" height="800"></canvas>
</section>
<section class="control-panel">
<h2>Drive Controls</h2>
<fieldset>
<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>
</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>
</fieldset>
<fieldset>
<legend>Performance Limits</legend>
<div class="control-group">
<label for="max-speed-slider">Max Module Speed (pixels/s)</label>
<input type="range" id="max-speed-slider" min="200" max="1000" step="10" value="400">
<output id="max-speed-value">0</output>
</div>
</fieldset>
</section>
<section class="config-panel">
<h2>Robot Configuration</h2>
<fieldset>
<legend>Quick Presets</legend>
<div class="preset-buttons">
<button id="preset-2wheel" type="button">2-Wheel</button>
<button id="preset-3wheel" type="button">3-Wheel Triangle</button>
<button id="preset-4wheel" type="button">4-Wheel Square</button>
<button id="preset-4rect" type="button">4-Wheel Rectangle</button>
<button id="preset-6wheel" type="button">6-Wheel Hexagon</button>
<button id="preset-8wheel" type="button">8-Wheel Octagon</button>
<button id="preset-8square" type="button">8-Wheel Square</button>
<button id="preset-12hex" type="button">12-Wheel Hexagon</button>
<button id="preset-16oct" type="button">16-Wheel Octogon</button>
</div>
</fieldset>
<fieldset>
<legend>Custom Configuration</legend>
<div class="control-group">
<label for="module-count">Number of Modules</label>
<input type="number" id="module-count" min="2" max="12" value="4" step="1">
</div>
<button id="generate-inputs-btn" type="button">Generate Position Inputs</button>
<button id="delete-inputs-btn" type="button">Remove Position Inputs</button>
<div id="module-position-inputs" class="position-inputs">
<!-- Dynamically generated position inputs will appear here -->
</div>
<button id="apply-custom-btn" type="button" style="display: none;">Apply Custom Configuration</button>
</fieldset>
</section>
<section class="module-states">
<h2>Module States</h2>
<div id="current-config-info" class="config-info">
Current Configuration: <strong id="config-name">4-Wheel Rectangle</strong>
(<span id="module-count-display">4</span> modules)
<br>
Gyro Heading: <strong id="gyro-heading-display">0.0°</strong>
</div>
<div class="module-grid" id="module-grid">
<!-- Dynamically generated module data will appear here -->
</div>
</section>
</main>
<script type="module" src="vendor/lucio/graham-scan.mjs"></script>

10
styles.css
View File

@ -238,7 +238,7 @@ tr:hover {
.visualization-area {
grid-column: 1 / 2;
grid-row: 1 / 3;
grid-row: 2 / 4;
}
#swerve-canvas {
@ -252,22 +252,22 @@ tr:hover {
.controls-panel {
grid-column: 1 / 2;
grid-row: 2 / 3;
grid-row: 3 / 4;
}
.config-panel {
grid-column: 2 / 3;
grid-row: 1 / 2;
grid-row: 2 / 3;
}
.module-states {
grid-column: 2 / 3;
grid-row: 2 / 3;
grid-row: 3 / 4;
}
.documentation {
grid-column: 1 / 3;
grid-row: 4 / 5;
grid-row: 1 / 2;
}
fieldset {