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:
@@ -9,6 +9,7 @@
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="calibration-device-id">
|
||||
<input type="hidden" id="calibration-css-id">
|
||||
<input type="hidden" id="calibration-css-source-type">
|
||||
<!-- Device picker shown in CSS calibration mode for edge testing -->
|
||||
<div id="calibration-css-test-group" class="form-group" style="display:none; margin-bottom: 12px; padding: 0 4px;">
|
||||
<div class="label-row">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -60,14 +60,14 @@
|
||||
<div id="ha-light-editor-transition-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Brightness Value Source -->
|
||||
<!-- Brightness -->
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="ha-light-editor-brightness-vs" data-i18n="targets.brightness_vs">Brightness Source:</label>
|
||||
<label data-i18n="targets.brightness">Brightness:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<select id="ha-light-editor-brightness-vs">
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.brightness.hint">Output brightness multiplier (0–1). Can be bound to a value source for dynamic control.</small>
|
||||
<div id="ha-light-editor-brightness-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Color Tolerance -->
|
||||
|
||||
@@ -36,13 +36,11 @@
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="target-editor-brightness-vs" data-i18n="targets.brightness_vs">Brightness Source:</label>
|
||||
<label data-i18n="targets.brightness">Brightness:</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="targets.brightness_vs.hint">Optional value source that dynamically controls brightness each frame (overrides device brightness)</small>
|
||||
<select id="target-editor-brightness-vs">
|
||||
<option value="" data-i18n="targets.brightness_vs.none">None (device brightness)</option>
|
||||
</select>
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.brightness.hint">Output brightness multiplier (0–1). Can be bound to a value source for dynamic control.</small>
|
||||
<div id="target-editor-brightness-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="target-editor-fps-group">
|
||||
|
||||
@@ -36,6 +36,12 @@
|
||||
<option value="adaptive_time" data-i18n="value_source.type.adaptive_time">Adaptive (Time of Day)</option>
|
||||
<option value="adaptive_scene" data-i18n="value_source.type.adaptive_scene">Adaptive (Scene)</option>
|
||||
<option value="daylight" data-i18n="value_source.type.daylight">Daylight Cycle</option>
|
||||
<option value="static_color" data-i18n="value_source.type.static_color">Static Color</option>
|
||||
<option value="animated_color" data-i18n="value_source.type.animated_color">Animated Color</option>
|
||||
<option value="adaptive_time_color" data-i18n="value_source.type.adaptive_time_color">Time Color</option>
|
||||
<option value="ha_entity" data-i18n="value_source.type.ha_entity">HA Entity</option>
|
||||
<option value="gradient_map" data-i18n="value_source.type.gradient_map">Gradient Map</option>
|
||||
<option value="css_extract" data-i18n="value_source.type.css_extract">Strip Extract</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -274,6 +280,181 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Static Color fields -->
|
||||
<div id="value-source-static-color-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="value_source.static_color.color">Color:</label>
|
||||
</div>
|
||||
<input type="color" id="value-source-static-color" value="#ffffff">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Animated Color fields -->
|
||||
<div id="value-source-animated-color-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="value_source.animated_color.colors">Colors:</label>
|
||||
</div>
|
||||
<div id="value-source-animated-color-list"></div>
|
||||
<button type="button" class="btn btn-sm" onclick="addAnimatedColor()">+ Add Color</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-animated-color-speed">
|
||||
<span data-i18n="value_source.animated_color.speed">Speed (cpm):</span>
|
||||
<span id="value-source-animated-color-speed-val">10.0</span>
|
||||
</label>
|
||||
</div>
|
||||
<input type="range" id="value-source-animated-color-speed" min="0.1" max="120" step="0.1" value="10.0"
|
||||
oninput="document.getElementById('value-source-animated-color-speed-val').textContent = parseFloat(this.value).toFixed(1)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-animated-color-easing" data-i18n="value_source.animated_color.easing">Easing:</label>
|
||||
</div>
|
||||
<select id="value-source-animated-color-easing">
|
||||
<option value="linear">Linear</option>
|
||||
<option value="step">Step</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Adaptive Time Color fields -->
|
||||
<div id="value-source-adaptive-time-color-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="value_source.adaptive_time_color.schedule">Color Schedule:</label>
|
||||
</div>
|
||||
<div id="value-source-color-schedule-list"></div>
|
||||
<button type="button" class="btn btn-sm" onclick="addColorSchedulePoint()">+ Add Point</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HA Entity fields -->
|
||||
<div id="value-source-ha-entity-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-ha-source" data-i18n="value_source.ha_source">HA Connection:</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="value_source.ha_source.hint">Home Assistant connection to read entities from</small>
|
||||
<select id="value-source-ha-source">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-entity-id" data-i18n="value_source.entity_id">Entity:</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="value_source.entity_id.hint">HA entity ID (e.g. sensor.temperature)</small>
|
||||
<select id="value-source-entity-id">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-attribute" data-i18n="value_source.attribute">Attribute (optional):</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="value_source.attribute.hint">Read a specific attribute instead of the entity state</small>
|
||||
<input type="text" id="value-source-attribute" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-min-ha-value"><span data-i18n="value_source.min_ha_value">Min HA Value:</span> <span id="value-source-min-ha-value-display">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="value_source.min_ha_value.hint">Raw HA value that maps to 0% output</small>
|
||||
<input type="number" id="value-source-min-ha-value" step="any" value="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-max-ha-value"><span data-i18n="value_source.max_ha_value">Max HA Value:</span> <span id="value-source-max-ha-value-display">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="value_source.max_ha_value.hint">Raw HA value that maps to 100% output</small>
|
||||
<input type="number" id="value-source-max-ha-value" step="any" value="100">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-ha-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-ha-smoothing-display">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="value_source.smoothing.hint">Temporal smoothing (0 = instant, 1 = very smooth)</small>
|
||||
<input type="range" id="value-source-ha-smoothing" min="0" max="1" step="0.05" value="0"
|
||||
oninput="document.getElementById('value-source-ha-smoothing-display').textContent = this.value">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gradient Map fields -->
|
||||
<div id="value-source-gradient-map-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-gradient-input" data-i18n="value_source.input_source">Input Value Source:</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="value_source.input_source.hint">Float value source (0-1) to map through the gradient</small>
|
||||
<select id="value-source-gradient-input">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-gradient-id" data-i18n="value_source.gradient_stops">Gradient:</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="value_source.gradient_stops.hint">Select a gradient preset to map through</small>
|
||||
<select id="value-source-gradient-id">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-gradient-easing" data-i18n="value_source.easing">Interpolation:</label>
|
||||
</div>
|
||||
<select id="value-source-gradient-easing">
|
||||
<option value="linear">Linear</option>
|
||||
<option value="step">Step</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSS Extract fields -->
|
||||
<div id="value-source-css-extract-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-css-source" data-i18n="value_source.css_source">Color Strip Source:</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="value_source.css_source.hint">Color strip source to extract color from</small>
|
||||
<select id="value-source-css-source">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-led-start"><span data-i18n="value_source.led_start">LED Start:</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="value_source.led_start.hint">First LED in the range (0-based)</small>
|
||||
<input type="number" id="value-source-led-start" min="0" step="1" value="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="value-source-led-end"><span data-i18n="value_source.led_end">LED End:</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="value_source.led_end.hint">Last LED in the range (-1 = whole strip)</small>
|
||||
<input type="number" id="value-source-led-end" min="-1" step="1" value="-1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shared adaptive output range (shown for adaptive and daylight types) -->
|
||||
<div id="value-source-adaptive-range-section" style="display:none">
|
||||
<div class="form-group">
|
||||
|
||||
Reference in New Issue
Block a user