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

fix: fixed 80px bottom bar, compact cards same height as cam thumbs

Browse Source 
- Bottom bar fixed height, all items aligned
- Cam card and VAR card compact vertical, fit within bar
- Trajectory same layout as court
- VAR snapshot removed from bottom bar (too large)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 12:49:51 +07:00
parent 08e280d617
commit 59203a7838
1 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,19 +107,22 @@
}
.bottom-bar {
display: flex;
align-items: center;
align-items: stretch;
justify-content: center;
gap: 8px;
padding: 6px 8px;
gap: 6px;
padding: 4px 8px;
background: #0d0d20;
border-top: 1px solid #222;
height: 80px;
flex-shrink: 0;
}
.cam-thumb {
width: 200px;
height: 100%;
flex-shrink: 0;
}
.cam-thumb img {
width: 100%;
height: 100%;
width: auto;
border-radius: 4px;
border: 1px solid #222;
display: block;
@@ -128,33 +131,35 @@
/* Sidebar panel (unused, kept for compat) */
.sidebar-panel { display: none; }
.btn-calibrate {
width: 100%;
padding: 8px 12px;
padding: 3px 8px;
background: #4ecca3;
color: #000;
border: none;
border-radius: 6px;
font-size: 13px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-calibrate:hover { background: #3dbb92; }
.btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; }
.calibrate-status {
font-size: 11px;
font-size: 8px;
color: #666;
line-height: 1.6;
}
.calibrate-status .ok { color: #4ecca3; }
.calibrate-status .fail { color: #ff4444; }
/* VAR panel (bottom bar version) */
/* VAR panel card */
.var-panel-bottom {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 12px;
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 {
display: flex;
@@ -208,31 +213,31 @@
height: 60px;
}
/* Camera params card (vertical) */
/* Camera params card */
.cam-card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 10px;
justify-content: center;
gap: 1px;
padding: 4px 8px;
background: #111128;
border: 1px solid #2a2a4a;
border-radius: 6px;
font-size: 11px;
border-radius: 4px;
font-size: 9px;
color: #888;
min-width: 120px;
}
.cc-title {
font-size: 10px;
font-size: 8px;
font-weight: 700;
color: #666;
color: #555;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.cc-item {
display: flex;
justify-content: space-between;
gap: 8px;
gap: 6px;
line-height: 1.2;
}
.cc-item b {
color: #4ecca3;
@@ -240,7 +245,7 @@
}
.cc-divider {
border-top: 1px solid #2a2a4a;
margin: 3px 0;
margin: 1px 0;
}
/* Event banner */
@@ -346,13 +351,9 @@
<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-line" id="varLine" style="color:#ccc;font-size:9px">No events</div>
<div class="var-timer" id="varTimer" style="color:#ff6666;font-size:10px;font-weight:700"></div>
<div class="var-dist" id="varDist" style="color:#888;font-size:9px"></div>
</div>
</div>
</div>
@@ -923,9 +924,12 @@ setInterval(function() {
// Show snapshot
if (data.snapshot_b64) {
var img = document.getElementById('varSnapshot');
img.src = 'data:image/jpeg;base64,' + data.snapshot_b64;
img.style.display = 'block';
document.getElementById('varSnapshotEmpty').style.display = 'none';
if (img) {
img.src = 'data:image/jpeg;base64,' + data.snapshot_b64;
img.style.display = 'block';
}
var empty = document.getElementById('varSnapshotEmpty');
if (empty) empty.style.display = 'none';
}
})
.catch(function() {});