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

Basic HTML Structure, to be filled out

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-21 11:17:16 -04:00
parent 5035bd0a95
commit be0731df12
2 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -0,0 +1,46 @@
<!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>
<!-- Controls here, e.g. robot speed -->
</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>

0
style.css → styles.css
View File