alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add configurable FPS to test preview and fix composite stream release race

Browse Source 
- Add FPS control (1-60, default 20) to test preview modal next to LED count
- Server accepts fps query param, controls frame send interval
- Single Apply icon button (✓) applies both LED count and FPS
- FPS control stays visible for picture sources (LED count hidden)
- Fix composite sub-stream consumer ID collision: use unique instance ID
  to prevent old WebSocket release from killing new connection's streams

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-13 02:04:09 +03:00
parent e912019873
commit 561229a7fe
9 changed files with 78 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
server/src/wled_controller/api/routes/color_strip_sources.py
View File

@@ -682,6 +682,7 @@ async def test_color_strip_ws(
source_id: str,
token: str = Query(""),
led_count: int = Query(100),
fps: int = Query(20),
):
"""WebSocket for real-time CSS source preview. Auth via ``?token=<api_key>``.
@@ -723,8 +724,12 @@ async def test_color_strip_ws(
if hasattr(stream, "configure"):
stream.configure(max(1, led_count))
# Clamp FPS to sane range
fps = max(1, min(60, fps))
_frame_interval = 1.0 / fps
await websocket.accept()
logger.info(f"CSS test WebSocket connected for {source_id}")
logger.info(f"CSS test WebSocket connected for {source_id} (fps={fps})")
try:
from wled_controller.core.processing.composite_stream import CompositeColorStripStream
@@ -846,7 +851,7 @@ async def test_color_strip_ws(
except Exception as e:
logger.warning(f"JPEG frame preview error: {e}")
await asyncio.sleep(0.05)
await asyncio.sleep(_frame_interval)
except WebSocketDisconnect:
pass
except Exception as e:

4
server/src/wled_controller/core/processing/composite_stream.py
View File

@@ -30,7 +30,9 @@ class CompositeColorStripStream(ColorStripStream):
"""
def __init__(self, source, css_manager, value_stream_manager=None):
import uuid as _uuid
self._source_id: str = source.id
self._instance_id: str = _uuid.uuid4().hex[:8] # unique per instance to avoid release races
self._layers: List[dict] = list(source.layers)
self._led_count: int = source.led_count
self._auto_size: bool = source.led_count == 0
@@ -167,7 +169,7 @@ class CompositeColorStripStream(ColorStripStream):
src_id = layer.get("source_id", "")
if not src_id:
continue
consumer_id = f"{self._source_id}__layer_{i}"
consumer_id = f"{self._source_id}__{self._instance_id}__layer_{i}"
try:
stream = self._css_manager.acquire(src_id, consumer_id)
if hasattr(stream, "configure") and self._led_count > 0:

19
server/src/wled_controller/static/css/modal.css
View File

