alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply IconSelect to all type selectors across the app

Browse Source 
- Value source type (5 types, static icons)
- Device type (7 types, new wifi/usb icon paths + device icon map)
- Capture engine (dynamic from API, uses getEngineIcon)
- Audio engine (dynamic from API, new getAudioEngineIcon)
- Add i18n description keys for value source and device types
- Fix trigger button styling to match native input height

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-08 23:57:37 +03:00
parent d95eb683e1
commit b4d89e271d
9 changed files with 153 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/src/wled_controller/static/js/core/icon-paths.js
View File

@@ -71,3 +71,5 @@ export const rotateCcw = '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2
export const download = '<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>';
export const undo2 = '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11"/>';
export const power = '<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" x2="12" y1="2" y2="12"/>';
export const wifi = '<path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/>';
export const usb = '<circle cx="10" cy="7" r="1"/><circle cx="4" cy="20" r="1"/><path d="M4.7 19.3 19 5"/><path d="m21 3-3 1 2 2Z"/><path d="M10 8v3a1 1 0 0 1-1 1H4"/><path d="M14 12v2a1 1 0 0 0 1 1h3"/><circle cx="20" cy="15" r="1"/>';

16
server/src/wled_controller/static/js/core/icons.js
View File

@@ -29,7 +29,13 @@ const _valueSourceTypeIcons = {
adaptive_time: _svg(P.clock), adaptive_scene: _svg(P.cloudSun),
};
const _audioSourceTypeIcons = { mono: _svg(P.mic), multichannel: _svg(P.volume2) };
const _deviceTypeIcons = {
wled: _svg(P.wifi), adalight: _svg(P.usb), ambiled: _svg(P.usb),
mqtt: _svg(P.send), ws: _svg(P.globe), openrgb: _svg(P.palette),
mock: _svg(P.wrench),
};
const _engineTypeIcons = { scrcpy: _svg(P.smartphone) };
const _audioEngineTypeIcons = { wasapi: _svg(P.volume2), sounddevice: _svg(P.mic) };
// ── Type-resolution getters ─────────────────────────────────
@@ -58,11 +64,21 @@ export function getAudioSourceIcon(sourceType) {
return _audioSourceTypeIcons[sourceType] || _svg(P.music);
}
/** Device type → icon (fallback: lightbulb) */
export function getDeviceTypeIcon(deviceType) {
return _deviceTypeIcons[deviceType] || _svg(P.lightbulb);
}
/** Capture engine type → icon (fallback: rocket) */
export function getEngineIcon(engineType) {
return _engineTypeIcons[engineType] || _svg(P.rocket);
}
/** Audio engine type → icon (fallback: music) */
export function getAudioEngineIcon(engineType) {
return _audioEngineTypeIcons[engineType] || _svg(P.music);
}
// ── Entity-kind constants ───────────────────────────────────
export const ICON_AUTOMATION = _svg(P.clipboardList);

26
server/src/wled_controller/static/js/features/device-discovery.js
View File

