WebシリアルAPI＋Chart.js ＋USBシリアルI2C変換基板

今回はWebシリアルAPIを用いたツールの応用編として、Chart.jsを組み合わせてみました。USBシリアルI2C変換基板を介してI2Cデバイスをブラウザから制御、取得したデータからChart.jsで可視化するデモツールを実装してみました。実際に作成したツールをgithub.ioに公開しています。

温度湿度センサSHT31、温度湿度気圧センサBME280について、2秒間隔でデータを取得し、取得したデータをChart.jsで可視化するツール(SHT31用、BME280用)を実装してみました。

データはサーバ等を介さずにブラウザ内で保持され、そのままグラフ化しています。そのたえめ、オフライン環境でも一度、Chart.jsライブラリ含めてダウンロードすれば、オフライン環境でも動作可能です。また、ブラウザ内で保持された変数をcsvとして出力できる機能も合わせて実装してみました。

初めてChart.jsを使ってみましたが、最近のバージョンではAPIの仕様が変わっているようで少し実装に戸惑いました。例えば、各軸の軸ラベルはxAxes、scaleLabelではなく、下記のx、title、textのようにChart.jsバージョン3.xから変更になっているようです。

let options = {
 scales: {
  x:{title:{display: true, text: 'x軸'}},
  y:{title:{display: true, text: 'y軸'}}
 },
 plugins:{legend:{display: false}}
};

また、グラフのデータをクリアする場合はchartXX.destroy()では再度、グラフ設定や軸のオプション等を設定し直す必要があります。そのため、単に描画のみをクリアする場合は下記のようにグラフデータの変数をx軸、y軸ともに配列をクリアして、グラフ更新すると簡単にクリアできることが分かりました。

data.labels=[];
data.datasets[0].data=[];

chartXX.update();

その他、I2Cデバイスのレジスタアドレスを指定した読み書きのツールも実装してみました。

Chart.js等と組み合わせて簡単にグラフを描画できるのはWebAPIならではの活用だと思いました。今後は他のライブラリやAPI、センサ等にも対応したいと思います。

WebシリアルAPI＋USBシリアルI2C変換基板

今回はWebシリアルAPIを用いたツールについて紹介したいと思います。WebシリアルAPIはブラウザのAPIでWebサイトのJavaScriptを使用してPCのシリアルポートにアクセスできる機能です。

WebシリアルAPIで何ができるかというと、新しくソフトやツールをインストールしなくとも、ブラウザからあるサイトにアクセスするとPCのシリアルポートを介してコマンドを送ったり、受信したりすることが簡単に実現できます。残念ならが、WebシリアルAPIに対応したブラウザはEdgeもしくはChromeのみ対応となっており、22年9月時点ではFirefoxやSafariは対応していません。対応したブラウザからアクセスする必要があります。既に有名な使用例として、シリアルターミナルやEspruino Web IDE等があります。

今回はWebシリアルAPIを用いて、USBシリアルI2C変換基板を介してI2Cデバイスをブラウザから制御するツールについて紹介します。実際に作成したツールをgithub.ioに公開しています。

メインページから各デバイスのページに移動してください。今回はSHT31のデモを紹介します。USBシリアルI2C変換基板に温度湿度センサSHT31を接続して、ページにアクセスします。

接続ボタンを押すと、PCに接続れたCOMポートの一覧が表示されるため、USBシリアルI2C変換基板のポートを選択します。今回はCOM7を選択しました。PC環境やこれまでの接続履歴によってポートは変わるため、不明な場合はデバイスマネージャ等からUSBシリアルI2C変換基板を抜き差しして該当するCOMポートを確認してください。

初期化ボタンを押して、取得ボタンを押すと上記のように温度と湿度を取得することが簡単にできました。コードはMITライセンスとして各htmlファイル内に埋め込んでいます。htmlファイルのみでオフラインやローカル環境(htmlファイルをダウンロードしてからローカルで使用する)でも動作可能です。

今回はWebシリアルAPIを用いてUSBシリアルI2C変換基板から温度湿度センサSHT31と通信しました。今後は他のデバイス等を含めた応用的な機能を開発し、メインページに順次公開したいと思います。ただ、Windows環境では使用する中でWebシリアルAPIはサンプルAPIそのままのコードであっても時折、接続できなくなることがあり、ページの再読み込みやPCの再起動等が必要になる場合がありました。非常に便利なAPIであるものの、少し未完全な部分があるようです。