alexei.dolgolyov
bebdfcf319
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>
38 lines
1.9 KiB
HTML
38 lines
1.9 KiB
HTML
<!-- 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">✕</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>
|