Add composite layer preview, configurable LED count, and notification fire button to CSS test modal

- Composite sources show per-layer strip canvases with composite result on top - Server sends composite wire format with per-layer RGB data - LED count is configurable via input field, persisted in localStorage - Notification sources show a bell fire button on the strip preview - Composite with notification layers shows per-layer fire buttons - Fixed stale WS frame bug with generation counter and unique consumer IDs - Modal width is now fixed at 700px to prevent layout jumps - Target card composite layers now use same-height canvases Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 20:17:54 +03:00
parent f2162133a8
commit 97db63824e
9 changed files with 359 additions and 33 deletions
--- a/server/src/wled_controller/static/css/cards.css
+++ b/server/src/wled_controller/static/css/cards.css
@@ -1052,15 +1052,10 @@ ul.section-tip li {
 .led-preview-layer-canvas {
    display: block;
    width: 100%;
-    height: 14px;
-    border-radius: 2px;
-    image-rendering: pixelated;
-    background: #111;
-}
-
-.led-preview-layer-composite .led-preview-layer-canvas {
    height: 24px;
    border-radius: 3px;
+    image-rendering: pixelated;
+    background: #111;
 }

 .led-preview-layer-label {
--- a/server/src/wled_controller/static/css/modal.css
+++ b/server/src/wled_controller/static/css/modal.css
@@ -119,6 +119,10 @@
 }

 /* Color strip test preview */
+.css-test-strip-wrap {
+    position: relative;
+}
+
 .css-test-strip-canvas {
    display: block;
    width: 100%;
@@ -128,6 +132,30 @@
    image-rendering: pixelated;
 }

+.css-test-fire-btn {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    line-height: 1;
+}
+
+.css-test-fire-btn:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
 .css-test-rect {
    display: grid;
    grid-template-columns: 14px 1fr 14px;
@@ -178,7 +206,71 @@
    font-size: 0.9em;
 }

-#test-css-source-modal.css-test-wide .modal-content {
+/* Composite layers preview */
+.css-test-layers {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.css-test-layer {
+    position: relative;
+}
+
+.css-test-layer-canvas {
+    display: block;
+    width: 100%;
+    height: 48px;
+    border-radius: 4px;
+    image-rendering: pixelated;
+    background: #111;
+}
+
+.css-test-layer-label {
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.6rem;
+    font-family: var(--font-mono, monospace);
+    color: #fff;
+    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    white-space: nowrap;
+}
+
+.css-test-layers:hover .css-test-layer-label {
+    opacity: 1;
+}
+
+/* LED count control */
+.css-test-led-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0 0;
+    font-size: 0.85em;
+}
+
+.css-test-led-input {
+    width: 70px;
+    padding: 3px 6px;
+    border: 1px solid var(--border-color, #333);
+    border-radius: 4px;
+    background: var(--input-bg, #1a1a2e);
+    color: var(--text-color, #e0e0e0);
+    font-size: 0.85em;
+    text-align: center;
+}
+
+.css-test-led-apply {
+    padding: 3px 10px;
+    font-size: 0.8em;
+}
+
+#test-css-source-modal .modal-content {
    max-width: 700px;
 }

--- a/server/src/wled_controller/static/js/app.js
+++ b/server/src/wled_controller/static/js/app.js
@@ -125,7 +125,7 @@ import {
    onNotificationFilterModeChange,
    notificationAddAppColor, notificationRemoveAppColor,
    testNotification,
-    testColorStrip, closeTestCssSourceModal,
+    testColorStrip, closeTestCssSourceModal, applyCssTestLedCount, fireCssTestNotification, fireCssTestNotificationLayer,
 } from './features/color-strips.js';

 // Layer 5: audio sources
@@ -405,7 +405,7 @@ Object.assign(window, {
    onNotificationFilterModeChange,
    notificationAddAppColor, notificationRemoveAppColor,
    testNotification,
-    testColorStrip, closeTestCssSourceModal,
+    testColorStrip, closeTestCssSourceModal, applyCssTestLedCount, fireCssTestNotification, fireCssTestNotificationLayer,

    // audio sources
    showAudioSourceModal,
--- a/server/src/wled_controller/static/js/features/color-strips.js
+++ b/server/src/wled_controller/static/js/features/color-strips.js
@@ -1259,7 +1259,7 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
    const testNotifyBtn = isNotification
        ? `<button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); testNotification('${source.id}')" title="${t('color_strip.notification.test')}">${ICON_BELL}</button>`
        : '';
-    const testPreviewBtn = !isNotification && !isApiInput
+    const testPreviewBtn = !isApiInput
        ? `<button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); testColorStrip('${source.id}')" title="${t('color_strip.test.title')}">${ICON_EYE}</button>`
        : '';

@@ -1884,69 +1884,195 @@ export async function stopCSSOverlay(cssId) {

 /* ── Test / Preview ───────────────────────────────────────────── */

+const _CSS_TEST_LED_KEY = 'css_test_led_count';
 let _cssTestWs = null;
 let _cssTestRaf = null;
 let _cssTestLatestRgb = null;
 let _cssTestMeta = null;
+let _cssTestSourceId = null;
+let _cssTestIsComposite = false;
+let _cssTestLayerData = null; // { layerCount, ledCount, layers: [Uint8Array], composite: Uint8Array }
+let _cssTestGeneration = 0;   // bumped on each connect to ignore stale WS messages
+let _cssTestNotificationIds = []; // notification source IDs to fire (self or composite layers)
+
+function _getCssTestLedCount() {
+    const stored = parseInt(localStorage.getItem(_CSS_TEST_LED_KEY), 10);
+    return (stored > 0 && stored <= 2000) ? stored : 100;
+}

 export function testColorStrip(sourceId) {
+    // Clean up any previous session fully
+    if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
+    if (_cssTestRaf) { cancelAnimationFrame(_cssTestRaf); _cssTestRaf = null; }
+    _cssTestLatestRgb = null;
+    _cssTestMeta = null;
+    _cssTestIsComposite = false;
+    _cssTestLayerData = null;
+
    const modal = document.getElementById('test-css-source-modal');
    if (!modal) return;
    modal.style.display = 'flex';
    modal.onclick = (e) => { if (e.target === modal) closeTestCssSourceModal(); };
+    _cssTestSourceId = sourceId;

    // Reset views
    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 = '';
+    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');
    document.getElementById('css-test-led-count').textContent = '';
-    _cssTestLatestRgb = null;
-    _cssTestMeta = null;
+
+    // Restore LED count + Enter key handler
+    const ledCount = _getCssTestLedCount();
+    const ledInput = document.getElementById('css-test-led-input');
+    ledInput.value = ledCount;
+    ledInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); applyCssTestLedCount(); } };
+
+    _cssTestConnect(sourceId, ledCount);
+}
+
+function _cssTestConnect(sourceId, ledCount) {
+    // 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;

    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=100`;
+    const wsUrl = `${protocol}//${window.location.host}/api/v1/color-strip-sources/${sourceId}/test/ws?token=${encodeURIComponent(apiKey)}&led_count=${ledCount}`;

    _cssTestWs = new WebSocket(wsUrl);
    _cssTestWs.binaryType = 'arraybuffer';

    _cssTestWs.onmessage = (event) => {
+        // Ignore messages from a stale connection
+        if (gen !== _cssTestGeneration) return;
+
        if (typeof event.data === 'string') {
            // JSON metadata
            _cssTestMeta = JSON.parse(event.data);
            const isPicture = _cssTestMeta.edges && _cssTestMeta.edges.length > 0;
-            document.getElementById('css-test-strip-view').style.display = isPicture ? 'none' : '';
+            _cssTestIsComposite = _cssTestMeta.layers && _cssTestMeta.layers.length > 0;
+
+            // Show correct view
+            document.getElementById('css-test-strip-view').style.display = (isPicture || _cssTestIsComposite) ? 'none' : '';
            document.getElementById('css-test-rect-view').style.display = isPicture ? '' : 'none';
+            document.getElementById('css-test-layers-view').style.display = _cssTestIsComposite ? '' : 'none';
            document.getElementById('css-test-status').style.display = 'none';
-            document.getElementById('test-css-source-modal').classList.toggle('css-test-wide', isPicture);
+
+            // Hide LED count control for picture sources (LED count is fixed by calibration)
+            document.getElementById('css-test-led-control').style.display = isPicture ? 'none' : '';
+
+            // Show fire button for notification sources (direct only; composite has per-layer buttons)
+            const isNotify = _cssTestMeta.source_type === 'notification';
+            const layerInfos = _cssTestMeta.layer_infos || [];
+            _cssTestNotificationIds = isNotify
+                ? [_cssTestSourceId]
+                : layerInfos.filter(li => li.is_notification).map(li => li.id);
+            const fireBtn = document.getElementById('css-test-fire-btn');
+            if (fireBtn) fireBtn.style.display = (isNotify && !_cssTestIsComposite) ? '' : 'none';
+
            document.getElementById('css-test-led-count').textContent = `${_cssTestMeta.led_count} LEDs`;
+
+            // Build composite layer canvases
+            if (_cssTestIsComposite) {
+                _cssTestBuildLayers(_cssTestMeta.layers, _cssTestMeta.source_type, _cssTestMeta.layer_infos);
+            }
        } else {
-            // Binary RGB frame
-            _cssTestLatestRgb = new Uint8Array(event.data);
+            const raw = new Uint8Array(event.data);
+            // Check composite wire format: [0xFE] [layer_count] [led_count_hi] [led_count_lo] [layers...] [composite...]
+            if (raw.length > 3 && raw[0] === 0xFE && _cssTestIsComposite) {
+                const layerCount = raw[1];
+                const ledCount = (raw[2] << 8) | raw[3];
+                const rgbSize = ledCount * 3;
+                let offset = 4;
+                const layers = [];
+                for (let i = 0; i < layerCount; i++) {
+                    layers.push(raw.subarray(offset, offset + rgbSize));
+                    offset += rgbSize;
+                }
+                const composite = raw.subarray(offset, offset + rgbSize);
+                _cssTestLayerData = { layerCount, ledCount, layers, composite };
+                _cssTestLatestRgb = composite;
+            } else {
+                // Standard format: raw RGB
+                _cssTestLatestRgb = raw;
+            }
        }
    };

    _cssTestWs.onerror = () => {
+        if (gen !== _cssTestGeneration) return;
        document.getElementById('css-test-status').textContent = t('color_strip.test.error');
    };

    _cssTestWs.onclose = () => {
-        _cssTestWs = null;
+        if (gen === _cssTestGeneration) _cssTestWs = null;
    };

-    // Start render loop
-    _cssTestRenderLoop();
+    // Start render loop (only once)
+    if (!_cssTestRaf) _cssTestRenderLoop();
+}
+
+const _BELL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg>';
+
+function _cssTestBuildLayers(layerNames, sourceType, layerInfos) {
+    const container = document.getElementById('css-test-layers');
+    if (!container) return;
+    // Composite result first, then individual layers
+    let html = `<div class="css-test-layer css-test-layer-composite">` +
+        `<canvas class="css-test-layer-canvas" data-layer-idx="composite"></canvas>` +
+        `<span class="css-test-layer-label">${sourceType === 'composite' ? t('color_strip.test.composite') : ''}</span>` +
+        `</div>`;
+    for (let i = 0; i < layerNames.length; i++) {
+        const info = layerInfos && layerInfos[i];
+        const isNotify = info && info.is_notification;
+        const fireBtn = isNotify
+            ? `<button class="css-test-fire-btn" onclick="event.stopPropagation(); fireCssTestNotificationLayer('${info.id}')" title="${t('color_strip.notification.test')}">${_BELL_SVG}</button>`
+            : '';
+        html += `<div class="css-test-layer css-test-strip-wrap">` +
+            `<canvas class="css-test-layer-canvas" data-layer-idx="${i}"></canvas>` +
+            `<span class="css-test-layer-label">${escapeHtml(layerNames[i])}</span>` +
+            fireBtn +
+            `</div>`;
+    }
+    container.innerHTML = html;
+}
+
+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));
+
+    // Clear frame data but keep views/layout intact to avoid size jump
+    _cssTestLatestRgb = null;
+    _cssTestMeta = null;
+    _cssTestLayerData = null;
+
+    // Reconnect (generation counter ignores stale frames from old WS)
+    _cssTestConnect(_cssTestSourceId, val);
 }

 function _cssTestRenderLoop() {
    _cssTestRaf = requestAnimationFrame(_cssTestRenderLoop);
-    if (!_cssTestLatestRgb || !_cssTestMeta) return;
+    if (!_cssTestMeta) return;

    const isPicture = _cssTestMeta.edges && _cssTestMeta.edges.length > 0;
-    if (isPicture) {
+
+    if (_cssTestIsComposite && _cssTestLayerData) {
+        _cssTestRenderLayers(_cssTestLayerData);
+    } else if (isPicture && _cssTestLatestRgb) {
        _cssTestRenderRect(_cssTestLatestRgb, _cssTestMeta.edges);
-    } else {
+    } else if (_cssTestLatestRgb) {
        _cssTestRenderStrip(_cssTestLatestRgb);
    }
 }
@@ -1971,6 +2097,41 @@ function _cssTestRenderStrip(rgbBytes) {
    ctx.putImageData(imageData, 0, 0);
 }

+function _cssTestRenderLayers(data) {
+    const container = document.getElementById('css-test-layers');
+    if (!container) return;
+    const canvases = container.querySelectorAll('.css-test-layer-canvas');
+
+    // Composite canvas is first
+    const compositeCanvas = container.querySelector('[data-layer-idx="composite"]');
+    if (compositeCanvas) _cssTestRenderStripCanvas(compositeCanvas, data.composite);
+
+    // Individual layer canvases
+    for (let i = 0; i < data.layers.length; i++) {
+        const canvas = container.querySelector(`[data-layer-idx="${i}"]`);
+        if (canvas) _cssTestRenderStripCanvas(canvas, data.layers[i]);
+    }
+}
+
+function _cssTestRenderStripCanvas(canvas, rgbBytes) {
+    const ledCount = rgbBytes.length / 3;
+    if (ledCount <= 0) return;
+    canvas.width = ledCount;
+    canvas.height = 1;
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.createImageData(ledCount, 1);
+    const data = imageData.data;
+    for (let i = 0; i < ledCount; i++) {
+        const si = i * 3;
+        const di = i * 4;
+        data[di] = rgbBytes[si];
+        data[di + 1] = rgbBytes[si + 1];
+        data[di + 2] = rgbBytes[si + 2];
+        data[di + 3] = 255;
+    }
+    ctx.putImageData(imageData, 0, 0);
+}
+
 function _cssTestRenderRect(rgbBytes, edges) {
    // edges: [{ edge: "top"|..., indices: [outputIdx, ...] }, ...]
    // indices are pre-computed on server: reverse + offset already applied
@@ -2003,13 +2164,27 @@ function _cssTestRenderRect(rgbBytes, edges) {
    }
 }

+export function fireCssTestNotification() {
+    for (const id of _cssTestNotificationIds) {
+        testNotification(id);
+    }
+}
+
+export function fireCssTestNotificationLayer(sourceId) {
+    testNotification(sourceId);
+}
+
 export function closeTestCssSourceModal() {
    if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
    if (_cssTestRaf) { cancelAnimationFrame(_cssTestRaf); _cssTestRaf = null; }
    _cssTestLatestRgb = null;
    _cssTestMeta = null;
+    _cssTestSourceId = null;
+    _cssTestIsComposite = false;
+    _cssTestLayerData = null;
+    _cssTestNotificationIds = [];
    const modal = document.getElementById('test-css-source-modal');
-    if (modal) { modal.style.display = 'none'; modal.classList.remove('css-test-wide'); }
+    if (modal) { modal.style.display = 'none'; }
 }

 /* Gradient editor moved to css-gradient-editor.js */
--- a/server/src/wled_controller/static/locales/en.json
+++ b/server/src/wled_controller/static/locales/en.json
@@ -931,6 +931,9 @@
  "color_strip.test.title": "Test Preview",
  "color_strip.test.connecting": "Connecting...",
  "color_strip.test.error": "Failed to connect to preview stream",
+  "color_strip.test.led_count": "LEDs:",
+  "color_strip.test.apply": "Apply",
+  "color_strip.test.composite": "Composite",
  "color_strip.type.daylight": "Daylight Cycle",
  "color_strip.type.daylight.desc": "Simulates natural daylight over 24 hours",
  "color_strip.type.daylight.hint": "Simulates the sun's color temperature throughout a 24-hour day/night cycle — from warm sunrise to cool daylight to warm sunset and dim night.",
--- a/server/src/wled_controller/static/locales/ru.json
+++ b/server/src/wled_controller/static/locales/ru.json
@@ -931,6 +931,9 @@
  "color_strip.test.title": "Предпросмотр",
  "color_strip.test.connecting": "Подключение...",
  "color_strip.test.error": "Не удалось подключиться к потоку предпросмотра",
+  "color_strip.test.led_count": "Кол-во LED:",
+  "color_strip.test.apply": "Применить",
+  "color_strip.test.composite": "Композит",
  "color_strip.type.daylight": "Дневной цикл",
  "color_strip.type.daylight.desc": "Имитация естественного дневного света за 24 часа",
  "color_strip.type.daylight.hint": "Имитирует цветовую температуру солнца в течение суток — от тёплого рассвета до прохладного дневного света, заката и ночи.",
--- a/server/src/wled_controller/static/locales/zh.json
+++ b/server/src/wled_controller/static/locales/zh.json
@@ -931,6 +931,9 @@
  "color_strip.test.title": "预览测试",
  "color_strip.test.connecting": "连接中...",
  "color_strip.test.error": "无法连接到预览流",
+  "color_strip.test.led_count": "LED数量:",
+  "color_strip.test.apply": "应用",
+  "color_strip.test.composite": "合成",
  "color_strip.type.daylight": "日光循环",
  "color_strip.type.daylight.desc": "模拟24小时自然日光变化",
  "color_strip.type.daylight.hint": "模拟太阳在24小时内的色温变化——从温暖的日出到冷白的日光，再到温暖的日落和昏暗的夜晚。",