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

Add skip LEDs feature with physical resampling and per-edge tick labels

Browse Source 
Skip LEDs at the start/end of the strip are blacked out while the full
screen perimeter is resampled onto the remaining active LEDs using linear
interpolation. Calibration canvas tick labels show per-edge display
ranges clipped to the active LED range. Moved LED offset control from
inline overlay to a dedicated form row alongside the new skip inputs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-16 10:55:21 +03:00
parent 398f090eca
commit afce183f79
7 changed files with 126 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1057,6 +1057,10 @@ async function showCalibration(deviceId) {
document.getElementById('cal-bottom-leds').value = calibration.leds_bottom || 0;
document.getElementById('cal-left-leds').value = calibration.leds_left || 0;
// Set skip LEDs
document.getElementById('cal-skip-start').value = calibration.skip_leds_start || 0;
document.getElementById('cal-skip-end').value = calibration.skip_leds_end || 0;
// Initialize edge spans
window.edgeSpans = {
top: { start: calibration.span_top_start ?? 0, end: calibration.span_top_end ?? 1 },
@@ -1075,6 +1079,8 @@ async function showCalibration(deviceId) {
bottom: String(calibration.leds_bottom || 0),
left: String(calibration.leds_left || 0),
spans: JSON.stringify(window.edgeSpans),
skip_start: String(calibration.skip_leds_start || 0),
skip_end: String(calibration.skip_leds_end || 0),
};
// Initialize test mode state for this device
@@ -1123,7 +1129,9 @@ function isCalibrationDirty() {
document.getElementById('cal-right-leds').value !== calibrationInitialValues.right ||
document.getElementById('cal-bottom-leds').value !== calibrationInitialValues.bottom ||
document.getElementById('cal-left-leds').value !== calibrationInitialValues.left ||
JSON.stringify(window.edgeSpans) !== calibrationInitialValues.spans
JSON.stringify(window.edgeSpans) !== calibrationInitialValues.spans ||
document.getElementById('cal-skip-start').value !== calibrationInitialValues.skip_start ||
document.getElementById('cal-skip-end').value !== calibrationInitialValues.skip_end
);
}
@@ -1260,11 +1268,14 @@ function renderCalibrationCanvas() {
leds_bottom: parseInt(document.getElementById('cal-bottom-leds').value || 0),
leds_left: parseInt(document.getElementById('cal-left-leds').value || 0),
};
const skipStart = parseInt(document.getElementById('cal-skip-start').value || 0);
const skipEnd = parseInt(document.getElementById('cal-skip-end').value || 0);
const segments = buildSegments(calibration);
if (segments.length === 0) return;
const totalLeds = calibration.leds_top + calibration.leds_right + calibration.leds_bottom + calibration.leds_left;
const hasSkip = (skipStart > 0 || skipEnd > 0) && totalLeds > 1;
// Theme-aware colors
const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
@@ -1314,6 +1325,16 @@ function renderCalibrationCanvas() {
const count = seg.led_count;
if (count === 0) return;
// Per-edge display range: clip to active LED range when skip is set
const edgeDisplayStart = hasSkip ? Math.max(seg.led_start, skipStart) : seg.led_start;
const edgeDisplayEnd = hasSkip ? Math.min(seg.led_start + count, totalLeds - skipEnd) : seg.led_start + count - 1;
const edgeDisplayRange = edgeDisplayEnd - edgeDisplayStart;
const toEdgeLabel = (i) => {
if (!hasSkip) return totalLeds > 0 ? (seg.led_start + i) % totalLeds : seg.led_start + i;
if (count <= 1) return edgeDisplayStart;
return Math.round(edgeDisplayStart + i / (count - 1) * edgeDisplayRange);
};
// Edge boundary ticks (first/last LED on edge) and special ticks (LED 0 position)
const edgeBounds = new Set();
edgeBounds.add(0);
@@ -1356,8 +1377,7 @@ function renderCalibrationCanvas() {
for (let i = 1; i < count - 1; i++) {
if (specialTicks.has(i)) continue;
const idx = totalLeds > 0 ? (seg.led_start + i) % totalLeds : seg.led_start + i;
if (idx % step === 0) {
if (toEdgeLabel(i) % step === 0) {
const px = tickPx(i);
if (!placed.some(p => Math.abs(px - p) < minSpacing)) {
labelsToShow.add(i);
@@ -1393,7 +1413,7 @@ function renderCalibrationCanvas() {
labelsToShow.forEach(i => {
const fraction = count > 1 ? i / (count - 1) : 0.5;
const displayFraction = seg.reverse ? (1 - fraction) : fraction;
const ledIndex = totalLeds > 0 ? (seg.led_start + i) % totalLeds : seg.led_start + i;
const displayLabel = toEdgeLabel(i);
const tickLen = edgeBounds.has(i) ? tickLenLong : tickLenShort;
if (geo.horizontal) {
@@ -1408,7 +1428,7 @@ function renderCalibrationCanvas() {
ctx.textAlign = 'center';
ctx.textBaseline = seg.edge === 'top' ? 'bottom' : 'top';
ctx.fillText(String(ledIndex), tx, axisY - tickDir * 1);
ctx.fillText(String(displayLabel), tx, axisY - tickDir * 1);
} else {
const ty = geo.y1 + displayFraction * (geo.y2 - geo.y1);
const axisX = axisPos[seg.edge];
@@ -1421,7 +1441,7 @@ function renderCalibrationCanvas() {
ctx.textBaseline = 'middle';
ctx.textAlign = seg.edge === 'left' ? 'right' : 'left';
ctx.fillText(String(ledIndex), axisX - tickDir * 1, ty);
ctx.fillText(String(displayLabel), axisX - tickDir * 1, ty);
}
});
@@ -1752,6 +1772,8 @@ async function saveCalibration() {
span_bottom_end: spans.bottom?.end ?? 1,
span_left_start: spans.left?.start ?? 0,
span_left_end: spans.left?.end ?? 1,
skip_leds_start: parseInt(document.getElementById('cal-skip-start').value || 0),
skip_leds_end: parseInt(document.getElementById('cal-skip-end').value || 0),
};
try {
@@ -1913,10 +1935,11 @@ const calibrationTutorialSteps = [
{ selector: '#cal-top-leds', textKey: 'calibration.tip.led_count', position: 'bottom' },
{ selector: '.corner-bottom-left', textKey: 'calibration.tip.start_corner', position: 'right' },
{ selector: '.direction-toggle', textKey: 'calibration.tip.direction', position: 'bottom' },
{ selector: '.offset-control', textKey: 'calibration.tip.offset', position: 'bottom' },
{ selector: '#cal-offset', textKey: 'calibration.tip.offset', position: 'top' },
{ selector: '.edge-span-bar[data-edge="top"]', textKey: 'calibration.tip.span', position: 'bottom' },
{ selector: '.toggle-top', textKey: 'calibration.tip.test', position: 'top' },
{ selector: '.preview-screen-total', textKey: 'calibration.tip.toggle_inputs', position: 'top' }
{ selector: '.preview-screen-total', textKey: 'calibration.tip.toggle_inputs', position: 'top' },
{ selector: '#cal-skip-start', textKey: 'calibration.tip.skip_leds', position: 'top' }
];
const deviceTutorialSteps = [