Add Daylight Cycle and Candlelight CSS source types

Full-stack implementation of two new color strip source types:
- Daylight: simulates day/night color cycle with real-time or speed-based mode, latitude support
- Candlelight: multi-candle fire simulation with Gaussian falloff, layered-sine flicker, warm color shift

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

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

@@ -41,6 +41,7 @@ import {
     toggleDashboardSection, changeDashboardPollInterval,
 } from './features/dashboard.js';
 import { startEventsWS, stopEventsWS } from './core/events-ws.js';
+import { startEntityEventListeners } from './core/entity-events.js';
 import {
     startPerfPolling, stopPerfPolling,
 } from './features/perf-charts.js';
@@ -108,7 +109,7 @@ import {
 // Layer 5: color-strip sources
 import {
     showCSSEditor, closeCSSEditorModal, forceCSSEditorClose, saveCSSEditor, deleteColorStrip,
-    onCSSTypeChange, onEffectTypeChange, onAnimationTypeChange, onCSSClockChange,
+    onCSSTypeChange, onEffectTypeChange, onAnimationTypeChange, onCSSClockChange, onDaylightRealTimeChange,
     colorCycleAddColor, colorCycleRemoveColor,
     compositeAddLayer, compositeRemoveLayer,
     mappedAddZone, mappedRemoveZone,
@@ -376,6 +377,7 @@ Object.assign(window, {
     onEffectTypeChange,
     onCSSClockChange,
     onAnimationTypeChange,
+    onDaylightRealTimeChange,
     colorCycleAddColor,
     colorCycleRemoveColor,
     compositeAddLayer,
@@ -555,6 +557,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // Start global events WebSocket and auto-refresh
     startEventsWS();
+    startEntityEventListeners();
     startAutoRefresh();
 
     // Show getting-started tutorial on first visit

server/src/wled_controller/static/js/core/icon-paths.js

@@ -72,4 +72,5 @@ export const download     = '<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2
 export const undo2        = '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11"/>';
 export const power        = '<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" x2="12" y1="2" y2="12"/>';
 export const wifi         = '<path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/>';
+export const flame        = '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>';
 export const usb          = '<circle cx="10" cy="7" r="1"/><circle cx="4" cy="20" r="1"/><path d="M4.7 19.3 19 5"/><path d="m21 3-3 1 2 2Z"/><path d="M10 8v3a1 1 0 0 1-1 1H4"/><path d="M14 12v2a1 1 0 0 0 1 1h3"/><circle cx="20" cy="15" r="1"/>';

server/src/wled_controller/static/js/core/icons.js

@@ -24,6 +24,8 @@ const _colorStripTypeIcons    = {
     audio: _svg(P.music), audio_visualization: _svg(P.music),
     api_input: _svg(P.send),
     notification: _svg(P.bellRing),
+    daylight: _svg(P.sun),
+    candlelight: _svg(P.flame),
 };
 const _valueSourceTypeIcons   = {
     static: _svg(P.layoutDashboard), animated: _svg(P.refreshCw), audio: _svg(P.music),

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

@@ -80,6 +80,13 @@ class CSSEditorModal extends Modal {
             notification_filter_list: document.getElementById('css-editor-notification-filter-list').value,
             notification_app_colors: JSON.stringify(_notificationAppColors),
             clock_id: document.getElementById('css-editor-clock').value,
+            daylight_speed: document.getElementById('css-editor-daylight-speed').value,
+            daylight_use_real_time: document.getElementById('css-editor-daylight-real-time').checked,
+            daylight_latitude: document.getElementById('css-editor-daylight-latitude').value,
+            candlelight_color: document.getElementById('css-editor-candlelight-color').value,
+            candlelight_intensity: document.getElementById('css-editor-candlelight-intensity').value,
+            candlelight_num_candles: document.getElementById('css-editor-candlelight-num-candles').value,
+            candlelight_speed: document.getElementById('css-editor-candlelight-speed').value,
             tags: JSON.stringify(_cssTagsInput ? _cssTagsInput.getValue() : []),
         };
     }
@@ -99,7 +106,7 @@ let _cssClockEntitySelect = null;
 const CSS_TYPE_KEYS = [
     'picture', 'picture_advanced', 'static', 'gradient', 'color_cycle',
     'effect', 'composite', 'mapped', 'audio',
-    'api_input', 'notification',
+    'api_input', 'notification', 'daylight', 'candlelight',
 ];
 
 function _buildCSSTypeItems() {
@@ -148,6 +155,8 @@ export function onCSSTypeChange() {
     document.getElementById('css-editor-audio-section').style.display = type === 'audio' ? '' : 'none';
     document.getElementById('css-editor-api-input-section').style.display = type === 'api_input' ? '' : 'none';
     document.getElementById('css-editor-notification-section').style.display = type === 'notification' ? '' : 'none';
+    document.getElementById('css-editor-daylight-section').style.display = type === 'daylight' ? '' : 'none';
+    document.getElementById('css-editor-candlelight-section').style.display = type === 'candlelight' ? '' : 'none';
 
     if (isPictureType) _ensureInterpolationIconSelect();
     if (type === 'effect') {
@@ -197,8 +206,8 @@ export function onCSSTypeChange() {
     document.getElementById('css-editor-led-count-group').style.display =
         hasLedCount.includes(type) ? '' : 'none';
 
-    // Sync clock — shown for animated types (static, gradient, color_cycle, effect)
-    const clockTypes = ['static', 'gradient', 'color_cycle', 'effect'];
+    // Sync clock — shown for animated types
+    const clockTypes = ['static', 'gradient', 'color_cycle', 'effect', 'daylight', 'candlelight'];
     document.getElementById('css-editor-clock-group').style.display = clockTypes.includes(type) ? '' : 'none';
     if (clockTypes.includes(type)) _populateClockDropdown();
 
@@ -274,6 +283,17 @@ function _syncAnimationSpeedState() {
     }
 }
 
+/* ── Daylight real-time toggle helper ─────────────────────────── */
+
+export function onDaylightRealTimeChange() {
+    _syncDaylightSpeedVisibility();
+}
+
+function _syncDaylightSpeedVisibility() {
+    const isRealTime = document.getElementById('css-editor-daylight-real-time').checked;
+    document.getElementById('css-editor-daylight-speed-group').style.display = isRealTime ? 'none' : '';
+}
+
 /* ── Gradient strip preview helper ────────────────────────────── */
 
 /**
@@ -1039,6 +1059,23 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
             </span>
             ${appCount > 0 ? `<span class="stream-card-prop">${ICON_PALETTE} ${appCount} ${t('color_strip.notification.app_count')}</span>` : ''}
         `;
+    } else if (source.source_type === 'daylight') {
+        const useRealTime = source.use_real_time;
+        const speedVal = (source.speed ?? 1.0).toFixed(1);
+        propsHtml = `
+            <span class="stream-card-prop">${useRealTime ? '🕐 ' + t('color_strip.daylight.real_time') : '⏩ ' + speedVal + 'x'}</span>
+            ${clockBadge}
+        `;
+    } else if (source.source_type === 'candlelight') {
+        const hexColor = rgbArrayToHex(source.color || [255, 147, 41]);
+        const numCandles = source.num_candles ?? 3;
+        propsHtml = `
+            <span class="stream-card-prop" title="${t('color_strip.candlelight.color')}">
+                <span style="display:inline-block;width:14px;height:14px;background:${hexColor};border:1px solid #888;border-radius:2px;vertical-align:middle;margin-right:4px"></span>${hexColor.toUpperCase()}
+            </span>
+            <span class="stream-card-prop">${numCandles} ${t('color_strip.candlelight.num_candles')}</span>
+            ${clockBadge}
+        `;
     } else if (isPictureAdvanced) {
         const cal = source.calibration || {};
         const lines = cal.lines || [];
@@ -1073,7 +1110,9 @@ export function createColorStripCard(source, pictureSourceMap, audioSourceMap) {
     }
 
     const icon = getColorStripIcon(source.source_type);
-    const isPictureKind = (!isStatic && !isGradient && !isColorCycle && !isEffect && !isComposite && !isMapped && !isAudio && !isApiInput && !isNotification);
+    const isDaylight = source.source_type === 'daylight';
+    const isCandlelight = source.source_type === 'candlelight';
+    const isPictureKind = (!isStatic && !isGradient && !isColorCycle && !isEffect && !isComposite && !isMapped && !isAudio && !isApiInput && !isNotification && !isDaylight && !isCandlelight);
     const calibrationBtn = isPictureKind
         ? `<button class="btn btn-icon btn-secondary" onclick="${isPictureAdvanced ? `showAdvancedCalibration('${source.id}')` : `showCSSCalibration('${source.id}')`}" title="${t('calibration.title')}">${ICON_CALIBRATION}</button>`
         : '';
@@ -1217,6 +1256,20 @@ export async function showCSSEditor(cssId = null, cloneData = null) {
                 _showApiInputEndpoints(css.id);
             } else if (sourceType === 'notification') {
                 _loadNotificationState(css);
+            } else if (sourceType === 'daylight') {
+                document.getElementById('css-editor-daylight-speed').value = css.speed ?? 1.0;
+                document.getElementById('css-editor-daylight-speed-val').textContent = parseFloat(css.speed ?? 1.0).toFixed(1);
+                document.getElementById('css-editor-daylight-real-time').checked = css.use_real_time || false;
+                document.getElementById('css-editor-daylight-latitude').value = css.latitude ?? 50.0;
+                document.getElementById('css-editor-daylight-latitude-val').textContent = parseFloat(css.latitude ?? 50.0).toFixed(0);
+                _syncDaylightSpeedVisibility();
+            } else if (sourceType === 'candlelight') {
+                document.getElementById('css-editor-candlelight-color').value = rgbArrayToHex(css.color || [255, 147, 41]);
+                document.getElementById('css-editor-candlelight-intensity').value = css.intensity ?? 1.0;
+                document.getElementById('css-editor-candlelight-intensity-val').textContent = parseFloat(css.intensity ?? 1.0).toFixed(1);
+                document.getElementById('css-editor-candlelight-num-candles').value = css.num_candles ?? 3;
+                document.getElementById('css-editor-candlelight-speed').value = css.speed ?? 1.0;
+                document.getElementById('css-editor-candlelight-speed-val').textContent = parseFloat(css.speed ?? 1.0).toFixed(1);
             } else {
                 if (sourceType === 'picture') sourceSelect.value = css.picture_source_id || '';
 
@@ -1313,6 +1366,19 @@ export async function showCSSEditor(cssId = null, cloneData = null) {
             document.getElementById('css-editor-api-input-timeout-val').textContent = '5.0';
             _showApiInputEndpoints(null);
             _resetNotificationState();
+            // Daylight defaults
+            document.getElementById('css-editor-daylight-speed').value = 1.0;
+            document.getElementById('css-editor-daylight-speed-val').textContent = '1.0';
+            document.getElementById('css-editor-daylight-real-time').checked = false;
+            document.getElementById('css-editor-daylight-latitude').value = 50.0;
+            document.getElementById('css-editor-daylight-latitude-val').textContent = '50';
+            // Candlelight defaults
+            document.getElementById('css-editor-candlelight-color').value = '#ff9329';
+            document.getElementById('css-editor-candlelight-intensity').value = 1.0;
+            document.getElementById('css-editor-candlelight-intensity-val').textContent = '1.0';
+            document.getElementById('css-editor-candlelight-num-candles').value = 3;
+            document.getElementById('css-editor-candlelight-speed').value = 1.0;
+            document.getElementById('css-editor-candlelight-speed-val').textContent = '1.0';
             document.getElementById('css-editor-title').innerHTML = `${ICON_FILM} ${t('color_strip.add')}`;
             document.getElementById('css-editor-gradient-preset').value = '';
             gradientInit([
@@ -1473,6 +1539,23 @@ export async function saveCSSEditor() {
             app_colors: _notificationGetAppColorsDict(),
         };
         if (!cssId) payload.source_type = 'notification';
+    } else if (sourceType === 'daylight') {
+        payload = {
+            name,
+            speed: parseFloat(document.getElementById('css-editor-daylight-speed').value),
+            use_real_time: document.getElementById('css-editor-daylight-real-time').checked,
+            latitude: parseFloat(document.getElementById('css-editor-daylight-latitude').value),
+        };
+        if (!cssId) payload.source_type = 'daylight';
+    } else if (sourceType === 'candlelight') {
+        payload = {
+            name,
+            color: hexToRgbArray(document.getElementById('css-editor-candlelight-color').value),
+            intensity: parseFloat(document.getElementById('css-editor-candlelight-intensity').value),
+            num_candles: parseInt(document.getElementById('css-editor-candlelight-num-candles').value) || 3,
+            speed: parseFloat(document.getElementById('css-editor-candlelight-speed').value),
+        };
+        if (!cssId) payload.source_type = 'candlelight';
     } else if (sourceType === 'picture_advanced') {
         payload = {
             name,
@@ -1501,7 +1584,7 @@ export async function saveCSSEditor() {
     }
 
     // Attach clock_id for animated types
-    const clockTypes = ['static', 'gradient', 'color_cycle', 'effect'];
+    const clockTypes = ['static', 'gradient', 'color_cycle', 'effect', 'daylight', 'candlelight'];
     if (clockTypes.includes(sourceType)) {
         const clockVal = document.getElementById('css-editor-clock').value;
         payload.clock_id = clockVal || null;