Add IconSelect grids for animation type and protocol selectors
Replace plain dropdowns with visual icon grids: - Animation type (static/gradient CSS sources): icons for each effect - WLED target protocol: DDP vs HTTP with descriptions Add i18n keys for protocol options in all 3 locales. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -179,27 +179,15 @@ export function onCSSTypeChange() {
|
||||
// Animation section — shown for static/gradient only
|
||||
const animSection = document.getElementById('css-editor-animation-section');
|
||||
const animTypeSelect = document.getElementById('css-editor-animation-type');
|
||||
const noneOpt = `<option value="none">${t('color_strip.animation.type.none')}</option>`;
|
||||
if (type === 'static') {
|
||||
if (type === 'static' || type === 'gradient') {
|
||||
animSection.style.display = '';
|
||||
animTypeSelect.innerHTML = noneOpt +
|
||||
`<option value="breathing">${t('color_strip.animation.type.breathing')}</option>` +
|
||||
`<option value="strobe">${t('color_strip.animation.type.strobe')}</option>` +
|
||||
`<option value="sparkle">${t('color_strip.animation.type.sparkle')}</option>` +
|
||||
`<option value="pulse">${t('color_strip.animation.type.pulse')}</option>` +
|
||||
`<option value="candle">${t('color_strip.animation.type.candle')}</option>` +
|
||||
`<option value="rainbow_fade">${t('color_strip.animation.type.rainbow_fade')}</option>`;
|
||||
} else if (type === 'gradient') {
|
||||
animSection.style.display = '';
|
||||
animTypeSelect.innerHTML = noneOpt +
|
||||
`<option value="breathing">${t('color_strip.animation.type.breathing')}</option>` +
|
||||
`<option value="gradient_shift">${t('color_strip.animation.type.gradient_shift')}</option>` +
|
||||
`<option value="wave">${t('color_strip.animation.type.wave')}</option>` +
|
||||
`<option value="strobe">${t('color_strip.animation.type.strobe')}</option>` +
|
||||
`<option value="sparkle">${t('color_strip.animation.type.sparkle')}</option>` +
|
||||
`<option value="pulse">${t('color_strip.animation.type.pulse')}</option>` +
|
||||
`<option value="candle">${t('color_strip.animation.type.candle')}</option>` +
|
||||
`<option value="rainbow_fade">${t('color_strip.animation.type.rainbow_fade')}</option>`;
|
||||
const opts = type === 'gradient'
|
||||
? ['none','breathing','gradient_shift','wave','strobe','sparkle','pulse','candle','rainbow_fade']
|
||||
: ['none','breathing','strobe','sparkle','pulse','candle','rainbow_fade'];
|
||||
animTypeSelect.innerHTML = opts.map(v =>
|
||||
`<option value="${v}">${t('color_strip.animation.type.' + v)}</option>`
|
||||
).join('');
|
||||
_ensureAnimationTypeIconSelect(type);
|
||||
} else {
|
||||
animSection.style.display = 'none';
|
||||
}
|
||||
@@ -265,15 +253,14 @@ function _getAnimationPayload() {
|
||||
|
||||
function _loadAnimationState(anim) {
|
||||
// Set type after onCSSTypeChange() has populated the dropdown
|
||||
if (anim && anim.enabled && anim.type) {
|
||||
document.getElementById('css-editor-animation-type').value = anim.type;
|
||||
} else {
|
||||
document.getElementById('css-editor-animation-type').value = 'none';
|
||||
}
|
||||
const val = (anim && anim.enabled && anim.type) ? anim.type : 'none';
|
||||
document.getElementById('css-editor-animation-type').value = val;
|
||||
if (_animationTypeIconSelect) _animationTypeIconSelect.setValue(val);
|
||||
_syncAnimationSpeedState();
|
||||
}
|
||||
|
||||
export function onAnimationTypeChange() {
|
||||
if (_animationTypeIconSelect) _animationTypeIconSelect.setValue(document.getElementById('css-editor-animation-type').value);
|
||||
_syncAnimationSpeedState();
|
||||
}
|
||||
|
||||
@@ -316,6 +303,7 @@ function _gradientStripHTML(pts, w = 80, h = 16) {
|
||||
|
||||
/* ── Effect / audio palette IconSelect instances ─────────────── */
|
||||
|
||||
let _animationTypeIconSelect = null;
|
||||
let _interpolationIconSelect = null;
|
||||
let _effectTypeIconSelect = null;
|
||||
let _effectPaletteIconSelect = null;
|
||||
@@ -422,6 +410,36 @@ function _ensureNotificationFilterModeIconSelect() {
|
||||
_notificationFilterModeIconSelect = new IconSelect({ target: sel, items, columns: 3 });
|
||||
}
|
||||
|
||||
function _buildAnimationTypeItems(cssType) {
|
||||
const items = [
|
||||
{ value: 'none', icon: _icon(P.square), label: t('color_strip.animation.type.none'), desc: t('color_strip.animation.type.none.desc') },
|
||||
{ value: 'breathing', icon: _icon(P.activity), label: t('color_strip.animation.type.breathing'), desc: t('color_strip.animation.type.breathing.desc') },
|
||||
];
|
||||
if (cssType === 'gradient') {
|
||||
items.push(
|
||||
{ value: 'gradient_shift', icon: _icon(P.fastForward), label: t('color_strip.animation.type.gradient_shift'), desc: t('color_strip.animation.type.gradient_shift.desc') },
|
||||
{ value: 'wave', icon: _icon(P.rainbow), label: t('color_strip.animation.type.wave'), desc: t('color_strip.animation.type.wave.desc') },
|
||||
);
|
||||
}
|
||||
items.push(
|
||||
{ value: 'strobe', icon: _icon(P.zap), label: t('color_strip.animation.type.strobe'), desc: t('color_strip.animation.type.strobe.desc') },
|
||||
{ value: 'sparkle', icon: _icon(P.sparkles), label: t('color_strip.animation.type.sparkle'), desc: t('color_strip.animation.type.sparkle.desc') },
|
||||
{ value: 'pulse', icon: _icon(P.trendingUp),label: t('color_strip.animation.type.pulse'), desc: t('color_strip.animation.type.pulse.desc') },
|
||||
{ value: 'candle', icon: _icon(P.flame), label: t('color_strip.animation.type.candle'), desc: t('color_strip.animation.type.candle.desc') },
|
||||
{ value: 'rainbow_fade', icon: _icon(P.rainbow), label: t('color_strip.animation.type.rainbow_fade'), desc: t('color_strip.animation.type.rainbow_fade.desc') },
|
||||
);
|
||||
return items;
|
||||
}
|
||||
|
||||
function _ensureAnimationTypeIconSelect(cssType) {
|
||||
const sel = document.getElementById('css-editor-animation-type');
|
||||
if (!sel) return;
|
||||
const items = _buildAnimationTypeItems(cssType);
|
||||
// Destroy and recreate — options change between static/gradient
|
||||
if (_animationTypeIconSelect) { _animationTypeIconSelect.destroy(); _animationTypeIconSelect = null; }
|
||||
_animationTypeIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||
}
|
||||
|
||||
/* ── Effect type helpers ──────────────────────────────────────── */
|
||||
|
||||
// Palette color control points — mirrors _PALETTE_DEFS in effect_stream.py
|
||||
|
||||
@@ -28,6 +28,8 @@ import {
|
||||
ICON_WARNING, ICON_PALETTE, ICON_WRENCH, ICON_TEMPLATE,
|
||||
} from '../core/icons.js';
|
||||
import { EntitySelect } from '../core/entity-palette.js';
|
||||
import { IconSelect } from '../core/icon-select.js';
|
||||
import * as P from '../core/icon-paths.js';
|
||||
import { wrapCard } from '../core/card-colors.js';
|
||||
import { TagInput, renderTagChips } from '../core/tag-input.js';
|
||||
import { CardSection } from '../core/card-sections.js';
|
||||
@@ -246,6 +248,7 @@ function _updateBrightnessThresholdVisibility() {
|
||||
let _deviceEntitySelect = null;
|
||||
let _cssEntitySelect = null;
|
||||
let _brightnessVsEntitySelect = null;
|
||||
let _protocolIconSelect = null;
|
||||
|
||||
function _populateCssDropdown(selectedId = '') {
|
||||
const select = document.getElementById('target-editor-css-source');
|
||||
@@ -306,6 +309,19 @@ function _ensureTargetEntitySelects() {
|
||||
});
|
||||
}
|
||||
|
||||
const _pIcon = (d) => `<svg class="icon" viewBox="0 0 24 24">${d}</svg>`;
|
||||
|
||||
function _ensureProtocolIconSelect() {
|
||||
const sel = document.getElementById('target-editor-protocol');
|
||||
if (!sel) return;
|
||||
const items = [
|
||||
{ value: 'ddp', icon: _pIcon(P.radio), label: t('targets.protocol.ddp'), desc: t('targets.protocol.ddp.desc') },
|
||||
{ value: 'http', icon: _pIcon(P.globe), label: t('targets.protocol.http'), desc: t('targets.protocol.http.desc') },
|
||||
];
|
||||
if (_protocolIconSelect) { _protocolIconSelect.updateItems(items); return; }
|
||||
_protocolIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||
}
|
||||
|
||||
export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
try {
|
||||
// Load devices, CSS sources, and value sources for dropdowns
|
||||
@@ -402,6 +418,8 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
|
||||
// Entity palette selectors
|
||||
_ensureTargetEntitySelects();
|
||||
_ensureProtocolIconSelect();
|
||||
if (_protocolIconSelect) _protocolIconSelect.setValue(document.getElementById('target-editor-protocol').value);
|
||||
|
||||
// Auto-name generation
|
||||
_targetNameManuallyEdited = !!(targetId || cloneData);
|
||||
|
||||
Reference in New Issue
Block a user