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

Add audio sources as first-class entities, add mapped CSS type, simplify target editor for mapped sources

Browse Source 
- Audio sources moved to separate tab with dedicated CRUD API, store, and editor modal
- New "mapped" color strip source type: assigns different CSS sources to distinct LED sub-ranges (zones)
- Mapped stream runtime with per-zone sub-streams, auto-sizing, hot-update support
- Target editor auto-collapses segments UI when mapped CSS is selected
- Delete protection for CSS sources referenced by mapped zones
- Compact header/footer layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-23 23:35:58 +03:00
parent 199039326b
commit 9efb08acb6
28 changed files with 1729 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,6 +27,7 @@
<option value="color_cycle" data-i18n="color_strip.type.color_cycle">Color Cycle</option>
<option value="effect" data-i18n="color_strip.type.effect">Procedural Effect</option>
<option value="composite" data-i18n="color_strip.type.composite">Composite</option>
<option value="mapped" data-i18n="color_strip.type.mapped">Mapped</option>
<option value="audio" data-i18n="color_strip.type.audio">Audio Reactive</option>
</select>
</div>
@@ -316,6 +317,19 @@
</div>
</div>
<!-- Mapped-specific fields -->
<div id="css-editor-mapped-section" style="display:none">
<div class="form-group">
<div class="label-row">
<label data-i18n="color_strip.mapped.zones">Zones:</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.mapped.zones.hint">Each zone maps a color strip source to a specific LED range. Zones are placed side-by-side.</small>
<div id="mapped-zones-list"></div>
<button type="button" class="btn btn-secondary" onclick="mappedAddZone()" data-i18n="color_strip.mapped.add_zone">+ Add Zone</button>
</div>
</div>
<!-- Audio-reactive fields -->
<div id="css-editor-audio-section" style="display:none">
<div class="form-group">
@@ -333,25 +347,12 @@
<div class="form-group">
<div class="label-row">
<label for="css-editor-audio-device" data-i18n="color_strip.audio.device">Audio Device:</label>
<label for="css-editor-audio-source" data-i18n="color_strip.audio.source">Audio 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="color_strip.audio.device.hint">Audio input source. Loopback devices capture system audio output; input devices capture microphone or line-in.</small>
<select id="css-editor-audio-device">
<!-- populated dynamically from /api/v1/audio-devices -->
</select>
</div>
<div class="form-group">
<div class="label-row">
<label for="css-editor-audio-channel" data-i18n="color_strip.audio.channel">Channel:</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.audio.channel.hint">Select which audio channel to visualize. Use Left/Right for stereo setups.</small>
<select id="css-editor-audio-channel">
<option value="mono" data-i18n="color_strip.audio.channel.mono">Mono (L+R mix)</option>
<option value="left" data-i18n="color_strip.audio.channel.left">Left</option>
<option value="right" data-i18n="color_strip.audio.channel.right">Right</option>
<small class="input-hint" style="display:none" data-i18n="color_strip.audio.source.hint">Mono audio source that provides audio data for this visualization. Create and manage audio sources in the Sources tab.</small>
<select id="css-editor-audio-source">
<!-- populated dynamically from /api/v1/audio-sources?source_type=mono -->
</select>
</div>