- Settings modal split into 3 tabs: General, Backup, MQTT - Log viewer moved to full-screen overlay with compact toolbar - External URL setting: API endpoints + UI for configuring server domain used in webhook/WS URLs instead of auto-detected local IP - Sources tab tree restructured: Picture Source (Screen Capture/Static/ Processed sub-groups), Color Strip, Audio, Utility - TreeNav extended to support nested groups (3-level tree) - Audio tab split into Sources and Templates sub-tabs - Fix audio template test: device picker now filters by engine type (was showing WASAPI indices for sounddevice templates) - Audio template test device picker disabled during active test - Rename "Input Source" to "Source" in CSS test preview (en/ru/zh) - Fix i18n: log filter/level items deferred to avoid stale t() calls Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
80 lines
5.2 KiB
HTML
80 lines
5.2 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>
|
|
|
|
<!-- 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>
|