Add per-target protocol selection (DDP/HTTP) and reorganize target editor

- Add protocol field (ddp/http) to storage, API schemas, routes, processor
- WledTargetProcessor passes protocol to create_led_client(use_ddp=...)
- Target editor: protocol dropdown + keepalive in collapsible Specific Settings
- FPS, brightness threshold, adaptive FPS moved to main form area
- Hide Specific Settings section for serial devices (protocol is WLED-only)
- Card badge: show DDP/HTTP for WLED devices, Serial for serial devices

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-26 20:52:03 +03:00
parent cadef971e7
commit fda040ae18
11 changed files with 87 additions and 21 deletions

View File

@@ -44,18 +44,6 @@
</select>
</div>
<div class="form-group" id="target-editor-brightness-threshold-group">
<div class="label-row">
<label for="target-editor-brightness-threshold">
<span data-i18n="targets.min_brightness_threshold">Min Brightness Threshold:</span>
<span id="target-editor-brightness-threshold-value">0</span>
</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="targets.min_brightness_threshold.hint">Effective output brightness (pixel brightness × device/source brightness) below this value turns LEDs off completely (0 = disabled)</small>
<input type="range" id="target-editor-brightness-threshold" min="0" max="254" value="0" oninput="document.getElementById('target-editor-brightness-threshold-value').textContent = this.value">
</div>
<div class="form-group" id="target-editor-fps-group">
<div class="label-row">
<label for="target-editor-fps">
@@ -72,16 +60,16 @@
<small id="target-editor-fps-rec" class="input-hint" style="display:none"></small>
</div>
<div class="form-group" id="target-editor-keepalive-group">
<div class="form-group" id="target-editor-brightness-threshold-group">
<div class="label-row">
<label for="target-editor-keepalive-interval">
<span data-i18n="targets.keepalive_interval">Keep Alive Interval:</span>
<span id="target-editor-keepalive-interval-value">1.0</span><span>s</span>
<label for="target-editor-brightness-threshold">
<span data-i18n="targets.min_brightness_threshold">Min Brightness Threshold:</span>
<span id="target-editor-brightness-threshold-value">0</span>
</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="targets.keepalive_interval.hint">How often to resend the last frame when the screen is static, to keep the device in live mode (0.5-5.0s)</small>
<input type="range" id="target-editor-keepalive-interval" min="0.5" max="5.0" step="0.5" value="1.0" oninput="document.getElementById('target-editor-keepalive-interval-value').textContent = this.value">
<small class="input-hint" style="display:none" data-i18n="targets.min_brightness_threshold.hint">Effective output brightness (pixel brightness × device/source brightness) below this value turns LEDs off completely (0 = disabled)</small>
<input type="range" id="target-editor-brightness-threshold" min="0" max="254" value="0" oninput="document.getElementById('target-editor-brightness-threshold-value').textContent = this.value">
</div>
<div class="form-group" id="target-editor-adaptive-fps-group">
@@ -96,6 +84,35 @@
</label>
</div>
<details class="form-collapse" id="target-editor-device-settings">
<summary data-i18n="targets.section.specific_settings">Specific Settings</summary>
<div class="form-collapse-body">
<div class="form-group" id="target-editor-protocol-group">
<div class="label-row">
<label for="target-editor-protocol" data-i18n="targets.protocol">Protocol:</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="targets.protocol.hint">DDP sends pixels via fast UDP (recommended). HTTP uses the JSON API — slower but reliable, limited to ~500 LEDs.</small>
<select id="target-editor-protocol">
<option value="ddp">DDP (UDP)</option>
<option value="http">HTTP</option>
</select>
</div>
<div class="form-group" id="target-editor-keepalive-group">
<div class="label-row">
<label for="target-editor-keepalive-interval">
<span data-i18n="targets.keepalive_interval">Keep Alive Interval:</span>
<span id="target-editor-keepalive-interval-value">1.0</span><span>s</span>
</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="targets.keepalive_interval.hint">How often to resend the last frame when the screen is static, to keep the device in live mode (0.5-5.0s)</small>
<input type="range" id="target-editor-keepalive-interval" min="0.5" max="5.0" step="0.5" value="1.0" oninput="document.getElementById('target-editor-keepalive-interval-value').textContent = this.value">
</div>
</div>
</details>
<div id="target-editor-error" class="error-message" style="display: none;"></div>
</form>
</div>