pakutz79/etm-powersync-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
etm-powersync-app/assets/house.svg
Patrick Schurig ETM-Schurig d0a475a5d9 feat: refonte UI complète — design system EtmTokens + 4 écrans 
Design system
- lib/theme/etm_tokens.dart : source de vérité couleurs + typo (IBM Plex Sans/Mono)
- lib/models/nymea_user.dart : modèle utilisateur nymea avec permissions EtmRole
- app_theme.dart : ThemeData migré vers IBM Plex Sans + couleurs EtmTokens

Navigation & drawer
- DrawerMenuButton : logo vert gradient + ombre
- Bottom nav : EtmTokens.green actif, EtmTokens.muted inactif
- DrawerPanel 320 px, restyled navy + gradient header + badges rôle

Dashboard (01_dashboard.html)
- Hero système : status pill + 3 métriques mono + illustration maison CustomPainter
- EnergyFlowWidget : 4 nœuds animés CustomPainter (flèches directionnelles)
  · gridPower > 0 = soutirage → flèche Grid→Home (amber)
  · gridPower < 0 = injection → flèche Home→Grid (bleu)
- EVChargingCard restyled : badge En charge + puissance mono 38px + 3 modes + SOC bar
- KPI 2×2 : spark bars, trend line, progress bar
- Consommateurs principaux + Décisions d'Héos (chips motifs)
- Prévisions placeholder explicite

Énergie
- KPI 2×2 avec icônes + fond soft + IBM Plex Mono
- Sélecteur période vert pill
- LineChart double axe : kW (gauche) / SOC % (droite, normalisé)
- BarChart bilan énergétique Wh (amber/bleu)
- Section Météo & prévision placeholder

Things
- Grille 2 col à hauteur intrinsèque (pas de childAspectRatio)
- Bandeau statut global (simulation / connecté / hors-ligne)
- _CategoryCard : header icon+label+count, séparateur coloré, liste tous items
- thing_category.dart : couleurs migrées vers EtmTokens

A/C — Climatisation / Chauffage
- Thermostats pièces EN HAUT : actives expandées, éteintes compactes
- Températures actuelle → cible ± avec EtmTokens.mono
- Sélecteur mode 4 boutons (Chauf/Clim/Auto/Vent)
- Chip "Chauffe au solaire en ce moment" (Héos)
- Sources pilotées par Héos EN BAS :
  · PAC SG-Ready : 4 états (Bloqué grisé / Normal / Recommandé / Forcé) + toggle Auto
  · Chauffe-eau : Surplus/Éco/Boost + temp eau 52°→60°C
  · Climatiseur : pré-refroidissement anticipé + info solaire

Packages ajoutés : google_fonts, flutter_staggered_grid_view, flutter_secure_storage
Asset : assets/house.svg (illustration maison CustomPainter)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 21:51:51 +02:00

82 lines
4.5 KiB
XML
Raw Permalink Blame History

