sl-webui
cc3a65f4a4
Adds a full gimbal control panel with live camera preview: Standalone page (ui/gimbal_panel.html + .js + .css): - Self-contained HTML page, no build step, served directly - roslib.js via CDN, connects to rosbridge WebSocket - 2-D canvas pan/tilt pad: click-drag + touch pointer capture - Live camera stream (front/rear/left/right selector, base64 CompressedImage) - FPS badge + angle overlay on video feed - Preset positions: CENTER / LEFT / RIGHT / UP / DOWN - Home button (0° / 0°) - Person-tracking toggle → /gimbal/tracking_enabled - Current angle display from /gimbal/state feedback - WS URL persisted in localStorage React component (GimbalPanel.jsx) + App.jsx integration: - Same features in dashboard — TELEOP group → Gimbal tab - Shares rosbridge connection from parent - Mobile-responsive: stacks vertically on mobile, side-by-side on lg+ ROS topics: PUB /gimbal/cmd geometry_msgs/Vector3 SUB /gimbal/state geometry_msgs/Vector3 PUB /gimbal/tracking_enabled std_msgs/Bool SUB /camera/*/image_raw/compressed sensor_msgs/CompressedImage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
211 lines
6.5 KiB
CSS
211 lines
6.5 KiB
CSS
/* gimbal_panel.css — Saltybot Gimbal Control Panel (Issue #551) */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 12px;
|
|
background: #050510;
|
|
color: #d1d5db;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── Header ── */
|
|
#header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 16px;
|
|
background: #070712;
|
|
border-bottom: 1px solid #083344;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
#header .logo { color: #f97316; font-weight: bold; letter-spacing: 0.15em; font-size: 13px; }
|
|
#conn-bar { display: flex; align-items: center; gap: 6px; }
|
|
#conn-dot { width: 8px; height: 8px; border-radius: 50%; background: #374151; flex-shrink: 0; }
|
|
#conn-dot.connected { background: #4ade80; }
|
|
#conn-dot.error { background: #f87171; }
|
|
#ws-input {
|
|
background: #111827; border: 1px solid #1e3a5f; border-radius: 4px;
|
|
color: #67e8f9; padding: 2px 8px; font-family: monospace; font-size: 11px; width: 200px;
|
|
}
|
|
#ws-input:focus { outline: none; border-color: #0891b2; }
|
|
.btn {
|
|
padding: 3px 10px; border-radius: 4px; border: 1px solid; cursor: pointer;
|
|
font-family: monospace; font-size: 10px; font-weight: bold; letter-spacing: 0.05em;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-cyan { background: #083344; border-color: #155e75; color: #67e8f9; }
|
|
.btn-cyan:hover { background: #0e4f69; }
|
|
.btn-green { background: #052e16; border-color: #166534; color: #4ade80; }
|
|
.btn-green:hover { background: #0a4a24; }
|
|
.btn-amber { background: #451a03; border-color: #92400e; color: #fcd34d; }
|
|
.btn-amber:hover { background: #6b2b04; }
|
|
.btn-red { background: #450a0a; border-color: #991b1b; color: #f87171; }
|
|
.btn-red:hover { background: #6b1010; }
|
|
.btn-red.active { background: #7f1d1d; border-color: #dc2626; color: #fca5a5; animation: pulse 1.5s infinite; }
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.65; }
|
|
}
|
|
|
|
/* ── Main layout ── */
|
|
#main {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
#main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
|
|
body { font-size: 11px; overflow-y: auto; height: auto; }
|
|
}
|
|
|
|
/* ── Camera feed ── */
|
|
#camera-section {
|
|
display: flex; flex-direction: column; gap: 8px; min-height: 0;
|
|
}
|
|
#cam-toolbar {
|
|
display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap;
|
|
}
|
|
#cam-toolbar span { color: #6b7280; font-size: 10px; margin-left: auto; }
|
|
#camera-frame {
|
|
flex: 1;
|
|
background: #000;
|
|
border-radius: 8px;
|
|
border: 1px solid #083344;
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 160px;
|
|
}
|
|
#camera-img {
|
|
max-width: 100%; max-height: 100%;
|
|
object-fit: contain;
|
|
display: none;
|
|
}
|
|
#camera-img.visible { display: block; }
|
|
#no-signal {
|
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
color: #374151; user-select: none;
|
|
}
|
|
#no-signal .icon { font-size: 36px; }
|
|
#fps-badge {
|
|
position: absolute; top: 8px; right: 8px;
|
|
background: rgba(0,0,0,0.7); color: #4ade80;
|
|
padding: 2px 6px; border-radius: 4px; font-size: 10px;
|
|
display: none;
|
|
}
|
|
#fps-badge.visible { display: block; }
|
|
|
|
/* Angle overlay on camera */
|
|
#angle-overlay {
|
|
position: absolute; bottom: 8px; left: 8px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 4px 8px; border-radius: 4px;
|
|
color: #67e8f9; font-size: 10px; font-family: monospace;
|
|
display: none;
|
|
}
|
|
#angle-overlay.visible { display: block; }
|
|
|
|
/* ── Controls sidebar ── */
|
|
#controls {
|
|
display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0;
|
|
}
|
|
|
|
.card {
|
|
background: #070712; border: 1px solid #083344;
|
|
border-radius: 8px; padding: 10px;
|
|
}
|
|
.card-title {
|
|
font-size: 9px; font-weight: bold; letter-spacing: 0.15em;
|
|
color: #0891b2; margin-bottom: 8px; text-transform: uppercase;
|
|
}
|
|
|
|
/* ── Pan/Tilt Joystick ── */
|
|
#pad-wrap {
|
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
}
|
|
#gimbal-pad {
|
|
cursor: crosshair;
|
|
border-radius: 6px;
|
|
border: 1px solid #1e3a5f;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
.pad-labels {
|
|
display: grid; grid-template-columns: 1fr auto 1fr;
|
|
width: 200px; font-size: 9px; color: #4b5563; text-align: center; align-items: center;
|
|
}
|
|
|
|
/* ── Angle display ── */
|
|
#angle-display {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
|
|
}
|
|
.angle-box {
|
|
background: #0a0a1a; border: 1px solid #1e3a5f; border-radius: 6px;
|
|
padding: 6px; display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.angle-label { font-size: 9px; color: #6b7280; }
|
|
.angle-value { font-size: 18px; color: #67e8f9; font-family: monospace; }
|
|
.angle-unit { font-size: 9px; color: #374151; }
|
|
|
|
/* ── Presets ── */
|
|
#presets {
|
|
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
|
|
}
|
|
#presets button { padding: 6px 4px; text-align: center; line-height: 1.3; }
|
|
#presets button .preset-name { display: block; font-size: 9px; font-weight: bold; letter-spacing: 0.05em; }
|
|
#presets button .preset-val { display: block; font-size: 9px; color: #6b7280; }
|
|
|
|
/* Home button */
|
|
#btn-home {
|
|
width: 100%; padding: 8px;
|
|
background: #1c1c2e; border: 1px solid #374151; border-radius: 6px;
|
|
color: #9ca3af; font-family: monospace; font-size: 10px; font-weight: bold;
|
|
letter-spacing: 0.1em; cursor: pointer; transition: background 0.15s;
|
|
}
|
|
#btn-home:hover { background: #2d2d44; color: #d1d5db; }
|
|
|
|
/* Tracking toggle */
|
|
#tracking-row {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.toggle-label { font-size: 10px; color: #9ca3af; }
|
|
.toggle-switch {
|
|
position: relative; width: 40px; height: 20px;
|
|
}
|
|
.toggle-switch input { opacity: 0; width: 0; height: 0; }
|
|
.toggle-slider {
|
|
position: absolute; inset: 0;
|
|
background: #1f2937; border-radius: 10px; cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.toggle-slider::before {
|
|
content: ''; position: absolute;
|
|
width: 14px; height: 14px; border-radius: 50%;
|
|
background: #6b7280; top: 3px; left: 3px;
|
|
transition: transform 0.2s, background 0.2s;
|
|
}
|
|
.toggle-switch input:checked + .toggle-slider { background: #0c4a6e; }
|
|
.toggle-switch input:checked + .toggle-slider::before {
|
|
background: #38bdf8; transform: translateX(20px);
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
#footer {
|
|
background: #070712; border-top: 1px solid #083344;
|
|
padding: 4px 16px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
flex-shrink: 0; font-size: 10px; color: #374151;
|
|
}
|