Crescentスマートフォン専用ページを表示Crescentあると毎日がハッピーになるちょっと未来なデバイスやモノづくりのノウハウを発信、提案します。今回は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から変更になっているようです。false}}};また、グラフのデータをクリアする場合はchartXX.destroy()では再度、グラフ設定や軸のオプション等を設定し直す必要があります。そのため、単に描画のみをクリアする場合は下記のようにグラフデータの変数をx軸、y軸ともに配列をクリアして、グラフ更新すると簡単にクリアできることが分かりました。data.labels=[];data.datasets[0].data=[];chartXX.update();その他、I2Cデバイスのレジスタアドレスを指定した読み書きのツールも実装してみました。Chart.js等と組み合わせて簡単にグラフを描画できるのはWebAPIならではの活用だと思いました。今後は他のライブラリやAPI、センサ等にも対応したいと思います。|この記事へのコメントコメントを書くお名前:メールアドレス:ホームページアドレス:コメント:※ブログオーナーが承認したコメントのみ表示されます。Writer(09/14)シーリングカバー(08/17)TkEasyGUIへの移行(07/20)pico-sdkディレクトリ変更時のポイントCrescentあると毎日がハッピーになるちょっと未来なデバイスやモノづくりのノウハウを発信、提案します。モーションコントロール、ロボット製作、ロボット制御、組込機器等の研究、開発を専門として行っております。販売プロダクト一覧はこちらで紹介しています。下記でもご紹介しておりますProjectionBall公式WebFacebookPageGitHubProjectionBallの質問や購入相談は下記にお願いいたします。2.0Seesaaブログ。