以前にWebシリアルAPIとUSBシリアルI2C変換基板を用いてI2Cデバイスをブラウザから制御、取得したデータからChart.jsで可視化するデモツールを紹介しました。今回はUSBシリアルI2C変換基板に限らず、ArduinoやRP2040等のUSBシリアル通信のデータをグラフとして可視化するシリアルプロットツールを実装してみました。ツールはこちらから利用できます。
例えばセンサデータ等を下記のようなフォーマットでUSBシリアル通信から出力させると最大8つのカンマ区切りのセンサデータをグラフに可視化できます。
XX.XX,YY.YY,ZZ.ZZ,\r\n
XX.XX,YY.YY,ZZ.ZZ,\r\n
XX.XX,YY.YY,ZZ.ZZ,\r\n
XX.XX,YY.YY,ZZ.ZZ,\r\n
・
・
・
※X,Y,Zは各センサ数値文字列
実際に2つの適当なデータを可視化してみました。
ボーレート設定の他、csvとしてダウンロードする機能、グラフをクリアする機能を実装してみました。ArduinoのIDEのシリアルプロッタ機能のように簡単にシリアル通信のデータを可視化することが可能です。WebシリアルAPIを使用しているため、ソフトのインストールなしでWebブラウザ(Edge、Chromeのみ対応)から本ツールにアクセスするだけで簡単に利用できます。また、ブラウザ単体とChart.jsライブラリで実現できるため、一度、ページを読み込んで表示すればオフライン環境でも動作可能です。なお、WebシリアルAPIの部分等のjsコードやcss含めてすべてhtml内に記述しているため、本ツールにアクセスして右クリックで「ページのソース表示」でソースを確認することができます。今後は他にも応用的な機能を実装したいと思います。
