Add CPU/GPU names on perf charts, reusable color picker, and header toolbar redesign
- Show CPU and GPU model names as overlays on performance chart cards - Add cpu_name field to performance API with cross-platform detection - Extract reusable color-picker popover module (9 presets + custom picker) - Per-chart color customization for CPU/RAM/GPU performance charts - Redesign header: compact toolbar container with icon-only buttons - Compact language dropdown (EN/RU/ZH), icon-only login/logout - Use accent color for FPS charts, range slider accent, dashboard icons Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
112
server/src/wled_controller/static/js/core/color-picker.js
Normal file
112
server/src/wled_controller/static/js/core/color-picker.js
Normal file
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Reusable color-picker popover.
|
||||
*
|
||||
* Usage:
|
||||
* import { createColorPicker } from '../core/color-picker.js';
|
||||
* const html = createColorPicker({
|
||||
* id: 'my-picker',
|
||||
* currentColor: '#4CAF50',
|
||||
* onPick: 'myCallback', // global function name: window[onPick](hex)
|
||||
* anchor: 'left', // 'left' | 'right' (default 'right')
|
||||
* });
|
||||
*
|
||||
* The returned HTML contains:
|
||||
* - A small swatch dot (click to toggle popover)
|
||||
* - A popover with 9 preset colors + custom native picker
|
||||
*
|
||||
* Call `closeAllColorPickers()` to dismiss any open popover.
|
||||
*/
|
||||
|
||||
import { t } from './i18n.js';
|
||||
|
||||
const PRESETS = [
|
||||
'#4CAF50', '#7C4DFF', '#FF6D00',
|
||||
'#E91E63', '#00BCD4', '#FF5252',
|
||||
'#26A69A', '#2196F3', '#FFC107',
|
||||
];
|
||||
|
||||
/**
|
||||
* Build the HTML string for a color-picker widget.
|
||||
*/
|
||||
export function createColorPicker({ id, currentColor, onPick, anchor = 'right' }) {
|
||||
const dots = PRESETS.map(c => {
|
||||
const active = c.toLowerCase() === currentColor.toLowerCase() ? ' active' : '';
|
||||
return `<button class="color-picker-dot${active}" style="background:${c}" onclick="event.stopPropagation(); window._cpPick('${id}','${c}')"></button>`;
|
||||
}).join('');
|
||||
|
||||
return `<span class="color-picker-wrapper" id="cp-wrap-${id}">` +
|
||||
`<span class="color-picker-swatch" id="cp-swatch-${id}" style="background:${currentColor}" onclick="event.stopPropagation(); window._cpToggle('${id}')"></span>` +
|
||||
`<div class="color-picker-popover anchor-${anchor}" id="cp-pop-${id}" style="display:none" onclick="event.stopPropagation()">` +
|
||||
`<div class="color-picker-grid">${dots}</div>` +
|
||||
`<div class="color-picker-custom" onclick="this.querySelector('input').click()">` +
|
||||
`<input type="color" id="cp-native-${id}" value="${currentColor}" ` +
|
||||
`oninput="event.stopPropagation(); window._cpPick('${id}',this.value)" ` +
|
||||
`onchange="event.stopPropagation(); window._cpPick('${id}',this.value)">` +
|
||||
`<span>${t('accent.custom')}</span>` +
|
||||
`</div>` +
|
||||
`</div>` +
|
||||
`</span>`;
|
||||
}
|
||||
|
||||
// -- Global helpers called from onclick attributes --
|
||||
|
||||
// Merge any callbacks pre-registered before this module loaded (e.g. accent picker in index.html)
|
||||
const _callbacks = Object.assign({}, window._cpCallbacks || {});
|
||||
|
||||
/** Register the callback for a picker id. */
|
||||
export function registerColorPicker(id, callback) {
|
||||
_callbacks[id] = callback;
|
||||
}
|
||||
|
||||
function _rgbToHex(rgb) {
|
||||
const m = rgb.match(/\d+/g);
|
||||
if (!m || m.length < 3) return rgb;
|
||||
return '#' + m.slice(0, 3).map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
window._cpToggle = function (id) {
|
||||
// Close all other pickers first
|
||||
document.querySelectorAll('.color-picker-popover').forEach(p => {
|
||||
if (p.id !== `cp-pop-${id}`) p.style.display = 'none';
|
||||
});
|
||||
const pop = document.getElementById(`cp-pop-${id}`);
|
||||
if (!pop) return;
|
||||
const show = pop.style.display === 'none';
|
||||
pop.style.display = show ? '' : 'none';
|
||||
if (show) {
|
||||
// Mark active dot
|
||||
const swatch = document.getElementById(`cp-swatch-${id}`);
|
||||
const cur = swatch ? (_rgbToHex(swatch.style.backgroundColor) || swatch.style.background) : '';
|
||||
pop.querySelectorAll('.color-picker-dot').forEach(d => {
|
||||
const dHex = _rgbToHex(d.style.backgroundColor || d.style.background);
|
||||
d.classList.toggle('active', dHex.toLowerCase() === cur.toLowerCase());
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window._cpPick = function (id, hex) {
|
||||
// Update swatch
|
||||
const swatch = document.getElementById(`cp-swatch-${id}`);
|
||||
if (swatch) swatch.style.background = hex;
|
||||
// Update native input
|
||||
const native = document.getElementById(`cp-native-${id}`);
|
||||
if (native) native.value = hex;
|
||||
// Mark active dot
|
||||
const pop = document.getElementById(`cp-pop-${id}`);
|
||||
if (pop) {
|
||||
pop.querySelectorAll('.color-picker-dot').forEach(d => {
|
||||
const dHex = _rgbToHex(d.style.backgroundColor || d.style.background);
|
||||
d.classList.toggle('active', dHex.toLowerCase() === hex.toLowerCase());
|
||||
});
|
||||
pop.style.display = 'none';
|
||||
}
|
||||
// Fire callback
|
||||
if (_callbacks[id]) _callbacks[id](hex);
|
||||
};
|
||||
|
||||
export function closeAllColorPickers() {
|
||||
document.querySelectorAll('.color-picker-popover').forEach(p => p.style.display = 'none');
|
||||
}
|
||||
|
||||
// Close on outside click
|
||||
document.addEventListener('click', () => closeAllColorPickers());
|
||||
@@ -86,9 +86,14 @@ function _destroyFpsCharts() {
|
||||
_fpsCharts = {};
|
||||
}
|
||||
|
||||
function _getAccentColor() {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#4CAF50';
|
||||
}
|
||||
|
||||
function _createFpsChart(canvasId, actualHistory, currentHistory, fpsTarget) {
|
||||
const canvas = document.getElementById(canvasId);
|
||||
if (!canvas) return null;
|
||||
const accent = _getAccentColor();
|
||||
return new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
@@ -96,8 +101,8 @@ function _createFpsChart(canvasId, actualHistory, currentHistory, fpsTarget) {
|
||||
datasets: [
|
||||
{
|
||||
data: [...actualHistory],
|
||||
borderColor: '#2196F3',
|
||||
backgroundColor: 'rgba(33,150,243,0.12)',
|
||||
borderColor: accent,
|
||||
backgroundColor: accent + '1f',
|
||||
borderWidth: 1.5,
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
@@ -105,7 +110,7 @@ function _createFpsChart(canvasId, actualHistory, currentHistory, fpsTarget) {
|
||||
},
|
||||
{
|
||||
data: [...currentHistory],
|
||||
borderColor: '#4CAF50',
|
||||
borderColor: accent + '80',
|
||||
borderWidth: 1.5,
|
||||
tension: 0.3,
|
||||
fill: false,
|
||||
@@ -490,7 +495,7 @@ export async function loadDashboard(forceFullRender = false) {
|
||||
|
||||
if (running.length > 0) {
|
||||
runningIds = running.map(t => t.id);
|
||||
const stopAllBtn = `<button class="btn btn-sm btn-danger dashboard-stop-all" onclick="event.stopPropagation(); dashboardStopAll()" title="${t('dashboard.stop_all')}">${ICON_STOP} ${t('dashboard.stop_all')}</button>`;
|
||||
const stopAllBtn = `<button class="btn btn-sm btn-primary dashboard-stop-all" onclick="event.stopPropagation(); dashboardStopAll()" title="${t('dashboard.stop_all')}">${ICON_STOP} ${t('dashboard.stop_all')}</button>`;
|
||||
const runningItems = running.map(target => renderDashboardTarget(target, true, devicesMap, cssSourceMap)).join('');
|
||||
|
||||
targetsInner += `<div class="dashboard-subsection">
|
||||
|
||||
@@ -6,44 +6,68 @@
|
||||
import { API_BASE, getHeaders } from '../core/api.js';
|
||||
import { t } from '../core/i18n.js';
|
||||
import { dashboardPollInterval } from '../core/state.js';
|
||||
import { createColorPicker, registerColorPicker } from '../core/color-picker.js';
|
||||
|
||||
const MAX_SAMPLES = 120;
|
||||
const CHART_KEYS = ['cpu', 'ram', 'gpu'];
|
||||
|
||||
let _pollTimer = null;
|
||||
let _charts = {}; // { cpu: Chart, ram: Chart, gpu: Chart }
|
||||
let _history = { cpu: [], ram: [], gpu: [] };
|
||||
let _hasGpu = null; // null = unknown, true/false after first fetch
|
||||
|
||||
function _getColor(key) {
|
||||
return localStorage.getItem(`perfChartColor_${key}`)
|
||||
|| getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()
|
||||
|| '#4CAF50';
|
||||
}
|
||||
|
||||
function _onChartColorChange(key, hex) {
|
||||
localStorage.setItem(`perfChartColor_${key}`, hex);
|
||||
const chart = _charts[key];
|
||||
if (chart) {
|
||||
chart.data.datasets[0].borderColor = hex;
|
||||
chart.data.datasets[0].backgroundColor = hex + '26';
|
||||
chart.update();
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns the static HTML for the perf section (canvas placeholders). */
|
||||
export function renderPerfSection() {
|
||||
// Register callbacks before rendering
|
||||
for (const key of CHART_KEYS) {
|
||||
registerColorPicker(`perf-${key}`, hex => _onChartColorChange(key, hex));
|
||||
}
|
||||
|
||||
return `<div class="perf-charts-grid">
|
||||
<div class="perf-chart-card">
|
||||
<div class="perf-chart-header">
|
||||
<span class="perf-chart-label">${t('dashboard.perf.cpu')}</span>
|
||||
<span class="perf-chart-value cpu" id="perf-cpu-value">-</span>
|
||||
<span class="perf-chart-label">${t('dashboard.perf.cpu')} ${createColorPicker({ id: 'perf-cpu', currentColor: _getColor('cpu'), anchor: 'left' })}</span>
|
||||
<span class="perf-chart-value" id="perf-cpu-value">-</span>
|
||||
</div>
|
||||
<div class="perf-chart-wrap"><canvas id="perf-chart-cpu"></canvas></div>
|
||||
<div class="perf-chart-wrap"><span class="perf-chart-subtitle" id="perf-cpu-name"></span><canvas id="perf-chart-cpu"></canvas></div>
|
||||
</div>
|
||||
<div class="perf-chart-card">
|
||||
<div class="perf-chart-header">
|
||||
<span class="perf-chart-label">${t('dashboard.perf.ram')}</span>
|
||||
<span class="perf-chart-value ram" id="perf-ram-value">-</span>
|
||||
<span class="perf-chart-label">${t('dashboard.perf.ram')} ${createColorPicker({ id: 'perf-ram', currentColor: _getColor('ram'), anchor: 'left' })}</span>
|
||||
<span class="perf-chart-value" id="perf-ram-value">-</span>
|
||||
</div>
|
||||
<div class="perf-chart-wrap"><canvas id="perf-chart-ram"></canvas></div>
|
||||
</div>
|
||||
<div class="perf-chart-card" id="perf-gpu-card">
|
||||
<div class="perf-chart-header">
|
||||
<span class="perf-chart-label">${t('dashboard.perf.gpu')}</span>
|
||||
<span class="perf-chart-value gpu" id="perf-gpu-value">-</span>
|
||||
<span class="perf-chart-label">${t('dashboard.perf.gpu')} ${createColorPicker({ id: 'perf-gpu', currentColor: _getColor('gpu'), anchor: 'left' })}</span>
|
||||
<span class="perf-chart-value" id="perf-gpu-value">-</span>
|
||||
</div>
|
||||
<div class="perf-chart-wrap"><canvas id="perf-chart-gpu"></canvas></div>
|
||||
<div class="perf-chart-wrap"><span class="perf-chart-subtitle" id="perf-gpu-name"></span><canvas id="perf-chart-gpu"></canvas></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function _createChart(canvasId, color, fillColor) {
|
||||
function _createChart(canvasId, key) {
|
||||
const ctx = document.getElementById(canvasId);
|
||||
if (!ctx) return null;
|
||||
const color = _getColor(key);
|
||||
return new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
@@ -51,7 +75,7 @@ function _createChart(canvasId, color, fillColor) {
|
||||
datasets: [{
|
||||
data: [],
|
||||
borderColor: color,
|
||||
backgroundColor: fillColor,
|
||||
backgroundColor: color + '26',
|
||||
borderWidth: 1.5,
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
@@ -88,7 +112,7 @@ async function _seedFromServer() {
|
||||
_hasGpu = true;
|
||||
}
|
||||
|
||||
for (const key of ['cpu', 'ram', 'gpu']) {
|
||||
for (const key of CHART_KEYS) {
|
||||
if (_charts[key] && _history[key].length > 0) {
|
||||
_charts[key].data.datasets[0].data = [..._history[key]];
|
||||
_charts[key].data.labels = _history[key].map(() => '');
|
||||
@@ -103,9 +127,9 @@ async function _seedFromServer() {
|
||||
/** Initialize Chart.js instances on the already-mounted canvases. */
|
||||
export async function initPerfCharts() {
|
||||
_destroyCharts();
|
||||
_charts.cpu = _createChart('perf-chart-cpu', '#2196F3', 'rgba(33,150,243,0.15)');
|
||||
_charts.ram = _createChart('perf-chart-ram', '#4CAF50', 'rgba(76,175,80,0.15)');
|
||||
_charts.gpu = _createChart('perf-chart-gpu', '#FF9800', 'rgba(255,152,0,0.15)');
|
||||
_charts.cpu = _createChart('perf-chart-cpu', 'cpu');
|
||||
_charts.ram = _createChart('perf-chart-ram', 'ram');
|
||||
_charts.gpu = _createChart('perf-chart-gpu', 'gpu');
|
||||
await _seedFromServer();
|
||||
}
|
||||
|
||||
@@ -135,6 +159,10 @@ async function _fetchPerformance() {
|
||||
_pushSample('cpu', data.cpu_percent);
|
||||
const cpuEl = document.getElementById('perf-cpu-value');
|
||||
if (cpuEl) cpuEl.textContent = `${data.cpu_percent.toFixed(0)}%`;
|
||||
if (data.cpu_name) {
|
||||
const nameEl = document.getElementById('perf-cpu-name');
|
||||
if (nameEl && !nameEl.textContent) nameEl.textContent = data.cpu_name;
|
||||
}
|
||||
|
||||
// RAM
|
||||
_pushSample('ram', data.ram_percent);
|
||||
@@ -151,6 +179,10 @@ async function _fetchPerformance() {
|
||||
_pushSample('gpu', data.gpu.utilization);
|
||||
const gpuEl = document.getElementById('perf-gpu-value');
|
||||
if (gpuEl) gpuEl.textContent = `${data.gpu.utilization.toFixed(0)}% · ${data.gpu.temperature_c}°C`;
|
||||
if (data.gpu.name) {
|
||||
const nameEl = document.getElementById('perf-gpu-name');
|
||||
if (nameEl && !nameEl.textContent) nameEl.textContent = data.gpu.name;
|
||||
}
|
||||
} else if (_hasGpu === null) {
|
||||
_hasGpu = false;
|
||||
const card = document.getElementById('perf-gpu-card');
|
||||
|
||||
@@ -29,7 +29,7 @@ const gettingStartedSteps = [
|
||||
{ selector: '#tab-btn-profiles', textKey: 'tour.profiles', position: 'bottom' },
|
||||
{ selector: '[onclick*="openSettingsModal"]', textKey: 'tour.settings', position: 'bottom' },
|
||||
{ selector: '[onclick*="openCommandPalette"]', textKey: 'tour.search', position: 'bottom' },
|
||||
{ selector: '.theme-toggle', textKey: 'tour.theme', position: 'bottom' },
|
||||
{ selector: '[onclick*="toggleTheme"]', textKey: 'tour.theme', position: 'bottom' },
|
||||
{ selector: '#locale-select', textKey: 'tour.language', position: 'bottom' }
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user