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

31
server/src/wled_controller/static/app.js
View File

@@ -1172,18 +1172,16 @@ function updateCalibrationPreview() {
const activeEdges = calibrationTestState[deviceId] || new Set();
['top', 'right', 'bottom', 'left'].forEach(edge => {
const edgeEl = document.querySelector(`.preview-edge.edge-${edge}`);
if (!edgeEl) return;
const toggleEl = document.querySelector(`.edge-toggle.toggle-${edge}`);
if (!toggleEl) return;
if (activeEdges.has(edge)) {
const [r, g, b] = EDGE_TEST_COLORS[edge];
edgeEl.classList.add('active');
edgeEl.style.background = `rgba(${r}, ${g}, ${b}, 0.7)`;
edgeEl.style.boxShadow = `0 0 8px rgba(${r}, ${g}, ${b}, 0.5)`;
toggleEl.style.background = `rgba(${r}, ${g}, ${b}, 0.35)`;
toggleEl.style.boxShadow = `inset 0 0 6px rgba(${r}, ${g}, ${b}, 0.5)`;
} else {
edgeEl.classList.remove('active');
edgeEl.style.background = '';
edgeEl.style.boxShadow = '';
toggleEl.style.background = '';
toggleEl.style.boxShadow = '';
}
});
@@ -1200,9 +1198,9 @@ function renderCalibrationCanvas() {
const containerRect = container.getBoundingClientRect();
if (containerRect.width === 0 || containerRect.height === 0) return;
// Canvas extends beyond the container (matches CSS: left:-32px, top:-18px, +64px/+36px)
const padX = 32;
const padY = 18;
// Canvas extends beyond the container (matches CSS: left:-36px, top:-36px, +72px/+72px)
const padX = 36;
const padY = 36;
const dpr = window.devicePixelRatio || 1;
const canvasW = containerRect.width + padX * 2;
@@ -1261,12 +1259,13 @@ function renderCalibrationCanvas() {
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)
// Axis positions for labels (outside the 12px toggle zones)
const toggleSize = 12;
const axisPos = {
top: oy - 3, // labels above top edge
bottom: oy + cH + 3, // labels below bottom edge
left: ox - 3, // labels left of left edge
right: ox + cW + 3, // labels right of right edge
top: oy - toggleSize - 3,
bottom: oy + cH + toggleSize + 3,
left: ox - toggleSize - 3,
right: ox + cW + toggleSize + 3,
};
// Arrow positions (inside the screen area, near each edge bar)