69 lines
2.5 KiB
HTML
69 lines
2.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 (m/s)</label>
|
|
<input type="range" id="vx-slider" min="-3" max="3" step="0.1" value="0">
|
|
<output id="vx-value">0.0</output>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label for="vy-slider">Strafe Left/Right (m/s)</label>
|
|
<input type="range" id="vy-slider" min="-3" max="3" 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>
|
|
</section>
|
|
<section class="config-panel">
|
|
<h2>Robot Configuration</h2>
|
|
<!-- Configurations here, e.g. module positions, robot size, presets for all settings -->
|
|
</section>
|
|
<section class="module-states">
|
|
<h2>Module States</h2>
|
|
<!-- Output display for the swerve modules. This will be dynamically generated by javascript -->
|
|
</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>
|
|
</body>
|
|
|
|
</html> |