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

Move overlay toggle into calibration visual editor, add tutorial step

Browse Source 
Place the overlay button inside the preview screen as a pill toggle,
add it as a tutorial step that auto-skips in device calibration mode.
Tutorial engine now skips hidden/missing targets in both directions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-25 00:50:39 +03:00
parent f2f67493b1
commit 68ce394ccc
6 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
server/src/wled_controller/static/js/features/tutorials.js
View File

@@ -11,6 +11,7 @@ const calibrationTutorialSteps = [
{ selector: '.direction-toggle', textKey: 'calibration.tip.direction', position: 'bottom' },
{ selector: '.edge-span-bar[data-edge="top"]', textKey: 'calibration.tip.span', position: 'bottom' },
{ selector: '.toggle-top', textKey: 'calibration.tip.test', position: 'top' },
{ selector: '#calibration-overlay-btn', textKey: 'calibration.tip.overlay', position: 'bottom' },
{ selector: '.preview-screen-total', textKey: 'calibration.tip.toggle_inputs', position: 'top' },
{ selector: '.preview-screen-border-width', textKey: 'calibration.tip.border_width', position: 'bottom' },
{ selector: '#cal-offset', textKey: 'calibration.tip.offset', position: 'top' },
@@ -55,7 +56,13 @@ export function startCalibrationTutorial() {
overlayId: 'tutorial-overlay',
mode: 'absolute',
container: container,
resolveTarget: (step) => document.querySelector(step.selector)
resolveTarget: (step) => {
const el = document.querySelector(step.selector);
if (!el) return null;
// Skip elements hidden via display:none (e.g. overlay btn in device mode)
if (el.style.display === 'none' || getComputedStyle(el).display === 'none') return null;
return el;
}
});
}
@@ -102,11 +109,11 @@ export function tutorialNext() {
export function tutorialPrev() {
if (!activeTutorial) return;
if (activeTutorial.step > 0) {
showTutorialStep(activeTutorial.step - 1);
showTutorialStep(activeTutorial.step - 1, -1);
}
}
function showTutorialStep(index) {
function showTutorialStep(index, direction = 1) {
if (!activeTutorial) return;
activeTutorial.step = index;
const step = activeTutorial.steps[index];
@@ -119,7 +126,13 @@ function showTutorialStep(index) {
});
const target = activeTutorial.resolveTarget(step);
if (!target) return;
if (!target) {
// Auto-skip hidden/missing targets in the current direction
const next = index + direction;
if (next >= 0 && next < activeTutorial.steps.length) showTutorialStep(next, direction);
else closeTutorial();
return;
}
target.classList.add('tutorial-target');
if (isFixed) target.style.zIndex = '10001';