sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat](trx-frontend-http): add theme toggle and themed map/audio visuals

Browse Source 
Add dark/light mode selector below logo and wire theme-aware visuals.\n\n- add compact theme toggle control under header logo\n- support persistent dark/light theme switching\n- use emoji labels for theme toggle actions\n- make jog and audio level visuals theme-aware\n- add dark-mode map tile layer and live layer switching on theme changes\n- keep responsive behavior for header graph and controls\n\nCo-authored-by: OpenAI Codex <codex@openai.com>

Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
Stan Grams
2026-02-13 02:08:40 +01:00
parent 53ce663adc
commit f637cf23d3
3 changed files with 142 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+62 -4
View File
@@ -34,6 +34,7 @@ const serverSubtitle = document.getElementById("server-subtitle");
const loadingTitle = document.getElementById("loading-title");
const loadingSub = document.getElementById("loading-sub");
const headerSigCanvas = document.getElementById("header-sig-canvas");
const themeToggleBtn = document.getElementById("theme-toggle");
let lastControl;
let lastTxEn = null;
@@ -61,6 +62,35 @@ let jogAngle = 0;
let lastClientCount = null;
let lastLocked = false;
const originalTitle = document.title;
const savedTheme = loadSetting("theme", null);
function currentTheme() {
return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
}
function setTheme(theme) {
const next = theme === "light" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", next);
saveSetting("theme", next);
if (themeToggleBtn) {
themeToggleBtn.textContent = next === "dark" ? "☀️ Light" : "🌙 Dark";
themeToggleBtn.title = next === "dark" ? "Switch to light mode" : "Switch to dark mode";
}
}
if (savedTheme === "light" || savedTheme === "dark") {
setTheme(savedTheme);
} else {
const prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
setTheme(prefersLight ? "light" : "dark");
}
if (themeToggleBtn) {
themeToggleBtn.addEventListener("click", () => {
setTheme(currentTheme() === "dark" ? "light" : "dark");
updateMapBaseLayerForTheme(currentTheme());
});
}
function readyText() {
return lastClientCount !== null ? `Ready \u00b7 ${lastClientCount} user${lastClientCount !== 1 ? "s" : ""}` : "Ready";
@@ -956,11 +986,42 @@ window.addEventListener("resize", resizeHeaderSignalCanvas);
// --- Leaflet Map (lazy-initialized) ---
let aprsMap = null;
let aprsMapBaseLayer = null;
let aprsMapReceiverMarker = null;
const stationMarkers = new Map();
const mapMarkers = new Set();
const mapFilter = { aprs: true, ft8: true };
function mapTileSpecForTheme(theme) {
if (theme === "dark") {
return {
url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
options: {
maxZoom: 19,
subdomains: "abcd",
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
},
};
}
return {
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
options: {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
},
};
}
function updateMapBaseLayerForTheme(theme) {
if (!aprsMap) return;
if (aprsMapBaseLayer) {
aprsMap.removeLayer(aprsMapBaseLayer);
aprsMapBaseLayer = null;
}
const spec = mapTileSpecForTheme(theme);
aprsMapBaseLayer = L.tileLayer(spec.url, spec.options).addTo(aprsMap);
}
function initAprsMap() {
const mapEl = document.getElementById("aprs-map");
if (!mapEl) return;
@@ -972,10 +1033,7 @@ function initAprsMap() {
const zoom = hasLocation ? 10 : 2;
aprsMap = L.map("aprs-map").setView(center, zoom);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(aprsMap);
updateMapBaseLayerForTheme(currentTheme());
if (hasLocation) {
const popupText = serverCallsign ? serverCallsign : "Receiver";
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+5 -2
View File
@@ -20,7 +20,10 @@
<div class="header-signal-wrap" aria-hidden="true">
<canvas id="header-sig-canvas"></canvas>
</div>
<div class="header-right">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
</div>
</div>
<div class="tab-bar">
<button class="tab active" data-tab="main">Main</button>
@@ -115,8 +118,8 @@
<button id="tx-audio-btn" type="button">TX Audio</button>
<label class="vol-label">RX<input type="range" id="rx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="rx-vol-pct">80%</small></label>
<label class="vol-label">TX<input type="range" id="tx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="tx-vol-pct">80%</small></label>
<div id="audio-level" style="flex: 1 1 auto; height: 12px; border-radius: 999px; background: #1f2937; border: 1px solid #2d3748; overflow: hidden; min-width: 80px;">
<div id="audio-level-fill" style="height: 100%; width: 0%; background: linear-gradient(90deg, #00d17f, #f0ad4e); transition: width 100ms ease;"></div>
<div id="audio-level">
<div id="audio-level-fill"></div>
</div>
<small id="audio-status" style="min-width: 60px;">Off</small>
</div>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+74 -2
View File
@@ -12,6 +12,38 @@
--accent-green: #00d17f;
--accent-yellow: #f0ad4e;
--accent-red: #e55353;
--jog-hi: #2a3444;
--jog-lo: #1a2230;
--jog-shadow: rgba(0,0,0,0.3);
--jog-inset: rgba(255,255,255,0.05);
--audio-level-bg: #1f2937;
--audio-level-border: #2d3748;
--audio-level-fill-start: #00d17f;
--audio-level-fill-end: #f0ad4e;
}
[data-theme="light"] {
--bg: #edf2f7;
--card-bg: #ffffff;
--input-bg: #f7fafc;
--border: #d6deea;
--border-light: #bcc8da;
--text: #1a202c;
--text-muted: #4a5568;
--text-heading: #2d3748;
--btn-bg: #e6edf8;
--btn-border: #a9b8cf;
--accent-green: #0f9d61;
--accent-yellow: #b57600;
--accent-red: #cf3f3f;
--jog-hi: #e6edf8;
--jog-lo: #cdd9eb;
--jog-shadow: rgba(58, 79, 110, 0.18);
--jog-inset: rgba(255,255,255,0.75);
--audio-level-bg: #edf2fb;
--audio-level-border: #b8c5da;
--audio-level-fill-start: #0f9d61;
--audio-level-fill-end: #b57600;
}
body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding-top: 2em; background: var(--bg); color: var(--text); }
@@ -61,12 +93,12 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
width: 83.2px;
height: 83.2px;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #2a3444, #1a2230);
background: radial-gradient(circle at 40% 35%, var(--jog-hi), var(--jog-lo));
border: 2px solid var(--border-light);
position: relative;
cursor: grab;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
box-shadow: 0 2px 8px var(--jog-shadow), inset 0 1px 0 var(--jog-inset);
user-select: none;
-webkit-user-select: none;
touch-action: none;
@@ -177,7 +209,31 @@ small { color: var(--text-muted); }
height: 100%;
display: block;
}
.header-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.theme-toggle-btn {
height: 1.7rem;
min-height: 1.7rem;
padding: 0 0.65rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 999px;
border: 1px solid var(--btn-border);
background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #ffffff), var(--btn-bg));
color: var(--text);
}
[data-theme="light"] .theme-toggle-btn {
background: linear-gradient(135deg, #0f172a, #334155);
border-color: #334155;
color: #f8fafc;
}
.subtitle { color: var(--text-muted); font-size: 0.95rem; }
.subtitle a { color: var(--accent-green); text-decoration: none; }
.subtitle a:hover { text-decoration: underline; }
@@ -250,6 +306,21 @@ small { color: var(--text-muted); }
border: none;
cursor: pointer;
}
#audio-level {
flex: 1 1 auto;
height: 12px;
border-radius: 999px;
background: var(--audio-level-bg);
border: 1px solid var(--audio-level-border);
overflow: hidden;
min-width: 80px;
}
#audio-level-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--audio-level-fill-start), var(--audio-level-fill-end));
transition: width 100ms ease;
}
.sub-tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
.sub-tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.35rem 0.75rem; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; height: auto; }
@@ -308,6 +379,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
input.status-input, select.status-input { font-size: 1.1rem; }
.header-text { width: auto; min-width: 0; flex: 0 1 auto; }
.header-signal-wrap { display: none; }
.header-right { align-items: flex-end; }
.controls-row { grid-template-columns: 1fr auto; }
.controls-col-power { grid-column: 1 / -1; }
.ft8-controls { flex-wrap: wrap; }