Add static image picture stream type with auto-validating UI

Introduces a new "static_image" stream type that loads a frame from a URL
or local file path, enabling LED testing with known images or displaying
static content. Includes validate-image API endpoint, auto-validation on
blur/enter/paste with caching, capture template names on stream cards,
and conditional test stats display for single-frame results.

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

server/src/wled_controller/static/app.js

@@ -2953,13 +2953,17 @@ async function runTemplateTest() {
 function buildTestStatsHtml(result) {
     const p = result.performance;
     const res = `${result.full_capture.width}x${result.full_capture.height}`;
-    return `
+    let html = `
         <div class="stat-item"><span>${t('templates.test.results.duration')}:</span> <strong>${p.capture_duration_s.toFixed(2)}s</strong></div>
-        <div class="stat-item"><span>${t('templates.test.results.frame_count')}:</span> <strong>${p.frame_count}</strong></div>
+        <div class="stat-item"><span>${t('templates.test.results.frame_count')}:</span> <strong>${p.frame_count}</strong></div>`;
+    if (p.frame_count > 1) {
+        html += `
         <div class="stat-item"><span>${t('templates.test.results.actual_fps')}:</span> <strong>${p.actual_fps.toFixed(1)}</strong></div>
-        <div class="stat-item"><span>${t('templates.test.results.avg_capture_time')}:</span> <strong>${p.avg_capture_time_ms.toFixed(1)}ms</strong></div>
-        <div class="stat-item"><span>Resolution:</span> <strong>${res}</strong></div>
-    `;
+        <div class="stat-item"><span>${t('templates.test.results.avg_capture_time')}:</span> <strong>${p.avg_capture_time_ms.toFixed(1)}ms</strong></div>`;
+    }
+    html += `
+        <div class="stat-item"><span>Resolution:</span> <strong>${res}</strong></div>`;
+    return html;
 }
 
 // Display test results — opens lightbox with stats overlay
