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

[feat](trx-frontend-http): assign distinct colours to bookmark categories

Browse Source 
Named categories are sorted alphabetically and assigned colours from an
8-colour palette (blue, green, orange, red, purple, teal, pink, indigo).
Uncategorised bookmarks fall back to --accent-yellow (the leading UI
colour). Both the canvas dashed lines and the axis span labels (icon,
text, border, background) reflect the category colour via CSS custom
properties --bm-cat-color / --bm-cat-bg / --bm-cat-border.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-01 20:30:36 +01:00
parent 0af9b73bb9
commit 55e0a62e4b
2 changed files with 45 additions and 6 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
+39 -1
View File
@@ -4273,12 +4273,14 @@ function drawSpectrum(data) {
? _bmListRef.filter((bm) => bm.freq_hz >= range.visLoHz && bm.freq_hz <= range.visHiHz)
: [];
if (visBookmarks.length > 0) {
const colorMap = bmCategoryColorMap();
ctx.save();
ctx.strokeStyle = pal.waveformPeak.replace(/[\d.]+\)$/, "0.65)");
ctx.lineWidth = 1 * dpr;
ctx.setLineDash([4 * dpr, 3 * dpr]);
for (const bm of visBookmarks) {
const x = hzToX(bm.freq_hz);
const col = colorMap[bm.category || ""];
ctx.strokeStyle = col ? bmHexToRgba(col, 0.65) : pal.waveformPeak.replace(/[\d.]+\)$/, "0.65)");
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, H);
@@ -4293,6 +4295,34 @@ function drawSpectrum(data) {
drawSignalOverlay();
}
// Distinct colours for named bookmark categories (uncategorised uses --accent-yellow).
const BM_PALETTE = [
"#4299e1", // blue
"#48bb78", // green
"#ed8936", // orange
"#f56565", // red
"#9f7aea", // purple
"#38b2ac", // teal
"#ed64a6", // pink
"#667eea", // indigo
];
function bmHexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r},${g},${b},${alpha})`;
}
// Returns a map of category → hex colour. Empty-string key = uncategorised (no entry).
function bmCategoryColorMap() {
const ref = typeof bmList !== "undefined" ? bmList : [];
const cats = [...new Set(ref.map((b) => b.category).filter(Boolean))].sort();
const map = {};
cats.forEach((cat, i) => { map[cat] = BM_PALETTE[i % BM_PALETTE.length]; });
return map;
}
function updateBookmarkAxis(range) {
const axisEl = document.getElementById("spectrum-bookmark-axis");
if (!axisEl) return;
@@ -4316,6 +4346,7 @@ function updateBookmarkAxis(range) {
if (axisEl.dataset.bmKey !== newKey) {
axisEl.dataset.bmKey = newKey;
axisEl.innerHTML = "";
const colorMap = bmCategoryColorMap();
const esc = (s) => String(s)
.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
for (const bm of visBookmarks) {
@@ -4328,6 +4359,13 @@ function updateBookmarkAxis(range) {
"<svg class='bm-icon-svg' viewBox='0 0 8 12' width='8' height='12' aria-hidden='true'>" +
"<path d='M0,0 h8 v10 l-4,2 l-4,-2 Z'/>" +
"</svg>\u00a0" + esc(bm.name);
// Apply category colour; uncategorised falls back to --accent-yellow via CSS.
const col = colorMap[bm.category || ""];
if (col) {
span.style.setProperty("--bm-cat-color", col);
span.style.setProperty("--bm-cat-bg", bmHexToRgba(col, 0.15));
span.style.setProperty("--bm-cat-border", bmHexToRgba(col, 0.55));
}
span.addEventListener("click", () => {
if (typeof bmApply === "function") bmApply(bm);
});
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+6 -5
View File
@@ -1539,9 +1539,9 @@ button:focus-visible, input:focus-visible, select:focus-visible {
cursor: pointer;
font-weight: 600;
font-size: 0.66rem;
background: var(--card-bg);
color: var(--accent-yellow);
border: 1px solid color-mix(in srgb, var(--accent-yellow) 55%, transparent);
background: var(--bm-cat-bg, var(--card-bg));
color: var(--bm-cat-color, var(--accent-yellow));
border: 1px solid var(--bm-cat-border, color-mix(in srgb, var(--accent-yellow) 55%, transparent));
border-radius: 3px;
padding: 2px 8px;
max-width: 130px;
@@ -1553,10 +1553,11 @@ button:focus-visible, input:focus-visible, select:focus-visible {
gap: 4px;
}
#spectrum-bookmark-axis span:hover {
background: color-mix(in srgb, var(--accent-yellow) 28%, transparent);
background: var(--bm-cat-bg, color-mix(in srgb, var(--accent-yellow) 28%, transparent));
filter: brightness(1.15);
}
.bm-icon-svg path {
fill: var(--accent-yellow);
fill: var(--bm-cat-color, var(--accent-yellow));
}
#spectrum-tooltip {
display: none;