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)

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>

106
server/src/wled_controller/static/style.css
View File

@@ -920,10 +920,10 @@ input:-webkit-autofill:focus {
#calibration-preview-canvas {
position: absolute;
top: -18px;
left: -32px;
width: calc(100% + 64px);
height: calc(100% + 36px);
top: -36px;
left: -36px;
width: calc(100% + 72px);
height: calc(100% + 72px);
pointer-events: none;
z-index: 3;
}
@@ -1001,20 +1001,52 @@ input:-webkit-autofill:focus {
font-size: 11px;
color: var(--text-secondary);
background: rgba(128, 128, 128, 0.15);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
transition: background 0.2s;
z-index: 2;
user-select: none;
}
.preview-edge:hover {
background: rgba(128, 128, 128, 0.3);
/* Edge test toggle zones — positioned outside the container border */
.edge-toggle {
position: absolute;
cursor: pointer;
z-index: 1;
background: rgba(128, 128, 128, 0.08);
border: 1px solid rgba(128, 128, 128, 0.15);
border-radius: 3px;
transition: background 0.2s, box-shadow 0.2s;
}
.preview-edge.active {
color: white;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.edge-toggle:hover {
background: rgba(128, 128, 128, 0.25);
}
.toggle-top {
top: -12px;
left: 56px;
right: 56px;
height: 12px;
}
.toggle-bottom {
bottom: -12px;
left: 56px;
right: 56px;
height: 12px;
}
.toggle-left {
left: -12px;
top: 36px;
bottom: 36px;
width: 12px;
}
.toggle-right {
right: -12px;
top: 36px;
bottom: 36px;
width: 12px;
}
.edge-top {
@@ -1123,17 +1155,23 @@ input:-webkit-autofill:focus {
right: 2px;
}
/* Resize handles */
/* Resize handles — large transparent hit area with narrow visible strip */
.edge-span-handle {
position: absolute;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(76, 175, 80, 0.7);
border-radius: 2px;
background: transparent;
z-index: 2;
opacity: 0;
transition: opacity 0.15s;
}
.edge-span-handle::after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(76, 175, 80, 0.7);
border-radius: 2px;
}
.edge-span-bar:hover .edge-span-handle {
opacity: 1;
}
@@ -1141,39 +1179,55 @@ input:-webkit-autofill:focus {
/* Horizontal handles */
.edge-top .edge-span-handle,
.edge-bottom .edge-span-handle {
top: 2px;
bottom: 2px;
width: 6px;
top: 0;
bottom: 0;
width: 16px;
cursor: ew-resize;
}
.edge-top .edge-span-handle::after,
.edge-bottom .edge-span-handle::after {
top: 3px;
bottom: 3px;
left: 6px;
width: 4px;
}
.edge-top .edge-span-handle-start,
.edge-bottom .edge-span-handle-start {
left: 0;
left: -8px;
}
.edge-top .edge-span-handle-end,
.edge-bottom .edge-span-handle-end {
right: 0;
right: -8px;
}
/* Vertical handles */
.edge-left .edge-span-handle,
.edge-right .edge-span-handle {
left: 2px;
right: 2px;
height: 6px;
left: 0;
right: 0;
height: 16px;
cursor: ns-resize;
}
.edge-left .edge-span-handle::after,
.edge-right .edge-span-handle::after {
left: 3px;
right: 3px;
top: 6px;
height: 4px;
}
.edge-left .edge-span-handle-start,
.edge-right .edge-span-handle-start {
top: 0;
top: -8px;
}
.edge-left .edge-span-handle-end,
.edge-right .edge-span-handle-end {
bottom: 0;
bottom: -8px;
}
/* Ensure LED input is above span bar */