Remove target segments, use single color strip source per target

Segments are redundant now that the "mapped" CSS type handles spatial
multiplexing internally. Each target now references one color_strip_source_id
instead of an array of segments with start/end/reverse ranges.

Backward compat: existing targets with old segments format are migrated
on load by extracting the first segment's CSS source ID.

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

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

@@ -85,7 +85,6 @@ import {
 import {
     loadTargetsTab, loadTargets, switchTargetSubTab,
     showTargetEditor, closeTargetEditorModal, forceCloseTargetEditorModal, saveTargetEditor,
-    addTargetSegment, removeTargetSegment, syncSegmentsMappedMode,
     startTargetProcessing, stopTargetProcessing,
     startTargetOverlay, stopTargetOverlay, deleteTarget,
     cloneTarget,
@@ -283,9 +282,6 @@ Object.assign(window, {
     closeTargetEditorModal,
     forceCloseTargetEditorModal,
     saveTargetEditor,
-    addTargetSegment,
-    removeTargetSegment,
-    syncSegmentsMappedMode,
     startTargetProcessing,
     stopTargetProcessing,
     startTargetOverlay,

server/src/wled_controller/static/js/features/dashboard.js

@@ -447,14 +447,11 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
         if (device) {
             subtitleParts.push((device.device_type || '').toUpperCase());
         }
-        const segments = target.segments || [];
-        if (segments.length > 0) {
-            const firstCss = cssSourceMap[segments[0].color_strip_source_id];
-            if (firstCss) {
-                subtitleParts.push(t(`color_strip.type.${firstCss.source_type}`) || firstCss.source_type);
-            }
-            if (segments.length > 1) {
-                subtitleParts.push(`${segments.length} seg`);
+        const cssId = target.color_strip_source_id || '';
+        if (cssId) {
+            const css = cssSourceMap[cssId];
+            if (css) {
+                subtitleParts.push(t(`color_strip.type.${css.source_type}`) || css.source_type);
             }
         }
     }

server/src/wled_controller/static/js/features/targets.js

@@ -74,73 +74,9 @@ function _createTargetFpsChart(canvasId, history, fpsTarget, maxHwFps) {
     });
 }
 
-// --- Segment editor state ---
+// --- Editor state ---
 let _editorCssSources = [];   // populated when editor opens
 
-/**
- * When the selected CSS source is a mapped type, collapse the segment UI
- * to a single source dropdown — range fields, reverse, header, and "Add Segment"
- * are hidden because the mapped CSS already defines spatial zones internally.
- */
-export function syncSegmentsMappedMode() {
-    const list = document.getElementById('target-editor-segment-list');
-    if (!list) return;
-    const rows = list.querySelectorAll('.segment-row');
-    if (rows.length === 0) return;
-
-    const firstSelect = rows[0].querySelector('.segment-css-select');
-    const selectedId = firstSelect ? firstSelect.value : '';
-    const selectedSource = _editorCssSources.find(s => s.id === selectedId);
-    const isMapped = selectedSource && selectedSource.source_type === 'mapped';
-
-    // Remove extra segments when switching to mapped
-    if (isMapped && rows.length > 1) {
-        for (let i = rows.length - 1; i >= 1; i--) rows[i].remove();
-    }
-
-    // Toggle visibility of range/reverse/header within the first row
-    const firstRow = list.querySelector('.segment-row');
-    if (firstRow) {
-        const header = firstRow.querySelector('.segment-row-header');
-        const rangeFields = firstRow.querySelector('.segment-range-fields');
-        const reverseLabel = firstRow.querySelector('.segment-reverse-label');
-        if (header) header.style.display = isMapped ? 'none' : '';
-        if (rangeFields) rangeFields.style.display = isMapped ? 'none' : '';
-        if (reverseLabel) reverseLabel.style.display = isMapped ? 'none' : '';
-    }
-
-    // Hide/show "Add Segment" button
-    const addBtn = document.querySelector('#target-editor-segments-group > .btn-sm');
-    if (addBtn) addBtn.style.display = isMapped ? 'none' : '';
-
-    // Swap label: "Segments:" ↔ "Color Strip Source:"
-    const group = document.getElementById('target-editor-segments-group');
-    if (group) {
-        const label = group.querySelector('.label-row label');
-        const hintToggle = group.querySelector('.hint-toggle');
-        const hint = group.querySelector('.input-hint');
-        if (label) label.textContent = isMapped
-            ? t('targets.color_strip_source')
-            : t('targets.segments');
-        if (hintToggle) hintToggle.style.display = isMapped ? 'none' : '';
-        if (hint) hint.style.display = 'none';  // collapse hint on switch
-    }
-}
-
-function _serializeSegments() {
-    const rows = document.querySelectorAll('.segment-row');
-    const segments = [];
-    rows.forEach(row => {
-        segments.push({
-            css: row.querySelector('.segment-css-select').value,
-            start: row.querySelector('.segment-start').value,
-            end: row.querySelector('.segment-end').value,
-            reverse: row.querySelector('.segment-reverse').checked,
-        });
-    });
-    return JSON.stringify(segments);
-}
-
 class TargetEditorModal extends Modal {
     constructor() {
         super('target-editor-modal');
@@ -150,7 +86,7 @@ class TargetEditorModal extends Modal {
         return {
             name: document.getElementById('target-editor-name').value,
             device: document.getElementById('target-editor-device').value,
-            segments: _serializeSegments(),
+            css_source: document.getElementById('target-editor-css-source').value,
             fps: document.getElementById('target-editor-fps').value,
             keepalive_interval: document.getElementById('target-editor-keepalive-interval').value,
         };
@@ -166,9 +102,8 @@ function _autoGenerateTargetName() {
     if (document.getElementById('target-editor-id').value) return;
     const deviceSelect = document.getElementById('target-editor-device');
     const deviceName = deviceSelect.selectedOptions[0]?.dataset?.name || '';
-    // Use first segment's CSS name
-    const firstCssSelect = document.querySelector('.segment-css-select');
-    const cssName = firstCssSelect?.selectedOptions[0]?.dataset?.name || '';
+    const cssSelect = document.getElementById('target-editor-css-source');
+    const cssName = cssSelect?.selectedOptions[0]?.dataset?.name || '';
     if (!deviceName || !cssName) return;
     document.getElementById('target-editor-name').value = `${deviceName} \u00b7 ${cssName}`;
 }
@@ -210,54 +145,11 @@ function _updateKeepaliveVisibility() {
     keepaliveGroup.style.display = caps.includes('standby_required') ? '' : 'none';
 }
 
-export function addTargetSegment(segment = null) {
-    const list = document.getElementById('target-editor-segment-list');
-    const index = list.querySelectorAll('.segment-row').length;
-    const row = document.createElement('div');
-    row.className = 'segment-row';
-    row.innerHTML = _renderSegmentRowInner(index, segment);
-    list.appendChild(row);
-}
-
-export function removeTargetSegment(btn) {
-    const row = btn.closest('.segment-row');
-    row.remove();
-    // Re-index labels
-    document.querySelectorAll('.segment-row').forEach((r, i) => {
-        const label = r.querySelector('.segment-index-label');
-        if (label) label.textContent = `#${i + 1}`;
-    });
-}
-
-function _renderSegmentRowInner(index, segment) {
-    const cssId = segment?.color_strip_source_id || '';
-    const start = segment?.start ?? 0;
-    const end = segment?.end ?? 0;
-    const reverse = segment?.reverse || false;
-
-    const options = _editorCssSources.map(s =>
-        `<option value="${s.id}" data-name="${escapeHtml(s.name)}" ${s.id === cssId ? 'selected' : ''}>\uD83C\uDFAC ${escapeHtml(s.name)}</option>`
+function _populateCssDropdown(selectedId = '') {
+    const select = document.getElementById('target-editor-css-source');
+    select.innerHTML = _editorCssSources.map(s =>
+        `<option value="${s.id}" data-name="${escapeHtml(s.name)}" ${s.id === selectedId ? 'selected' : ''}>${escapeHtml(s.name)}</option>`
     ).join('');
-
-    return `
-        <div class="segment-row-header">
-            <span class="segment-index-label">#${index + 1}</span>
-            <button type="button" class="btn-icon-inline btn-danger-text" onclick="removeTargetSegment(this)" title="${t('targets.segment.remove')}">&times;</button>
-        </div>
-        <div class="segment-row-fields">
-            <select class="segment-css-select" onchange="window._targetAutoName && window._targetAutoName(); syncSegmentsMappedMode()">${options}</select>
-            <div class="segment-range-fields">
-                <label>${t('targets.segment.start')}</label>
-                <input type="number" class="segment-start" min="0" value="${start}" placeholder="0">
-                <label>${t('targets.segment.end')}</label>
-                <input type="number" class="segment-end" min="0" value="${end}" placeholder="0 = auto">
-            </div>
-            <label class="segment-reverse-label">
-                <input type="checkbox" class="segment-reverse" ${reverse ? 'checked' : ''}>
-                <span>${t('targets.segment.reverse')}</span>
-            </label>
-        </div>
-    `;
 }
 
 export async function showTargetEditor(targetId = null, cloneData = null) {
@@ -286,10 +178,6 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
             deviceSelect.appendChild(opt);
         });
 
-        // Clear segment list
-        const segmentList = document.getElementById('target-editor-segment-list');
-        segmentList.innerHTML = '';
-
         if (targetId) {
             // Editing existing target
             const resp = await fetch(`${API_BASE}/picture-targets/${targetId}`, { headers: getHeaders() });
@@ -306,13 +194,7 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
             document.getElementById('target-editor-keepalive-interval-value').textContent = target.keepalive_interval ?? 1.0;
             document.getElementById('target-editor-title').textContent = t('targets.edit');
 
-            // Populate segments
-            const segments = target.segments || [];
-            if (segments.length === 0) {
-                addTargetSegment();
-            } else {
-                segments.forEach(seg => addTargetSegment(seg));
-            }
+            _populateCssDropdown(target.color_strip_source_id || '');
         } else if (cloneData) {
             // Cloning — create mode but pre-filled from clone data
             document.getElementById('target-editor-id').value = '';
@@ -325,14 +207,9 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
             document.getElementById('target-editor-keepalive-interval-value').textContent = cloneData.keepalive_interval ?? 1.0;
             document.getElementById('target-editor-title').textContent = t('targets.add');
 
-            const segments = cloneData.segments || [];
-            if (segments.length === 0) {
-                addTargetSegment();
-            } else {
-                segments.forEach(seg => addTargetSegment(seg));
-            }
+            _populateCssDropdown(cloneData.color_strip_source_id || '');
         } else {
-            // Creating new target — start with one empty segment
+            // Creating new target
             document.getElementById('target-editor-id').value = '';
             document.getElementById('target-editor-name').value = '';
             document.getElementById('target-editor-fps').value = 30;
@@ -340,16 +217,16 @@ export async function showTargetEditor(targetId = null, cloneData = null) {
             document.getElementById('target-editor-keepalive-interval').value = 1.0;
             document.getElementById('target-editor-keepalive-interval-value').textContent = '1.0';
             document.getElementById('target-editor-title').textContent = t('targets.add');
-            addTargetSegment();
-        }
 
-        syncSegmentsMappedMode();
+            _populateCssDropdown('');
+        }
 
         // Auto-name generation
         _targetNameManuallyEdited = !!(targetId || cloneData);
         document.getElementById('target-editor-name').oninput = () => { _targetNameManuallyEdited = true; };
         window._targetAutoName = _autoGenerateTargetName;
         deviceSelect.onchange = () => { _updateDeviceInfo(); _updateKeepaliveVisibility(); _updateFpsRecommendation(); _autoGenerateTargetName(); };
+        document.getElementById('target-editor-css-source').onchange = () => { _autoGenerateTargetName(); };
         if (!targetId && !cloneData) _autoGenerateTargetName();
 
         // Show/hide standby interval based on selected device capabilities
@@ -392,27 +269,12 @@ export async function saveTargetEditor() {
     }
 
     const fps = parseInt(document.getElementById('target-editor-fps').value) || 30;
-
-    // Collect segments from DOM
-    const segmentRows = document.querySelectorAll('.segment-row');
-    const segments = [];
-    for (const row of segmentRows) {
-        const cssId = row.querySelector('.segment-css-select').value;
-        const start = parseInt(row.querySelector('.segment-start').value) || 0;
-        const end = parseInt(row.querySelector('.segment-end').value) || 0;
-        const reverse = row.querySelector('.segment-reverse').checked;
-        segments.push({
-            color_strip_source_id: cssId,
-            start,
-            end,
-            reverse,
-        });
-    }
+    const colorStripSourceId = document.getElementById('target-editor-css-source').value;
 
     const payload = {
         name,
         device_id: deviceId,
-        segments,
+        color_strip_source_id: colorStripSourceId,
         fps,
         keepalive_interval: standbyInterval,
     };
@@ -693,17 +555,10 @@ export async function loadTargetsTab() {
     }
 }
 
-function _segmentsSummary(segments, colorStripSourceMap) {
-    if (!segments || segments.length === 0) return t('targets.no_segments');
-    return segments.map(seg => {
-        const css = colorStripSourceMap[seg.color_strip_source_id];
-        const name = css ? css.name : (seg.color_strip_source_id || '?');
-        let range = '';
-        if (seg.start || seg.end) {
-            range = ` [${seg.start}-${seg.end || '\u221e'}]`;
-        }
-        return escapeHtml(name) + range;
-    }).join(', ');
+function _cssSourceName(cssId, colorStripSourceMap) {
+    if (!cssId) return t('targets.no_css');
+    const css = colorStripSourceMap[cssId];
+    return css ? escapeHtml(css.name) : escapeHtml(cssId);
 }
 
 export function createTargetCard(target, deviceMap, colorStripSourceMap) {
@@ -715,13 +570,12 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap) {
     const device = deviceMap[target.device_id];
     const deviceName = device ? device.name : (target.device_id || 'No device');
 
-    const segments = target.segments || [];
-    const segSummary = _segmentsSummary(segments, colorStripSourceMap);
+    const cssId = target.color_strip_source_id || '';
+    const cssSummary = _cssSourceName(cssId, colorStripSourceMap);
 
-    // Determine if overlay is available (first segment has a picture-based CSS)
-    const firstCssId = segments.length > 0 ? segments[0].color_strip_source_id : '';
-    const firstCss = firstCssId ? colorStripSourceMap[firstCssId] : null;
-    const overlayAvailable = !firstCss || firstCss.source_type === 'picture';
+    // Determine if overlay is available (picture-based CSS)
+    const css = cssId ? colorStripSourceMap[cssId] : null;
+    const overlayAvailable = !css || css.source_type === 'picture';
 
     // Health info from target state (forwarded from device)
     const devOnline = state.device_online || false;
@@ -745,7 +599,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap) {
             <div class="stream-card-props">
                 <span class="stream-card-prop" title="${t('targets.device')}">💡 ${escapeHtml(deviceName)}</span>
                 <span class="stream-card-prop" title="${t('targets.fps')}">⚡ ${target.fps || 30} fps</span>
-                <span class="stream-card-prop stream-card-prop-full" title="${t('targets.segments')}">🎞️ ${segSummary}</span>
+                <span class="stream-card-prop stream-card-prop-full" title="${t('targets.color_strip_source')}">🎞️ ${cssSummary}</span>
             </div>
             <div class="card-content">
                 ${isProcessing ? `

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

@@ -365,15 +365,9 @@
   "targets.device": "Device:",
   "targets.device.hint": "Select the LED device to send data to",
   "targets.device.none": "-- Select a device --",
-  "targets.segments": "Segments:",
   "targets.color_strip_source": "Color Strip Source:",
-  "targets.segments.hint": "Each segment maps a color strip source to a pixel range on the LED strip. Gaps between segments stay black. A single segment with Start=0, End=0 auto-fits to the full strip.",
-  "targets.segments.add": "+ Add Segment",
-  "targets.segment.start": "Start:",
-  "targets.segment.end": "End:",
-  "targets.segment.reverse": "Reverse",
-  "targets.segment.remove": "Remove segment",
-  "targets.no_segments": "No segments",
+  "targets.color_strip_source.hint": "Select the color strip source that provides LED colors for this target",
+  "targets.no_css": "No source",
   "targets.source": "Source:",
   "targets.source.hint": "Which picture source to capture and process",
   "targets.source.none": "-- No source assigned --",

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

@@ -365,15 +365,9 @@
   "targets.device": "Устройство:",
   "targets.device.hint": "Выберите LED устройство для передачи данных",
   "targets.device.none": "-- Выберите устройство --",
-  "targets.segments": "Сегменты:",
   "targets.color_strip_source": "Источник цветовой полосы:",
-  "targets.segments.hint": "Каждый сегмент отображает источник цветовой полосы на диапазон пикселей LED ленты. Промежутки между сегментами остаются чёрными. Один сегмент с Начало=0, Конец=0 авто-подгоняется под всю ленту.",
-  "targets.segments.add": "+ Добавить сегмент",
-  "targets.segment.start": "Начало:",
-  "targets.segment.end": "Конец:",
-  "targets.segment.reverse": "Реверс",
-  "targets.segment.remove": "Удалить сегмент",
-  "targets.no_segments": "Нет сегментов",
+  "targets.color_strip_source.hint": "Выберите источник цветовой полосы, который предоставляет цвета LED для этой цели",
+  "targets.no_css": "Нет источника",
   "targets.source": "Источник:",
   "targets.source.hint": "Какой источник изображения захватывать и обрабатывать",
   "targets.source.none": "-- Источник не назначен --",