@@ -11,6 +11,8 @@ import { t } from '../core/i18n.js';
import { showToast } from '../core/ui.js';
import { Modal } from '../core/modal.js';
import { _computeMaxFps, _renderFpsHint } from './devices.js';
import { getDeviceTypeIcon } from '../core/icons.js';
import { IconSelect } from '../core/icon-select.js';
class AddDeviceModal extends Modal {
constructor() { super('add-device-modal'); }
@@ -33,8 +35,31 @@ class AddDeviceModal extends Modal {
const addDeviceModal = new AddDeviceModal();
/* ── Icon-grid type selector ──────────────────────────────────── */
const DEVICE_TYPE_KEYS = ['wled', 'adalight', 'ambiled', 'mqtt', 'ws', 'openrgb', 'mock'];
function _buildDeviceTypeItems() {
return DEVICE_TYPE_KEYS.map(key => ({
value: key,
icon: getDeviceTypeIcon(key),
label: t(`device.type.${key}`),
desc: t(`device.type.${key}.desc`),
}));
}
let _deviceTypeIconSelect = null;
function _ensureDeviceTypeIconSelect() {
const sel = document.getElementById('device-type');
if (!sel) return;
if (_deviceTypeIconSelect) { _deviceTypeIconSelect.updateItems(_buildDeviceTypeItems()); return; }
_deviceTypeIconSelect = new IconSelect({ target: sel, items: _buildDeviceTypeItems(), columns: 3 });
}
export function onDeviceTypeChanged() {
const deviceType = document.getElementById('device-type').value;
if (_deviceTypeIconSelect) _deviceTypeIconSelect.setValue(deviceType);
const urlGroup = document.getElementById('device-url-group');
const urlInput = document.getElementById('device-url');
const serialGroup = document.getElementById('device-serial-port-group');
@@ -272,6 +297,7 @@ export function showAddDevice() {
document.getElementById('device-serial-port').innerHTML = '';
const scanBtn = document.getElementById('scan-network-btn');
if (scanBtn) scanBtn.disabled = false;
_ensureDeviceTypeIconSelect();
addDeviceModal.open();
onDeviceTypeChanged();
setTimeout(() => {

25
server/src/wled_controller/static/js/features/streams.js
View File

@@ -41,13 +41,14 @@ import { updateSubTabHash } from './tabs.js';
import { createValueSourceCard } from './value-sources.js';
import { createSyncClockCard } from './sync-clocks.js';
import {
getEngineIcon, getPictureSourceIcon, getAudioSourceIcon,
getEngineIcon, getAudioEngineIcon, getPictureSourceIcon, getAudioSourceIcon,
ICON_TEMPLATE, ICON_CLONE, ICON_EDIT, ICON_TEST, ICON_LINK_SOURCE,
ICON_FPS, ICON_WEB, ICON_VALUE_SOURCE, ICON_CLOCK, ICON_AUDIO_LOOPBACK, ICON_AUDIO_INPUT,
ICON_AUDIO_TEMPLATE, ICON_MONITOR, ICON_WRENCH, ICON_RADIO,
ICON_CAPTURE_TEMPLATE, ICON_PP_TEMPLATE, ICON_HELP,
} from '../core/icons.js';
import { wrapCard } from '../core/card-colors.js';
import { IconSelect } from '../core/icon-select.js';
// ── Card section instances ──
const csRawStreams = new CardSection('raw-streams', { titleKey: 'streams.section.streams', gridClass: 'templates-grid', addCardOnclick: "showAddStreamModal('raw')", keyAttr: 'data-stream-id' });
@@ -296,14 +297,25 @@ async function loadAvailableEngines() {
const firstAvailable = availableEngines.find(e => e.available);
if (firstAvailable) select.value = firstAvailable.type;
}
// Update icon-grid selector with dynamic engine list
const items = availableEngines
.filter(e => e.available)
.map(e => ({ value: e.type, icon: getEngineIcon(e.type), label: e.name, desc: '' }));
if (_engineIconSelect) { _engineIconSelect.updateItems(items); }
else { _engineIconSelect = new IconSelect({ target: select, items, columns: 2 }); }
_engineIconSelect.setValue(select.value);
} catch (error) {
console.error('Error loading engines:', error);
showToast(t('templates.error.engines') + ': ' + error.message, 'error');
}
}
let _engineIconSelect = null;
export async function onEngineChange() {
const engineType = document.getElementById('template-engine').value;
if (_engineIconSelect) _engineIconSelect.setValue(engineType);
const configSection = document.getElementById('engine-config-section');
const configFields = document.getElementById('engine-config-fields');
@@ -667,14 +679,25 @@ async function loadAvailableAudioEngines() {
const firstAvailable = availableAudioEngines.find(e => e.available);
if (firstAvailable) select.value = firstAvailable.type;
}
// Update icon-grid selector with dynamic engine list
const items = availableAudioEngines
.filter(e => e.available)
.map(e => ({ value: e.type, icon: getAudioEngineIcon(e.type), label: e.type.toUpperCase(), desc: '' }));
if (_audioEngineIconSelect) { _audioEngineIconSelect.updateItems(items); }
else { _audioEngineIconSelect = new IconSelect({ target: select, items, columns: 2 }); }
_audioEngineIconSelect.setValue(select.value);
} catch (error) {
console.error('Error loading audio engines:', error);
showToast(t('audio_template.error.engines') + ': ' + error.message, 'error');
}
}
let _audioEngineIconSelect = null;
export async function onAudioEngineChange() {
const engineType = document.getElementById('audio-template-engine').value;
if (_audioEngineIconSelect) _audioEngineIconSelect.setValue(engineType);
const configSection = document.getElementById('audio-engine-config-section');
const configFields = document.getElementById('audio-engine-config-fields');

25
server/src/wled_controller/static/js/features/value-sources.js
View File

@@ -22,6 +22,7 @@ import {
ICON_MUSIC, ICON_TRENDING_UP, ICON_MAP_PIN, ICON_MONITOR, ICON_REFRESH,
} from '../core/icons.js';
import { wrapCard } from '../core/card-colors.js';
import { IconSelect } from '../core/icon-select.js';
import { loadPictureSources } from './streams.js';
export { getValueSourceIcon };
@@ -58,6 +59,28 @@ class ValueSourceModal extends Modal {
const valueSourceModal = new ValueSourceModal();
/* ── Icon-grid type selector ──────────────────────────────────── */
const VS_TYPE_KEYS = ['static', 'animated', 'audio', 'adaptive_time', 'adaptive_scene'];
function _buildVSTypeItems() {
return VS_TYPE_KEYS.map(key => ({
value: key,
icon: getValueSourceIcon(key),
label: t(`value_source.type.${key}`),
desc: t(`value_source.type.${key}.desc`),
}));
}
let _vsTypeIconSelect = null;
function _ensureVSTypeIconSelect() {
const sel = document.getElementById('value-source-type');
if (!sel) return;
if (_vsTypeIconSelect) { _vsTypeIconSelect.updateItems(_buildVSTypeItems()); return; }
_vsTypeIconSelect = new IconSelect({ target: sel, items: _buildVSTypeItems(), columns: 2 });
}
// ── Modal ─────────────────────────────────────────────────────
export async function showValueSourceModal(editData) {
@@ -69,6 +92,7 @@ export async function showValueSourceModal(editData) {
document.getElementById('value-source-id').value = isEdit ? editData.id : '';
document.getElementById('value-source-error').style.display = 'none';
_ensureVSTypeIconSelect();
const typeSelect = document.getElementById('value-source-type');
document.getElementById('value-source-type-group').style.display = isEdit ? 'none' : '';
@@ -142,6 +166,7 @@ export async function closeValueSourceModal() {
export function onValueSourceTypeChange() {
const type = document.getElementById('value-source-type').value;
if (_vsTypeIconSelect) _vsTypeIconSelect.setValue(type);
document.getElementById('value-source-static-section').style.display = type === 'static' ? '' : 'none';
document.getElementById('value-source-animated-section').style.display = type === 'animated' ? '' : 'none';
document.getElementById('value-source-audio-section').style.display = type === 'audio' ? '' : 'none';