alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move test toggle zones outside border, improve span handle hit areas
Some checks failed
Validate / validate (push) Failing after 8s
Details

Browse Source 
Separate test edge toggles into dedicated elements outside the
calibration preview border so they don't conflict with span bar
interactions. Expand span handle hit areas to 16px with 4px visible
indicators. Increase canvas padding to 36px on all sides and
reposition tick labels outside toggle zones.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-09 02:48:14 +03:00
parent 2b953e2e3e
commit 9fc15e3213
3 changed files with 110 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
server/src/wled_controller/static/index.html
View File

@@ -100,40 +100,46 @@
</div>
</div>
<!-- Clickable edge bars with LED count inputs -->
<div class="preview-edge edge-top" onclick="toggleTestEdge('top')">
<!-- Edge bars with span controls and LED count inputs -->
<div class="preview-edge edge-top">
<div class="edge-span-bar" data-edge="top">
<div class="edge-span-handle edge-span-handle-start" data-edge="top" data-handle="start"></div>
<div class="edge-span-handle edge-span-handle-end" data-edge="top" data-handle="end"></div>
</div>
<input type="number" id="cal-top-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
oninput="updateCalibrationPreview()">
</div>
<div class="preview-edge edge-right" onclick="toggleTestEdge('right')">
<div class="preview-edge edge-right">
<div class="edge-span-bar" data-edge="right">
<div class="edge-span-handle edge-span-handle-start" data-edge="right" data-handle="start"></div>
<div class="edge-span-handle edge-span-handle-end" data-edge="right" data-handle="end"></div>
</div>
<input type="number" id="cal-right-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
oninput="updateCalibrationPreview()">
</div>
<div class="preview-edge edge-bottom" onclick="toggleTestEdge('bottom')">
<div class="preview-edge edge-bottom">
<div class="edge-span-bar" data-edge="bottom">
<div class="edge-span-handle edge-span-handle-start" data-edge="bottom" data-handle="start"></div>
<div class="edge-span-handle edge-span-handle-end" data-edge="bottom" data-handle="end"></div>
</div>
<input type="number" id="cal-bottom-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
oninput="updateCalibrationPreview()">
</div>
<div class="preview-edge edge-left" onclick="toggleTestEdge('left')">
<div class="preview-edge edge-left">
<div class="edge-span-bar" data-edge="left">
<div class="edge-span-handle edge-span-handle-start" data-edge="left" data-handle="start"></div>
<div class="edge-span-handle edge-span-handle-end" data-edge="left" data-handle="end"></div>
</div>
<input type="number" id="cal-left-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
oninput="updateCalibrationPreview()">
</div>
<!-- Edge test toggle zones (outside container border, in tick area) -->
<div class="edge-toggle toggle-top" onclick="toggleTestEdge('top')"></div>
<div class="edge-toggle toggle-right" onclick="toggleTestEdge('right')"></div>
<div class="edge-toggle toggle-bottom" onclick="toggleTestEdge('bottom')"></div>
<div class="edge-toggle toggle-left" onclick="toggleTestEdge('left')"></div>
<!-- Corner start position buttons -->
<div class="preview-corner corner-top-left" onclick="setStartPosition('top_left')">●</div>
<div class="preview-corner corner-top-right" onclick="setStartPosition('top_right')">●</div>