Skip to content

Updated Hover, Circular, Step, and Trapezoidal tabs. #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddchhettry merged 2 commits into from
Apr 12, 2026
Merged

Updated Hover, Circular, Step, and Trapezoidal tabs. #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
191e633
Updated Hover, Circular, Step, and Trapezoidal tabs.
CheeseAziz Apr 12, 2026
690ef23
Merge branch 'main' into Aziz/TA/tests
siddchhettry Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 239 additions & 17 deletions app/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,29 @@
<aside class="sidebar">
<div class="sidebar-section">
<h3>Tests</h3>
<ul class="test-list">
<li class="active">Custom Tests</li>
</ul>
<div class="all-tests-group">
<div class="all-tests-label">All tests</div>
<ul class="all-tests-subnav">
<li>
<button type="button" class="nav-sub-link active" data-panel="custom">Custom Test Input</button>
</li>
<li>
<button type="button" class="nav-sub-link" data-panel="preset-hover">Hover Test</button>
</li>
<li>
<button type="button" class="nav-sub-link" data-panel="preset-circular">Circular Test</button>
</li>
<li>
<button type="button" class="nav-sub-link" data-panel="preset-step">Step Test</button>
</li>
<li>
<button type="button" class="nav-sub-link" data-panel="preset-trapezoidal">Trapezoidal Test</button>
</li>
</ul>
</div>
</div>
</aside>


<!-- Main Content -->
<main class="main-content">
Expand Down Expand Up @@ -93,10 +111,7 @@ <h2>Custom Test Input</h2>
<h3>RC Command Output</h3>
<div class="rc-result" id="rcResult"></div>
<div class="rc-meta" id="rcMeta"></div>
<div class="rc-actions">
<button class="run-btn" id="sendToServerBtn">Send to Test Node</button>
<button class="save-run-btn" id="saveRunBtn">Save Run</button>
</div>
<button class="run-btn" id="sendToServerBtn">Send to Test Node</button>
</div>

<!-- 3D Visualizer -->
Expand All @@ -120,22 +135,229 @@ <h3>3D Flight Path Visualizer</h3>
</div>
</div>
</section>
</div>

<!-- Flight Path History Section -->
<section class="history-section">
<div class="history-header">
<div class="history-title-row">
<h2>Flight Path History</h2>
<div id="panel-preset-hover" class="workspace-panel" data-preset-key="hover">
<section class="input-section preset-test-section">
<h2>Hover Test</h2>
<p class="section-subtitle">Waypoint series from <code>/tests/generateTests/JSONtests/hover_test.json</code>. The output box below lists the RC string produced by stepping through each JSON sample pair.</p>
<p class="preset-load-status" id="presetStatusHover" role="status"></p>
<div class="preset-viz-rc-grid">
<div class="preset-rc-col">
<div class="rc-output">
<h3>RC Command Output</h3>
<div class="rc-result" id="rcResultHover"></div>
<div class="rc-meta" id="rcMetaHover"></div>
<button type="button" class="run-btn" data-send-preset="hover">Send to Test Node</button>
</div>
</div>
<div class="preset-viz-col">
<div class="viz3d-section">
<div class="viz3d-header">
<h3>3D Flight Path Visualizer</h3>
<div class="viz3d-legend">
<span class="legend-dot" style="background:#14b8a6"></span><span>Start</span>
<span class="legend-dot" style="background:#4a7bc0"></span><span>Waypoint</span>
<span class="legend-dot" style="background:#d97706"></span><span>End</span>
</div>
</div>
<div id="viz-hover" class="viz3d-canvas">
<p class="viz3d-placeholder">Loading flight data</p>
</div>
<div class="viz3d-footer">
<span class="axis-label" style="color:#ff5555">X (R/L)</span>
<span class="axis-label" style="color:#55ff55">Z (Up/Down)</span>
<span class="axis-label" style="color:#5599ff">Y (F/B)</span>
<span class="viz3d-hint">Drag to rotate &nbsp;·&nbsp; Scroll to zoom &nbsp;·&nbsp; Right-drag to pan</span>
</div>
</div>
</div>
</div>
</section>
</div>

<div id="panel-preset-circular" class="workspace-panel" data-preset-key="circular">
<section class="input-section preset-test-section">
<h2>Circular Test</h2>
<p class="section-subtitle">Waypoint series from <code>/tests/generateTests/JSONtests/circular_test.json</code>. The output box below lists the RC string produced by stepping through each JSON sample pair.</p>
<p class="preset-load-status" id="presetStatusCircular" role="status"></p>
<div class="preset-viz-rc-grid">
<div class="preset-rc-col">
<div class="rc-output">
<h3>RC Command Output</h3>
<div class="rc-result" id="rcResultCircular"></div>
<div class="rc-meta" id="rcMetaCircular"></div>
<button type="button" class="run-btn" data-send-preset="circular">Send to Test Node</button>
</div>
</div>
<div class="preset-viz-col">
<div class="viz3d-section">
<div class="viz3d-header">
<h3>3D Flight Path Visualizer</h3>
<div class="viz3d-legend">
<span class="legend-dot" style="background:#14b8a6"></span><span>Start</span>
<span class="legend-dot" style="background:#4a7bc0"></span><span>Waypoint</span>
<span class="legend-dot" style="background:#d97706"></span><span>End</span>
</div>
</div>
<div id="viz-circular" class="viz3d-canvas">
<p class="viz3d-placeholder">Loading flight data</p>
</div>
<div class="viz3d-footer">
<span class="axis-label" style="color:#ff5555">X (R/L)</span>
<span class="axis-label" style="color:#55ff55">Z (Up/Down)</span>
<span class="axis-label" style="color:#5599ff">Y (F/B)</span>
<span class="viz3d-hint">Drag to rotate &nbsp;·&nbsp; Scroll to zoom &nbsp;·&nbsp; Right-drag to pan</span>
</div>
</div>
</div>
</div>
</section>
</div>

