Add test preview for color strip sources with LED strip and rectangle views

New WebSocket endpoint streams real-time RGB frames from any CSS source.
Generic sources show a horizontal LED strip canvas. Picture sources show
a rectangle with per-edge canvases matching the calibration layout.

Server computes exact output indices per edge (offset + reverse + CW/CCW)
so the frontend renders edges in correct visual orientation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/css/modal.css

@@ -118,6 +118,61 @@
     font-size: 0.9em;
 }
 
+/* Color strip test preview */
+.css-test-strip-canvas {
+    display: block;
+    width: 100%;
+    height: 48px;
+    background: #111;
+    border-radius: 6px;
+    image-rendering: pixelated;
+}
+
+.css-test-rect {
+    display: grid;
+    grid-template-columns: 14px 1fr 14px;
+    grid-template-rows: 14px auto 14px;
+    width: 100%;
+}
+
+.css-test-rect-corner {
+    background: transparent;
+}
+
+.css-test-rect-screen {
+    background: #111;
+    border-radius: 2px;
+    aspect-ratio: 16 / 9;
+}
+
+.css-test-edge-h,
+.css-test-edge-v {
+    image-rendering: pixelated;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.css-test-info {
+    display: flex;
+    gap: 16px;
+    padding: 8px 0 0;
+    font-family: monospace;
+    font-size: 0.85em;
+    color: var(--text-muted, #888);
+}
+
+.css-test-status {
+    text-align: center;
+    padding: 8px 0;
+    color: var(--text-muted, #888);
+    font-size: 0.9em;
+}
+
+#test-css-source-modal.css-test-wide .modal-content {
+    max-width: 700px;
+}
+
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }

server/src/wled_controller/static/js/app.js

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

server/src/wled_controller/static/js/features/color-strips.js

@@ -12,7 +12,7 @@ import {
     ICON_CLONE, ICON_EDIT, ICON_CALIBRATION,
     ICON_LED, ICON_PALETTE, ICON_FPS, ICON_MAP_PIN, ICON_MUSIC,
     ICON_AUDIO_LOOPBACK, ICON_TIMER, ICON_LINK_SOURCE, ICON_FILM,
-    ICON_LINK, ICON_SPARKLES, ICON_ACTIVITY, ICON_CLOCK, ICON_BELL,
+    ICON_LINK, ICON_SPARKLES, ICON_ACTIVITY, ICON_CLOCK, ICON_BELL, ICON_EYE,
 } from '../core/icons.js';
 import * as P from '../core/icon-paths.js';
 import { wrapCard } from '../core/card-colors.js';
@@ -1259,6 +1259,9 @@ 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
+        ? `<button class="btn btn-icon btn-secondary" onclick="event.stopPropagation(); testColorStrip('${source.id}')" title="${t('color_strip.test.title')}">${ICON_EYE}</button>`
+        : '';
 
     return wrapCard({
         dataAttr: 'data-css-id',
@@ -1278,7 +1281,7 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
         actions: `
                 <button class="btn btn-icon btn-secondary" onclick="cloneColorStrip('${source.id}')" title="${t('common.clone')}">${ICON_CLONE}</button>
                 <button class="btn btn-icon btn-secondary" onclick="showCSSEditor('${source.id}')" title="${t('common.edit')}">${ICON_EDIT}</button>
-                ${calibrationBtn}${testNotifyBtn}`,
+                ${calibrationBtn}${testNotifyBtn}${testPreviewBtn}`,
     });
 }
 
@@ -1879,4 +1882,134 @@ export async function stopCSSOverlay(cssId) {
     }
 }
 
+/* ── Test / Preview ───────────────────────────────────────────── */
+
+let _cssTestWs = null;
+let _cssTestRaf = null;
+let _cssTestLatestRgb = null;
+let _cssTestMeta = null;
+
+export function testColorStrip(sourceId) {
+    const modal = document.getElementById('test-css-source-modal');
+    if (!modal) return;
+    modal.style.display = 'flex';
+    modal.onclick = (e) => { if (e.target === modal) closeTestCssSourceModal(); };
+
+    // Reset views
+    document.getElementById('css-test-strip-view').style.display = 'none';
+    document.getElementById('css-test-rect-view').style.display = 'none';
+    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;
+
+    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`;
+
+    _cssTestWs = new WebSocket(wsUrl);
+    _cssTestWs.binaryType = 'arraybuffer';
+
+    _cssTestWs.onmessage = (event) => {
+        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' : '';
+            document.getElementById('css-test-rect-view').style.display = isPicture ? '' : 'none';
+            document.getElementById('css-test-status').style.display = 'none';
+            document.getElementById('test-css-source-modal').classList.toggle('css-test-wide', isPicture);
+            document.getElementById('css-test-led-count').textContent = `${_cssTestMeta.led_count} LEDs`;
+        } else {
+            // Binary RGB frame
+            _cssTestLatestRgb = new Uint8Array(event.data);
+        }
+    };
+
+    _cssTestWs.onerror = () => {
+        document.getElementById('css-test-status').textContent = t('color_strip.test.error');
+    };
+
+    _cssTestWs.onclose = () => {
+        _cssTestWs = null;
+    };
+
+    // Start render loop
+    _cssTestRenderLoop();
+}
+
+function _cssTestRenderLoop() {
+    _cssTestRaf = requestAnimationFrame(_cssTestRenderLoop);
+    if (!_cssTestLatestRgb || !_cssTestMeta) return;
+
+    const isPicture = _cssTestMeta.edges && _cssTestMeta.edges.length > 0;
+    if (isPicture) {
+        _cssTestRenderRect(_cssTestLatestRgb, _cssTestMeta.edges);
+    } else {
+        _cssTestRenderStrip(_cssTestLatestRgb);
+    }
+}
+
+function _cssTestRenderStrip(rgbBytes) {
+    const canvas = document.getElementById('css-test-strip-canvas');
+    if (!canvas) return;
+    const ledCount = rgbBytes.length / 3;
+    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
+    const edgeMap = { top: [], right: [], bottom: [], left: [] };
+    for (const e of edges) {
+        if (edgeMap[e.edge]) edgeMap[e.edge].push(...e.indices);
+    }
+
+    for (const [edge, indices] of Object.entries(edgeMap)) {
+        const canvas = document.getElementById(`css-test-edge-${edge}`);
+        if (!canvas) continue;
+        const count = indices.length;
+        if (count === 0) { canvas.width = 0; continue; }
+
+        const isH = edge === 'top' || edge === 'bottom';
+        canvas.width = isH ? count : 1;
+        canvas.height = isH ? 1 : count;
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.createImageData(canvas.width, canvas.height);
+        const px = imageData.data;
+        for (let i = 0; i < count; i++) {
+            const si = indices[i] * 3;
+            const di = i * 4;
+            px[di] = rgbBytes[si] || 0;
+            px[di + 1] = rgbBytes[si + 1] || 0;
+            px[di + 2] = rgbBytes[si + 2] || 0;
+            px[di + 3] = 255;
+        }
+        ctx.putImageData(imageData, 0, 0);
+    }
+}
+
+export function closeTestCssSourceModal() {
+    if (_cssTestWs) { _cssTestWs.close(); _cssTestWs = null; }
+    if (_cssTestRaf) { cancelAnimationFrame(_cssTestRaf); _cssTestRaf = null; }
+    _cssTestLatestRgb = null;
+    _cssTestMeta = null;
+    const modal = document.getElementById('test-css-source-modal');
+    if (modal) { modal.style.display = 'none'; modal.classList.remove('css-test-wide'); }
+}
+
 /* Gradient editor moved to css-gradient-editor.js */

server/src/wled_controller/static/locales/en.json

@@ -928,6 +928,9 @@
   "color_strip.notification.test.ok": "Notification sent",
   "color_strip.notification.test.no_streams": "No running streams for this source",
   "color_strip.notification.test.error": "Failed to send notification",
+  "color_strip.test.title": "Test Preview",
+  "color_strip.test.connecting": "Connecting...",
+  "color_strip.test.error": "Failed to connect to preview stream",
   "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.",

server/src/wled_controller/static/locales/ru.json

@@ -928,6 +928,9 @@
   "color_strip.notification.test.ok": "Уведомление отправлено",
   "color_strip.notification.test.no_streams": "Нет запущенных потоков для этого источника",
   "color_strip.notification.test.error": "Не удалось отправить уведомление",
+  "color_strip.test.title": "Предпросмотр",
+  "color_strip.test.connecting": "Подключение...",
+  "color_strip.test.error": "Не удалось подключиться к потоку предпросмотра",
   "color_strip.type.daylight": "Дневной цикл",
   "color_strip.type.daylight.desc": "Имитация естественного дневного света за 24 часа",
   "color_strip.type.daylight.hint": "Имитирует цветовую температуру солнца в течение суток — от тёплого рассвета до прохладного дневного света, заката и ночи.",

server/src/wled_controller/static/locales/zh.json

@@ -928,6 +928,9 @@
   "color_strip.notification.test.ok": "通知已发送",
   "color_strip.notification.test.no_streams": "此源没有运行中的流",
   "color_strip.notification.test.error": "发送通知失败",
+  "color_strip.test.title": "预览测试",
+  "color_strip.test.connecting": "连接中...",
+  "color_strip.test.error": "无法连接到预览流",
   "color_strip.type.daylight": "日光循环",
   "color_strip.type.daylight.desc": "模拟24小时自然日光变化",
   "color_strip.type.daylight.hint": "模拟太阳在24小时内的色温变化——从温暖的日出到冷白的日光，再到温暖的日落和昏暗的夜晚。",