feat: new value source types (HA entity, gradient map, strip extract) + UI fixes
Lint & Test / test (push) Successful in 1m27s
Lint & Test / test (push) Successful in 1m27s
New value source types: - ha_entity: reads numeric values from HA entity state/attribute, normalizes via min/max range, applies EMA smoothing. EntitySelect for HA connection and entity selection with live entity list fetching. - gradient_map: maps a float value source (0-1) through a gradient entity. EntitySelect for both input source and gradient with inline previews. - css_extract: extracts single color by averaging LED range from a color strip source. EntitySelect for source selection. Value source type picker: - Filter tabs (All / Numeric / Color) above the icon grid - showTypePicker extended with filterTabs + onFilterChange support Palette selectors converted to EntitySelect: - Effect palette, gradient preset, and audio palette selectors now use command-palette style EntitySelect with gradient strip previews Tab indicator fixes: - Icon now updates on tab switch (was passing no args to updateTabIndicator) - Visible with any background effect active, not just Noise Field - Noise Field is the default background effect for new users Dashboard section collapse fix: - Split header into clickable toggle (chevron+label) and non-clickable actions area — buttons no longer trigger collapse/expand Discriminated union fix (422 errors): - source_type/target_type now always included in update payloads for: CSS editor, LED target, HA light target, simple calibration, advanced calibration
This commit is contained in:
@@ -86,7 +86,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.static_color.hint">The solid color that will be sent to all LEDs on the strip.</small>
|
||||
<input type="color" id="css-editor-color" value="#ffffff">
|
||||
<div id="css-editor-color-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -170,7 +170,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" oninput="updateEffectPreview()">
|
||||
<div id="css-editor-effect-color-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-effect-intensity-group" class="form-group">
|
||||
@@ -306,7 +306,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.audio.color.hint">Low-level color for VU meter bar.</small>
|
||||
<input type="color" id="css-editor-audio-color" value="#00ff00">
|
||||
<div id="css-editor-audio-color-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-audio-color-peak-group" class="form-group" style="display:none">
|
||||
@@ -315,7 +315,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.audio.color_peak.hint">High-level color at the top of the VU meter bar.</small>
|
||||
<input type="color" id="css-editor-audio-color-peak" value="#ff0000">
|
||||
<div id="css-editor-audio-color-peak-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-audio-mirror-group" class="form-group" style="display:none">
|
||||
@@ -339,7 +339,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.api_input.fallback_color.hint">Color to display when no data has been received within the timeout period.</small>
|
||||
<input type="color" id="css-editor-api-input-fallback-color" value="#000000">
|
||||
<div id="css-editor-api-input-fallback-color-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -422,7 +422,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.notification.default_color.hint">Color used when the notification has no app-specific color mapping.</small>
|
||||
<input type="color" id="css-editor-notification-default-color" value="#ffffff">
|
||||
<div id="css-editor-notification-default-color-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -468,15 +468,13 @@
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-notification-volume">
|
||||
<label>
|
||||
<span data-i18n="color_strip.notification.sound.volume">Volume:</span>
|
||||
<span id="css-editor-notification-volume-val">100%</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.notification.sound.volume.hint">Global volume for notification sounds (0–100%).</small>
|
||||
<input type="range" id="css-editor-notification-volume" min="0" max="100" step="5" value="100"
|
||||
oninput="document.getElementById('css-editor-notification-volume-val').textContent = this.value + '%'">
|
||||
<div id="css-editor-notification-volume-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@@ -556,7 +554,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.candlelight.color.hint">The warm base color of the candle flame. Default is a natural warm amber.</small>
|
||||
<input type="color" id="css-editor-candlelight-color" value="#ff9329">
|
||||
<div id="css-editor-candlelight-color-container"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
|
||||
Reference in New Issue
Block a user