Skip to content

Commit a88d8e9

Browse files
RickDnampsclaude
RickDnamps
and
claude
committed
Fix: reset_animations() ne doit pas effacer _ok_prev_bus_color
Sans ce fix, draw_ok() appelait reset_animations() qui remettait _ok_prev_bus_color à None → color_changed toujours True → anneau et label bus redessinés à chaque BUS update même sans changement. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 5e26102 commit a88d8e9

2 files changed

Lines changed: 356 additions & 4 deletions

File tree

‎docs/rp2040-mockup.html‎

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>RP2040 Screens — R2-D2 Mockup</title>
6+
<style>
7+
body { background: #0a0e1a; color: #ccc; font-family: 'Courier New', monospace; margin: 0; padding: 20px; }
8+
h1 { color: #00aaff; text-align: center; letter-spacing: 3px; font-size: 18px; margin-bottom: 4px; }
9+
.subtitle { text-align: center; color: #445; font-size: 12px; margin-bottom: 30px; }
10+
.row { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin-bottom: 40px; }
11+
.screen-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
12+
.screen-label { color: #00aaff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
13+
.screen-sub { color: #556; font-size: 10px; text-align: center; max-width: 200px; }
14+
.screen-cmd { color: #334; font-size: 9px; font-family: monospace; background: #111; padding: 2px 6px; border-radius: 3px; margin-top: 2px; }
15+
16+
/* Round 240x240 screen simulation */
17+
.lcd {
18+
width: 200px; height: 200px;
19+
border-radius: 50%;
20+
background: #000;
21+
position: relative;
22+
overflow: hidden;
23+
display: flex; align-items: center; justify-content: center;
24+
box-shadow: 0 0 20px rgba(0,0,0,0.8), inset 0 0 4px rgba(255,255,255,0.05);
25+
}
26+
.ring {
27+
position: absolute; inset: 0; border-radius: 50%;
28+
border-style: solid;
29+
pointer-events: none;
30+
}
31+
32+
/* Screen content */
33+
.content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 4px; z-index: 1; }
34+
.title-sm { font-size: 9px; letter-spacing: 2px; }
35+
.title-md { font-size: 11px; letter-spacing: 2px; font-weight: bold; }
36+
.title-lg { font-size: 20px; letter-spacing: 1px; font-weight: bold; }
37+
.title-xl { font-size: 28px; font-weight: bold; }
38+
.dim { color: #445; font-size: 8px; letter-spacing: 1px; }
39+
.bar-wrap { width: 130px; height: 10px; background: #1a1a1a; border-radius: 2px; border: 1px solid #333; overflow: hidden; margin: 2px 0; }
40+
.bar-fill { height: 100%; border-radius: 2px; }
41+
.icon { font-size: 24px; }
42+
.sep { width: 60px; height: 1px; background: #223; margin: 3px 0; }
43+
44+
/* Flash animation */
45+
@keyframes flash { 0%,100%{opacity:1} 50%{opacity:0.2} }
46+
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
47+
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
48+
@keyframes blink { 0%,100%{opacity:1} 40%,60%{opacity:0} }
49+
50+
.flash { animation: flash 0.8s ease-in-out infinite; }
51+
.pulse-ring { animation: pulse 2s ease-in-out infinite; }
52+
53+
/* Antenna icon */
54+
.antenna { position: relative; width: 30px; height: 30px; }
55+
.antenna-base { width: 2px; height: 14px; background: currentColor; margin: 0 auto; }
56+
.antenna-waves span {
57+
position: absolute; border-radius: 50%;
58+
border: 1.5px solid currentColor;
59+
animation: blink 1.2s ease-in-out infinite;
60+
}
61+
.antenna-waves span:nth-child(1) { width: 10px; height: 6px; top: 2px; left: 10px; animation-delay: 0s; }
62+
.antenna-waves span:nth-child(2) { width: 18px; height: 10px; top: 0px; left: 6px; animation-delay: 0.2s; }
63+
.antenna-waves span:nth-child(3) { width: 26px; height: 14px; top: -2px; left: 2px; animation-delay: 0.4s; }
64+
65+
/* Lock icon */
66+
.lock { width: 22px; height: 20px; position: relative; }
67+
.lock-body { width: 22px; height: 14px; background: currentColor; border-radius: 3px; position: absolute; bottom: 0; }
68+
.lock-arch { width: 14px; height: 10px; border: 3px solid currentColor; border-bottom: none; border-radius: 7px 7px 0 0; position: absolute; top: 0; left: 4px; }
69+
70+
.change-btn {
71+
background: #00aaff22; border: 1px solid #00aaff44; color: #00aaff;
72+
padding: 6px 16px; border-radius: 4px; cursor: pointer; font-size: 10px;
73+
letter-spacing: 2px; margin-top: 6px; font-family: monospace;
74+
}
75+
.change-btn:hover { background: #00aaff33; }
76+
77+
.section-title { color: #334; text-align: center; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin: 10px 0 6px; }
78+
hr { border: none; border-top: 1px solid #111; margin: 20px 40px; }
79+
.note { background: #0d1520; border-left: 3px solid #00aaff; padding: 12px 16px; border-radius: 4px; font-size: 11px; color: #778; max-width: 900px; margin: 0 auto 20px; line-height: 1.8; }
80+
.note strong { color: #aaa; }
81+
</style>
82+
</head>
83+
<body>
84+
85+
<h1>RP2040 · R2-D2 DIAGNOSTIC COCKPIT</h1>
86+
<p class="subtitle">Proposition redesign — 6 écrans simples et fiables</p>
87+
88+
<div class="note">
89+
<strong>Philosophie :</strong> Plus de tracking individuel des 7 items de boot (source de bugs).
90+
Chaque écran correspond à <strong>un état clair reçu via DISP:</strong> — le firmware n'anticipe plus, il affiche ce qu'on lui dit.
91+
Swipe gauche/droite disponible uniquement en état OK (navigue vers TELEM puis BOOT LOG).
92+
</div>
93+
94+
<!-- ROW 1: Normal states -->
95+
<p class="section-title">États normaux</p>
96+
<div class="row">
97+
98+
<!-- BOOTING -->
99+
<div class="screen-wrap">
100+
<div class="lcd" style="background:radial-gradient(circle, #0d0d0d 60%, #050505)">
101+
<div class="ring" style="border: 8px solid #ff8800; opacity:0.8;"></div>
102+
<div class="content">
103+
<div class="title-sm" style="color:#ff8800">SYSTEM STATUS:</div>
104+
<div class="title-sm" style="color:#ff8800">STARTING UP</div>
105+
<div style="height:8px"></div>
106+
<svg width="32" height="32" viewBox="0 0 32 32" style="animation:spin 2s linear infinite; color:#ff8800">
107+
<circle cx="16" cy="16" r="13" fill="none" stroke="#ff8800" stroke-width="2.5" stroke-dasharray="50 30" stroke-linecap="round"/>
108+
</svg>
109+
<div style="height:6px"></div>
110+
<div class="dim">BOOT...</div>
111+
</div>
112+
</div>
113+
<div class="screen-label">BOOTING</div>
114+
<div class="screen-cmd">DISP:BOOT:START</div>
115+
<div class="screen-sub">Spinner orange — remplace les 7 items buggy</div>
116+
</div>
117+
118+
<!-- OK / IDLE -->
119+
<div class="screen-wrap">
120+
<div class="lcd" style="background:radial-gradient(circle, #0a1008 60%, #050805)">
121+
<div class="ring" style="border: 4px solid #32c850;"></div>
122+
<div class="content">
123+
<div class="title-sm" style="color:#32c850">SYSTEM STATUS:</div>
124+
<div class="title-sm" style="color:#32c850">OPERATIONAL</div>
125+
<div class="sep"></div>
126+
<div style="font-size:9px; color:#32c850; letter-spacing:1px;">v228219f</div>
127+
<div style="height:4px"></div>
128+
<div style="font-size:8px; color:#445; letter-spacing:1px;">UART BUS HEALTH</div>
129+
<div class="bar-wrap">
130+
<div class="bar-fill" style="width:98%; background:#32c850;"></div>
131+
</div>
132+
<div style="font-size:10px; color:#32c850; margin-top:1px;">98.5%</div>
133+
<div class="sep"></div>
134+
<div class="dim">◁ swipe ▷ TELEM / LOG</div>
135+
</div>
136+
</div>
137+
<div class="screen-label">IDLE / OK</div>
138+
<div class="screen-cmd">DISP:READY:v228219f + DISP:BUS:98.5</div>
139+
<div class="screen-sub">Écran principal opérationnel avec santé bus temps réel</div>
140+
</div>
141+
142+
<!-- OK - BUS WARN -->
143+
<div class="screen-wrap">
144+
<div class="lcd" style="background:radial-gradient(circle, #100d08 60%, #060505)">
145+
<div class="ring" style="border: 4px solid #ff8800;"></div>
146+
<div class="content">
147+
<div class="title-sm" style="color:#32c850">SYSTEM STATUS:</div>
148+
<div class="title-sm" style="color:#32c850">OPERATIONAL</div>
149+
<div class="sep"></div>
150+
<div style="font-size:9px; color:#32c850; letter-spacing:1px;">v228219f</div>
151+
<div style="height:4px"></div>
152+
<div style="font-size:8px; color:#ff8800; letter-spacing:1px;">⚠ UART BUS HEALTH</div>
153+
<div class="bar-wrap">
154+
<div class="bar-fill" style="width:62%; background:#ff8800;"></div>
155+
</div>
156+
<div style="font-size:10px; color:#ff8800; margin-top:1px;">62.0%</div>
157+
<div class="sep"></div>
158+
<div class="dim">PARASITES DETECTES</div>
159+
</div>
160+
</div>
161+
<div class="screen-label">OK + BUS WARN</div>
162+
<div class="screen-cmd">DISP:BUS:62.0</div>
163+
<div class="screen-sub">Barre orange + warning quand bus &lt; 80% (parasites Mirabel)</div>
164+
</div>
165+
166+
</div>
167+
168+
<hr>
169+
170+
<!-- ROW 2: Network states -->
171+
<p class="section-title">États réseau (WiFi Watchdog)</p>
172+
<div class="row">
173+
174+
<!-- NET SCANNING -->
175+
<div class="screen-wrap">
176+
<div class="lcd" style="background:radial-gradient(circle, #080a10 60%, #050507)">
177+
<div class="ring" style="border: 6px solid #0088ff; animation:pulse 1.5s ease-in-out infinite;"></div>
178+
<div class="content">
179+
<div class="title-sm" style="color:#0088ff">NETWORK</div>
180+
<div style="height:6px"></div>
181+
<!-- Antenna SVG -->
182+
<svg width="36" height="32" viewBox="0 0 36 32" style="color:#0088ff;">
183+
<line x1="18" y1="32" x2="18" y2="16" stroke="#0088ff" stroke-width="2.5" stroke-linecap="round"/>
184+
<path d="M10 20 Q18 10 26 20" fill="none" stroke="#0088ff" stroke-width="2" stroke-linecap="round" style="animation:blink 1s 0.1s infinite ease-in-out; opacity:1"/>
185+
<path d="M5 26 Q18 6 31 26" fill="none" stroke="#0088ff" stroke-width="2" stroke-linecap="round" style="animation:blink 1s 0.3s infinite ease-in-out;"/>
186+
<path d="M1 30 Q18 2 35 30" fill="none" stroke="#0088ff" stroke-width="1.5" stroke-linecap="round" style="animation:blink 1s 0.5s infinite ease-in-out;"/>
187+
<circle cx="18" cy="32" r="2" fill="#0088ff"/>
188+
</svg>
189+
<div style="height:6px"></div>
190+
<div class="title-sm" style="color:#0088ff">SCANNING...</div>
191+
<div style="height:4px"></div>
192+
<div class="dim">MASTER AP NOT FOUND</div>
193+
<div class="dim">ATTEMPT 1/5</div>
194+
</div>
195+
</div>
196+
<div class="screen-label">NET SCANNING</div>
197+
<div class="screen-cmd">DISP:NET:SCANNING:1</div>
198+
<div class="screen-sub">Antenne avec ondes pulsantes — Level 1 watchdog</div>
199+
</div>
200+
201+
<!-- NET CONNECTING AP -->
202+
<div class="screen-wrap">
203+
<div class="lcd" style="background:radial-gradient(circle, #080a10 60%, #050507)">
204+
<div class="ring" style="border: 6px solid #0088ff;"></div>
205+
<div class="content">
206+
<div class="title-sm" style="color:#0088ff">NETWORK</div>
207+
<div style="height:6px"></div>
208+
<svg width="36" height="32" viewBox="0 0 36 32">
209+
<line x1="18" y1="32" x2="18" y2="16" stroke="#0088ff" stroke-width="2.5" stroke-linecap="round"/>
210+
<path d="M10 20 Q18 10 26 20" fill="none" stroke="#0088ff" stroke-width="2" stroke-linecap="round"/>
211+
<path d="M5 26 Q18 6 31 26" fill="none" stroke="#0088ff" stroke-width="2" stroke-linecap="round"/>
212+
<path d="M1 30 Q18 2 35 30" fill="none" stroke="#0088ff" stroke-width="1.5" stroke-linecap="round"/>
213+
<circle cx="18" cy="32" r="2" fill="#0088ff"/>
214+
</svg>
215+
<div style="height:6px"></div>
216+
<div class="title-sm" style="color:#0088ff">CONNECTING</div>
217+
<div class="title-sm" style="color:#0088ff">R2D2_Control</div>
218+
<div style="height:4px"></div>
219+
<div class="dim">ATTEMPT 3/5</div>
220+
</div>
221+
</div>
222+
<div class="screen-label">NET CONNECTING AP</div>
223+
<div class="screen-cmd">DISP:NET:AP:3</div>
224+
<div class="screen-sub">Reconnexion hotspot Master en cours</div>
225+
</div>
226+
227+
<!-- NET HOME FALLBACK -->
228+
<div class="screen-wrap">
229+
<div class="lcd" style="background:radial-gradient(circle, #0a0810 60%, #070507)">
230+
<div class="ring" style="border: 5px solid #aa44ff;"></div>
231+
<div class="content">
232+
<div class="title-sm" style="color:#aa44ff">NETWORK</div>
233+
<div style="height:4px"></div>
234+
<svg width="36" height="32" viewBox="0 0 36 32">
235+
<line x1="18" y1="32" x2="18" y2="16" stroke="#aa44ff" stroke-width="2.5" stroke-linecap="round"/>
236+
<path d="M10 20 Q18 10 26 20" fill="none" stroke="#aa44ff" stroke-width="2" stroke-linecap="round"/>
237+
<path d="M5 26 Q18 6 31 26" fill="none" stroke="#aa44ff" stroke-width="2" stroke-linecap="round"/>
238+
<path d="M1 30 Q18 2 35 30" fill="none" stroke="#aa44ff" stroke-width="1.5" stroke-linecap="round"/>
239+
<circle cx="18" cy="32" r="2" fill="#aa44ff"/>
240+
</svg>
241+
<div style="height:4px"></div>
242+
<div class="title-sm" style="color:#aa44ff">HOME WIFI</div>
243+
<div class="title-sm" style="color:#aa44ff">ACTIVE</div>
244+
<div class="sep"></div>
245+
<div style="font-size:8px; color:#aa44ff; letter-spacing:1px;">192.168.2.171</div>
246+
<div class="dim">MASTER UNREACHABLE</div>
247+
<div class="dim">SSH DEBUG AVAILABLE</div>
248+
</div>
249+
</div>
250+
<div class="screen-label">NET HOME FALLBACK</div>
251+
<div class="screen-cmd">DISP:NET:HOME:192.168.2.171</div>
252+
<div class="screen-sub">Level 2 — WiFi maison actif, IP visible pour SSH debug</div>
253+
</div>
254+
255+
</div>
256+
257+
<hr>
258+
259+
<!-- ROW 3: Alert states -->
260+
<p class="section-title">États d'alerte</p>
261+
<div class="row">
262+
263+
<!-- SYSTEM LOCKED -->
264+
<div class="screen-wrap">
265+
<div class="lcd" style="background:radial-gradient(circle, #130000 60%, #080000)">
266+
<div class="ring" style="border: 8px solid #ff2244; animation:flash 0.8s ease-in-out infinite;"></div>
267+
<div class="content" style="animation:flash 0.8s ease-in-out infinite;">
268+
<div class="title-sm" style="color:#ff2244">SYSTEM STATUS:</div>
269+
<div style="height:4px"></div>
270+
<!-- Lock icon SVG -->
271+
<svg width="30" height="30" viewBox="0 0 30 30">
272+
<rect x="5" y="14" width="20" height="14" rx="3" fill="#ff2244"/>
273+
<path d="M9 14 V9 Q9 3 15 3 Q21 3 21 9 V14" fill="none" stroke="#ff2244" stroke-width="3" stroke-linecap="round"/>
274+
<circle cx="15" cy="21" r="2" fill="#000"/>
275+
</svg>
276+
<div style="height:4px"></div>
277+
<div class="title-md" style="color:#ff2244">SYSTEM</div>
278+
<div class="title-md" style="color:#ff2244">LOCKED</div>
279+
<div class="sep"></div>
280+
<div class="dim">WATCHDOG TRIGGERED</div>
281+
<div class="dim">MOTORS STOPPED</div>
282+
</div>
283+
</div>
284+
<div class="screen-label">SYSTEM LOCKED</div>
285+
<div class="screen-cmd">DISP:LOCKED</div>
286+
<div class="screen-sub">Anneau rouge clignotant — cadenas — UART watchdog déclenché</div>
287+
</div>
288+
289+
<!-- ERROR -->
290+
<div class="screen-wrap">
291+
<div class="lcd" style="background:radial-gradient(circle, #130000 60%, #080000)">
292+
<div class="ring" style="border: 8px solid #ff2244;"></div>
293+
<div class="content">
294+
<div class="title-sm" style="color:#ff2244">SYSTEM STATUS:</div>
295+
<div class="title-sm" style="color:#ff2244">CRITICAL ERROR</div>
296+
<div style="height:8px"></div>
297+
<div class="title-lg" style="color:#ff2244">!</div>
298+
<div style="height:4px"></div>
299+
<div class="title-sm" style="color:#ff2244">MASTER</div>
300+
<div class="title-sm" style="color:#eee">OFFLINE</div>
301+
<div style="height:4px"></div>
302+
<div class="dim">DISP:ERROR:MASTER_OFFLINE</div>
303+
</div>
304+
</div>
305+
<div class="screen-label">ERROR (existant simplifié)</div>
306+
<div class="screen-cmd">DISP:ERROR:MASTER_OFFLINE</div>
307+
<div class="screen-sub">Gardé pour erreurs critiques non-réseau</div>
308+
</div>
309+
310+
<!-- TELEM (swipe) -->
311+
<div class="screen-wrap">
312+
<div class="lcd" style="background:radial-gradient(circle, #080814 60%, #050508)">
313+
<div class="ring" style="border: 4px solid #0088ff;"></div>
314+
<div class="content">
315+
<div class="title-sm" style="color:#0088ff">TELEMETRY</div>
316+
<div style="height:4px"></div>
317+
<div style="font-size:18px; color:#fff; font-weight:bold;">24.5V</div>
318+
<div class="bar-wrap" style="width:140px; height:14px;">
319+
<div class="bar-fill" style="width:70%; background:#32c850;"></div>
320+
</div>
321+
<div style="font-size:9px; color:#32c850;">6S LiPo — 70%</div>
322+
<div class="sep"></div>
323+
<div style="font-size:11px; color:#ff8800;">TEMP: 45°C</div>
324+
<div class="bar-wrap" style="width:140px;">
325+
<div class="bar-fill" style="width:45%; background:#ff8800;"></div>
326+
</div>
327+
<div class="sep"></div>
328+
<div class="dim">◁ swipe BACK TO OK</div>
329+
</div>
330+
</div>
331+
<div class="screen-label">TELEM (swipe depuis OK)</div>
332+
<div class="screen-cmd">DISP:TELEM:24.5V:45C</div>
333+
<div class="screen-sub">Accessible par swipe seulement — pas intrusif</div>
334+
</div>
335+
336+
</div>
337+
338+
<hr>
339+
340+
<div class="note">
341+
<strong>Changements clés vs version actuelle :</strong><br>
342+
✓ Suppression du tracking 7 items → <strong>spinner simple</strong> (plus de faux FAIL)<br>
343+
✓ Écran OK principal intègre la <strong>barre bus health</strong> en temps réel (orange si &lt;80%)<br>
344+
✓ 3 nouveaux écrans NET (scanning / connecting / home fallback) pour le WiFi Watchdog<br>
345+
✓ DISP:LOCKED = cadenas rouge clignotant — inratable<br>
346+
✓ TELEM accessible par swipe seulement — ne s'affiche plus automatiquement et n'interrompt plus l'affichage<br>
347+
✓ Swipe disponible uniquement en état OK (plus de navigation pendant un état critique)<br><br>
348+
<strong>Nouveaux DISP: commands :</strong>
349+
DISP:BUS:98.5 · DISP:NET:SCANNING:1 · DISP:NET:AP:3 · DISP:NET:HOME:192.168.2.171 · DISP:LOCKED
350+
</div>
351+
352+
</body>
353+
</html>

‎rp2040/firmware/display.py‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,9 @@
100100

101101
def reset_animations():
102102
"""Appeler quand on quitte un etat anime pour forcer un full redraw au retour."""
103-
global _booting_bg_drawn, _locked_bg_drawn, _ok_prev_bus_color
104-
_booting_bg_drawn = False
105-
_locked_bg_drawn = False
106-
_ok_prev_bus_color = None
103+
global _booting_bg_drawn, _locked_bg_drawn
104+
_booting_bg_drawn = False
105+
_locked_bg_drawn = False
107106

108107

109108
# ------------------------------------------------------------------

0 commit comments

Comments
 (0)