fix(calibration-wizard): all-provider discovery + spatial corner picker

- Setup wizard discovery now scans every device provider, not just WLED:
  drop the hardcoded device_type=wled filter so the backend's parallel
  all-provider scan runs (Adalight, DDP, OpenRGB, BLE, DMX, etc). The list
  UI was already multi-type aware (per-type icon + badge).
- Auto-calibration corner picker: finish the unfinished step. The empty
  .autocal-corner-glyph + dead --top-left/etc modifier classes now render a
  mini-screen frame with the matching corner lit, so users map the physical
  lit LED to a button at a glance. Hover/focus lights the corner dot.
- Remove dead empty CSS rule for #wizard-rerun-btn.
This commit is contained in:
2026-06-08 17:59:56 +03:00
parent d32961085d
commit dd43f3836d
2 changed files with 36 additions and 6 deletions
+33 -5
View File
@@ -2364,9 +2364,40 @@ textarea:focus-visible {
background: color-mix(in srgb, var(--primary-color) 18%, var(--card-bg));
}
/* Spatial corner indicator: a mini "screen" frame with the matching
corner lit, so the user maps the physical lit LED to a button at a glance. */
.autocal-corner-glyph {
font-size: 1.4rem;
line-height: 1;
position: relative;
width: 46px;
height: 30px;
border: 1.5px solid var(--border-color);
border-radius: 4px;
background: color-mix(in srgb, var(--primary-color) 4%, var(--card-bg));
transition: border-color 0.15s, background 0.15s;
}
.autocal-corner-glyph::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--border-color);
transition: background 0.15s, box-shadow 0.15s;
}
.autocal-corner-btn--top-left .autocal-corner-glyph::after { top: 4px; left: 4px; }
.autocal-corner-btn--top-right .autocal-corner-glyph::after { top: 4px; right: 4px; }
.autocal-corner-btn--bottom-left .autocal-corner-glyph::after { bottom: 4px; left: 4px; }
.autocal-corner-btn--bottom-right .autocal-corner-glyph::after { bottom: 4px; right: 4px; }
/* Light the dot on hover/focus so the active target reads as "this corner". */
.autocal-corner-btn:hover .autocal-corner-glyph,
.autocal-corner-btn:focus-visible .autocal-corner-glyph {
border-color: var(--primary-color);
}
.autocal-corner-btn:hover .autocal-corner-glyph::after,
.autocal-corner-btn:focus-visible .autocal-corner-glyph::after {
background: var(--primary-color);
box-shadow: 0 0 7px color-mix(in srgb, var(--primary-color) 75%, transparent);
}
/* Direction selection grid (1x2) */
@@ -3008,9 +3039,6 @@ textarea:focus-visible {
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Toolbar wizard re-run button */
.header-btn[id="wizard-rerun-btn"] { }
@media (prefers-reduced-motion: reduce) {
.wizard-progress-fill,
.wizard-pip,
@@ -244,7 +244,9 @@ async function _startDiscovery(): Promise<void> {
_state.discoveredDevices = [];
_renderStep();
try {
const data = await apiGet<{ devices?: DiscoveredDevice[] }>('/devices/discover?timeout=3&device_type=wled');
// Omit device_type so the backend scans every provider (WLED, Adalight,
// DDP, OpenRGB, BLE, …) in parallel — not just WLED.
const data = await apiGet<{ devices?: DiscoveredDevice[] }>('/devices/discover?timeout=3');
_state.discoveredDevices = data.devices || [];
} catch {
_state.discoveredDevices = [];