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

Enhance CSS test preview with live capture, brightness display, and UX fixes

Browse Source 
- Stream live JPEG frames from picture sources into the test preview rectangle
- Add composite layer brightness display via value source streaming
- Fix missing id on css-test-rect-screen element that prevented frame display
- Preload images before swapping to eliminate flicker on frame updates
- Increase preview resolution to 480x360 and add subtle outline
- Prevent auto-focus on name field in modals on touch devices (desktopFocus)
- Fix performance chart padding, color picker clipping, and subtitle offset
- Add calibration-style ticks and source name/LED count to rectangle preview

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-13 01:31:37 +03:00
parent 9b5686ac0a
commit 568a992a4e
12 changed files with 353 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
server/src/wled_controller/templates/modals/test-css-source.html
View File

@@ -16,18 +16,24 @@
<!-- Rectangle view (for picture sources) -->
<div id="css-test-rect-view" style="display:none">
<div class="css-test-rect" id="css-test-rect">
<div class="css-test-rect-corner"></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-top" class="css-test-edge"></canvas></div>
<div class="css-test-rect-corner"></div>
<div class="css-test-rect-outer">
<canvas id="css-test-rect-ticks" class="css-test-rect-ticks"></canvas>
<div class="css-test-rect" id="css-test-rect">
<div class="css-test-rect-corner"></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-top" class="css-test-edge"></canvas></div>
<div class="css-test-rect-corner"></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-left" class="css-test-edge"></canvas></div>
<div class="css-test-rect-screen"></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-right" class="css-test-edge"></canvas></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-left" class="css-test-edge"></canvas></div>
<div id="css-test-rect-screen" class="css-test-rect-screen">
<span id="css-test-rect-name" class="css-test-rect-label"></span>
<span id="css-test-rect-leds" class="css-test-rect-label css-test-rect-leds"></span>
</div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-right" class="css-test-edge"></canvas></div>
<div class="css-test-rect-corner"></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-bottom" class="css-test-edge"></canvas></div>
<div class="css-test-rect-corner"></div>
<div class="css-test-rect-corner"></div>
<div class="css-test-edge-wrap"><canvas id="css-test-edge-bottom" class="css-test-edge"></canvas></div>
<div class="css-test-rect-corner"></div>
</div>
</div>
</div>
@@ -36,10 +42,6 @@
<div id="css-test-layers" class="css-test-layers"></div>
</div>
<div class="css-test-info">
<span id="css-test-led-count" class="css-test-stat"></span>
</div>
<!-- LED count control -->
<div class="css-test-led-control" id="css-test-led-control">
<label for="css-test-led-input" data-i18n="color_strip.test.led_count">LEDs:</label>