3 Dashboards S3-HMI 480×480 — choix UX selon usage

3 propositions de dashboard pour le panel Guition 4848S040 (S3-HMI 480×480 carré), avec 3 partis pris UX différents. L'idée : exposer un selector dans config.html pour que l'utilisateur choisisse celui qui colle à son usage. Les 3 panneaux ci-dessous reflètent le même état système simultanément (joue avec les contrôles pour voir leur comportement). Pour info — le panel Waveshare 3.16" (820×320 landscape) a déjà sa propre maquette dans s3-tdisplay316-dashboard-mockup.html, qui est l'équivalent du Style A pour ce form factor.

A — Flux Tesla
Diagramme énergétique 5 nœuds en losange · pour utilisateur final
WATT-GUARDIAN 192.168.1.42 WiFi MQTT 14:32:08
Solaire
4220W
Maison
2980W
Réseau
1240W
injection
Dimmer
62%
1850 W · 54°C
Batterie 78%
320W
charge

Mode configuration

WiFi : WATT-GUARDIAN-D024

http://192.168.4.1

B — Data Dashboard
4 quadrants compacts + sparkline · pour tech-savvy / debug
WATT-GUARDIAN 192.168.1.42 WiFi -54 14:32:08
Réseau
1240W
↓ injection — surplus routé
Solaire
4220W
prod instantanée — Enphase
Watt 60s
min-1200
moy-940
max-780
stab92%
Dimmer
62%
1850 W routés · 54°C · L+0

Mode configuration

WiFi : WATT-GUARDIAN-D024

http://192.168.4.1

C — Minimaliste glanceable
1 méga-chiffre + 4 satellites · lisible 3m · usage mural
WATT-GUARDIAN 14:32
Prod 4220
Conso 2980
Auto-conso 14.2
Dimmer 62%
1240
watts
↓ injection

Mode configuration

WiFi : WATT-GUARDIAN-D024

Comparatif des 3 styles

CritèreA — Flux TeslaB — Data DashboardC — Minimaliste
Densité infoMoyenneTrès élevéeBasse
Distance lecture1 m0.5 m3 m
Public cibleFamille / utilisateur finalTech-savvy / installerSalon / mur (déco)
AnimationChevrons flux (4 anim continues)Sparkline rolling 60sStatique (changements lents)
Adaptatif modeSolaire caché si ShellyQuadrant solaire cachéStat "Prod" cachée si Shelly
Effort impl LVGL~600 lignes (lv_line + lv_anim)~500 lignes (canvas sparkline)~250 lignes (3 fonts)
Coût rendu / refreshÉlevé (4 anims + 5 nœuds)Moyen (sparkline append + 4 quadrants)Très faible (1 label central)

Implémentation côté firmware

Caractères spéciaux

Les icônes du mockup HTML (☀ ⌂ ⚡ ▮ ↓) ne sont pas dans la font Montserrat utilisée par LVGL. À l'implémentation firmware, substituer par les symboles natifs LVGL (FontAwesome embarqué) :