Ryan Malloy
145763fcfb
Replace sidebar + 5-screen layout with horizontal tab bar (F1-F4) and persistent StatusStrip. Consolidate Position + Scan screens into Signal (F3) with Monitor/Sweep/Sky Map sub-modes via ModeBar. Screens: - F1 Dashboard: system health, tracking panel, quick actions, presets - F2 Control: motor tuning, compass rose, preset management - F3 Signal: RSSI monitor, 1D sweep (SweepPlot), 2D sky map (heatmap) - F4 System: NVS editor with regex filter, EEPROM, firmware info - F5 Console: push/pop overlay (no longer a tab) New widgets: StatusStrip, ModeBar, SweepPlot, QuickActions, PresetList, ReceiverInfo, MotorTuning, NvsFilter, SystemHealth, TrackingPanel. Removed: PositionScreen, ScanScreen, DeviceStatusBar (functionality absorbed into new screens and StatusStrip). App-level position poll feeds StatusStrip and active screen at ~2 Hz. Fix shared threading.Event across instances (class-level mutable default).
655 lines
13 KiB
Plaintext
655 lines
13 KiB
Plaintext
/* Birdcage TUI — Dark RF Theme
|
|
* Teal accent on deep blue-black. No purple.
|
|
* Signal gradient: blue > cyan > green > yellow > red
|
|
*
|
|
* Layout: Header / StatusStrip / TabBar / ContentSwitcher / Footer
|
|
*/
|
|
|
|
/* ── Global ────────────────────────────────────────── */
|
|
|
|
Screen {
|
|
background: #0a0a12;
|
|
color: #c8d0d8;
|
|
}
|
|
|
|
Header {
|
|
background: #0e1420;
|
|
color: #00d4aa;
|
|
text-style: bold;
|
|
dock: top;
|
|
height: 1;
|
|
}
|
|
|
|
Footer {
|
|
background: #0e1420;
|
|
color: #506878;
|
|
dock: bottom;
|
|
height: 1;
|
|
}
|
|
|
|
/* ── Status Strip ─────────────────────────────────── */
|
|
|
|
#status-strip {
|
|
dock: top;
|
|
height: 1;
|
|
background: #0e1420;
|
|
color: #c8d0d8;
|
|
border-bottom: solid #1a2a3a;
|
|
padding: 0 1;
|
|
}
|
|
|
|
/* ── Tab Bar ──────────────────────────────────────── */
|
|
|
|
#tab-bar {
|
|
dock: top;
|
|
height: 3;
|
|
background: #0a0a12;
|
|
padding: 0 1;
|
|
layout: horizontal;
|
|
}
|
|
|
|
.tab-btn {
|
|
min-width: 16;
|
|
height: 3;
|
|
margin: 0 0 0 0;
|
|
background: #121c2a;
|
|
color: #7090a8;
|
|
text-style: bold;
|
|
border: round #1a3050;
|
|
text-align: center;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
background: #1a2a40;
|
|
color: #00d4aa;
|
|
border: round #00d4aa;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background: #0a2a3a;
|
|
color: #00d4aa;
|
|
border: round #00d4aa;
|
|
text-style: bold;
|
|
}
|
|
|
|
/* ── Mode Bar (within-screen sub-mode toggle) ─────── */
|
|
|
|
.mode-bar {
|
|
height: 3;
|
|
background: #0a0a12;
|
|
padding: 0 1;
|
|
layout: horizontal;
|
|
dock: top;
|
|
}
|
|
|
|
.mode-btn {
|
|
min-width: 14;
|
|
height: 3;
|
|
margin: 0 0 0 0;
|
|
background: #0e1420;
|
|
color: #506878;
|
|
text-style: bold;
|
|
border: round #1a2a3a;
|
|
text-align: center;
|
|
}
|
|
|
|
.mode-btn:hover {
|
|
background: #1a2a40;
|
|
color: #00d4aa;
|
|
border: round #00d4aa;
|
|
}
|
|
|
|
.mode-btn.active {
|
|
background: #0a2a3a;
|
|
color: #00d4aa;
|
|
border: round #00d4aa;
|
|
text-style: bold;
|
|
}
|
|
|
|
/* ── Content Area ─────────────────────────────────── */
|
|
|
|
#content-area {
|
|
width: 1fr;
|
|
height: 1fr;
|
|
}
|
|
|
|
ContentSwitcher {
|
|
width: 1fr;
|
|
height: 1fr;
|
|
}
|
|
|
|
/* ── Console Overlay (ModalScreen) ────────────────── */
|
|
|
|
ConsoleOverlay {
|
|
background: rgba(10, 10, 18, 0.6);
|
|
}
|
|
|
|
#console-overlay {
|
|
dock: bottom;
|
|
height: 50%;
|
|
width: 100%;
|
|
background: #0a0a12;
|
|
border-top: double #00d4aa;
|
|
padding: 0;
|
|
}
|
|
|
|
#console-overlay #serial-log {
|
|
height: 1fr;
|
|
}
|
|
|
|
/* ── Panel / Card ──────────────────────────────────── */
|
|
|
|
.panel {
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
padding: 1 2;
|
|
margin: 0 1 1 1;
|
|
}
|
|
|
|
.panel-title {
|
|
color: #00d4aa;
|
|
text-style: bold;
|
|
margin-bottom: 1;
|
|
}
|
|
|
|
/* ── Data Display ──────────────────────────────────── */
|
|
|
|
.value-large {
|
|
color: #00d4aa;
|
|
text-style: bold;
|
|
}
|
|
|
|
.value-normal {
|
|
color: #c8d0d8;
|
|
}
|
|
|
|
.label {
|
|
color: #506878;
|
|
}
|
|
|
|
.label-dim {
|
|
color: #384858;
|
|
}
|
|
|
|
/* ── Status Indicators ─────────────────────────────── */
|
|
|
|
.status-ok {
|
|
color: #00e060;
|
|
}
|
|
|
|
.status-warn {
|
|
color: #e8a020;
|
|
}
|
|
|
|
.status-error {
|
|
color: #e04040;
|
|
}
|
|
|
|
.status-demo {
|
|
color: #e8a020;
|
|
text-style: italic;
|
|
}
|
|
|
|
/* ── Input Controls ────────────────────────────────── */
|
|
|
|
Input {
|
|
background: #121c2a;
|
|
border: round #1a3050;
|
|
color: #c8d0d8;
|
|
padding: 0 1;
|
|
}
|
|
|
|
Input:focus {
|
|
border: round #00d4aa;
|
|
}
|
|
|
|
Button {
|
|
background: #1a2a40;
|
|
color: #00d4aa;
|
|
border: round #1a3050;
|
|
min-width: 10;
|
|
height: 3;
|
|
}
|
|
|
|
Button:hover {
|
|
background: #00d4aa;
|
|
color: #0a0a12;
|
|
border: round #00d4aa;
|
|
}
|
|
|
|
Button:focus {
|
|
border: round #00d4aa;
|
|
text-style: bold;
|
|
}
|
|
|
|
Button.-active {
|
|
background: #0a3a3a;
|
|
}
|
|
|
|
/* ── Checkbox ──────────────────────────────────────── */
|
|
|
|
Checkbox {
|
|
background: transparent;
|
|
color: #c8d0d8;
|
|
padding: 0 1;
|
|
}
|
|
|
|
Checkbox:focus {
|
|
color: #00d4aa;
|
|
}
|
|
|
|
/* ── DataTable ─────────────────────────────────────── */
|
|
|
|
DataTable {
|
|
background: #0a0a12;
|
|
color: #c8d0d8;
|
|
height: 1fr;
|
|
}
|
|
|
|
DataTable > .datatable--header {
|
|
background: #0e1420;
|
|
color: #00d4aa;
|
|
text-style: bold;
|
|
}
|
|
|
|
DataTable > .datatable--cursor {
|
|
background: #142030;
|
|
color: #c8d0d8;
|
|
}
|
|
|
|
DataTable > .datatable--even-row {
|
|
background: #0a0a12;
|
|
}
|
|
|
|
DataTable > .datatable--odd-row {
|
|
background: #0c0e18;
|
|
}
|
|
|
|
/* ── RichLog ───────────────────────────────────────── */
|
|
|
|
RichLog {
|
|
background: #0a0a12;
|
|
color: #c8d0d8;
|
|
border: round #1a2a3a;
|
|
scrollbar-color: #1a2a38;
|
|
scrollbar-color-active: #00d4aa;
|
|
scrollbar-color-hover: #2a4a58;
|
|
height: 1fr;
|
|
}
|
|
|
|
/* ── Progress Bar ──────────────────────────────────── */
|
|
|
|
ProgressBar {
|
|
padding: 0 1;
|
|
}
|
|
|
|
ProgressBar Bar {
|
|
color: #00d4aa;
|
|
background: #1a2a38;
|
|
}
|
|
|
|
ProgressBar PercentageStatus {
|
|
color: #506878;
|
|
text-style: bold;
|
|
}
|
|
|
|
/* ── Sparkline ─────────────────────────────────────── */
|
|
|
|
.sparkline {
|
|
height: 2;
|
|
padding: 0 1;
|
|
color: #00d4aa;
|
|
background: #0e1420;
|
|
}
|
|
|
|
.sparkline-label {
|
|
color: #506878;
|
|
width: 14;
|
|
}
|
|
|
|
/* ── Compass Rose ──────────────────────────────────── */
|
|
|
|
#compass-container {
|
|
height: auto;
|
|
min-height: 14;
|
|
padding: 1;
|
|
}
|
|
|
|
.compass-readout {
|
|
color: #00d4aa;
|
|
text-style: bold;
|
|
}
|
|
|
|
/* ── Signal Gauge ──────────────────────────────────── */
|
|
|
|
.gauge-container {
|
|
height: 3;
|
|
padding: 0 1;
|
|
}
|
|
|
|
.gauge-bar {
|
|
height: 1;
|
|
}
|
|
|
|
.gauge-label {
|
|
color: #506878;
|
|
width: 8;
|
|
}
|
|
|
|
.gauge-value {
|
|
color: #c8d0d8;
|
|
width: 8;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ── Signal Colors (gradient: blue > cyan > green > yellow > red) ── */
|
|
|
|
.signal-cold {
|
|
color: #2080d0;
|
|
}
|
|
|
|
.signal-cool {
|
|
color: #00b8c8;
|
|
}
|
|
|
|
.signal-mid {
|
|
color: #00e060;
|
|
}
|
|
|
|
.signal-warm {
|
|
color: #e8c020;
|
|
}
|
|
|
|
.signal-hot {
|
|
color: #e04040;
|
|
}
|
|
|
|
/* ── Sky Heatmap ───────────────────────────────────── */
|
|
|
|
.heatmap-container {
|
|
height: 1fr;
|
|
padding: 0;
|
|
}
|
|
|
|
.heatmap-cell {
|
|
width: 2;
|
|
height: 1;
|
|
}
|
|
|
|
/* ── Motor Status ──────────────────────────────────── */
|
|
|
|
.motor-panel {
|
|
height: auto;
|
|
padding: 1 2;
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
}
|
|
|
|
.motor-row {
|
|
layout: horizontal;
|
|
height: 1;
|
|
}
|
|
|
|
.motor-label {
|
|
color: #506878;
|
|
width: 14;
|
|
}
|
|
|
|
.motor-value {
|
|
color: #c8d0d8;
|
|
}
|
|
|
|
/* ── Console Input Area ───────────────────────────── */
|
|
|
|
.console-input-area {
|
|
dock: bottom;
|
|
height: auto;
|
|
width: 100%;
|
|
layout: horizontal;
|
|
padding: 0 1;
|
|
background: #0e1420;
|
|
border-top: solid #1a2a38;
|
|
}
|
|
|
|
.console-input-area .label {
|
|
width: auto;
|
|
}
|
|
|
|
#console-input {
|
|
width: 1fr;
|
|
}
|
|
|
|
.console-input-area Button {
|
|
width: 10;
|
|
margin-left: 1;
|
|
}
|
|
|
|
.console-context {
|
|
dock: bottom;
|
|
height: 1;
|
|
padding: 0 1;
|
|
background: #0e1420;
|
|
color: #506878;
|
|
}
|
|
|
|
/* ── Prompt Colors (by submenu) ────────────────────── */
|
|
|
|
.prompt-trk {
|
|
color: #00d4aa;
|
|
}
|
|
|
|
.prompt-mot {
|
|
color: #00e060;
|
|
}
|
|
|
|
.prompt-dvb {
|
|
color: #2080d0;
|
|
}
|
|
|
|
.prompt-nvs {
|
|
color: #e8a020;
|
|
}
|
|
|
|
.prompt-a3981 {
|
|
color: #00b8c8;
|
|
}
|
|
|
|
.prompt-step {
|
|
color: #40c0a0;
|
|
}
|
|
|
|
.prompt-os {
|
|
color: #8090a0;
|
|
}
|
|
|
|
.prompt-other {
|
|
color: #506878;
|
|
}
|
|
|
|
/* ── Quick Actions (Dashboard) ────────────────────── */
|
|
|
|
.quick-actions {
|
|
height: auto;
|
|
layout: horizontal;
|
|
padding: 0 1;
|
|
}
|
|
|
|
.quick-action-btn {
|
|
min-width: 16;
|
|
height: 3;
|
|
margin: 0 1 0 0;
|
|
background: #1a2a40;
|
|
color: #00d4aa;
|
|
border: round #1a3050;
|
|
text-style: bold;
|
|
}
|
|
|
|
.quick-action-btn:hover {
|
|
background: #00d4aa;
|
|
color: #0a0a12;
|
|
border: round #00d4aa;
|
|
}
|
|
|
|
/* ── System Health (Dashboard) ────────────────────── */
|
|
|
|
.system-health {
|
|
height: auto;
|
|
padding: 1 2;
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
margin: 0 1;
|
|
}
|
|
|
|
/* ── Preset List ──────────────────────────────────── */
|
|
|
|
.preset-controls {
|
|
height: auto;
|
|
layout: horizontal;
|
|
padding: 0 1;
|
|
dock: bottom;
|
|
}
|
|
|
|
.preset-controls Button {
|
|
margin-right: 1;
|
|
}
|
|
|
|
/* ── Tracking Panel ───────────────────────────────── */
|
|
|
|
.tracking-panel {
|
|
height: auto;
|
|
padding: 1 2;
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
}
|
|
|
|
.tracking-status {
|
|
color: #506878;
|
|
}
|
|
|
|
/* ── Receiver Info ────────────────────────────────── */
|
|
|
|
.receiver-info {
|
|
height: auto;
|
|
padding: 1 2;
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
}
|
|
|
|
/* ── Sweep Plot ───────────────────────────────────── */
|
|
|
|
.sweep-plot {
|
|
height: auto;
|
|
min-height: 8;
|
|
padding: 1 2;
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
}
|
|
|
|
/* ── NVS Filter ───────────────────────────────────── */
|
|
|
|
.nvs-filter {
|
|
height: auto;
|
|
layout: horizontal;
|
|
padding: 0 1;
|
|
dock: top;
|
|
background: #0e1420;
|
|
border-bottom: solid #1a2a3a;
|
|
}
|
|
|
|
.nvs-filter Input {
|
|
width: 1fr;
|
|
margin-right: 1;
|
|
}
|
|
|
|
/* ── Motor Tuning (PID editor) ────────────────────── */
|
|
|
|
.motor-tuning {
|
|
height: auto;
|
|
padding: 1 2;
|
|
background: #0e1420;
|
|
border: round #1a2a3a;
|
|
}
|
|
|
|
.pid-row {
|
|
layout: horizontal;
|
|
height: 3;
|
|
}
|
|
|
|
.pid-row .label {
|
|
width: 4;
|
|
}
|
|
|
|
.pid-row Input {
|
|
width: 8;
|
|
margin-right: 1;
|
|
}
|
|
|
|
/* ── Scan Controls ────────────────────────────────── */
|
|
|
|
.scan-controls {
|
|
dock: bottom;
|
|
height: auto;
|
|
padding: 1;
|
|
background: #0e1420;
|
|
border-top: solid #1a2a38;
|
|
}
|
|
|
|
.scan-status {
|
|
height: 2;
|
|
padding: 0 1;
|
|
color: #506878;
|
|
}
|
|
|
|
/* ── Screen-Level Layouts ──────────────────────────── */
|
|
|
|
.screen-container {
|
|
layout: vertical;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.top-row {
|
|
layout: horizontal;
|
|
height: 1fr;
|
|
}
|
|
|
|
.bottom-controls {
|
|
dock: bottom;
|
|
height: auto;
|
|
padding: 1;
|
|
background: #0e1420;
|
|
border-top: solid #1a2a38;
|
|
layout: horizontal;
|
|
}
|
|
|
|
.control-group {
|
|
layout: horizontal;
|
|
height: 3;
|
|
width: 1fr;
|
|
}
|
|
|
|
.control-group Input {
|
|
width: 8;
|
|
margin-right: 1;
|
|
}
|
|
|
|
.control-group Button {
|
|
margin-right: 1;
|
|
}
|
|
|
|
/* ── NVS Table Highlight ───────────────────────────── */
|
|
|
|
.nvs-modified {
|
|
color: #e8a020;
|
|
text-style: bold;
|
|
}
|
|
|
|
/* ── Scrollbar Styling ─────────────────────────────── */
|
|
|
|
* {
|
|
scrollbar-color: #1a2a38;
|
|
scrollbar-color-active: #00d4aa;
|
|
scrollbar-color-hover: #2a4a58;
|
|
scrollbar-background: #0a0a12;
|
|
}
|