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

Add test preview for color strip sources with LED strip and rectangle views

Browse Source 
New WebSocket endpoint streams real-time RGB frames from any CSS source.
Generic sources show a horizontal LED strip canvas. Picture sources show
a rectangle with per-edge canvases matching the calibration layout.

Server computes exact output indices per edge (offset + reverse + CW/CCW)
so the frontend renders edges in correct visual orientation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-12 19:18:36 +03:00
parent 0e270685e8
commit bebdfcf319
9 changed files with 333 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
server/src/wled_controller/templates/modals/test-css-source.html Normal file
View File

@@ -0,0 +1,37 @@
<!-- Test Color Strip Source Modal -->
<div id="test-css-source-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="test-css-source-modal-title">
<div class="modal-content">
<div class="modal-header">
<h2 id="test-css-source-modal-title" data-i18n="color_strip.test.title">Test Color Strip</h2>
<button class="modal-close-btn" onclick="closeTestCssSourceModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
</div>
<div class="modal-body">
<!-- Strip view (for generic sources) -->
<div id="css-test-strip-view">
<canvas id="css-test-strip-canvas" class="css-test-strip-canvas"></canvas>
</div>
<!-- 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>
<canvas id="css-test-edge-top" class="css-test-edge-h"></canvas>
<div class="css-test-rect-corner"></div>
<canvas id="css-test-edge-left" class="css-test-edge-v"></canvas>
<div class="css-test-rect-screen"></div>
<canvas id="css-test-edge-right" class="css-test-edge-v"></canvas>
<div class="css-test-rect-corner"></div>
<canvas id="css-test-edge-bottom" class="css-test-edge-h"></canvas>
<div class="css-test-rect-corner"></div>
</div>
</div>
<div class="css-test-info">
<span id="css-test-led-count" class="css-test-stat"></span>
</div>
<div id="css-test-status" class="css-test-status" data-i18n="color_strip.test.connecting">Connecting...</div>
</div>
</div>
</div>