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