Serial Plotter

Contexte & problème résolu

Lors du développement de systèmes embarqués, on a constamment besoin de visualiser en temps réel les données qu'un microcontrôleur envoie sur son port série (valeurs de capteurs, échantillons d'un convertisseur analogique-numérique, signaux physiologiques). Les solutions habituelles ont des frictions : le traceur de l'IDE Arduino est mono-canal et lié à l'IDE, les terminaux série affichent du texte brut, les suites propriétaires sont lourdes ou payantes.

Tech Fox a levé ces frictions par une approche radicalement simple : le navigateur est le seul logiciel nécessaire. Grâce à la Web Serial API (navigateurs Chromium), une page web ouvre le port, lit son flux et le trace. Le besoin déclencheur était concret : visualiser proprement un signal ECG acquis par un STM32 pour valider une chaîne d'acquisition embarquée. L'outil a été généralisé en traceur multi-canaux réutilisable.

Architecture & réalisation

L'application repose sur une boucle de lecture asynchrone et une boucle de rendu découplées, autour d'un état central décrivant le port, le lecteur et les canaux dynamiques. Le protocole attendu est du CSV série : des valeurs séparées par des virgules terminées par un saut de ligne. À la première trame valide, l'application compte les valeurs et crée dynamiquement autant de cartes graphiques que de canaux, sans configuration préalable.

• Reconstruction fiable des lignes : un TransformStream accumule les fragments arbitraires du flux série, découpe sur les sauts de ligne et conserve la dernière ligne incomplète ; sans quoi une trame sur deux serait corrompue.
• Datation et tampon borné : chaque valeur est stockée en point (temps, valeur) ; un tampon circulaire plafonné à 50 000 points par canal évite la dérive mémoire sur longues sessions (fenêtre glissante).
• Rendu haute performance : Chart.js en mode performance (animations désactivées, parsing court-circuité) et une boucle requestAnimationFrame qui fait défiler la fenêtre temporelle ; effet oscilloscope.
• Contrôles par canal : zoom molette / pincement, déplacement au glisser, échelle Y manuelle ou auto, fenêtre temporelle réglable, couleurs, pause individuelle et « Pause All ».
• Export CSV par canal (sans serveur) et déconnexion propre (annulation du lecteur puis fermeture du port, évitant les ports fantômes verrouillés).

Résultats & compétences

Livrable fonctionnel : application web mono-page autonome, ouvrable par simple double-clic sur le fichier HTML, sans build ni serveur ; utilisée pour le débogage et la visualisation d'un signal ECG issu d'un STM32 (cas d'usage d'origine) ; jusqu'à 6 canaux et 50 000 points par canal ; compatible navigateurs Chromium 89+, débits 9600 à 115200 bauds ; distribué en open source sous licence MIT.

Le projet démontre la programmation matérielle côté web (maîtrise de la Web Serial API), le traitement de flux temps réel (reconstruction de trames, tampons bornés), la visualisation de données performante, une conception zéro installation et une solide culture des systèmes embarqués (interfaçage UART/USB, cas d'usage ECG).