alexei.dolgolyov
be2d5e1670
Lint & Test / test (push) Successful in 6m37s
Removes the inlined FPS select and auto-refresh button from the shared image lightbox and rehosts the Key Colors live preview inside the dedicated test-css-source modal alongside the other CSS test views. - Drop initLightbox() / lightbox-fps-select IconSelect — the lightbox no longer owns streaming controls. - Add #css-test-kc-view (canvas + meta) and .css-test-kc-* styles. - Reroute _testKeyColorsSource() through the existing modal session lifecycle so KC, CSPT, and standard CSS tests share teardown paths.
88 lines
5.5 KiB
HTML
88 lines
5.5 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 Preview</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" class="css-test-strip-wrap">
|
|
<canvas id="css-test-strip-canvas" class="css-test-strip-canvas"></canvas>
|
|
<canvas id="css-test-strip-axis" class="css-test-strip-axis"></canvas>
|
|
<button id="css-test-fire-btn" class="css-test-fire-btn" style="display:none"
|
|
onclick="fireCssTestNotification()"
|
|
data-i18n-title="color_strip.notification.test"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg></button>
|
|
</div>
|
|
|
|
<!-- Rectangle view (for picture sources) -->
|
|
<div id="css-test-rect-view" style="display:none">
|
|
<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 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Composite layers view -->
|
|
<div id="css-test-layers-view" style="display:none">
|
|
<div id="css-test-layers" class="css-test-layers"></div>
|
|
<canvas id="css-test-layers-axis" class="css-test-strip-axis"></canvas>
|
|
</div>
|
|
|
|
<!-- Key Colors view (frame + region overlays) -->
|
|
<div id="css-test-kc-view" style="display:none">
|
|
<div class="css-test-kc-wrap">
|
|
<canvas id="css-test-kc-canvas" class="css-test-kc-canvas"></canvas>
|
|
</div>
|
|
<div id="css-test-kc-meta" class="css-test-kc-meta"></div>
|
|
</div>
|
|
|
|
<!-- CSPT test: input source selector (hidden by default) -->
|
|
<div id="css-test-cspt-input-group" style="display:none" class="css-test-led-control">
|
|
<label for="css-test-cspt-input-select" data-i18n="color_strip.processed.input">Source:</label>
|
|
<select id="css-test-cspt-input-select" class="css-test-cspt-select" onchange="applyCssTestSettings()"></select>
|
|
</div>
|
|
|
|
<!-- LED count & FPS controls -->
|
|
<div id="css-test-led-fps-group" class="css-test-led-control">
|
|
<span id="css-test-led-group">
|
|
<label for="css-test-led-input" data-i18n="color_strip.test.led_count">LEDs:</label>
|
|
<input type="number" id="css-test-led-input" min="1" max="2000" step="1" value="100" class="css-test-led-input">
|
|
<span class="css-test-separator"></span>
|
|
</span>
|
|
<label for="css-test-fps-input" data-i18n="color_strip.test.fps">FPS:</label>
|
|
<input type="number" id="css-test-fps-input" min="1" max="60" step="1" value="20" class="css-test-led-input">
|
|
<button class="btn btn-icon btn-sm btn-secondary css-test-led-apply" onclick="applyCssTestSettings()" title="Apply" data-i18n-title="color_strip.test.apply">✓</button>
|
|
</div>
|
|
|
|
<!-- FPS chart (for api_input sources) — matches target card sparkline -->
|
|
<div id="css-test-fps-chart-group" class="target-fps-row" style="display:none">
|
|
<div class="target-fps-sparkline">
|
|
<canvas id="css-test-fps-chart"></canvas>
|
|
</div>
|
|
<div class="target-fps-label">
|
|
<span id="css-test-fps-value" class="metric-value">0</span>
|
|
<span class="target-fps-avg" id="css-test-fps-avg"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="css-test-status" class="css-test-status" data-i18n="color_strip.test.connecting">Connecting...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|