Vaadin's Plotser Brings Attractive, Live Serial Data Plotting to Google's Chrome Browser

Vaadin's Mark Englund has published a prototype for a browser-based serial data plotter, dubbed Plotser, designed to mimic the functionality of the Arduino serial plotter without the need for plugins or any other software installation — so long as you're a Google Chrome user, at least.

"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," Englund explains of the underlying technology. "In this phase, it is super useful for try out the API, and provide feedback about the API and potential use cases.

"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:4 etc. Browse to Plotser, make sure you have selected the correct baud rate, and open your serial port. That’s it! Plotser will start plotting

While the ability to capture and plot incoming serial data with no extra utilities is undeniably handy, and Plotser makes an attractive case for its functionality, the Serial API is still in its very early stages. Some of the bugs in the API can be seen in Plotser, too: "When installed as a PWA [Progressive Web Application], the application crashes as soon as you attempt to open the serial port," Englund notes. "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."

Englund's full write-up is available on the Vaadin blog, while Chrome users can find Plotser on the Vaadin Labs sub-site.