<svg viewBox="0 0 270 200" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#0d2b3b" stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round">
<defs>
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f6f9fb"/><stop offset="1" stop-color="#e7eef3"/></linearGradient>
<linearGradient id="side" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#dde6ec"/><stop offset="1" stop-color="#cdd9e1"/></linearGradient>
<linearGradient id="roof" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3a4a55"/><stop offset="1" stop-color="#2a363f"/></linearGradient>
<linearGradient id="panel" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#173a52"/><stop offset="1" stop-color="#0f2638"/></linearGradient>
</defs>
<!-- ground -->
<ellipse cx="138" cy="176" rx="118" ry="13" fill="#e9eef1" stroke="none"/>
<!-- ===== HEAT PUMP (PAC) right ===== -->
<g>
<rect x="223" y="138" width="34" height="30" rx="3" fill="url(#side)" stroke="#0d2b3b"/>
<line x1="227" y1="145" x2="253" y2="145" stroke="#9aabb4"/>
<line x1="227" y1="150" x2="253" y2="150" stroke="#9aabb4"/>
<line x1="227" y1="155" x2="253" y2="155" stroke="#9aabb4"/>
<circle cx="240" cy="156" r="8" fill="#eef3f6" stroke="#0d2b3b"/>
<path d="M240 150c3 2 3 4 0 6M240 162c-3-2-3-4 0-6M234 156c2-3 4-3 6 0M246 156c-2 3-4 3-6 0" stroke="#7a8b97" stroke-width="1"/>
</g>
<!-- ===== HOUSE BODY (two faces for depth) ===== -->
<!-- side face -->
<path d="M170 96 L200 84 L200 158 L170 168 Z" fill="url(#side)" stroke="#0d2b3b"/>
<!-- front face -->
<rect x="66" y="96" width="104" height="72" fill="url(#wall)" stroke="#0d2b3b"/>
<!-- ===== ROOF (gable, two slopes) ===== -->
<!-- front slope (carries PV) -->
<path d="M58 98 L118 56 L170 56 L122 98 Z" fill="url(#roof)" stroke="#0d2b3b"/>
<!-- right slope -->
<path d="M118 56 L148 44 L200 44 L170 56 Z" fill="#222d35" stroke="#0d2b3b"/>
<!-- side roof edge -->
<path d="M170 56 L200 44 L200 86 L170 98 Z" fill="#2f3b44" stroke="#0d2b3b"/>
<!-- ===== PV PANELS on front slope ===== -->
<g stroke="#2f6e96" stroke-width="0.8">
<path d="M70 92 L120 60 L162 60 L116 92 Z" fill="url(#panel)" stroke="#0d2b3b" stroke-width="1"/>
<!-- cell grid (regular lattice) -->
<path d="M81.5 92.0 L130.5 60.0 M93.0 92.0 L141.0 60.0 M104.5 92.0 L151.5 60.0 M86.7 81.3 L131.3 81.3 M103.3 70.7 L146.7 70.7" stroke="#2f6e96"/>
<!-- subtle amber sheen -->
<path d="M70 92 L120 60 L162 60 L116 92 Z" fill="#fec113" opacity="0.08" stroke="none"/>
</g>
<!-- ridge + soffit -->
<line x1="58" y1="98" x2="122" y2="98" stroke="#1a242b"/>
<!-- ===== DOOR + WINDOW (front) ===== -->
<rect x="86" y="128" width="22" height="40" rx="1.5" fill="#c98a4a" stroke="#0d2b3b"/>
<circle cx="103" cy="148" r="1.4" fill="#0d2b3b" stroke="none"/>
<rect x="124" y="112" width="32" height="22" rx="1.5" fill="#bfe2f3" stroke="#0d2b3b"/>
<line x1="140" y1="112" x2="140" y2="134" stroke="#0d2b3b" stroke-width="0.8"/>
<line x1="124" y1="123" x2="156" y2="123" stroke="#0d2b3b" stroke-width="0.8"/>
<!-- ===== WALLBOX (borne) on front-left wall ===== -->
<rect x="70" y="120" width="13" height="22" rx="3" fill="#31a3dd" stroke="#0d2b3b"/>
<rect x="73.5" y="124" width="6" height="7" rx="1" fill="#eaf6fc" stroke="none"/>
<circle cx="76.5" cy="137" r="1.6" fill="#eaf6fc" stroke="none"/>
<!-- cable to car -->
<path d="M76 142 C70 150 58 150 52 152" stroke="#0d2b3b" stroke-width="1.2"/>
<!-- ===== EV CAR (front-left) ===== -->
<g>
<path d="M8 156 Q10 142 26 141 L42 141 Q54 142 58 152 L62 154 Q66 156 62 161 L10 161 Q4 160 6 154 Z" fill="#dbe4ea" stroke="#0d2b3b"/>
<path d="M18 144 L40 144 L48 152 L14 152 Z" fill="#bfe2f3" stroke="#0d2b3b" stroke-width="0.9"/>
<circle cx="20" cy="161" r="6" fill="#2a363d" stroke="#0d2b3b"/><circle cx="20" cy="161" r="2.2" fill="#9aabb4" stroke="none"/>
<circle cx="50" cy="161" r="6" fill="#2a363d" stroke="#0d2b3b"/><circle cx="50" cy="161" r="2.2" fill="#9aabb4" stroke="none"/>
</g>
<!-- ===== thin labels ===== -->
<g stroke="none" fill="#6b7d88" font-family="IBM Plex Mono, monospace" font-size="8" font-weight="600">
<text x="150" y="33">PV</text>
<text x="225" y="132">PAC</text>
<text x="34" y="133">BORNE</text>
</g>
<g stroke="#c4ced4" stroke-width="0.8">
<line x1="155" y1="35" x2="140" y2="55"/>
<line x1="236" y1="134" x2="240" y2="138"/>
<line x1="58" y1="131" x2="70" y2="128"/>
</g>
</svg>
Reference in New Issue View Git Blame Copy Permalink