Introduce Picture Targets to separate processing from devices
Add PictureTarget entity that bridges PictureSource to output device, separating processing settings from device connection/calibration state. This enables future target types (Art-Net, E1.31) and cleanly decouples "what to stream" from "where to stream." - Add PictureTarget/WledPictureTarget dataclasses and storage - Split ProcessorManager into DeviceState (health) + TargetState (processing) - Add /api/v1/picture-targets endpoints (CRUD, start/stop, settings, metrics) - Simplify device API (remove processing/settings/metrics endpoints) - Auto-migrate existing device settings to picture targets on first startup - Add Targets tab to WebUI with target cards and editor modal - Add en/ru locale keys for targets UI Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -35,8 +35,8 @@
|
||||
<div class="tabs">
|
||||
<div class="tab-bar">
|
||||
<button class="tab-btn active" data-tab="devices" onclick="switchTab('devices')"><span data-i18n="devices.title">💡 Devices</span></button>
|
||||
|
||||
<button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Sources</span></button>
|
||||
<button class="tab-btn" data-tab="targets" onclick="switchTab('targets')"><span data-i18n="targets.title">⚡ Targets</span></button>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel active" id="tab-devices">
|
||||
@@ -45,6 +45,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-targets">
|
||||
<div id="targets-list" class="devices-grid">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-streams">
|
||||
<div id="streams-list">
|
||||
@@ -228,67 +233,80 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stream Settings Modal (picture source + LED projection settings) -->
|
||||
<div id="stream-selector-modal" class="modal">
|
||||
<!-- Target Editor Modal (name, device, source, settings) -->
|
||||
<div id="target-editor-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 data-i18n="device.stream_settings.title">📺 Source Settings</h2>
|
||||
<button class="modal-close-btn" onclick="closeStreamSelectorModal()" title="Close">✕</button>
|
||||
<h2 id="target-editor-title" data-i18n="targets.add">🎯 Add Target</h2>
|
||||
<button class="modal-close-btn" onclick="closeTargetEditorModal()" title="Close">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="stream-selector-form">
|
||||
<input type="hidden" id="stream-selector-device-id">
|
||||
<form id="target-editor-form">
|
||||
<input type="hidden" id="target-editor-id">
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="stream-selector-stream" data-i18n="device.stream_selector.label">Source:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="device.stream_selector.hint">Select a source that defines what this device captures and processes</small>
|
||||
<select id="stream-selector-stream"></select>
|
||||
<div id="stream-selector-info" class="stream-info-panel" style="display: none;"></div>
|
||||
<label for="target-editor-name" data-i18n="targets.name">Target Name:</label>
|
||||
<input type="text" id="target-editor-name" data-i18n-placeholder="targets.name.placeholder" placeholder="My Target" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="stream-selector-border-width" data-i18n="device.stream_settings.border_width">Border Width (px):</label>
|
||||
<label for="target-editor-device" data-i18n="targets.device">WLED Device:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="device.stream_settings.border_width_hint">How many pixels from the screen edge to sample for LED colors (1-100)</small>
|
||||
<input type="number" id="stream-selector-border-width" min="1" max="100" value="10">
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.device.hint">Select the WLED device to stream to</small>
|
||||
<select id="target-editor-device"></select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="stream-selector-interpolation" data-i18n="device.stream_settings.interpolation">Interpolation Mode:</label>
|
||||
<label for="target-editor-source" data-i18n="targets.source">Picture Source:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="device.stream_settings.interpolation_hint">How to calculate LED color from sampled pixels</small>
|
||||
<select id="stream-selector-interpolation">
|
||||
<option value="average" data-i18n="device.stream_settings.interpolation.average">Average</option>
|
||||
<option value="median" data-i18n="device.stream_settings.interpolation.median">Median</option>
|
||||
<option value="dominant" data-i18n="device.stream_settings.interpolation.dominant">Dominant</option>
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.source.hint">Select a source that defines what to capture</small>
|
||||
<select id="target-editor-source"></select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="target-editor-border-width" data-i18n="targets.border_width">Border Width (px):</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.border_width.hint">How many pixels from the screen edge to sample for LED colors (1-100)</small>
|
||||
<input type="number" id="target-editor-border-width" min="1" max="100" value="10">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="target-editor-interpolation" data-i18n="targets.interpolation">Interpolation Mode:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.interpolation.hint">How to calculate LED color from sampled pixels</small>
|
||||
<select id="target-editor-interpolation">
|
||||
<option value="average">Average</option>
|
||||
<option value="median">Median</option>
|
||||
<option value="dominant">Dominant</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="stream-selector-smoothing">
|
||||
<span data-i18n="device.stream_settings.smoothing">Smoothing:</span>
|
||||
<span id="stream-selector-smoothing-value">0.3</span>
|
||||
<label for="target-editor-smoothing">
|
||||
<span data-i18n="targets.smoothing">Smoothing:</span>
|
||||
<span id="target-editor-smoothing-value">0.3</span>
|
||||
</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="device.stream_settings.smoothing_hint">Temporal blending between frames (0=none, 1=full). Reduces flicker.</small>
|
||||
<input type="range" id="stream-selector-smoothing" min="0.0" max="1.0" step="0.05" value="0.3" oninput="document.getElementById('stream-selector-smoothing-value').textContent = this.value">
|
||||
<small class="input-hint" style="display:none" data-i18n="targets.smoothing.hint">Temporal blending between frames (0=none, 1=full). Reduces flicker.</small>
|
||||
<input type="range" id="target-editor-smoothing" min="0.0" max="1.0" step="0.05" value="0.3" oninput="document.getElementById('target-editor-smoothing-value').textContent = this.value">
|
||||
</div>
|
||||
|
||||
<div id="stream-selector-error" class="error-message" style="display: none;"></div>
|
||||
<div id="target-editor-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-icon btn-secondary" onclick="closeStreamSelectorModal()" title="Cancel">✕</button>
|
||||
<button class="btn btn-icon btn-primary" onclick="saveStreamSelector()" title="Save">✓</button>
|
||||
<button class="btn btn-icon btn-secondary" onclick="closeTargetEditorModal()" title="Cancel">✕</button>
|
||||
<button class="btn btn-icon btn-primary" onclick="saveTargetEditor()" title="Save">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -298,5 +298,45 @@
|
||||
"streams.image_source.hint": "Enter a URL (http/https) or local file path to an image",
|
||||
"streams.validate_image.validating": "Validating...",
|
||||
"streams.validate_image.valid": "Image accessible",
|
||||
"streams.validate_image.invalid": "Image not accessible"
|
||||
"streams.validate_image.invalid": "Image not accessible",
|
||||
"targets.title": "⚡ Targets",
|
||||
"targets.description": "Targets bridge picture sources to output devices. Each target references a device and a source, with its own processing settings.",
|
||||
"targets.add": "Add Target",
|
||||
"targets.edit": "Edit Target",
|
||||
"targets.loading": "Loading targets...",
|
||||
"targets.none": "No targets configured",
|
||||
"targets.failed": "Failed to load targets",
|
||||
"targets.name": "Target Name:",
|
||||
"targets.name.placeholder": "My Target",
|
||||
"targets.device": "Device:",
|
||||
"targets.device.hint": "Which WLED device to send LED data to",
|
||||
"targets.device.none": "-- Select a device --",
|
||||
"targets.source": "Source:",
|
||||
"targets.source.hint": "Which picture source to capture and process",
|
||||
"targets.source.none": "-- No source assigned --",
|
||||
"targets.border_width": "Border Width (px):",
|
||||
"targets.border_width.hint": "How many pixels from the screen edge to sample for LED colors (1-100)",
|
||||
"targets.interpolation": "Interpolation Mode:",
|
||||
"targets.interpolation.hint": "How to calculate LED color from sampled pixels",
|
||||
"targets.interpolation.average": "Average",
|
||||
"targets.interpolation.median": "Median",
|
||||
"targets.interpolation.dominant": "Dominant",
|
||||
"targets.smoothing": "Smoothing:",
|
||||
"targets.smoothing.hint": "Temporal blending between frames (0=none, 1=full). Reduces flicker.",
|
||||
"targets.created": "Target created successfully",
|
||||
"targets.updated": "Target updated successfully",
|
||||
"targets.deleted": "Target deleted successfully",
|
||||
"targets.delete.confirm": "Are you sure you want to delete this target?",
|
||||
"targets.error.load": "Failed to load targets",
|
||||
"targets.error.required": "Please fill in all required fields",
|
||||
"targets.error.delete": "Failed to delete target",
|
||||
"targets.button.start": "Start",
|
||||
"targets.button.stop": "Stop",
|
||||
"targets.status.processing": "Processing",
|
||||
"targets.status.idle": "Idle",
|
||||
"targets.status.error": "Error",
|
||||
"targets.metrics.actual_fps": "Actual FPS",
|
||||
"targets.metrics.target_fps": "Target FPS",
|
||||
"targets.metrics.frames": "Frames",
|
||||
"targets.metrics.errors": "Errors"
|
||||
}
|
||||
|
||||
@@ -298,5 +298,45 @@
|
||||
"streams.image_source.hint": "Введите URL (http/https) или локальный путь к изображению",
|
||||
"streams.validate_image.validating": "Проверка...",
|
||||
"streams.validate_image.valid": "Изображение доступно",
|
||||
"streams.validate_image.invalid": "Изображение недоступно"
|
||||
"streams.validate_image.invalid": "Изображение недоступно",
|
||||
"targets.title": "⚡ Цели",
|
||||
"targets.description": "Цели связывают источники изображений с устройствами вывода. Каждая цель ссылается на устройство и источник, с собственными настройками обработки.",
|
||||
"targets.add": "Добавить Цель",
|
||||
"targets.edit": "Редактировать Цель",
|
||||
"targets.loading": "Загрузка целей...",
|
||||
"targets.none": "Цели не настроены",
|
||||
"targets.failed": "Не удалось загрузить цели",
|
||||
"targets.name": "Имя Цели:",
|
||||
"targets.name.placeholder": "Моя Цель",
|
||||
"targets.device": "Устройство:",
|
||||
"targets.device.hint": "На какое WLED устройство отправлять данные LED",
|
||||
"targets.device.none": "-- Выберите устройство --",
|
||||
"targets.source": "Источник:",
|
||||
"targets.source.hint": "Какой источник изображения захватывать и обрабатывать",
|
||||
"targets.source.none": "-- Источник не назначен --",
|
||||
"targets.border_width": "Ширина границы (px):",
|
||||
"targets.border_width.hint": "Сколько пикселей от края экрана выбирать для цвета LED (1-100)",
|
||||
"targets.interpolation": "Режим интерполяции:",
|
||||
"targets.interpolation.hint": "Как вычислять цвет LED из выбранных пикселей",
|
||||
"targets.interpolation.average": "Среднее",
|
||||
"targets.interpolation.median": "Медиана",
|
||||
"targets.interpolation.dominant": "Доминантный",
|
||||
"targets.smoothing": "Сглаживание:",
|
||||
"targets.smoothing.hint": "Временное смешивание между кадрами (0=нет, 1=полное). Уменьшает мерцание.",
|
||||
"targets.created": "Цель успешно создана",
|
||||
"targets.updated": "Цель успешно обновлена",
|
||||
"targets.deleted": "Цель успешно удалена",
|
||||
"targets.delete.confirm": "Вы уверены, что хотите удалить эту цель?",
|
||||
"targets.error.load": "Не удалось загрузить цели",
|
||||
"targets.error.required": "Пожалуйста, заполните все обязательные поля",
|
||||
"targets.error.delete": "Не удалось удалить цель",
|
||||
"targets.button.start": "Запустить",
|
||||
"targets.button.stop": "Остановить",
|
||||
"targets.status.processing": "Обработка",
|
||||
"targets.status.idle": "Ожидание",
|
||||
"targets.status.error": "Ошибка",
|
||||
"targets.metrics.actual_fps": "Факт. FPS",
|
||||
"targets.metrics.target_fps": "Целев. FPS",
|
||||
"targets.metrics.frames": "Кадры",
|
||||
"targets.metrics.errors": "Ошибки"
|
||||
}
|
||||
|
||||
@@ -387,9 +387,11 @@ section {
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -2534,9 +2536,7 @@ input:-webkit-autofill:focus {
|
||||
}
|
||||
|
||||
.stream-card-prop {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
background: var(--border-color);
|
||||
@@ -2546,6 +2546,7 @@ input:-webkit-autofill:focus {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 180px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.stream-card-prop-full {
|
||||
|
||||
Reference in New Issue
Block a user