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>
This commit is contained in:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user