@@ -3046,20 +3050,27 @@ async function deleteTemplate(templateId) {
 
 let _cachedStreams = [];
 let _cachedPPTemplates = [];
+let _cachedCaptureTemplates = [];
 let _availableFilters = []; // Loaded from GET /filters
 
 async function loadPictureStreams() {
     try {
-        // Ensure PP templates are cached so processed stream cards can show filter info
-        if (_cachedPPTemplates.length === 0) {
+        // Ensure PP templates and capture templates are cached for stream card display
+        if (_cachedPPTemplates.length === 0 || _cachedCaptureTemplates.length === 0) {
             try {
                 if (_availableFilters.length === 0) {
                     const fr = await fetchWithAuth('/filters');
                     if (fr.ok) { const fd = await fr.json(); _availableFilters = fd.filters || []; }
                 }
-                const pr = await fetchWithAuth('/postprocessing-templates');
-                if (pr.ok) { const pd = await pr.json(); _cachedPPTemplates = pd.templates || []; }
-            } catch (e) { console.warn('Could not pre-load PP templates for streams:', e); }
+                if (_cachedPPTemplates.length === 0) {
+                    const pr = await fetchWithAuth('/postprocessing-templates');
+                    if (pr.ok) { const pd = await pr.json(); _cachedPPTemplates = pd.templates || []; }
+                }
+                if (_cachedCaptureTemplates.length === 0) {
+                    const cr = await fetchWithAuth('/capture-templates');
+                    if (cr.ok) { const cd = await cr.json(); _cachedCaptureTemplates = cd.templates || []; }
+                }
+            } catch (e) { console.warn('Could not pre-load templates for streams:', e); }
         }
         const response = await fetchWithAuth('/picture-streams');
         if (!response.ok) {
@@ -3094,6 +3105,19 @@ function renderPictureStreamsList(streams) {
                 </div>
             </div>
         </div>
+        <div class="stream-group">
+            <div class="stream-group-header">
+                <span class="stream-group-icon">🖼️</span>
+                <span class="stream-group-title">${t('streams.group.static_image')}</span>
+                <span class="stream-group-count">0</span>
+            </div>
+            <div class="templates-grid">
+                <div class="template-card add-template-card" onclick="showAddStreamModal('static_image')">
+                    <div class="add-template-icon">+</div>
+                    <div class="add-template-label">${t('streams.add.static_image')}</div>
+                </div>
+            </div>
+        </div>
         <div class="stream-group">
             <div class="stream-group-header">
                 <span class="stream-group-icon">🎨</span>
@@ -3111,13 +3135,24 @@ function renderPictureStreamsList(streams) {
     }
 
     const renderCard = (stream) => {
-        const typeIcon = stream.stream_type === 'raw' ? '🖥️' : '🎨';
-        const typeBadge = stream.stream_type === 'raw'
-            ? `<span class="badge badge-raw">${t('streams.type.raw')}</span>`
-            : `<span class="badge badge-processed">${t('streams.type.processed')}</span>`;
+        const typeIcons = { raw: '🖥️', processed: '🎨', static_image: '🖼️' };
+        const typeIcon = typeIcons[stream.stream_type] || '📺';
+        const typeBadges = {
+            raw: `<span class="badge badge-raw">${t('streams.type.raw')}</span>`,
+            processed: `<span class="badge badge-processed">${t('streams.type.processed')}</span>`,
+            static_image: `<span class="badge badge-processed">${t('streams.type.static_image')}</span>`,
+        };
+        const typeBadge = typeBadges[stream.stream_type] || '';
 
         let detailsHtml = '';
         if (stream.stream_type === 'raw') {
+            let captureTemplateHtml = '';
+            if (stream.capture_template_id) {
+                const capTmpl = _cachedCaptureTemplates.find(t => t.id === stream.capture_template_id);
+                if (capTmpl) {
+                    captureTemplateHtml = `<div class="template-config"><strong>${t('streams.capture_template')}</strong> ${escapeHtml(capTmpl.name)}</div>`;
+                }
+            }
             detailsHtml = `
                 <div class="template-config">
                     <strong>${t('streams.display')}</strong> ${stream.display_index ?? 0}
@@ -3125,8 +3160,9 @@ function renderPictureStreamsList(streams) {
                 <div class="template-config">
                     <strong>${t('streams.target_fps')}</strong> ${stream.target_fps ?? 30}
                 </div>
+                ${captureTemplateHtml}
             `;
-        } else {
+        } else if (stream.stream_type === 'processed') {
             // Find source stream name and PP template name
             const sourceStream = _cachedStreams.find(s => s.id === stream.source_stream_id);
             const sourceName = sourceStream ? escapeHtml(sourceStream.name) : (stream.source_stream_id || '-');
@@ -3144,6 +3180,15 @@ function renderPictureStreamsList(streams) {
                 </div>
                 ${ppTemplateHtml}
             `;
+        } else if (stream.stream_type === 'static_image') {
+            const src = stream.image_source || '';
+            const truncated = src.length > 50 ? src.substring(0, 47) + '...' : src;
+            detailsHtml = `
+                <div class="template-config">
+                    <strong>${t('streams.image_source')}</strong>
+                </div>
+                <div class="stream-card-image-source" title="${escapeHtml(src)}">${escapeHtml(truncated)}</div>
+            `;
         }
 
         return `
@@ -3171,6 +3216,7 @@ function renderPictureStreamsList(streams) {
 
     const rawStreams = streams.filter(s => s.stream_type === 'raw');
     const processedStreams = streams.filter(s => s.stream_type === 'processed');
+    const staticImageStreams = streams.filter(s => s.stream_type === 'static_image');
 
     let html = '';
 
@@ -3190,6 +3236,22 @@ function renderPictureStreamsList(streams) {
         </div>
     </div>`;
 
+    // Static Image streams section
+    html += `<div class="stream-group">
+        <div class="stream-group-header">
+            <span class="stream-group-icon">🖼️</span>
+            <span class="stream-group-title">${t('streams.group.static_image')}</span>
+            <span class="stream-group-count">${staticImageStreams.length}</span>
+        </div>
+        <div class="templates-grid">
+            ${staticImageStreams.map(renderCard).join('')}
+            <div class="template-card add-template-card" onclick="showAddStreamModal('static_image')">
+                <div class="add-template-icon">+</div>
+                <div class="add-template-label">${t('streams.add.static_image')}</div>
+            </div>
+        </div>
+    </div>`;
+
     // Processed streams section
     html += `<div class="stream-group">
         <div class="stream-group-header">
@@ -3213,18 +3275,28 @@ function onStreamTypeChange() {
     const streamType = document.getElementById('stream-type').value;
     document.getElementById('stream-raw-fields').style.display = streamType === 'raw' ? '' : 'none';
     document.getElementById('stream-processed-fields').style.display = streamType === 'processed' ? '' : 'none';
+    document.getElementById('stream-static-image-fields').style.display = streamType === 'static_image' ? '' : 'none';
 }
 
 async function showAddStreamModal(presetType) {
     const streamType = presetType || 'raw';
-    const titleKey = streamType === 'raw' ? 'streams.add.raw' : 'streams.add.processed';
-    document.getElementById('stream-modal-title').textContent = t(titleKey);
+    const titleKeys = { raw: 'streams.add.raw', processed: 'streams.add.processed', static_image: 'streams.add.static_image' };
+    document.getElementById('stream-modal-title').textContent = t(titleKeys[streamType] || 'streams.add');
     document.getElementById('stream-form').reset();
     document.getElementById('stream-id').value = '';
     document.getElementById('stream-display-index').value = '';
     document.getElementById('stream-display-picker-label').textContent = t('displays.picker.select');
     document.getElementById('stream-error').style.display = 'none';
     document.getElementById('stream-type').value = streamType;
+    // Clear static image preview and wire up auto-validation
+    _lastValidatedImageSource = '';
+    const imgSrcInput = document.getElementById('stream-image-source');
+    imgSrcInput.value = '';
+    document.getElementById('stream-image-preview-container').style.display = 'none';
+    document.getElementById('stream-image-validation-status').style.display = 'none';
+    imgSrcInput.onblur = () => validateStaticImage();
+    imgSrcInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); validateStaticImage(); } };
+    imgSrcInput.onpaste = () => setTimeout(() => validateStaticImage(), 0);
     onStreamTypeChange();
 
     // Populate dropdowns
@@ -3242,8 +3314,8 @@ async function editStream(streamId) {
         if (!response.ok) throw new Error(`Failed to load stream: ${response.status}`);
         const stream = await response.json();
 
-        const editTitleKey = stream.stream_type === 'raw' ? 'streams.edit.raw' : 'streams.edit.processed';
-        document.getElementById('stream-modal-title').textContent = t(editTitleKey);
+        const editTitleKeys = { raw: 'streams.edit.raw', processed: 'streams.edit.processed', static_image: 'streams.edit.static_image' };
+        document.getElementById('stream-modal-title').textContent = t(editTitleKeys[stream.stream_type] || 'streams.edit');
         document.getElementById('stream-id').value = streamId;
         document.getElementById('stream-name').value = stream.name;
         document.getElementById('stream-description').value = stream.description || '';
@@ -3251,6 +3323,9 @@ async function editStream(streamId) {
 
         // Set type (hidden input)
         document.getElementById('stream-type').value = stream.stream_type;
+        // Clear static image preview
+        document.getElementById('stream-image-preview-container').style.display = 'none';
+        document.getElementById('stream-image-validation-status').style.display = 'none';
         onStreamTypeChange();
 
         // Populate dropdowns before setting values
@@ -3264,9 +3339,15 @@ async function editStream(streamId) {
             const fps = stream.target_fps ?? 30;
             document.getElementById('stream-target-fps').value = fps;
             document.getElementById('stream-target-fps-value').textContent = fps;
-        } else {
+        } else if (stream.stream_type === 'processed') {
             document.getElementById('stream-source').value = stream.source_stream_id || '';
             document.getElementById('stream-pp-template').value = stream.postprocessing_template_id || '';
+        } else if (stream.stream_type === 'static_image') {
+            document.getElementById('stream-image-source').value = stream.image_source || '';
+            // Auto-validate to show preview
+            if (stream.image_source) {
+                validateStaticImage();
+            }
         }
 
         const modal = document.getElementById('stream-modal');
@@ -3324,7 +3405,8 @@ async function populateStreamModalDropdowns() {
             if (s.id === editingId) return;
             const opt = document.createElement('option');
             opt.value = s.id;
-            const typeLabel = s.stream_type === 'raw' ? '🖥️' : '🎨';
+            const typeLabels = { raw: '🖥️', processed: '🎨', static_image: '🖼️' };
+            const typeLabel = typeLabels[s.stream_type] || '📺';
             opt.textContent = `${typeLabel} ${s.name}`;
             sourceSelect.appendChild(opt);
         });
@@ -3367,9 +3449,16 @@ async function saveStream() {
         payload.display_index = parseInt(document.getElementById('stream-display-index').value) || 0;
         payload.capture_template_id = document.getElementById('stream-capture-template').value;
         payload.target_fps = parseInt(document.getElementById('stream-target-fps').value) || 30;
-    } else {
+    } else if (streamType === 'processed') {
         payload.source_stream_id = document.getElementById('stream-source').value;
         payload.postprocessing_template_id = document.getElementById('stream-pp-template').value;
+    } else if (streamType === 'static_image') {
+        const imageSource = document.getElementById('stream-image-source').value.trim();
+        if (!imageSource) {
+            showToast(t('streams.error.required'), 'error');
+            return;
+        }
+        payload.image_source = imageSource;
     }
 
     try {
@@ -3429,6 +3518,56 @@ function closeStreamModal() {
     unlockBody();
 }
 
+let _lastValidatedImageSource = '';
+
+async function validateStaticImage() {
+    const source = document.getElementById('stream-image-source').value.trim();
+    const previewContainer = document.getElementById('stream-image-preview-container');
+    const previewImg = document.getElementById('stream-image-preview');
+    const infoEl = document.getElementById('stream-image-info');
+    const statusEl = document.getElementById('stream-image-validation-status');
+
+    if (!source) {
+        _lastValidatedImageSource = '';
+        previewContainer.style.display = 'none';
+        statusEl.style.display = 'none';
+        return;
+    }
+
+    if (source === _lastValidatedImageSource) return;
+
+    // Show loading state
+    statusEl.textContent = t('streams.validate_image.validating');
+    statusEl.className = 'validation-status loading';
+    statusEl.style.display = 'block';
+    previewContainer.style.display = 'none';
+
+    try {
+        const response = await fetchWithAuth('/picture-streams/validate-image', {
+            method: 'POST',
+            body: JSON.stringify({ image_source: source }),
+        });
+        const data = await response.json();
+
+        _lastValidatedImageSource = source;
+        if (data.valid) {
+            previewImg.src = data.preview;
+            infoEl.textContent = `${data.width} × ${data.height} px`;
+            previewContainer.style.display = '';
+            statusEl.textContent = t('streams.validate_image.valid');
+            statusEl.className = 'validation-status success';
+        } else {
+            previewContainer.style.display = 'none';
+            statusEl.textContent = `${t('streams.validate_image.invalid')}: ${data.error}`;
+            statusEl.className = 'validation-status error';
+        }
+    } catch (err) {
+        previewContainer.style.display = 'none';
+        statusEl.textContent = `${t('streams.validate_image.invalid')}: ${err.message}`;
+        statusEl.className = 'validation-status error';
+    }
+}
+
 // ===== Picture Stream Test =====
 
 let _currentTestStreamId = null;

server/src/wled_controller/static/index.html

@@ -569,6 +569,20 @@
                         </div>
                     </div>
 
+                    <!-- Static image fields -->
+                    <div id="stream-static-image-fields" style="display: none;">
+                        <div class="form-group">
+                            <label for="stream-image-source" data-i18n="streams.image_source">Image Source:</label>
+                            <input type="text" id="stream-image-source" data-i18n-placeholder="streams.image_source.placeholder" placeholder="https://example.com/image.jpg or C:\path\to\image.png">
+                            <small class="form-hint" data-i18n="streams.image_source.hint">Enter a URL (http/https) or local file path to an image</small>
+                        </div>
+                        <div id="stream-image-preview-container" class="image-preview-container" style="display: none;">
+                            <img id="stream-image-preview" class="stream-image-preview" src="" alt="Preview">
+                            <div id="stream-image-info" class="stream-image-info"></div>
+                        </div>
+                        <div id="stream-image-validation-status" class="validation-status" style="display: none;"></div>
+                    </div>
+
                     <div class="form-group">
                         <label for="stream-description" data-i18n="streams.description_label">Description (optional):</label>
                         <input type="text" id="stream-description" data-i18n-placeholder="streams.description_placeholder" placeholder="Describe this stream...">

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

@@ -280,5 +280,15 @@
   "device.stream_settings.interpolation_hint": "How to calculate LED color from sampled pixels",
   "device.stream_settings.smoothing": "Smoothing:",
   "device.stream_settings.smoothing_hint": "Temporal blending between frames (0=none, 1=full). Reduces flicker.",
-  "device.tip.stream_selector": "Configure picture stream and LED projection settings for this device"
+  "device.tip.stream_selector": "Configure picture stream and LED projection settings for this device",
+  "streams.group.static_image": "Static Image Streams",
+  "streams.add.static_image": "Add Static Image",
+  "streams.edit.static_image": "Edit Static Image",
+  "streams.type.static_image": "Static Image",
+  "streams.image_source": "Image Source:",
+  "streams.image_source.placeholder": "https://example.com/image.jpg or C:\\path\\to\\image.png",
+  "streams.image_source.hint": "Enter a URL (http/https) or local file path to an image",
+  "streams.validate_image.validating": "Validating...",
+  "streams.validate_image.valid": "Image accessible",
+  "streams.validate_image.invalid": "Image not accessible"
 }

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

@@ -280,5 +280,15 @@
   "device.stream_settings.interpolation_hint": "Как вычислять цвет LED из выбранных пикселей",
   "device.stream_settings.smoothing": "Сглаживание:",
   "device.stream_settings.smoothing_hint": "Временное смешивание между кадрами (0=нет, 1=полное). Уменьшает мерцание.",
-  "device.tip.stream_selector": "Настройки видеопотока и проекции LED для этого устройства"
+  "device.tip.stream_selector": "Настройки видеопотока и проекции LED для этого устройства",
+  "streams.group.static_image": "Статические изображения",
+  "streams.add.static_image": "Добавить статическое изображение",
+  "streams.edit.static_image": "Редактировать статическое изображение",
+  "streams.type.static_image": "Статическое изображение",
+  "streams.image_source": "Источник изображения:",
+  "streams.image_source.placeholder": "https://example.com/image.jpg или C:\\path\\to\\image.png",
+  "streams.image_source.hint": "Введите URL (http/https) или локальный путь к изображению",
+  "streams.validate_image.validating": "Проверка...",
+  "streams.validate_image.valid": "Изображение доступно",
+  "streams.validate_image.invalid": "Изображение недоступно"
 }

server/src/wled_controller/static/style.css

@@ -2360,3 +2360,45 @@ input:-webkit-autofill:focus {
     }
 }
 
+/* Static image stream styles */
+.image-preview-container {
+    text-align: center;
+    margin: 12px 0;
+    padding: 12px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+.stream-image-preview {
+    max-width: 100%;
+    max-height: 200px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+}
+.stream-image-info {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 6px;
+}
+.validation-status {
+    font-size: 0.8rem;
+    margin-top: 4px;
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+.validation-status.success {
+    color: #4caf50;
+}
+.validation-status.error {
+    color: #f44336;
+}
+.validation-status.loading {
+    color: var(--text-muted);
+}
+.stream-card-image-source {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    word-break: break-all;
+    margin-top: 4px;
+}
+