Files
wled-screen-controller-mixed/server/src/wled_controller/templates/modals/test-css-source.html
alexei.dolgolyov 05152a0f51 Settings tabs, log overlay, external URL, Sources tree restructure, audio fixes
- 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>
2026-03-17 17:16:57 +03:00

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">&#x2715;</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">&#x2713;</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>