I’m sure you’re all familiar with the
Arjuino serial plotter. It works pretty
well. All you have to do is output your
values in a comma separated list and it
will plot them on this nice graph. Now,
it’s okay, but it is pretty limited. You
can’t zoom in. There’s no controls. You
can’t take a screenshot. It’s great for
simple things, but it’s not great for
anything more complex. So, I thought to
myself, why not try and build something
better? Build something crossplatform
that runs in the browser. So, I was
inspired to do this because I’m using
this um web serial API quite a lot now.
So, I’m testing out one of my new boards
from PCB Way. This is a really nice um
audio monitor. So, you can see my audio
trace here. Got a nice spectrogram and
we’ve got a pitch or tuner. So, if I try
and whistle
there, it kind of works. But anyway, web
serial is now pretty well supported. So,
if you look at can I use then you can
see it’s available on Chrome, Edge, and
Opera. So building a web serial plotter
is actually fairly straightforward. So
you can see here we got our nice trace
coming through. We got a legend. We can
change this. So we can kind of change
let’s change temperature to be let’s use
a nice pink color. So let’s change that
color. Uh let’s put it back. That’s not
not the best choice of colors. Let’s do
let’s do dark blue. So we can update all
of our trace. Uh we’ve got settings. So
you can change the auto scale. So if we
turn off auto scale, then we can change
this to go from n to say 50 or 10. Um
let’s do 10 to 20. H or we can put back
to auto scale. Can change the time. So
currently it’s showing relative time. So
that’s time since we started recording.
Can put that to absolute time. So now
that’s the absolute time. You have a
history. So it’s quite efficient. It
uses a ring buffer. So when it goes over
100,000 points, it will start wrapping
around, but you can bump that up. It’s
not that memory hungry. Um, what you can
do is you can also pan. So we can pan
back through history, see all the
graphs. It’s got nice momentum
scrolling, so it feels quite nice. Um,
and you can go back to the live trace.
And obviously you’ve got zoom in and
zoom out here. You can download all the
data. So you can export the data just a
visible window or all of the data. And
you can choose relative or um absolute
time per exports. Can easily save a
screenshot. So you got a save PNG
function which really good. And we have
these nice stats powers. So it’s very
much a work in progress. Um I’d like
anyone who uses it to try and raise
bugs. So we do have some issues you can
open. So it’s all on GitHub. It’s all
open source. I’d really like people to
contribute if they can. But if you find
a problem, then just go over to the web
serial plotter um repository and you can
do new issue and then you can choose bug
or feature request and then there’s a
form to fill out just saying what you
were doing, what you were trying to do
if you can give us some sample data so
we know what didn’t work but raise
issues if you find any bugs. Now there’s
also a serial console so you can see all
the data being streamed and you can also
send data to the device. Um, my current
firmware doesn’t actually do anything.
So, I can send, but it doesn’t do much.
But, you can see the message here. And
you can download these console logs as
well. So, that’s quite handy. Um, but
obviously the main thing is the chart.
Um, for all you light and dark mode
aficionados, then we do have light and
dark mode. So, I’m currently in dark
mode. Looks pretty nice. Can easily
switch to light mode and then it’s all
nice and white. Um, but you can go back
to dark mode if you want to. So that’s
pretty much it to be honest. Um, head
over to GitHub. Um, raise some issues.
It’s all online so you can use it online
web serial plotter.4.com
or you can run it locally if you want
to. Um, all the data is stored locally.
There’s no data sent off to a server.
It’s all run locally in the browser. So
you don’t need to worry about any
privacy concerns. Um, none of the data
is being recorded. Um, so yeah, and if
you have a problem, open an issue on
GitHub. So, just thought I’d do another
quick test. So, this is actually audio
data. So, I’ve got my board hooked up
with its microphone outputting the
samples. I’m doing this, I think, at uh
16 kHz, which still seems to work. Um, I
need to do some testing to see if it’s
dropping any samples, but at the moment,
looks quite good. I’ll see what I can
actually push this to. Maybe I can go up
to uh 48 kHz or something and still get
good results. The USB serial connection
does tend to be very fast. So, it’s
really down to how performant is my code
for actually doing the parsing and the
drawing. So, I’ll do a bit more
experiments on that and push the limits
of this. I mean, I think for most use
cases, this will work really nicely
without doing anything crazy. But, let
me know how you get on with it. I think
there will be bugs. It is kind of just
been written. So, let me know on GitHub
when you find the bugs and we’ll try and
fix