From 6c5608f5eacc4260577df159963ef59dcdabf01b Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Mon, 9 Feb 2026 12:23:18 +0300
Subject: [PATCH] Disable zero-LED calibration edges with visual dimming

Edges with 0 LEDs now:
- Dim to 25% opacity (15% for toggle zones)
- Block interaction (pointer-events: none)
- Keep LED input editable to allow changing from 0
- Prevent test toggle, span drag on disabled edges

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 server/src/wled_controller/static/app.js    | 14 ++++++++++++++
 server/src/wled_controller/static/style.css | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/server/src/wled_controller/static/app.js b/server/src/wled_controller/static/app.js
index d8d3180..a63de31 100644
--- a/server/src/wled_controller/static/app.js
+++ b/server/src/wled_controller/static/app.js
@@ -1211,6 +1211,15 @@ function updateCalibrationPreview() {
         }
     });
 
+    // Disable edges with 0 LEDs
+    ['top', 'right', 'bottom', 'left'].forEach(edge => {
+        const count = parseInt(document.getElementById(`cal-${edge}-leds`).value) || 0;
+        const edgeEl = document.querySelector(`.preview-edge.edge-${edge}`);
+        const toggleEl = document.querySelector(`.edge-toggle.toggle-${edge}`);
+        if (edgeEl) edgeEl.classList.toggle('edge-disabled', count === 0);
+        if (toggleEl) toggleEl.classList.toggle('edge-disabled', count === 0);
+    });
+
     // Position span bars and render canvas overlay
     updateSpanBars();
     renderCalibrationCanvas();
@@ -1532,6 +1541,8 @@ function initSpanDrag() {
         // Handle resize via handles
         bar.querySelectorAll('.edge-span-handle').forEach(handle => {
             handle.addEventListener('mousedown', e => {
+                const edgeLeds = parseInt(document.getElementById(`cal-${edge}-leds`).value) || 0;
+                if (edgeLeds === 0) return;
                 e.preventDefault();
                 e.stopPropagation();
                 const handleType = handle.dataset.handle;
@@ -1635,6 +1646,9 @@ function toggleDirection() {
 }
 
 async function toggleTestEdge(edge) {
+    const edgeLeds = parseInt(document.getElementById(`cal-${edge}-leds`).value) || 0;
+    if (edgeLeds === 0) return;
+
     const deviceId = document.getElementById('calibration-device-id').value;
     const error = document.getElementById('calibration-error');
 
diff --git a/server/src/wled_controller/static/style.css b/server/src/wled_controller/static/style.css
index 6d1ac5a..9bac17b 100644
--- a/server/src/wled_controller/static/style.css
+++ b/server/src/wled_controller/static/style.css
@@ -1090,6 +1090,22 @@ input:-webkit-autofill:focus {
     background: rgba(128, 128, 128, 0.25);
 }
 
+.preview-edge.edge-disabled {
+    opacity: 0.25;
+    pointer-events: none;
+}
+
+.preview-edge.edge-disabled .edge-led-input {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+.edge-toggle.edge-disabled {
+    opacity: 0.15;
+    pointer-events: none;
+    cursor: default;
+}
+
 .toggle-top {
     top: -16px;
     left: 56px;