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

Finalized HTML content, now to work on scripting it

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-21 12:34:48 -04:00
parent 9c0be2a3fe
commit c44f69d815
2 changed files with 51 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -45,14 +45,56 @@
<button id="reset-btn" type="button">Reset Controls</button> <button id="reset-btn" type="button">Reset Controls</button>
</fieldset> </fieldset>
<fieldset>
<legend>Performance Limits</legend>
<div class="control-group">
<label for="max-speed-slider">Max Module Speed (m/s)</label>
<input type="range" id="max-speed-slider" min="1" max="5" step="0.1" value="4">
<output id="max-speed-value">4.0</output>
</div>
</fieldset>
</section> </section>
<section class="config-panel"> <section class="config-panel">
<h2>Robot Configuration</h2> <h2>Robot Configuration</h2>
<!-- Configurations here, e.g. module positions, robot size, presets for all settings --> <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>
<section class="module-states"> <section class="module-states">
<h2>Module States</h2> <h2>Module States</h2>
<!-- Output display for the swerve modules. This will be dynamically generated by javascript --> <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>
<section class="documentation"> <section class="documentation">
<h2>About This Project</h2> <h2>About This Project</h2>

7
styles.css
View File

@ -282,4 +282,11 @@ button {
transition: all var(--duration-normal) var(--ease-standard); transition: all var(--duration-normal) var(--ease-standard);
margin: var(--spacing-small); margin: var(--spacing-small);
font-family: var(--font-family-base); font-family: var(--font-family-base);
}
button:hover {
background-color: var(--background-dark);
border-color: var(--accent-blue);
transform: translateY(-2px);
box-shadow: var(--shadow);
} }