Add partial LED side coverage (edge spans) for calibration

Allow LEDs to cover only a fraction of each screen edge via draggable
span bars in the calibration UI. Per-edge start/end (0.0-1.0) values
control which portion of the screen border is sampled for LED colors.

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

server/src/wled_controller/static/app.js

@@ -1057,6 +1057,14 @@ async function showCalibration(deviceId) {
         document.getElementById('cal-bottom-leds').value = calibration.leds_bottom || 0;
         document.getElementById('cal-left-leds').value = calibration.leds_left || 0;
 
+        // Initialize edge spans
+        window.edgeSpans = {
+            top: { start: calibration.span_top_start ?? 0, end: calibration.span_top_end ?? 1 },
+            right: { start: calibration.span_right_start ?? 0, end: calibration.span_right_end ?? 1 },
+            bottom: { start: calibration.span_bottom_start ?? 0, end: calibration.span_bottom_end ?? 1 },
+            left: { start: calibration.span_left_start ?? 0, end: calibration.span_left_end ?? 1 },
+        };
+
         // Snapshot initial values for dirty checking
         calibrationInitialValues = {
             start_position: calibration.start_position,
@@ -1066,6 +1074,7 @@ async function showCalibration(deviceId) {
             right: String(calibration.leds_right || 0),
             bottom: String(calibration.leds_bottom || 0),
             left: String(calibration.leds_left || 0),
+            spans: JSON.stringify(window.edgeSpans),
         };
 
         // Initialize test mode state for this device
@@ -1079,7 +1088,8 @@ async function showCalibration(deviceId) {
         modal.style.display = 'flex';
         lockBody();
 
-        // Render canvas after layout settles
+        // Initialize span drag and render canvas after layout settles
+        initSpanDrag();
         requestAnimationFrame(() => renderCalibrationCanvas());
 
     } catch (error) {
@@ -1096,7 +1106,8 @@ function isCalibrationDirty() {
         document.getElementById('cal-top-leds').value !== calibrationInitialValues.top ||
         document.getElementById('cal-right-leds').value !== calibrationInitialValues.right ||
         document.getElementById('cal-bottom-leds').value !== calibrationInitialValues.bottom ||
-        document.getElementById('cal-left-leds').value !== calibrationInitialValues.left
+        document.getElementById('cal-left-leds').value !== calibrationInitialValues.left ||
+        JSON.stringify(window.edgeSpans) !== calibrationInitialValues.spans
     );
 }
 
@@ -1176,7 +1187,8 @@ function updateCalibrationPreview() {
         }
     });
 
-    // Render canvas overlay (ticks, arrows, start label)
+    // Position span bars and render canvas overlay
+    updateSpanBars();
     renderCalibrationCanvas();
 }
 
