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;