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

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

@@ -829,10 +829,21 @@ input:-webkit-autofill:focus {
width: 100%;
max-width: 500px;
aspect-ratio: 16 / 10;
margin: 0 auto;
margin: 20px auto;
background: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: 8px;
overflow: visible;
}
#calibration-preview-canvas {
position: absolute;
top: -18px;
left: -32px;
width: calc(100% + 64px);
height: calc(100% + 36px);
pointer-events: none;
z-index: 3;
}
.preview-screen {
@@ -918,8 +929,10 @@ input:-webkit-autofill:focus {
.edge-led-input {
width: 46px;
padding: 3px 2px;
padding: 2px 2px;
font-size: 12px;
box-sizing: border-box;
max-height: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
@@ -956,6 +969,7 @@ input:-webkit-autofill:focus {
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: rgba(128, 128, 128, 0.4);
cursor: pointer;
z-index: 5;
@@ -968,6 +982,10 @@ input:-webkit-autofill:focus {
transform: scale(1.2);
}
.preview-corner.active:hover {
transform: none;
}
.preview-corner.active {
color: #4CAF50;
text-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
@@ -1036,91 +1054,3 @@ input:-webkit-autofill:focus {
}
}
/* Pixel Layout Preview Overlay */
.pixel-preview-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #111111;
z-index: 3000;
display: flex;
flex-direction: column;
animation: fadeIn 0.2s ease-out;
}
.pixel-preview-header {
display: flex;
align-items: center;
padding: 12px 20px;
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #333;
flex-shrink: 0;
}
.pixel-preview-title {
font-size: 1.1rem;
font-weight: 600;
color: #e0e0e0;
}
.pixel-preview-device-name {
font-size: 0.9rem;
color: #999;
margin-left: 12px;
}
.pixel-preview-close {
margin-left: auto;
background: none;
border: 1px solid #555;
color: #e0e0e0;
font-size: 1.2rem;
width: 36px;
height: 36px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
}
.pixel-preview-close:hover {
background: rgba(244, 67, 54, 0.3);
border-color: #f44336;
}
#pixel-preview-canvas {
flex: 1;
width: 100%;
min-height: 0;
}
.pixel-preview-legend {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 10px 20px;
background: rgba(0, 0, 0, 0.6);
border-top: 1px solid #333;
flex-shrink: 0;
flex-wrap: wrap;
}
.pixel-preview-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: #ccc;
}
.pixel-preview-legend-swatch {
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.3);
}