diff --git a/server/src/ledgrab/static/css/components.css b/server/src/ledgrab/static/css/components.css index a8b1466..2f390dc 100644 --- a/server/src/ledgrab/static/css/components.css +++ b/server/src/ledgrab/static/css/components.css @@ -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, diff --git a/server/src/ledgrab/static/js/features/setup-wizard.ts b/server/src/ledgrab/static/js/features/setup-wizard.ts index 94a8338..a218390 100644 --- a/server/src/ledgrab/static/js/features/setup-wizard.ts +++ b/server/src/ledgrab/static/js/features/setup-wizard.ts @@ -244,7 +244,9 @@ async function _startDiscovery(): Promise { _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 = [];