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

Add inline calibration canvas with tick labels, direction arrows, and corner improvements
Some checks failed
Validate / validate (push) Failing after 8s
Details

Browse Source 
Replace fullscreen pixel preview with a canvas overlay inside the calibration
modal that shows LED index ticks, direction chevrons, and interactive corner
start position buttons. Fix corner hover centering and disable grow animation
for the active corner.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-08 04:20:45 +03:00
parent 9eddaeafc3
commit cf770440c0
5 changed files with 192 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,22 +100,18 @@
<!-- Clickable edge bars with LED count inputs -->
<div class="preview-edge edge-top" onclick="toggleTestEdge('top')">
<span>T</span>
<input type="number" id="cal-top-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
</div>
<div class="preview-edge edge-right" onclick="toggleTestEdge('right')">
<span>R</span>
<input type="number" id="cal-right-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
</div>
<div class="preview-edge edge-bottom" onclick="toggleTestEdge('bottom')">
<span>B</span>
<input type="number" id="cal-bottom-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
</div>
<div class="preview-edge edge-left" onclick="toggleTestEdge('left')">
<span>L</span>
<input type="number" id="cal-left-leds" class="edge-led-input" min="0" value="0"
oninput="updateCalibrationPreview()" onclick="event.stopPropagation()">
</div>
@@ -125,6 +121,9 @@
<div class="preview-corner corner-top-right" onclick="setStartPosition('top_right')">●</div>
<div class="preview-corner corner-bottom-left" onclick="setStartPosition('bottom_left')">●</div>
<div class="preview-corner corner-bottom-right" onclick="setStartPosition('bottom_right')">●</div>
<!-- Canvas overlay for ticks, arrows, start label -->
<canvas id="calibration-preview-canvas"></canvas>
</div>
<p class="preview-hint" data-i18n="calibration.preview.click_hint">Click an edge to toggle test LEDs on/off</p>
</div>
@@ -156,7 +155,6 @@
<div id="calibration-error" class="error-message" style="display: none;"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="showPixelPreview(document.getElementById('calibration-device-id').value)" data-i18n="preview.button" style="margin-right: auto;">Preview</button>
<button class="btn btn-secondary" onclick="closeCalibrationModal()" data-i18n="calibration.button.cancel">Cancel</button>
<button class="btn btn-primary" onclick="saveCalibration()" data-i18n="calibration.button.save">Save</button>
</div>
@@ -285,16 +283,6 @@
</div>
</div>
<!-- Pixel Layout Preview Overlay -->
<div id="pixel-preview-overlay" class="pixel-preview-overlay" style="display: none;">
<div class="pixel-preview-header">
<span class="pixel-preview-title" data-i18n="preview.title">Pixel Layout Preview</span>
<span id="pixel-preview-device-name" class="pixel-preview-device-name"></span>
<button class="pixel-preview-close" onclick="closePixelPreview()" title="Close">&#x2715;</button>
</div>
<canvas id="pixel-preview-canvas"></canvas>
<div class="pixel-preview-legend" id="pixel-preview-legend"></div>
</div>
<script src="/static/app.js"></script>
<script>