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:
@@ -138,6 +138,7 @@ class TargetEditorModal extends Modal {
|
||||
return {
|
||||
name: document.getElementById('target-editor-name').value,
|
||||
device: document.getElementById('target-editor-device').value,
|
||||
protocol: document.getElementById('target-editor-protocol').value,
|
||||
css_source: document.getElementById('target-editor-css-source').value,
|
||||
brightness_vs: document.getElementById('target-editor-brightness-vs').value,
|
||||
brightness_threshold: document.getElementById('target-editor-brightness-threshold').value,
|
||||
@@ -200,6 +201,14 @@ function _updateKeepaliveVisibility() {
|
||||
keepaliveGroup.style.display = caps.includes('standby_required') ? '' : 'none';
|
||||
}
|
||||
|
||||
function _updateSpecificSettingsVisibility() {
|
||||
const deviceSelect = document.getElementById('target-editor-device');
|
||||
const selectedDevice = _targetEditorDevices.find(d => d.id === deviceSelect.value);
|
||||
const isWled = !selectedDevice || selectedDevice.device_type === 'wled';
|
||||
// Hide entire Specific Settings section for non-WLED devices (protocol + keepalive are WLED-only)
|
||||
document.getElementById('target-editor-device-settings').style.display = isWled ? '' : 'none';
|
||||
}
|
||||
|
||||
function _updateBrightnessThresholdVisibility() {
|
||||
// Always visible — threshold considers both brightness source and pixel content
|
||||
document.getElementById('target-editor-brightness-threshold-group').style.display = '';
|
||||
@@ -274,6 +283,7 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
document.getElementById('target-editor-brightness-threshold-value').textContent = thresh;
|
||||
|
||||
document.getElementById('target-editor-adaptive-fps').checked = target.adaptive_fps ?? false;
|
||||
document.getElementById('target-editor-protocol').value = target.protocol || 'ddp';
|
||||
|
||||
_populateCssDropdown(target.color_strip_source_id || '');
|
||||
_populateBrightnessVsDropdown(target.brightness_value_source_id || '');
|
||||
@@ -294,6 +304,7 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
document.getElementById('target-editor-brightness-threshold-value').textContent = cloneThresh;
|
||||
|
||||
document.getElementById('target-editor-adaptive-fps').checked = cloneData.adaptive_fps ?? false;
|
||||
document.getElementById('target-editor-protocol').value = cloneData.protocol || 'ddp';
|
||||
|
||||
_populateCssDropdown(cloneData.color_strip_source_id || '');
|
||||
_populateBrightnessVsDropdown(cloneData.brightness_value_source_id || '');
|
||||
@@ -311,6 +322,7 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
document.getElementById('target-editor-brightness-threshold-value').textContent = '0';
|
||||
|
||||
document.getElementById('target-editor-adaptive-fps').checked = false;
|
||||
document.getElementById('target-editor-protocol').value = 'ddp';
|
||||
|
||||
_populateCssDropdown('');
|
||||
_populateBrightnessVsDropdown('');
|
||||
@@ -320,7 +332,7 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
_targetNameManuallyEdited = !!(targetId || cloneData);
|
||||
document.getElementById('target-editor-name').oninput = () => { _targetNameManuallyEdited = true; };
|
||||
window._targetAutoName = _autoGenerateTargetName;
|
||||
deviceSelect.onchange = () => { _updateDeviceInfo(); _updateKeepaliveVisibility(); _updateFpsRecommendation(); _autoGenerateTargetName(); };
|
||||
deviceSelect.onchange = () => { _updateDeviceInfo(); _updateKeepaliveVisibility(); _updateSpecificSettingsVisibility(); _updateFpsRecommendation(); _autoGenerateTargetName(); };
|
||||
document.getElementById('target-editor-css-source').onchange = () => { _autoGenerateTargetName(); };
|
||||
document.getElementById('target-editor-brightness-vs').onchange = () => { _updateBrightnessThresholdVisibility(); };
|
||||
if (!targetId && !cloneData) _autoGenerateTargetName();
|
||||
@@ -328,6 +340,7 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
|
||||
// Show/hide conditional fields
|
||||
_updateDeviceInfo();
|
||||
_updateKeepaliveVisibility();
|
||||
_updateSpecificSettingsVisibility();
|
||||
_updateFpsRecommendation();
|
||||
_updateBrightnessThresholdVisibility();
|
||||
|
||||
@@ -372,6 +385,7 @@ export async function saveTargetEditor() {
|
||||
const minBrightnessThreshold = parseInt(document.getElementById('target-editor-brightness-threshold').value) || 0;
|
||||
|
||||
const adaptiveFps = document.getElementById('target-editor-adaptive-fps').checked;
|
||||
const protocol = document.getElementById('target-editor-protocol').value;
|
||||
|
||||
const payload = {
|
||||
name,
|
||||
@@ -382,6 +396,7 @@ export async function saveTargetEditor() {
|
||||
fps,
|
||||
keepalive_interval: standbyInterval,
|
||||
adaptive_fps: adaptiveFps,
|
||||
protocol,
|
||||
};
|
||||
|
||||
try {
|
||||
@@ -858,6 +873,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap, valueSo
|
||||
<div class="stream-card-props">
|
||||
<span class="stream-card-prop stream-card-link" title="${t('targets.device')}" onclick="event.stopPropagation(); navigateToCard('targets','led','led-devices','data-device-id','${target.device_id}')">${ICON_LED} ${escapeHtml(deviceName)}</span>
|
||||
<span class="stream-card-prop" title="${t('targets.fps')}">${ICON_FPS} ${target.fps || 30}</span>
|
||||
${device?.device_type === 'wled' || !device ? `<span class="stream-card-prop" title="${t('targets.protocol')}">${target.protocol === 'http' ? '🌐' : '📡'} ${(target.protocol || 'ddp').toUpperCase()}</span>` : `<span class="stream-card-prop" title="${t('targets.protocol')}">🔌 ${t('targets.protocol.serial')}</span>`}
|
||||
<span class="stream-card-prop stream-card-prop-full${cssId ? ' stream-card-link' : ''}" title="${t('targets.color_strip_source')}"${cssId ? ` onclick="event.stopPropagation(); navigateToCard('targets','led','led-css','data-css-id','${cssId}')"` : ''}>🎞️ ${cssSummary}</span>
|
||||
${bvs ? `<span class="stream-card-prop stream-card-prop-full stream-card-link" title="${t('targets.brightness_vs')}" onclick="event.stopPropagation(); navigateToCard('streams','value','value-sources','data-id','${bvsId}')">${getValueSourceIcon(bvs.source_type)} ${escapeHtml(bvs.name)}</span>` : ''}
|
||||
${target.min_brightness_threshold > 0 ? `<span class="stream-card-prop" title="${t('targets.min_brightness_threshold')}">🔅 <${target.min_brightness_threshold} → off</span>` : ''}
|
||||
|
||||
Reference in New Issue
Block a user