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

fix: three equal 120x90 cards in bottom bar (cam, cam, info)

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 12:54:03 +07:00
parent 0c6a0f4852
commit 29d69fb550
1 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,7 +107,7 @@
} }
.bottom-bar { .bottom-bar {
display: flex; display: flex;
align-items: flex-end; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
padding: 4px 8px; padding: 4px 8px;
@@ -116,15 +116,18 @@
height: 100px; height: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
.cam-thumb { .bottom-card {
height: 100%; width: 120px;
height: 90px;
flex-shrink: 0; flex-shrink: 0;
}
.cam-thumb img {
height: 100%;
width: auto;
border-radius: 4px; border-radius: 4px;
border: 1px solid #222; border: 1px solid #222;
overflow: hidden;
}
.bottom-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; display: block;
} }
@@ -149,18 +152,7 @@
.calibrate-status .ok { color: #4ecca3; } .calibrate-status .ok { color: #4ecca3; }
.calibrate-status .fail { color: #ff4444; } .calibrate-status .fail { color: #ff4444; }
/* VAR panel card */ /* VAR panel inherits from .cam-card via shared rule above */
.var-panel-bottom {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 4px 8px;
background: #111128;
border: 1px solid #2a2a4a;
border-radius: 4px;
font-size: 9px;
}
.var-indicator { .var-indicator {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -213,8 +205,11 @@
height: 60px; height: 60px;
} }
/* Camera params card */ /* Info card (same size as cam cards) */
.cam-card { .cam-card, .var-panel-bottom {
width: 120px;
height: 90px;
flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -225,6 +220,7 @@
border-radius: 4px; border-radius: 4px;
font-size: 9px; font-size: 9px;
color: #888; color: #888;
overflow: hidden;
} }
.cc-title { .cc-title {
font-size: 8px; font-size: 8px;
@@ -319,8 +315,8 @@
<div class="tab-full"> <div class="tab-full">
<div class="viewport-3d" id="court-3d"></div> <div class="viewport-3d" id="court-3d"></div>
<div class="bottom-bar"> <div class="bottom-bar">
<div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div> <div class="bottom-card"><img id="court-cam1" alt="Camera 1"></div>
<div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div> <div class="bottom-card"><img id="court-cam0" alt="Camera 0"></div>
<div class="cam-card"> <div class="cam-card">
<div class="cc-title">Base Setup</div> <div class="cc-title">Base Setup</div>
<div class="cc-item">Distance <b id="paramPosY">1.0</b>m</div> <div class="cc-item">Distance <b id="paramPosY">1.0</b>m</div>
@@ -344,8 +340,8 @@
<div class="tab-full"> <div class="tab-full">
<div class="viewport-3d" id="trajectory-3d"></div> <div class="viewport-3d" id="trajectory-3d"></div>
<div class="bottom-bar"> <div class="bottom-bar">
<div class="cam-thumb"><img id="traj-cam1" alt="Camera 1"></div> <div class="bottom-card"><img id="traj-cam1" alt="Camera 1"></div>
<div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div> <div class="bottom-card"><img id="traj-cam0" alt="Camera 0"></div>
<div class="var-panel-bottom"> <div class="var-panel-bottom">
<div class="var-indicator"> <div class="var-indicator">
<div class="var-dot" id="varDot"></div> <div class="var-dot" id="varDot"></div>