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

Add effect palette preview bar in CSS editor

Browse Source 
Show a gradient color bar below the effect type description, giving
users a visual preview of palette colors before applying. Updates
live when switching effect type, palette, or meteor head color.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-23 01:59:25 +03:00
parent 9e555cef2e
commit f9a5fb68ed
4 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
server/src/wled_controller/templates/modals/css-editor.html
View File

@@ -228,6 +228,7 @@
<option value="aurora" data-i18n="color_strip.effect.aurora">Aurora</option>
</select>
<small id="css-editor-effect-type-desc" class="field-desc"></small>
<div id="css-editor-effect-preview" class="effect-palette-preview"></div>
</div>
<div class="form-group">
@@ -249,7 +250,7 @@
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="color_strip.effect.palette.hint">Color palette used by the effect.</small>
<select id="css-editor-effect-palette">
<select id="css-editor-effect-palette" onchange="updateEffectPreview()">
<option value="fire" data-i18n="color_strip.palette.fire">Fire</option>
<option value="ocean" data-i18n="color_strip.palette.ocean">Ocean</option>
<option value="lava" data-i18n="color_strip.palette.lava">Lava</option>
@@ -267,7 +268,7 @@
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="color_strip.effect.color.hint">Head color for the meteor effect.</small>
<input type="color" id="css-editor-effect-color" value="#ff5000">
<input type="color" id="css-editor-effect-color" value="#ff5000" oninput="updateEffectPreview()">
</div>
<div id="css-editor-effect-intensity-group" class="form-group">