feat: expand color strip sources with new effects, gradient improvements, and daylight/candlelight enhancements
Some checks failed
Lint & Test / test (push) Failing after 29s
Some checks failed
Lint & Test / test (push) Failing after 29s
Effects: add 7 new procedural effects (rain, comet, bouncing ball, fireworks, sparkle rain, lava lamp, wave interference) and custom palette support via user-defined [[pos,R,G,B],...] stops. Gradient: add easing functions (linear, ease_in_out, step, cubic) for stop interpolation, plus noise_perturb and hue_rotate animation types. Daylight: add longitude field and NOAA solar equations for accurate sunrise/sunset based on latitude, longitude, and day of year. Candlelight: add wind simulation (correlated gusts), candle type presets (taper/votive/bonfire), and wax drip effect with localized brightness dips. Also fixes editor preview to include all new fields for inline LED test.
This commit is contained in:
@@ -152,6 +152,20 @@
|
||||
<small class="input-hint" style="display:none" data-i18n="color_strip.gradient.stops.hint">Each stop defines a color at a relative position (0.0 = start, 1.0 = end). The ↔ button adds a right-side color to create a hard edge at that stop.</small>
|
||||
<div id="gradient-stops-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-gradient-easing" data-i18n="color_strip.gradient.easing">Easing:</label>
|
||||
<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.gradient.easing.hint">Controls how colors blend between stops.</small>
|
||||
<select id="css-editor-gradient-easing">
|
||||
<option value="linear" data-i18n="color_strip.gradient.easing.linear">Linear</option>
|
||||
<option value="ease_in_out" data-i18n="color_strip.gradient.easing.ease_in_out">Smooth (S-curve)</option>
|
||||
<option value="step" data-i18n="color_strip.gradient.easing.step">Step</option>
|
||||
<option value="cubic" data-i18n="color_strip.gradient.easing.cubic">Cubic</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Procedural effect fields -->
|
||||
@@ -168,6 +182,13 @@
|
||||
<option value="plasma" data-i18n="color_strip.effect.plasma">Plasma</option>
|
||||
<option value="noise" data-i18n="color_strip.effect.noise">Perlin Noise</option>
|
||||
<option value="aurora" data-i18n="color_strip.effect.aurora">Aurora</option>
|
||||
<option value="rain" data-i18n="color_strip.effect.rain">Rain</option>
|
||||
<option value="comet" data-i18n="color_strip.effect.comet">Comet</option>
|
||||
<option value="bouncing_ball" data-i18n="color_strip.effect.bouncing_ball">Bouncing Ball</option>
|
||||
<option value="fireworks" data-i18n="color_strip.effect.fireworks">Fireworks</option>
|
||||
<option value="sparkle_rain" data-i18n="color_strip.effect.sparkle_rain">Sparkle Rain</option>
|
||||
<option value="lava_lamp" data-i18n="color_strip.effect.lava_lamp">Lava Lamp</option>
|
||||
<option value="wave_interference" data-i18n="color_strip.effect.wave_interference">Wave Interference</option>
|
||||
</select>
|
||||
<small id="css-editor-effect-type-desc" class="field-desc"></small>
|
||||
</div>
|
||||
@@ -178,7 +199,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="onEffectPaletteChange()">
|
||||
<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>
|
||||
@@ -187,9 +208,20 @@
|
||||
<option value="aurora" data-i18n="color_strip.palette.aurora">Aurora</option>
|
||||
<option value="sunset" data-i18n="color_strip.palette.sunset">Sunset</option>
|
||||
<option value="ice" data-i18n="color_strip.palette.ice">Ice</option>
|
||||
<option value="custom" data-i18n="color_strip.palette.custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-effect-custom-palette-group" class="form-group" style="display:none">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-effect-custom-palette" data-i18n="color_strip.effect.custom_palette">Custom Palette:</label>
|
||||
<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.custom_palette.hint">JSON array of [position, R, G, B] stops.</small>
|
||||
<textarea id="css-editor-effect-custom-palette" rows="3"
|
||||
placeholder='[[0,0,0,0],[0.5,255,0,0],[1,255,255,0]]'></textarea>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-effect-color-group" class="form-group" style="display:none">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-effect-color" data-i18n="color_strip.effect.color">Color:</label>
|
||||
@@ -519,6 +551,15 @@
|
||||
<input type="range" id="css-editor-daylight-latitude" min="-90" max="90" step="1" value="50"
|
||||
oninput="document.getElementById('css-editor-daylight-latitude-val').textContent = parseInt(this.value)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-daylight-longitude"><span data-i18n="color_strip.daylight.longitude">Longitude:</span> <span id="css-editor-daylight-longitude-val">0</span>°</label>
|
||||
<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.daylight.longitude.hint">Your geographic longitude (-180 to 180). Adjusts solar noon offset for accurate sunrise/sunset timing.</small>
|
||||
<input type="range" id="css-editor-daylight-longitude" min="-180" max="180" step="1" value="0"
|
||||
oninput="document.getElementById('css-editor-daylight-longitude-val').textContent = parseInt(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Candlelight section -->
|
||||
@@ -557,6 +598,28 @@
|
||||
<input type="range" id="css-editor-candlelight-speed" min="0.1" max="5.0" step="0.1" value="1.0"
|
||||
oninput="document.getElementById('css-editor-candlelight-speed-val').textContent = parseFloat(this.value).toFixed(1)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-candlelight-wind"><span data-i18n="color_strip.candlelight.wind">Wind:</span> <span id="css-editor-candlelight-wind-val">0.0</span></label>
|
||||
<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.candlelight.wind.hint">Wind simulation strength. Higher values create correlated gusts across all candles.</small>
|
||||
<input type="range" id="css-editor-candlelight-wind" min="0.0" max="2.0" step="0.1" value="0.0"
|
||||
oninput="document.getElementById('css-editor-candlelight-wind-val').textContent = parseFloat(this.value).toFixed(1)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-candlelight-type" data-i18n="color_strip.candlelight.type">Candle Type:</label>
|
||||
<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.candlelight.type.hint">Preset that adjusts flicker behavior without changing other settings.</small>
|
||||
<select id="css-editor-candlelight-type">
|
||||
<option value="default" data-i18n="color_strip.candlelight.type.default">Default</option>
|
||||
<option value="taper" data-i18n="color_strip.candlelight.type.taper">Taper</option>
|
||||
<option value="votive" data-i18n="color_strip.candlelight.type.votive">Votive</option>
|
||||
<option value="bonfire" data-i18n="color_strip.candlelight.type.bonfire">Bonfire</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Processed type fields -->
|
||||
|
||||
Reference in New Issue
Block a user