113 lines
4.5 KiB
HTML
113 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Swerve Drive Visualizer</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Swerve Drive Movement Visualizer</h1>
|
|
<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="600" height="600"></canvas>
|
|
</section>
|
|
|
|
<section class="control-panel">
|
|
<h2>Drive Controls</h2>
|
|
|
|
<fieldset>
|
|
<legend>Translation & 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>
|
|
</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>
|
|
</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>
|
|
</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="1" max="300" step="0.1" value="4">
|
|
<output id="max-speed-value">4.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>
|
|
</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>
|
|
|
|
<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)
|
|
</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>
|
|
<summary>How To Use</summary>
|
|
</details>
|
|
<details>
|
|
<summary>Explaination of Swerve Kinematics</summary>
|
|
</details>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |