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

Grid layout added/set up

Browse Source
This commit is contained in:
Moonlit Productions
2025-10-21 11:45:16 -04:00
parent 99987a4e7f
commit 6c545bf6fb
2 changed files with 63 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -21,7 +21,30 @@
<section class="control-panel"> <section class="control-panel">
<h2>Drive Controls</h2> <h2>Drive Controls</h2>
<!-- Controls here, e.g. robot speed -->
<fieldset>
<legend>Translation &amp; 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>
<section class="config-panel"> <section class="config-panel">
<h2>Robot Configuration</h2> <h2>Robot Configuration</h2>

40
styles.css
View File

@ -83,11 +83,11 @@ header {
padding: var(--spacing-large) var(--spacing-large); padding: var(--spacing-large) var(--spacing-large);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-bottom: 3px solid var(--accent-blue); border-bottom: 3px solid var(--accent-blue);
text-align: center;
} }
header h1 { header h1 {
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-small);
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
@ -121,8 +121,10 @@ main {
margin: 0 2rem; margin: 0 2rem;
padding: var(--spacing-large); padding: var(--spacing-large);
box-sizing: border-box; box-sizing: border-box;
display: grid;
} }
article { article {
background-color: var(--background-secondary); background-color: var(--background-secondary);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -224,3 +226,39 @@ tr:hover {
border-top: 2px solid var(--border-color); border-top: 2px solid var(--border-color);
border-radius: var(--border-radius) var(--border-radius) 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
} }
/* Additions for this page */
.visualization-area {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
#swerve-canvas {
border: 2px solid var(--accent-blue);
border-radius: var(--border-radius);
background-color: var(--background-secondary);
margin-top: var(--spacing-small);
max-width: 100%;
height: auto;
}
.controls-panel {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.config-panel {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.module-states {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.documentation {
grid-column: 1 / 3;
grid-row: 4 / 5;
}