Plotser is a web application that uses the experimental Serial API to provide functionality similar to the Arduino serial plotter. Plotser works in Google Chrome 80+ without requiring any additional plugins or installation.
Plotser uses the browser Serial API to read values from a serial device and plots the values as series on a timeline. Plotser provides functionality similar to the serial plotter available in the Arduino IDE, but does not require you to install anything.
-
Connect your device that is outputting some (debug) values. Plotser is quite lenient about the format, you can do
12 13.7 7,x:5 y:12 z:4etc. -
Browse to Plotser, make sure you have selected the correct baud rate, and open your serial port.
-
That’s it! Plotser will start plotting values.
You can use the sliders to zoom and go backward on the timeline (note that this will also pause the scrolling).
Currently, Plotser is not fully optimized to support a device spamming values on full throttle. Instead, it will try to limit the update rate automatically. You can use the slider to adjust the update rate, which can also be useful if you’re getting too many values to make sense of the graph.
Serial API - a work in progress
The Serial API allows the web browser to communicate with serial devices. The API is a work in progress and is currently only available in Chrome 80+ as an origin trial. In this phase, it is super useful for try out the API, and provide feedback about the API and potential use cases.
To find out more, you can read the draft spec and explainer, and take a look at the helpful articles here and here. If you want to know if you can use the API to brew tea, Google Chrome Developers has you covered on YouTube, and you can check Chrome Platform Status to find out the current status, including other browsers (spoiler: it’s currently not very far on the track to standardization, but origin trials can potentially speed things up).
Origin trial findings so far
Plotser is a Progressive Web Application (PWA) that can be installed on your computer and works even if you are offline. However, when installed as a PWA, the application crashes as soon as you attempt to open the serial port. The reason for this is currently unknown – let me know if you can reproduce and manage to figure it out.
The second oddity is that the "open serial port" -dialog shows both the cu and the tty device, which can be confusing to the user.
Other than that, using the Serial API seems pretty straightforward. The small gotchas I noticed in this experiment are: 1) Some care needs to be taken to not overload the browser if you’re doing a lot of DOM updates based on the data received (Plotser should be optimized), and 2) right after opening the port, you’ll receive some junk data from time to time.
What is YOUR use case?
Using this API to communicate with your IoT/electronics projects is one use case. Right now, it covers my serial plotting needs while tinkering with Arduino and PlatformIO, and I have dreams about PlatformIO running on Gitpod and using the Serial API to communicate with my ESP-32. The Arduino Web Editor should probably also join the origin trial asap.
However, the Serial API certainly has a lot of other real-world and more business-critical uses. Maybe servicing, trouble-shooting, and updating manufacturing equipment in the field? Connecting readers and devices to a POS? Bringing edge AI to aging equipment?
How about you? What use cases do you have for this API? Please chime in with your thoughts and use cases: comment below, tweet @marcenglund, or email marc@vaadin.com!