dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-03-30 17:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Customization: show what each color affects

Browse Source 
Each color picker now has a description underneath:
- Accent: 'Active nav tab, buttons, links, selected rows, badges'
- Status Green: 'Healthy nodes, online indicators, good SNR'
- Repeater: 'Infrastructure nodes — map markers, packet path badges'
etc.
This commit is contained in:
you
2026-03-23 00:45:02 +00:00
parent b1737bff54
commit 82e644aae4
2 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
public/customize.js
View File

@@ -73,6 +73,16 @@
statusRed: 'Status Red'
};
const THEME_HINTS = {
accent: 'Active nav tab, buttons, links, selected rows, badges, chart bars',
accentHover: 'Button hover states, link hovers',
navBg: 'Top navigation bar background',
navBg2: 'Nav dropdown menus, darker nav areas',
statusGreen: 'Healthy nodes, online indicators, good SNR',
statusYellow: 'Degraded nodes, warning indicators, moderate SNR',
statusRed: 'Silent/offline nodes, error states, bad SNR'
};
const NODE_LABELS = {
repeater: 'Repeater',
companion: 'Companion',
@@ -81,6 +91,14 @@
observer: 'Observer'
};
const NODE_HINTS = {
repeater: 'Infrastructure nodes that relay packets — map markers, packet path badges, node list',
companion: 'End-user devices — map markers, packet detail, node list',
room: 'Room/chat server nodes — map markers, node list',
sensor: 'Sensor/telemetry nodes — map markers, node list',
observer: 'MQTT observer stations — map markers (purple stars), observer list, packet headers'
};
const NODE_EMOJI = { repeater: '◆', companion: '●', room: '■', sensor: '▲', observer: '★' };
// Current state
@@ -146,8 +164,10 @@
.cust-field input[type="text"], .cust-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border);
border-radius: 6px; font-size: 14px; background: var(--input-bg); color: var(--text); box-sizing: border-box; }
.cust-field input[type="text"]:focus, .cust-field textarea:focus { outline: none; border-color: var(--accent); }
.cust-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cust-color-row label { min-width: 140px; font-size: 13px; font-weight: 500; margin: 0; }
.cust-color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cust-color-row > div:first-child { min-width: 220px; }
.cust-color-row label { font-size: 13px; font-weight: 600; margin: 0; display: block; }
.cust-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
.cust-color-row input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--border);
border-radius: 6px; cursor: pointer; padding: 2px; background: var(--input-bg); }
.cust-color-row .cust-hex { font-family: var(--mono); font-size: 12px; color: var(--text-muted); min-width: 70px; }
@@ -231,7 +251,8 @@
var val = state.theme[key];
var def = DEFAULTS.theme[key];
rows += '<div class="cust-color-row">' +
'<label>' + THEME_LABELS[key] + '</label>' +
'<div><label>' + THEME_LABELS[key] + '</label>' +
'<div class="cust-hint">' + (THEME_HINTS[key] || '') + '</div></div>' +
'<input type="color" data-theme="' + key + '" value="' + val + '">' +
'<span class="cust-hex" data-hex="' + key + '">' + val + '</span>' +
(val !== def ? '<button class="cust-reset-btn" data-reset-theme="' + key + '">Reset</button>' : '') +
@@ -251,7 +272,8 @@
var val = state.nodeColors[key];
var def = DEFAULTS.nodeColors[key];
rows += '<div class="cust-color-row">' +
'<label>' + NODE_EMOJI[key] + ' ' + NODE_LABELS[key] + '</label>' +
'<div><label>' + NODE_EMOJI[key] + ' ' + NODE_LABELS[key] + '</label>' +
'<div class="cust-hint">' + (NODE_HINTS[key] || '') + '</div></div>' +
'<input type="color" data-node="' + key + '" value="' + val + '">' +
'<span class="cust-node-dot" style="background:' + val + '" data-dot="' + key + '"></span>' +
'<span class="cust-hex" data-nhex="' + key + '">' + val + '</span>' +

2
public/index.html
View File

@@ -101,6 +101,6 @@
<script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774226573" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774226702" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>