Add visual IconSelect selectors for effect, palette, gradient, waveform dropdowns
Replace plain <select> dropdowns with rich visual selectors: - Effect type: icon grid with descriptions - Effect/audio palette: gradient strip previews from color data - Gradient preset: gradient strip previews (13 presets) - Audio visualization: icon grid with descriptions - Notification effect: icon grid with descriptions - Waveform (value source): inline SVG shape previews Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,7 @@ import {
|
||||
ICON_AUDIO_LOOPBACK, ICON_TIMER, ICON_LINK_SOURCE, ICON_FILM,
|
||||
ICON_LINK, ICON_SPARKLES, ICON_ACTIVITY, ICON_CLOCK, ICON_BELL,
|
||||
} from '../core/icons.js';
|
||||
import * as P from '../core/icon-paths.js';
|
||||
import { wrapCard } from '../core/card-colors.js';
|
||||
import { attachProcessPicker } from '../core/process-picker.js';
|
||||
import { IconSelect } from '../core/icon-select.js';
|
||||
@@ -128,8 +129,18 @@ export function onCSSTypeChange() {
|
||||
document.getElementById('css-editor-api-input-section').style.display = type === 'api_input' ? '' : 'none';
|
||||
document.getElementById('css-editor-notification-section').style.display = type === 'notification' ? '' : 'none';
|
||||
|
||||
if (type === 'effect') onEffectTypeChange();
|
||||
if (type === 'audio') onAudioVizChange();
|
||||
if (type === 'effect') {
|
||||
_ensureEffectTypeIconSelect();
|
||||
_ensureEffectPaletteIconSelect();
|
||||
onEffectTypeChange();
|
||||
}
|
||||
if (type === 'audio') {
|
||||
_ensureAudioVizIconSelect();
|
||||
_ensureAudioPaletteIconSelect();
|
||||
onAudioVizChange();
|
||||
}
|
||||
if (type === 'gradient') _ensureGradientPresetIconSelect();
|
||||
if (type === 'notification') _ensureNotificationEffectIconSelect();
|
||||
|
||||
// Animation section — shown for static/gradient only
|
||||
const animSection = document.getElementById('css-editor-animation-section');
|
||||
@@ -240,6 +251,110 @@ function _syncAnimationSpeedState() {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Gradient strip preview helper ────────────────────────────── */
|
||||
|
||||
/**
|
||||
* Build a small inline CSS gradient preview from palette color points.
|
||||
* @param {Array<[number, string]>} pts – [[position, 'r,g,b'], ...]
|
||||
* @param {number} [w=80] width in px
|
||||
* @param {number} [h=16] height in px
|
||||
* @returns {string} HTML string
|
||||
*/
|
||||
function _gradientStripHTML(pts, w = 80, h = 16) {
|
||||
const stops = pts.map(([pos, rgb]) => `rgb(${rgb}) ${(pos * 100).toFixed(0)}%`).join(', ');
|
||||
return `<span style="display:inline-block;width:${w}px;height:${h}px;border-radius:3px;background:linear-gradient(to right,${stops});flex-shrink:0"></span>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a gradient preview from _GRADIENT_PRESETS entry (array of {position, color:[r,g,b]}).
|
||||
*/
|
||||
function _gradientPresetStripHTML(stops, w = 80, h = 16) {
|
||||
const css = stops.map(s => `rgb(${s.color.join(',')}) ${(s.position * 100).toFixed(0)}%`).join(', ');
|
||||
return `<span style="display:inline-block;width:${w}px;height:${h}px;border-radius:3px;background:linear-gradient(to right,${css});flex-shrink:0"></span>`;
|
||||
}
|
||||
|
||||
/* ── Effect / audio palette IconSelect instances ─────────────── */
|
||||
|
||||
let _effectTypeIconSelect = null;
|
||||
let _effectPaletteIconSelect = null;
|
||||
let _audioPaletteIconSelect = null;
|
||||
let _audioVizIconSelect = null;
|
||||
let _gradientPresetIconSelect = null;
|
||||
let _notificationEffectIconSelect = null;
|
||||
|
||||
const _icon = (d) => `<svg class="icon" viewBox="0 0 24 24">${d}</svg>`;
|
||||
|
||||
function _ensureEffectTypeIconSelect() {
|
||||
const sel = document.getElementById('css-editor-effect-type');
|
||||
if (!sel) return;
|
||||
const items = [
|
||||
{ value: 'fire', icon: _icon(P.zap), label: t('color_strip.effect.fire'), desc: t('color_strip.effect.fire.desc') },
|
||||
{ value: 'meteor', icon: _icon(P.sparkles), label: t('color_strip.effect.meteor'), desc: t('color_strip.effect.meteor.desc') },
|
||||
{ value: 'plasma', icon: _icon(P.rainbow), label: t('color_strip.effect.plasma'), desc: t('color_strip.effect.plasma.desc') },
|
||||
{ value: 'noise', icon: _icon(P.activity), label: t('color_strip.effect.noise'), desc: t('color_strip.effect.noise.desc') },
|
||||
{ value: 'aurora', icon: _icon(P.sparkles), label: t('color_strip.effect.aurora'), desc: t('color_strip.effect.aurora.desc') },
|
||||
];
|
||||
if (_effectTypeIconSelect) { _effectTypeIconSelect.updateItems(items); return; }
|
||||
_effectTypeIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||
}
|
||||
|
||||
function _ensureEffectPaletteIconSelect() {
|
||||
const sel = document.getElementById('css-editor-effect-palette');
|
||||
if (!sel) return;
|
||||
const items = Object.entries(_PALETTE_COLORS).map(([key, pts]) => ({
|
||||
value: key, icon: _gradientStripHTML(pts), label: t(`color_strip.palette.${key}`),
|
||||
}));
|
||||
if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; }
|
||||
_effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||
}
|
||||
|
||||
function _ensureAudioPaletteIconSelect() {
|
||||
const sel = document.getElementById('css-editor-audio-palette');
|
||||
if (!sel) return;
|
||||
const items = Object.entries(_PALETTE_COLORS).map(([key, pts]) => ({
|
||||
value: key, icon: _gradientStripHTML(pts), label: t(`color_strip.palette.${key}`),
|
||||
}));
|
||||
if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; }
|
||||
_audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||
}
|
||||
|
||||
function _ensureAudioVizIconSelect() {
|
||||
const sel = document.getElementById('css-editor-audio-viz');
|
||||
if (!sel) return;
|
||||
const items = [
|
||||
{ value: 'spectrum', icon: _icon(P.activity), label: t('color_strip.audio.viz.spectrum'), desc: t('color_strip.audio.viz.spectrum.desc') },
|
||||
{ value: 'beat_pulse', icon: _icon(P.zap), label: t('color_strip.audio.viz.beat_pulse'), desc: t('color_strip.audio.viz.beat_pulse.desc') },
|
||||
{ value: 'vu_meter', icon: _icon(P.trendingUp), label: t('color_strip.audio.viz.vu_meter'), desc: t('color_strip.audio.viz.vu_meter.desc') },
|
||||
];
|
||||
if (_audioVizIconSelect) { _audioVizIconSelect.updateItems(items); return; }
|
||||
_audioVizIconSelect = new IconSelect({ target: sel, items, columns: 3 });
|
||||
}
|
||||
|
||||
function _ensureGradientPresetIconSelect() {
|
||||
const sel = document.getElementById('css-editor-gradient-preset');
|
||||
if (!sel) return;
|
||||
const items = [
|
||||
{ value: '', icon: _icon(P.palette), label: t('color_strip.gradient.preset.custom') },
|
||||
...Object.entries(_GRADIENT_PRESETS).map(([key, stops]) => ({
|
||||
value: key, icon: _gradientPresetStripHTML(stops), label: t(`color_strip.gradient.preset.${key}`),
|
||||
})),
|
||||
];
|
||||
if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; }
|
||||
_gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 });
|
||||
}
|
||||
|
||||
function _ensureNotificationEffectIconSelect() {
|
||||
const sel = document.getElementById('css-editor-notification-effect');
|
||||
if (!sel) return;
|
||||
const items = [
|
||||
{ value: 'flash', icon: _icon(P.zap), label: t('color_strip.notification.effect.flash'), desc: t('color_strip.notification.effect.flash.desc') },
|
||||
{ value: 'pulse', icon: _icon(P.activity), label: t('color_strip.notification.effect.pulse'), desc: t('color_strip.notification.effect.pulse.desc') },
|
||||
{ value: 'sweep', icon: _icon(P.fastForward), label: t('color_strip.notification.effect.sweep'), desc: t('color_strip.notification.effect.sweep.desc') },
|
||||
];
|
||||
if (_notificationEffectIconSelect) { _notificationEffectIconSelect.updateItems(items); return; }
|
||||
_notificationEffectIconSelect = new IconSelect({ target: sel, items, columns: 3 });
|
||||
}
|
||||
|
||||
/* ── Effect type helpers ──────────────────────────────────────── */
|
||||
|
||||
// Palette color control points — mirrors _PALETTE_DEFS in effect_stream.py
|
||||
@@ -623,6 +738,7 @@ async function _loadAudioSources() {
|
||||
|
||||
function _loadAudioState(css) {
|
||||
document.getElementById('css-editor-audio-viz').value = css.visualization_mode || 'spectrum';
|
||||
if (_audioVizIconSelect) _audioVizIconSelect.setValue(css.visualization_mode || 'spectrum');
|
||||
onAudioVizChange();
|
||||
|
||||
const sensitivity = css.sensitivity ?? 1.0;
|
||||
@@ -634,6 +750,7 @@ function _loadAudioState(css) {
|
||||
document.getElementById('css-editor-audio-smoothing-val').textContent = parseFloat(smoothing).toFixed(2);
|
||||
|
||||
document.getElementById('css-editor-audio-palette').value = css.palette || 'rainbow';
|
||||
if (_audioPaletteIconSelect) _audioPaletteIconSelect.setValue(css.palette || 'rainbow');
|
||||
document.getElementById('css-editor-audio-color').value = rgbArrayToHex(css.color || [0, 255, 0]);
|
||||
document.getElementById('css-editor-audio-color-peak').value = rgbArrayToHex(css.color_peak || [255, 0, 0]);
|
||||
document.getElementById('css-editor-audio-mirror').checked = css.mirror || false;
|
||||
@@ -647,11 +764,13 @@ function _loadAudioState(css) {
|
||||
|
||||
function _resetAudioState() {
|
||||
document.getElementById('css-editor-audio-viz').value = 'spectrum';
|
||||
if (_audioVizIconSelect) _audioVizIconSelect.setValue('spectrum');
|
||||
document.getElementById('css-editor-audio-sensitivity').value = 1.0;
|
||||
document.getElementById('css-editor-audio-sensitivity-val').textContent = '1.0';
|
||||
document.getElementById('css-editor-audio-smoothing').value = 0.3;
|
||||
document.getElementById('css-editor-audio-smoothing-val').textContent = '0.30';
|
||||
document.getElementById('css-editor-audio-palette').value = 'rainbow';
|
||||
if (_audioPaletteIconSelect) _audioPaletteIconSelect.setValue('rainbow');
|
||||
document.getElementById('css-editor-audio-color').value = '#00ff00';
|
||||
document.getElementById('css-editor-audio-color-peak').value = '#ff0000';
|
||||
document.getElementById('css-editor-audio-mirror').checked = false;
|
||||
@@ -715,6 +834,7 @@ function _notificationGetAppColorsDict() {
|
||||
|
||||
function _loadNotificationState(css) {
|
||||
document.getElementById('css-editor-notification-effect').value = css.notification_effect || 'flash';
|
||||
if (_notificationEffectIconSelect) _notificationEffectIconSelect.setValue(css.notification_effect || 'flash');
|
||||
const dur = css.duration_ms ?? 1500;
|
||||
document.getElementById('css-editor-notification-duration').value = dur;
|
||||
document.getElementById('css-editor-notification-duration-val').textContent = dur;
|
||||
@@ -734,6 +854,7 @@ function _loadNotificationState(css) {
|
||||
|
||||
function _resetNotificationState() {
|
||||
document.getElementById('css-editor-notification-effect').value = 'flash';
|
||||
if (_notificationEffectIconSelect) _notificationEffectIconSelect.setValue('flash');
|
||||
document.getElementById('css-editor-notification-duration').value = 1500;
|
||||
document.getElementById('css-editor-notification-duration-val').textContent = '1500';
|
||||
document.getElementById('css-editor-notification-default-color').value = '#ffffff';
|
||||
@@ -993,6 +1114,7 @@ export async function showCSSEditor(cssId = null, cloneData = null) {
|
||||
_loadColorCycleState(css);
|
||||
} else if (sourceType === 'gradient') {
|
||||
document.getElementById('css-editor-gradient-preset').value = '';
|
||||
if (_gradientPresetIconSelect) _gradientPresetIconSelect.setValue('');
|
||||
gradientInit(css.stops || [
|
||||
{ position: 0.0, color: [255, 0, 0] },
|
||||
{ position: 1.0, color: [0, 0, 255] },
|
||||
@@ -1000,8 +1122,10 @@ export async function showCSSEditor(cssId = null, cloneData = null) {
|
||||
_loadAnimationState(css.animation);
|
||||
} else if (sourceType === 'effect') {
|
||||
document.getElementById('css-editor-effect-type').value = css.effect_type || 'fire';
|
||||
if (_effectTypeIconSelect) _effectTypeIconSelect.setValue(css.effect_type || 'fire');
|
||||
onEffectTypeChange();
|
||||
document.getElementById('css-editor-effect-palette').value = css.palette || 'fire';
|
||||
if (_effectPaletteIconSelect) _effectPaletteIconSelect.setValue(css.palette || 'fire');
|
||||
document.getElementById('css-editor-effect-color').value = rgbArrayToHex(css.color || [255, 80, 0]);
|
||||
document.getElementById('css-editor-effect-intensity').value = css.intensity ?? 1.0;
|
||||
document.getElementById('css-editor-effect-intensity-val').textContent = parseFloat(css.intensity ?? 1.0).toFixed(1);
|
||||
|
||||
@@ -78,6 +78,27 @@ function _buildVSTypeItems() {
|
||||
}
|
||||
|
||||
let _vsTypeIconSelect = null;
|
||||
let _waveformIconSelect = null;
|
||||
|
||||
const _WAVEFORM_SVG = {
|
||||
sine: '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M0 12 Q15 -4 30 12 Q45 28 60 12"/></svg>',
|
||||
triangle: '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M0 12 L15 2 L45 22 L60 12"/></svg>',
|
||||
square: '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M0 20 L0 4 L30 4 L30 20 L60 20 L60 4"/></svg>',
|
||||
sawtooth: '<svg viewBox="0 0 60 24" width="60" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M0 20 L30 4 L30 20 L60 4"/></svg>',
|
||||
};
|
||||
|
||||
function _ensureWaveformIconSelect() {
|
||||
const sel = document.getElementById('value-source-waveform');
|
||||
if (!sel) return;
|
||||
const items = [
|
||||
{ value: 'sine', icon: _WAVEFORM_SVG.sine, label: t('value_source.waveform.sine') },
|
||||
{ value: 'triangle', icon: _WAVEFORM_SVG.triangle, label: t('value_source.waveform.triangle') },
|
||||
{ value: 'square', icon: _WAVEFORM_SVG.square, label: t('value_source.waveform.square') },
|
||||
{ value: 'sawtooth', icon: _WAVEFORM_SVG.sawtooth, label: t('value_source.waveform.sawtooth') },
|
||||
];
|
||||
if (_waveformIconSelect) { _waveformIconSelect.updateItems(items); return; }
|
||||
_waveformIconSelect = new IconSelect({ target: sel, items, columns: 4 });
|
||||
}
|
||||
|
||||
function _ensureVSTypeIconSelect() {
|
||||
const sel = document.getElementById('value-source-type');
|
||||
@@ -111,6 +132,7 @@ export async function showValueSourceModal(editData) {
|
||||
_setSlider('value-source-value', editData.value ?? 1.0);
|
||||
} else if (editData.source_type === 'animated') {
|
||||
document.getElementById('value-source-waveform').value = editData.waveform || 'sine';
|
||||
if (_waveformIconSelect) _waveformIconSelect.setValue(editData.waveform || 'sine');
|
||||
_setSlider('value-source-speed', editData.speed ?? 10);
|
||||
_setSlider('value-source-min-value', editData.min_value ?? 0);
|
||||
_setSlider('value-source-max-value', editData.max_value ?? 1);
|
||||
@@ -174,6 +196,7 @@ export function onValueSourceTypeChange() {
|
||||
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';
|
||||
if (type === 'animated') _ensureWaveformIconSelect();
|
||||
document.getElementById('value-source-audio-section').style.display = type === 'audio' ? '' : 'none';
|
||||
document.getElementById('value-source-adaptive-time-section').style.display = type === 'adaptive_time' ? '' : 'none';
|
||||
document.getElementById('value-source-adaptive-scene-section').style.display = type === 'adaptive_scene' ? '' : 'none';
|
||||
|
||||
Reference in New Issue
Block a user