floppyrj45/cosma-nav-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(viewer): map visible — wrap USV/AUV panels in graphs-section, minmax(200px) map row

Browse Source
This commit is contained in:
Poulpe
2026-04-27 22:08:49 +00:00
parent 31b5a221b8
commit a79f63e59e
1 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
viewer/index.html
View File

@@ -12,7 +12,7 @@
height: 100vh; overflow: hidden; height: 100vh; overflow: hidden;
font-family: monospace; background: #1a1a2e; color: #e0e0e0; font-family: monospace; background: #1a1a2e; color: #e0e0e0;
display: grid; display: grid;
grid-template-rows: 36px 40px 1fr 54px 1fr; grid-template-rows: 36px 40px minmax(200px, 1fr) 54px 1fr;
} }
/* Row 0: datebar */ /* Row 0: datebar */
#datebar { #datebar {
@@ -115,15 +115,23 @@
} }
#btn-viewall:hover, #btn-play:hover { background: #00b4d8; color: #1a1a2e; } #btn-viewall:hover, #btn-play:hover { background: #00b4d8; color: #1a1a2e; }
/* Row 4: 2×2 charts grid */ /* Row 4: scroll container with 2x2 charts + USV/AUV panels */
#graphs-section { #graphs-section {
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
background: #0a0a1a;
}
#charts-4grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 3px; gap: 3px;
background: #0a0a1a;
padding: 3px; padding: 3px;
min-height: 0; overflow: hidden; flex: 1;
min-height: 180px;
} }
.chart-wrap { .chart-wrap {
background: #12122a; background: #12122a;
@@ -323,6 +331,7 @@ flowchart LR
<!-- Row 4: 2×2 Plotly charts --> <!-- Row 4: 2×2 Plotly charts -->
<div id="graphs-section"> <div id="graphs-section">
<div id="charts-4grid">
<div class="chart-wrap"> <div class="chart-wrap">
<div class="chart-title">Depth AUV (m)</div> <div class="chart-title">Depth AUV (m)</div>
<div class="plotly-wrap"><div id="chart-depth"></div></div> <div class="plotly-wrap"><div id="chart-depth"></div></div>
@@ -339,10 +348,9 @@ flowchart LR
<div class="chart-title">USBL Distance (m)</div> <div class="chart-title">USBL Distance (m)</div>
<div class="plotly-wrap"><div id="chart-usbl"></div></div> <div class="plotly-wrap"><div id="chart-usbl"></div></div>
</div> </div>
</div> </div>
<div class="panel-header">USV</div>
<div class="panel-header">USV</div> <div class="graphs-grid" id="usv-graphs">
<div class="graphs-grid" id="usv-graphs">
<div class="graph-cell" id="usv-yaw"></div> <div class="graph-cell" id="usv-yaw"></div>
<div class="graph-cell" id="usv-heading"></div> <div class="graph-cell" id="usv-heading"></div>
<div class="graph-cell" id="usv-batt"></div> <div class="graph-cell" id="usv-batt"></div>
@@ -351,12 +359,12 @@ flowchart LR
<div class="graph-cell" id="usv-usbl-angle"></div> <div class="graph-cell" id="usv-usbl-angle"></div>
<div class="graph-cell wide" id="usv-motors"></div> <div class="graph-cell wide" id="usv-motors"></div>
<div class="graph-cell wide" id="usv-status"></div> <div class="graph-cell wide" id="usv-status"></div>
</div> </div>
<div class="panel-header" id="auv-panel-header"> <div class="panel-header" id="auv-panel-header">
AUV AUV
<span id="auv-tabs"></span> <span id="auv-tabs"></span>
</div> </div>
<div class="graphs-grid" id="auv-graphs"> <div class="graphs-grid" id="auv-graphs">
<div class="graph-cell" id="auv-pry"></div> <div class="graph-cell" id="auv-pry"></div>
<div class="graph-cell" id="auv-depth"></div> <div class="graph-cell" id="auv-depth"></div>
<div class="graph-cell" id="auv-alt"></div> <div class="graph-cell" id="auv-alt"></div>
@@ -366,6 +374,7 @@ flowchart LR
<div class="graph-cell" id="auv-batt"></div> <div class="graph-cell" id="auv-batt"></div>
<div class="graph-cell" id="auv-status"></div> <div class="graph-cell" id="auv-status"></div>
<div class="graph-cell wide" id="auv-motors"></div> <div class="graph-cell wide" id="auv-motors"></div>
</div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>