Move FPS from color strip source to target; dynamic capture rate

FPS is a consumption property (how fast to send to a device), not a
production property. Two targets sharing the same source may need
different FPS. This moves the fps field from PictureColorStripSource
to WledPictureTarget across the full stack.

The capture stream now auto-adjusts its rate to max(all connected
target FPS values) via ColorStripStreamManager tracking per-consumer
FPS. UI updates: FPS slider in target editor, FPS badge on target
cards, LED count repositioned in CSS editor, consistent speed icons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-21 03:46:08 +03:00
parent 1204676c30
commit 1f6c913343
14 changed files with 126 additions and 57 deletions

View File

@@ -72,6 +72,7 @@ class TargetEditorModal extends Modal {
name: document.getElementById('target-editor-name').value,
device: document.getElementById('target-editor-device').value,
css: document.getElementById('target-editor-css').value,
fps: document.getElementById('target-editor-fps').value,
standby_interval: document.getElementById('target-editor-standby-interval').value,
};
}
@@ -146,6 +147,9 @@ export async function showTargetEditor(targetId = null) {
document.getElementById('target-editor-name').value = target.name;
deviceSelect.value = target.device_id || '';
cssSelect.value = target.color_strip_source_id || '';
const fps = target.fps ?? 30;
document.getElementById('target-editor-fps').value = fps;
document.getElementById('target-editor-fps-value').textContent = fps;
document.getElementById('target-editor-standby-interval').value = target.standby_interval ?? 1.0;
document.getElementById('target-editor-standby-interval-value').textContent = target.standby_interval ?? 1.0;
document.getElementById('target-editor-title').textContent = t('targets.edit');
@@ -153,6 +157,8 @@ export async function showTargetEditor(targetId = null) {
// Creating new target — first option is selected by default
document.getElementById('target-editor-id').value = '';
document.getElementById('target-editor-name').value = '';
document.getElementById('target-editor-fps').value = 30;
document.getElementById('target-editor-fps-value').textContent = '30';
document.getElementById('target-editor-standby-interval').value = 1.0;
document.getElementById('target-editor-standby-interval-value').textContent = '1.0';
document.getElementById('target-editor-title').textContent = t('targets.add');
@@ -203,10 +209,13 @@ export async function saveTargetEditor() {
return;
}
const fps = parseInt(document.getElementById('target-editor-fps').value) || 30;
const payload = {
name,
device_id: deviceId,
color_strip_source_id: cssId,
fps,
standby_interval: standbyInterval,
};
@@ -508,6 +517,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap) {
</div>
<div class="stream-card-props">
<span class="stream-card-prop" title="${t('targets.device')}">💡 ${escapeHtml(deviceName)}</span>
<span class="stream-card-prop" title="${t('targets.fps')}">⚡ ${target.fps || 30} fps</span>
<span class="stream-card-prop stream-card-prop-full" title="${t('targets.color_strip_source')}">🎞️ ${escapeHtml(cssName)}</span>
</div>
<div class="card-content">