Live: https://martinrbowman.github.io/webserial_plotter/
Browser-based serial data plotter. Uses the Web Serial API — no install, runs from static files. Chart rendering via Chart.js.
Requires a Chromium browser (Chrome/Edge) or Firefox 151+ desktop. Not supported in Safari, or in Firefox on Android/iOS.
Double-click index.html to open it directly in the browser — Chrome/Edge treat file:// as a secure context, so Web Serial works with no server.
Alternatively, serve the folder over HTTP:
cd webapp
python3 -m http.server 8000Open http://localhost:8000 in Chrome/Edge.
index.html— layout, controls, about dialogstyle.css— dark theme stylingapp.js— serial I/O, line parsing, charting, logging, smoothing
- Connect Port — pick the serial device (browser permission prompt).
- Set Baud, Data Format, and Line Terminator to match the device output.
- Start / Stop streaming.
- Start Logging to record incoming samples to CSV (downloads on stop).
- Save Plot exports the current chart as a PNG.
- Clear resets all channels and the chart.
- Smoothing applies a moving-average overlay to a selected channel.
| # | Format | Description |
|---|---|---|
| 1 | value |
single unnamed value per line |
| 2 | name, value |
one named value per line |
| 3 | n,v, n,v, ... |
interleaved name/value pairs |
| 4 | n,n,... v,v,... |
names then values, matched by position |
| 5 | n,n,... stream |
first line is names, each following line is values (repeats) |
| 6 | n,n,... frame |
first line is names; each line may contain multiple value groups (a "frame"), blank line triggers autorange |
Formats 3–6 use the # Names field to know how many name/value columns to expect.
- Up to 1000 points are kept per channel (older points drop off).
- Channel colors are assigned in the order channels first appear.