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

Refactor stream and template cards: collapsible groups, icon pills, compact layout

Browse Source 
- Make picture stream groups expandable/collapsible with localStorage persistence
- Replace text labels with icon pill badges on stream and capture template cards
- Remove section description text from all tabs
- Add auto-validation on edit for static image streams
- Show full URL on static image cards instead of truncating at 50 chars

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-11 20:18:45 +03:00
parent e0877a9b16
commit 705179f73f
3 changed files with 120 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
server/src/wled_controller/static/index.html
View File

@@ -42,14 +42,6 @@
</div>
<div class="tab-panel active" id="tab-devices">
<p class="section-tip">
<strong><span data-i18n="devices.wled_config">WLED Configuration:</span></strong> <span data-i18n="devices.wled_note">Configure your WLED device (effects, segments, color order, power limits, etc.) using the</span>
<a href="https://kno.wled.ge/" target="_blank" rel="noopener" data-i18n="devices.wled_link">official WLED app</a>
<span data-i18n="devices.wled_note_or">or the built-in</span>
<a href="#" class="wled-webui-link" data-i18n="devices.wled_webui_link">WLED Web UI</a>
<span data-i18n="devices.wled_note_webui">(open your device's IP in a browser).</span>
<span data-i18n="devices.wled_note2">This controller sends pixel color data and controls brightness per device.</span>
</p>
<div id="devices-list" class="devices-grid">
<div class="loading-spinner"></div>
</div>
@@ -57,33 +49,18 @@
<div class="tab-panel" id="tab-streams">
<p class="section-tip">
<span data-i18n="streams.description">
Picture streams define the capture pipeline. A raw stream captures from a display using a capture template. A processed stream applies postprocessing to another stream. Assign streams to devices.
</span>
</p>
<div id="streams-list">
<div class="loading-spinner"></div>
</div>
</div>
<div class="tab-panel" id="tab-templates">
<p class="section-tip">
<span data-i18n="templates.description">
Capture templates define how the screen is captured. Each template uses a specific capture engine (MSS, DXcam, WGC) with custom settings. Assign templates to devices for optimal performance.
</span>
</p>
<div id="templates-list" class="templates-grid">
<div class="loading-spinner"></div>
</div>
</div>
<div class="tab-panel" id="tab-pp-templates">
<p class="section-tip">
<span data-i18n="postprocessing.description">
Processing templates define image filters and color correction. Assign them to processed picture streams for consistent postprocessing across devices.
</span>
</p>
<div id="pp-templates-list" class="templates-grid">
<div class="loading-spinner"></div>
</div>