@@ -1237,12 +1249,16 @@ function renderCalibrationCanvas() {
     const cw = 56;
     const ch = 36;
 
-    // Edge midlines (center of each edge bar) - in canvas coords
+    // Span-aware edge geometry: ticks/arrows render only within the span region
+    const spans = window.edgeSpans || {};
+    const edgeLenH = cW - 2 * cw;
+    const edgeLenV = cH - 2 * ch;
+
     const edgeGeometry = {
-        top:    { x1: ox + cw, x2: ox + cW - cw, midY: oy + ch / 2, horizontal: true },
-        bottom: { x1: ox + cw, x2: ox + cW - cw, midY: oy + cH - ch / 2, horizontal: true },
-        left:   { y1: oy + ch, y2: oy + cH - ch, midX: ox + cw / 2, horizontal: false },
-        right:  { y1: oy + ch, y2: oy + cH - ch, midX: ox + cW - cw / 2, horizontal: false },
+        top:    { x1: ox + cw + (spans.top?.start || 0) * edgeLenH, x2: ox + cw + (spans.top?.end || 1) * edgeLenH, midY: oy + ch / 2, horizontal: true },
+        bottom: { x1: ox + cw + (spans.bottom?.start || 0) * edgeLenH, x2: ox + cw + (spans.bottom?.end || 1) * edgeLenH, midY: oy + cH - ch / 2, horizontal: true },
+        left:   { y1: oy + ch + (spans.left?.start || 0) * edgeLenV, y2: oy + ch + (spans.left?.end || 1) * edgeLenV, midX: ox + cw / 2, horizontal: false },
+        right:  { y1: oy + ch + (spans.right?.start || 0) * edgeLenV, y2: oy + ch + (spans.right?.end || 1) * edgeLenV, midX: ox + cW - cw / 2, horizontal: false },
     };
 
     // Axis positions for labels (outside the container bounds, in the padding area)
@@ -1397,6 +1413,126 @@ function renderCalibrationCanvas() {
 
 }
 
+function updateSpanBars() {
+    const spans = window.edgeSpans || {};
+    ['top', 'right', 'bottom', 'left'].forEach(edge => {
+        const bar = document.querySelector(`.edge-span-bar[data-edge="${edge}"]`);
+        if (!bar) return;
+        const span = spans[edge] || { start: 0, end: 1 };
+        const edgeEl = bar.parentElement;
+        const isHorizontal = (edge === 'top' || edge === 'bottom');
+
+        if (isHorizontal) {
+            const totalWidth = edgeEl.clientWidth;
+            bar.style.left = (span.start * totalWidth) + 'px';
+            bar.style.width = ((span.end - span.start) * totalWidth) + 'px';
+        } else {
+            const totalHeight = edgeEl.clientHeight;
+            bar.style.top = (span.start * totalHeight) + 'px';
+            bar.style.height = ((span.end - span.start) * totalHeight) + 'px';
+        }
+    });
+}
+
+function initSpanDrag() {
+    const MIN_SPAN = 0.05;
+
+    document.querySelectorAll('.edge-span-bar').forEach(bar => {
+        const edge = bar.dataset.edge;
+        const isHorizontal = (edge === 'top' || edge === 'bottom');
+
+        // Prevent edge click-through when interacting with span bar
+        bar.addEventListener('click', e => e.stopPropagation());
+
+        // Handle resize via handles
+        bar.querySelectorAll('.edge-span-handle').forEach(handle => {
+            handle.addEventListener('mousedown', e => {
+                e.preventDefault();
+                e.stopPropagation();
+                const handleType = handle.dataset.handle;
+                const edgeEl = bar.parentElement;
+                const rect = edgeEl.getBoundingClientRect();
+
+                function onMouseMove(ev) {
+                    const span = window.edgeSpans[edge];
+                    let fraction;
+                    if (isHorizontal) {
+                        fraction = (ev.clientX - rect.left) / rect.width;
+                    } else {
+                        fraction = (ev.clientY - rect.top) / rect.height;
+                    }
+                    fraction = Math.max(0, Math.min(1, fraction));
+
+                    if (handleType === 'start') {
+                        span.start = Math.min(fraction, span.end - MIN_SPAN);
+                    } else {
+                        span.end = Math.max(fraction, span.start + MIN_SPAN);
+                    }
+
+                    updateSpanBars();
+                    renderCalibrationCanvas();
+                }
+
+                function onMouseUp() {
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                }
+
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            });
+        });
+
+        // Handle body drag (move entire span)
+        bar.addEventListener('mousedown', e => {
+            if (e.target.classList.contains('edge-span-handle')) return;
+            e.preventDefault();
+            e.stopPropagation();
+
+            const edgeEl = bar.parentElement;
+            const rect = edgeEl.getBoundingClientRect();
+            const span = window.edgeSpans[edge];
+            const spanWidth = span.end - span.start;
+
+            let startFraction;
+            if (isHorizontal) {
+                startFraction = (e.clientX - rect.left) / rect.width;
+            } else {
+                startFraction = (e.clientY - rect.top) / rect.height;
+            }
+            const offsetInSpan = startFraction - span.start;
+
+            function onMouseMove(ev) {
+                let fraction;
+                if (isHorizontal) {
+                    fraction = (ev.clientX - rect.left) / rect.width;
+                } else {
+                    fraction = (ev.clientY - rect.top) / rect.height;
+                }
+
+                let newStart = fraction - offsetInSpan;
+                newStart = Math.max(0, Math.min(1 - spanWidth, newStart));
+                span.start = newStart;
+                span.end = newStart + spanWidth;
+
+                updateSpanBars();
+                renderCalibrationCanvas();
+            }
+
+            function onMouseUp() {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            }
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    });
+
+    // Initial positioning
+    updateSpanBars();
+}
+
 function setStartPosition(position) {
     document.getElementById('cal-start-position').value = position;
     updateCalibrationPreview();
@@ -1501,6 +1637,7 @@ async function saveCalibration() {
     const layout = document.getElementById('cal-layout').value;
     const offset = parseInt(document.getElementById('cal-offset').value || 0);
 
+    const spans = window.edgeSpans || {};
     const calibration = {
         layout: layout,
         start_position: startPosition,
@@ -1508,7 +1645,15 @@ async function saveCalibration() {
         leds_top: topLeds,
         leds_right: rightLeds,
         leds_bottom: bottomLeds,
-        leds_left: leftLeds
+        leds_left: leftLeds,
+        span_top_start: spans.top?.start ?? 0,
+        span_top_end: spans.top?.end ?? 1,
+        span_right_start: spans.right?.start ?? 0,
+        span_right_end: spans.right?.end ?? 1,
+        span_bottom_start: spans.bottom?.start ?? 0,
+        span_bottom_end: spans.bottom?.end ?? 1,
+        span_left_start: spans.left?.start ?? 0,
+        span_left_end: spans.left?.end ?? 1,
     };
 
     try {