dsrptlab/pickle_vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: swap cam0/cam1 order and horizontal camera layout on all tabs

Browse Source 
Cameras now display as a horizontal panorama (cam1 left, cam0 right)
on Detection, Court, and Trajectory tabs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 11:06:00 +07:00
parent b87665e8bc
commit 9ebee2a529
1 changed files with 52 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/web/templates/index.html
View File

@@ -94,50 +94,34 @@
}
.viewport-3d canvas { width: 100% !important; height: 100% !important; }
/* Split layout: 3D left ~80%, sidebar right ~20% with cam previews */
.split-layout {
/* Bottom layout: 3D + sidebar panel */
.court-bottom, .traj-bottom {
display: flex;
height: calc(100vh - 100px);
height: calc(100vh - 100px - 30vw);
overflow: hidden;
}
.split-main {
.court-main, .traj-main {
flex: 1;
position: relative;
min-width: 0;
}
.split-main .viewport-3d {
.court-main .viewport-3d,
.traj-main .viewport-3d {
width: 100%;
height: 100%;
border-top: none;
}
.split-sidebar {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
background: #0d0d20;
border-left: 1px solid #222;
overflow-y: auto;
}
.split-sidebar img {
width: 100%;
border-radius: 4px;
border: 1px solid #222;
display: block;
}
/* Sidebar panel (calibration, etc.) */
.sidebar-panel {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: #111128;
border-radius: 6px;
border: 1px solid #222;
margin-top: 4px;
border-left: 1px solid #222;
}
.btn-calibrate {
width: 100%;
@@ -163,14 +147,14 @@
/* VAR panel (sidebar version) */
.var-panel-sidebar {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: #111128;
border-radius: 6px;
border: 1px solid #222;
margin-top: 4px;
border-left: 1px solid #222;
}
.var-indicator {
display: flex;
@@ -282,23 +266,28 @@
<div class="tab-content active" id="tab-detection">
<div class="cameras">
<div class="cam-box">
<img id="det-cam0" alt="Camera 0">
<img id="det-cam1" alt="Camera 1">
</div>
<div class="cam-box">
<img id="det-cam1" alt="Camera 1">
<img id="det-cam0" alt="Camera 0">
</div>
</div>
</div>
<!-- Tab 2: Court — 3D left, sidebar right with cams + calibration -->
<!-- Tab 2: Court — cameras on top, 3D below -->
<div class="tab-content" id="tab-court">
<div class="split-layout">
<div class="split-main">
<div class="cameras">
<div class="cam-box">
<img id="court-cam1" alt="Camera 1">
</div>
<div class="cam-box">
<img id="court-cam0" alt="Camera 0">
</div>
</div>
<div class="court-bottom">
<div class="court-main">
<div class="viewport-3d" id="court-3d"></div>
</div>
<div class="split-sidebar">
<img id="court-cam0" alt="Camera 0">
<img id="court-cam1" alt="Camera 1">
<div class="sidebar-panel">
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
<div class="calibrate-status" id="calStatus">
@@ -306,19 +295,22 @@
</div>
</div>
</div>
</div>
</div>
<!-- Tab 3: Trajectory — 3D left, cam previews + VAR panel right -->
<!-- Tab 3: Trajectory — cameras on top, 3D below -->
<div class="tab-content" id="tab-trajectory">
<div class="split-layout">
<div class="split-main">
<div class="cameras">
<div class="cam-box">
<img id="traj-cam1" alt="Camera 1">
</div>
<div class="cam-box">
<img id="traj-cam0" alt="Camera 0">
</div>
</div>
<div class="traj-bottom">
<div class="traj-main">
<div class="viewport-3d" id="trajectory-3d"></div>
</div>
<div class="split-sidebar">
<img id="traj-cam0" alt="Camera 0">
<img id="traj-cam1" alt="Camera 1">
<!-- VAR panel in sidebar -->
<div class="var-panel-sidebar">
<div class="var-indicator">
<div class="var-dot" id="varDot"></div>
@@ -333,7 +325,6 @@
<div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
</div>
</div>
</div>
</div>
<div class="info-panel" id="infoPanel" style="display:none">