fix: swap cam0/cam1 order and horizontal camera layout on all tabs
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
@@ -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;
|
||||
@@ -281,57 +265,64 @@
|
||||
<!-- Tab 1: Detection -->
|
||||
<div class="tab-content active" id="tab-detection">
|
||||
<div class="cameras">
|
||||
<div class="cam-box">
|
||||
<img id="det-cam0" alt="Camera 0">
|
||||
</div>
|
||||
<div class="cam-box">
|
||||
<img id="det-cam1" alt="Camera 1">
|
||||
</div>
|
||||
<div class="cam-box">
|
||||
<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">
|
||||
<span id="calStatusText">Not calibrated</span>
|
||||
</div>
|
||||
<div class="sidebar-panel">
|
||||
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
|
||||
<div class="calibrate-status" id="calStatus">
|
||||
<span id="calStatusText">Not calibrated</span>
|
||||
</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>
|
||||
<div class="var-label" id="varLabel">VAR</div>
|
||||
</div>
|
||||
<div class="var-info" id="varInfo">
|
||||
<div class="var-line" id="varLine">No events</div>
|
||||
<div class="var-timer" id="varTimer"></div>
|
||||
<div class="var-dist" id="varDist"></div>
|
||||
</div>
|
||||
<img class="var-snapshot" id="varSnapshot" style="display:none">
|
||||
<div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
|
||||
<div class="var-panel-sidebar">
|
||||
<div class="var-indicator">
|
||||
<div class="var-dot" id="varDot"></div>
|
||||
<div class="var-label" id="varLabel">VAR</div>
|
||||
</div>
|
||||
<div class="var-info" id="varInfo">
|
||||
<div class="var-line" id="varLine">No events</div>
|
||||
<div class="var-timer" id="varTimer"></div>
|
||||
<div class="var-dist" id="varDist"></div>
|
||||
</div>
|
||||
<img class="var-snapshot" id="varSnapshot" style="display:none">
|
||||
<div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user