ブログ上でプロッター表示
最近、M5StickC 心拍計 のログ出力を 無線化し運動時の記録をとるようにしたのですが、 毎回の記録を表計算ソフトで個別にグラフ化するのも厳しくなってきたので、 Hugo の Shortcode でブログ上にプロッターぽいものを表示できるようにしてみました。
データを丸ごと JSON で埋め込んでいることもあり、件数によってはかなり重いですが、
ApexCharts.js を使っているのでマウス操作での拡大縮小や、アノテーション表示
(今回の例だとpeakPラベル)もできます。
shortcode
コードは gist に貼り付けてあります。
replayPlotterOuter.html と replayPlotter_a1.html を layouts/shortcodes/ へ配置することで使えるようになります。
※ 2020-09-14 追記.
apexcharts@3.20.1 と apexcharts@3.20.2 では hiddenSeries がうまく動かないようです。
console に apexcharts@3.20.2:6 Uncaught TypeError: Cannot read property 'getAttribute' of null が表示される場合は apexcharts@3.20.0 を使うと回避できるようです。
<script src='https://cdn.jsdelivr.net/npm/apexcharts@3.20.0'></script>データフォーマット
いまのところは、基本的に ApexCharts.js の series と同じです。
series化したデータファイルを data/plotter/a1/ の下に保存します。
サンプル
markdown
コンテンツの markdown では、 以下のような感じで記述します。
サンプル表示
以下は、運動時に M5StickC 心拍計 から取得したログ(センサー出力と IMU の状態)を表示しています。 冒頭の動画のように実際にマウスで操作できます。
まとめ
まだ、細かい挙動などはおかしいのですが、 IMU 込みのログをプロッター表示として再現できるようになったことで、 運動時のセンサー出力やピークの検出状況を確認しやすくなったかと思います。
その一方で、ログ出力を無線化したことで従来に比べて手軽にログがとれるようになったこともあり、 「ブログとは関係なく、記録したその場でプロッター表示を確認したい」とも思うようにもなりました。 いずれは、その辺も対応していければと考えています。