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

Improve stream UI: grouped sections, full-size preview lightbox, and test redesign

Browse Source 
- Separate Screen Capture and Processed streams into grouped sections with headers
- Remove redundant Type dropdown from stream modal (type inferred from add button)
- Add full-resolution image to test endpoints alongside thumbnails
- Add image lightbox with clickable preview for full-size viewing
- Move test results from modal into lightbox overlay with capture stats
- Apply postprocessing to both thumbnail and full image for processed streams
- Rename "Assigned Picture Stream" to "Picture Stream" in device settings
- Fix null reference errors from removed test result HTML elements

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-11 00:35:06 +03:00
parent 493f14fba9
commit e8cbc73161
7 changed files with 308 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,7 +70,7 @@
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" class="templates-grid">
<div id="streams-list">
<div class="loading-spinner"></div>
</div>
</div>
@@ -460,34 +460,6 @@
<span data-i18n="templates.test.run">🧪 Run Test</span>
</button>
<div id="test-template-results" style="display: none; margin-top: 16px;">
<div class="test-results-container">
<div class="test-preview-section">
<div id="test-template-preview-image" class="test-preview-image"></div>
</div>
<div class="test-performance-section">
<div class="test-performance-stats">
<div class="stat-item">
<span data-i18n="templates.test.results.duration">Duration:</span>
<strong id="test-template-actual-duration">-</strong>
</div>
<div class="stat-item">
<span data-i18n="templates.test.results.frame_count">Frames:</span>
<strong id="test-template-frame-count">-</strong>
</div>
<div class="stat-item">
<span data-i18n="templates.test.results.actual_fps">Actual FPS:</span>
<strong id="test-template-actual-fps">-</strong>
</div>
<div class="stat-item">
<span data-i18n="templates.test.results.avg_capture_time">Avg Capture:</span>
<strong id="test-template-avg-capture-time">-</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -512,34 +484,6 @@
<span data-i18n="streams.test.run">🧪 Run Test</span>
</button>
<div id="test-stream-results" style="display: none; margin-top: 16px;">
<div class="test-results-container">
<div class="test-preview-section">
<div id="test-stream-preview-image" class="test-preview-image"></div>
</div>
<div class="test-performance-section">
<div class="test-performance-stats">
<div class="stat-item">
<span data-i18n="templates.test.results.duration">Duration:</span>
<strong id="test-stream-actual-duration">-</strong>
</div>
<div class="stat-item">
<span data-i18n="templates.test.results.frame_count">Frames:</span>
<strong id="test-stream-frame-count">-</strong>
</div>
<div class="stat-item">
<span data-i18n="templates.test.results.actual_fps">Actual FPS:</span>
<strong id="test-stream-actual-fps">-</strong>
</div>
<div class="stat-item">
<span data-i18n="templates.test.results.avg_capture_time">Avg Capture:</span>
<strong id="test-stream-avg-capture-time">-</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -559,13 +503,7 @@
<input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Stream" required>
</div>
<div class="form-group">
<label for="stream-type" data-i18n="streams.type">Stream Type:</label>
<select id="stream-type" onchange="onStreamTypeChange()">
<option value="raw" data-i18n="streams.type.raw">Screen Capture</option>
<option value="processed" data-i18n="streams.type.processed">Processed</option>
</select>
</div>
<input type="hidden" id="stream-type" value="raw">
<!-- Raw stream fields -->
<div id="stream-raw-fields">
@@ -692,6 +630,15 @@
</div>
</div>
<!-- Image Lightbox -->
<div id="image-lightbox" class="lightbox" onclick="closeLightbox(event)">
<button class="lightbox-close" onclick="closeLightbox()" title="Close">&#x2715;</button>
<div class="lightbox-content">
<img id="lightbox-image" src="" alt="Full size preview">
<div id="lightbox-stats" class="lightbox-stats" style="display: none;"></div>
</div>
</div>
<script src="/static/app.js"></script>
<script>
// Initialize theme