Dashboard V7 — nový layout a vizuální kontrola
Cyklus redesignu V3.7 → V4 → V5 → V6 → V7 je dokončený. Dashboard, který dnes běží na třech obrazovkách (32" monitor 2880×1800, 14" notebook 1920×1080 a RPi kiosek WaveShare 1024×600), prošel během dvou týdnů šesti kompletními iteracemi.
Tenhle příspěvek shrnuje co se změnilo, co fungovalo, co ne a proč nakonec dashboard work pauzujeme.
Klíčové změny ve V7
- Sidebar 240px jako primární navigace. Pod 1280px collapses na 64px (jen ikony), pod 768px se schová úplně do hamburger menu.
- 5 status pills v topbaru: REŽIM, SECURITY, ALARM, AI, WEATHER. Každá s vlastní barvou stavu (zelená OK / žlutá warning / červená alarm) a tooltipem s detailem.
- Premium CSS layer (~20 KB). Glass cards s backdrop-blur, subtle gradient borders, glow accenty na hover, jednotná typografie přes všech 6 dashboardů.
- Zachované hard locks: 309+ onclick eventů, 200 flows, 136 scripts. Žádné JS handlery se nepřejmenovaly, žádná ID se neměnila — redesign je čistě vizuální.
Tři obrazovky, tři varianty
Sdílená architektura (stejná HTML struktura, stejné JS handlery), různé rozlišení a optimalizace pro fyzický kontext:
- 2880×1800 (32" monitor) — full sidebar, všech 14 stránek, detailní zone views, real-time grafy.
- 1920×1080 (14" notebook) — sidebar collapses na 64px pod breakpointem, layout prioritizuje denní pohled.
- 1024×600 (RPi kiosek) — compact 4-col grid, 8 zúžených stránek, větší dotykové cíle (min 44px), žádné hover stavy.
Co fungovalo
Konvence v5-* ID prefix. Po V5 jsme zavedli,
že nové komponenty mají prefix podle iterace, ve které vznikly. Při
V7 review okamžitě vidíš, co je čerstvé a co stabilní — a je jasné,
že staré ID (bez prefixu) se nesahají.
Shell math před detailem. Každou iteraci jsme začali výpočtem grid systému (kolik kolonek, jaké breakpointy, jak se redukuje) PŘED kreslením komponent. Šetří to půl dne přepracovávání.
Hard locks list. Před každým redesignem se sepsal seznam ID a handlerů které se NESMÍ změnit. Pak validační script po redesignu projde HTML a porovná. Žádné regrese.
Co nefungovalo
V3.7 → V4 jako single-shot. První pokus o velký skok (sidebar + topbar + nový grid + nová typografie) všechno najednou. Výsledek byl rozbitý, museli jsme se vrátit a iterovat menší kroky.
"Vše dobře vypadá v Figmě." Real device test je
nezbytný. RPi 1024×600 vypadal v simulaci 1280×800 ok, ale na reálném
WaveShare displeji byl vertikálně squeezed. Až po fyzickém testu
vznikla varianta smart_home_v3_rpi_1024.html.
Proč dashboard pauzujeme
Dashboard je ve stavu kde funguje, vypadá dobře a hard locks drží. Marginal value každé další iterace klesá — další úpravy jsou už jen micro-tuning na úrovni jednotlivých stránek (Wave A/B/C v backlogu).
Mezitím se objevila vyšší priorita: Brain Guardian V1. Meta-vrstva nad celým systémem která detekuje ghost values, ověřuje očekávaný stav a blokuje rozbitá nasazení. Tam je teď reálná architektonická value.
Dashboard work paused, ne abandoned. Wave A/B/C zůstává v backlogu pro page-by-page micro-iterations až bude prostor.
Co dál
- Brain Guardian 24h soak review
- Bug E root-cause fix v
sh_priority_engine_v1 - Heating Fáze C — AI vrstvy (preWakeBoost, weatherAdjust, occupancyBonus)
- Aqara P2 SNZB-04 replacement
Detailní changelog konkrétních CSS pravidel a HTML struktur je interní dokumentace — tady jen high-level pohled na to, co se v tom týdnu vlastně dělo.