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

Add interactive tutorial system for calibration and device cards
Some checks failed
Validate / validate (push) Failing after 8s
Details

Browse Source 
Generic tutorial engine supports absolute (modal) and fixed (viewport)
positioning modes with spotlight backdrop, pulsing ring, and tooltip.
Calibration tutorial covers LED count, corner, direction, offset, span,
test, and toggle inputs. Device tutorial walks through card controls.
Auto-triggers on first calibration open and first device add.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-09 04:51:56 +03:00
parent fa322ee0ce
commit 2a085e63a0
5 changed files with 526 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -80,17 +80,11 @@
<div class="modal-content" style="max-width: 700px;">
<div class="modal-header">
<h2 data-i18n="calibration.title">📐 LED Calibration</h2>
<button class="tutorial-trigger-btn" onclick="startCalibrationTutorial()" data-i18n-title="calibration.tutorial.start" title="Start tutorial">?</button>
<button class="modal-close-btn" onclick="closeCalibrationModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
<input type="hidden" id="calibration-device-id">
<ul class="section-tip">
<li data-i18n="calibration.tip.led_count">Enter LED count per edge</li>
<li data-i18n="calibration.tip.start_corner">Click a corner to set the start position</li>
<li data-i18n="calibration.tip.span">Drag green bars to adjust coverage span</li>
<li data-i18n="calibration.tip.test">Click an edge to toggle test LEDs</li>
<li data-i18n="calibration.tip.toggle_inputs">Click total LED count to toggle edge inputs</li>
</ul>
<!-- Interactive Preview with integrated LED inputs and test toggles -->
<div style="margin-bottom: 12px; padding: 0 24px;">
<div class="calibration-preview">
@@ -174,6 +168,23 @@
</div>
<!-- Tutorial Overlay -->
<div id="tutorial-overlay" class="tutorial-overlay">
<div class="tutorial-backdrop"></div>
<div class="tutorial-ring"></div>
<div class="tutorial-tooltip">
<div class="tutorial-tooltip-header">
<span class="tutorial-step-counter"></span>
<button class="tutorial-close-btn" onclick="closeTutorial()">&times;</button>
</div>
<p class="tutorial-tooltip-text"></p>
<div class="tutorial-tooltip-nav">
<button class="tutorial-prev-btn" onclick="tutorialPrev()">&#8592;</button>
<button class="tutorial-next-btn" onclick="tutorialNext()">&#8594;</button>
</div>
</div>
</div>
<div id="calibration-error" class="error-message" style="display: none;"></div>
</div>
<div class="modal-footer">
@@ -310,6 +321,23 @@
</div>
<!-- Device Tutorial Overlay (viewport-level) -->
<div id="device-tutorial-overlay" class="tutorial-overlay tutorial-overlay-fixed">
<div class="tutorial-backdrop"></div>
<div class="tutorial-ring"></div>
<div class="tutorial-tooltip">
<div class="tutorial-tooltip-header">
<span class="tutorial-step-counter"></span>
<button class="tutorial-close-btn" onclick="closeTutorial()">&times;</button>
</div>
<p class="tutorial-tooltip-text"></p>
<div class="tutorial-tooltip-nav">
<button class="tutorial-prev-btn" onclick="tutorialPrev()">&#8592;</button>
<button class="tutorial-next-btn" onclick="tutorialNext()">&#8594;</button>
</div>
</div>
</div>
<script src="/static/app.js"></script>
<script>
// Initialize theme