<div id="panel-preset-step" class="workspace-panel" data-preset-key="step">
<section class="input-section preset-test-section">
<h2>Step Test</h2>
<p class="section-subtitle">Waypoint series from <code>/tests/generateTests/JSONtests/step_test.json</code>. The output box below lists the RC string produced by stepping through each JSON sample pair.</p>
<p class="preset-load-status" id="presetStatusStep" role="status"></p>
<div class="preset-viz-rc-grid">
<div class="preset-rc-col">
<div class="rc-output">
<h3>RC Command Output</h3>
<div class="rc-result" id="rcResultStep"></div>
<div class="rc-meta" id="rcMetaStep"></div>
<button type="button" class="run-btn" data-send-preset="step">Send to Test Node</button>
</div>
</div>
<div class="preset-viz-col">
<div class="viz3d-section">
<div class="viz3d-header">
<h3>3D Flight Path Visualizer</h3>
<div class="viz3d-legend">
<span class="legend-dot" style="background:#14b8a6"></span><span>Start</span>
<span class="legend-dot" style="background:#4a7bc0"></span><span>Waypoint</span>
<span class="legend-dot" style="background:#d97706"></span><span>End</span>
</div>
</div>
<div id="viz-step" class="viz3d-canvas">
<p class="viz3d-placeholder">Loading flight data</p>
</div>
<div class="viz3d-footer">
<span class="axis-label" style="color:#ff5555">X (R/L)</span>
<span class="axis-label" style="color:#55ff55">Z (Up/Down)</span>
<span class="axis-label" style="color:#5599ff">Y (F/B)</span>
<span class="viz3d-hint">Drag to rotate &nbsp;·&nbsp; Scroll to zoom &nbsp;·&nbsp; Right-drag to pan</span>
</div>
</div>
</div>
</div>
</section>
</div>

<div id="panel-preset-trapezoidal" class="workspace-panel" data-preset-key="trapezoidal">
<section class="input-section preset-test-section">
<h2>Trapezoidal Test</h2>
<p class="section-subtitle">Waypoint series from <code>/tests/generateTests/JSONtests/trapezoidal_test.json</code>. The output box below lists the RC string produced by stepping through each JSON sample pair.</p>
<p class="preset-load-status" id="presetStatusTrapezoidal" role="status"></p>
<div class="preset-viz-rc-grid">
<div class="preset-rc-col">
<div class="rc-output">
<h3>RC Command Output</h3>
<div class="rc-result" id="rcResultTrapezoidal"></div>
<div class="rc-meta" id="rcMetaTrapezoidal"></div>
<button type="button" class="run-btn" data-send-preset="trapezoidal">Send to Test Node</button>
</div>
</div>
<div class="preset-viz-col">
<div class="viz3d-section">
<div class="viz3d-header">
<h3>3D Flight Path Visualizer</h3>
<div class="viz3d-legend">
<span class="legend-dot" style="background:#14b8a6"></span><span>Start</span>
<span class="legend-dot" style="background:#4a7bc0"></span><span>Waypoint</span>
<span class="legend-dot" style="background:#d97706"></span><span>End</span>
</div>
</div>
<div id="viz-trapezoidal" class="viz3d-canvas">
<p class="viz3d-placeholder">Loading flight data</p>
</div>
<div class="viz3d-footer">
<span class="axis-label" style="color:#ff5555">X (R/L)</span>
<span class="axis-label" style="color:#55ff55">Z (Up/Down)</span>
<span class="axis-label" style="color:#5599ff">Y (F/B)</span>
<span class="viz3d-hint">Drag to rotate &nbsp;·&nbsp; Scroll to zoom &nbsp;·&nbsp; Right-drag to pan</span>
</div>
</div>
</div>
</div>
</section>
</div>
</div>

<!-- Logs Section -->
<section class="logs-section">
<h2>Logs</h2>
<div class="logs-controls">
<div class="search-box">
<input type="text" placeholder="🔍 Search">
</div>
<select class="log-filter">
<option>INFO</option>
</select>
<div class="log-actions">
<span>Step</span>
<span>Source</span>
<button class="icon-btn">⬇</button>
<button class="icon-btn">🔄</button>
</div>
<button class="clear-btn" id="clearHistoryBtn">Clear All</button>
</div>
<div id="historyList" class="history-list">
<p class="history-empty">No runs saved</p>
</div>

<table class="logs-table">
<thead>
<tr>
<th>Time</th>
<th>Level</th>
<th>Step</th>
<th>Message</th>
</tr>
</thead>
<tbody id="logTableBody">
<tr>
<td>01:15:48</td>
<td><span class="log-level info">INFO</span></td>
<td>setup</td>
<td>Initializing browser</td>
</tr>
<tr>
<td>01:15:47</td>
<td><span class="log-level warn">WARN</span></td>
<td>execute</td>
<td>Intermittent network delay</td>
</tr>
<tr>
<td>01:15:30</td>
<td><span class="log-level warn">WARN</span></td>
<td>browser</td>
<td>Search for "gavids", prequery</td>
</tr>
<tr>
<td>01:16:33</td>
<td><span class="log-level info">INFO</span></td>
<td>browser</td>
<td>Result value: pass</td>
</tr>
<tr>
<td>01:16:36</td>
<td><span class="log-level info">INFO</span></td>
<td>setup</td>
<td></td>
</tr>
</tbody>
</table>
</section>
</main>
</div>

<script src="script.js?v=7"></script>
<script src="script.js?v=9"></script>
</body>
</html>
Loading
Loading