@@ -317,6 +317,7 @@
.css-test-led-input {
width: 70px;
flex: 0 0 70px;
padding: 3px 6px;
border: 1px solid var(--border-color, #333);
border-radius: 4px;
@@ -327,8 +328,22 @@
}
.css-test-led-apply {
padding: 3px 10px;
font-size: 0.8em;
padding: 2px 6px;
font-size: 0.85em;
line-height: 1;
}
#css-test-led-group {
display: inline-flex;
align-items: center;
gap: 8px;
}
.css-test-separator {
width: 1px;
height: 18px;
background: var(--border-color, #333);
margin: 0 4px;
}
#test-css-source-modal .modal-content {

4
server/src/wled_controller/static/js/app.js
View File

@@ -125,7 +125,7 @@ import {
onNotificationFilterModeChange,
notificationAddAppColor, notificationRemoveAppColor,
testNotification,
testColorStrip, closeTestCssSourceModal, applyCssTestLedCount, fireCssTestNotification, fireCssTestNotificationLayer,
testColorStrip, closeTestCssSourceModal, applyCssTestSettings, fireCssTestNotification, fireCssTestNotificationLayer,
} from './features/color-strips.js';
// Layer 5: audio sources
@@ -405,7 +405,7 @@ Object.assign(window, {
onNotificationFilterModeChange,
notificationAddAppColor, notificationRemoveAppColor,
testNotification,
testColorStrip, closeTestCssSourceModal, applyCssTestLedCount, fireCssTestNotification, fireCssTestNotificationLayer,
testColorStrip, closeTestCssSourceModal, applyCssTestSettings, fireCssTestNotification, fireCssTestNotificationLayer,
// audio sources
showAudioSourceModal,

52
server/src/wled_controller/static/js/features/color-strips.js
View File

@@ -1886,6 +1886,7 @@ export async function stopCSSOverlay(cssId) {
/* ── Test / Preview ───────────────────────────────────────────── */
const _CSS_TEST_LED_KEY = 'css_test_led_count';
const _CSS_TEST_FPS_KEY = 'css_test_fps';
let _cssTestWs = null;
let _cssTestRaf = null;
let _cssTestLatestRgb = null;
@@ -1901,6 +1902,11 @@ function _getCssTestLedCount() {
return (stored > 0 && stored <= 2000) ? stored : 100;
}
function _getCssTestFps() {
const stored = parseInt(localStorage.getItem(_CSS_TEST_FPS_KEY), 10);
return (stored >= 1 && stored <= 60) ? stored : 20;
}
export function testColorStrip(sourceId) {
// Clean up any previous session fully
if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
@@ -1920,31 +1926,37 @@ export function testColorStrip(sourceId) {
document.getElementById('css-test-strip-view').style.display = 'none';
document.getElementById('css-test-rect-view').style.display = 'none';
document.getElementById('css-test-layers-view').style.display = 'none';
document.getElementById('css-test-led-control').style.display = '';
document.getElementById('css-test-led-group').style.display = '';
const layersContainer = document.getElementById('css-test-layers');
if (layersContainer) layersContainer.innerHTML = '';
document.getElementById('css-test-status').style.display = '';
document.getElementById('css-test-status').textContent = t('color_strip.test.connecting');
// Restore LED count + Enter key handler
// Restore LED count + FPS + Enter key handlers
const ledCount = _getCssTestLedCount();
const ledInput = document.getElementById('css-test-led-input');
ledInput.value = ledCount;
ledInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); applyCssTestLedCount(); } };
ledInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); applyCssTestSettings(); } };
_cssTestConnect(sourceId, ledCount);
const fpsVal = _getCssTestFps();
const fpsInput = document.getElementById('css-test-fps-input');
fpsInput.value = fpsVal;
fpsInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); applyCssTestSettings(); } };
_cssTestConnect(sourceId, ledCount, fpsVal);
}
function _cssTestConnect(sourceId, ledCount) {
function _cssTestConnect(sourceId, ledCount, fps) {
// Close existing connection if any
if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
// Bump generation so any late messages from old WS are ignored
const gen = ++_cssTestGeneration;
if (!fps) fps = _getCssTestFps();
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const apiKey = localStorage.getItem('wled_api_key') || '';
const wsUrl = `${protocol}//${window.location.host}/api/v1/color-strip-sources/${sourceId}/test/ws?token=${encodeURIComponent(apiKey)}&led_count=${ledCount}`;
const wsUrl = `${protocol}//${window.location.host}/api/v1/color-strip-sources/${sourceId}/test/ws?token=${encodeURIComponent(apiKey)}&led_count=${ledCount}&fps=${fps}`;
_cssTestWs = new WebSocket(wsUrl);
_cssTestWs.binaryType = 'arraybuffer';
@@ -1978,7 +1990,7 @@ function _cssTestConnect(sourceId, ledCount) {
if (modalContent) modalContent.style.maxWidth = isPicture ? '900px' : '';
// Hide LED count control for picture sources (LED count is fixed by calibration)
document.getElementById('css-test-led-control').style.display = isPicture ? 'none' : '';
document.getElementById('css-test-led-group').style.display = isPicture ? 'none' : '';
// Show fire button for notification sources (direct only; composite has per-layer buttons)
const isNotify = _cssTestMeta.source_type === 'notification';
@@ -2115,14 +2127,22 @@ function _cssTestUpdateBrightness(values) {
}
}
export function applyCssTestLedCount() {
const input = document.getElementById('css-test-led-input');
if (!input || !_cssTestSourceId) return;
let val = parseInt(input.value, 10);
if (isNaN(val) || val < 1) val = 1;
if (val > 2000) val = 2000;
input.value = val;
localStorage.setItem(_CSS_TEST_LED_KEY, String(val));
export function applyCssTestSettings() {
if (!_cssTestSourceId) return;
const ledInput = document.getElementById('css-test-led-input');
let leds = parseInt(ledInput?.value, 10);
if (isNaN(leds) || leds < 1) leds = 1;
if (leds > 2000) leds = 2000;
if (ledInput) ledInput.value = leds;
localStorage.setItem(_CSS_TEST_LED_KEY, String(leds));
const fpsInput = document.getElementById('css-test-fps-input');
let fps = parseInt(fpsInput?.value, 10);
if (isNaN(fps) || fps < 1) fps = 1;
if (fps > 60) fps = 60;
if (fpsInput) fpsInput.value = fps;
localStorage.setItem(_CSS_TEST_FPS_KEY, String(fps));
// Clear frame data but keep views/layout intact to avoid size jump
_cssTestLatestRgb = null;
@@ -2130,7 +2150,7 @@ export function applyCssTestLedCount() {
_cssTestLayerData = null;
// Reconnect (generation counter ignores stale frames from old WS)
_cssTestConnect(_cssTestSourceId, val);
_cssTestConnect(_cssTestSourceId, leds, fps);
}
function _cssTestRenderLoop() {

1
server/src/wled_controller/static/locales/en.json
View File

@@ -932,6 +932,7 @@
"color_strip.test.connecting": "Connecting...",
"color_strip.test.error": "Failed to connect to preview stream",
"color_strip.test.led_count": "LEDs:",
"color_strip.test.fps": "FPS:",
"color_strip.test.apply": "Apply",
"color_strip.test.composite": "Composite",
"color_strip.type.daylight": "Daylight Cycle",

1
server/src/wled_controller/static/locales/ru.json
View File

@@ -932,6 +932,7 @@
"color_strip.test.connecting": "Подключение...",
"color_strip.test.error": "Не удалось подключиться к потоку предпросмотра",
"color_strip.test.led_count": "Кол-во LED:",
"color_strip.test.fps": "FPS:",
"color_strip.test.apply": "Применить",
"color_strip.test.composite": "Композит",
"color_strip.type.daylight": "Дневной цикл",

1
server/src/wled_controller/static/locales/zh.json
View File

@@ -932,6 +932,7 @@
"color_strip.test.connecting": "连接中...",
"color_strip.test.error": "无法连接到预览流",
"color_strip.test.led_count": "LED数量:",
"color_strip.test.fps": "FPS:",
"color_strip.test.apply": "应用",
"color_strip.test.composite": "合成",
"color_strip.type.daylight": "日光循环",

11
server/src/wled_controller/templates/modals/test-css-source.html
View File

@@ -42,11 +42,16 @@
<div id="css-test-layers" class="css-test-layers"></div>
</div>
<!-- LED count control -->
<div class="css-test-led-control" id="css-test-led-control">
<!-- LED count & FPS controls -->
<div 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">
<button class="btn btn-sm btn-secondary css-test-led-apply" onclick="applyCssTestLedCount()" data-i18n="color_strip.test.apply">Apply</button>
<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>
<div id="css-test-status" class="css-test-status" data-i18n="color_strip.test.connecting">Connecting...</div>