More than 3 years have passed since last update.

M5Stackでスクロールグラフ M5GFX版

Last updated at 2021-06-06Posted at 2021-06-06

M5StackCore2でグラフ表示するdemoプログラムできました。
LovyanGFXでスプライトを使っているうちに高速スクロールができたので共有

##ソースコード

##概要
SwithBot温湿度計など複数台のデータを登録してグラフ表示する形を想定しています。

過去5時間を表示します。
画面構成上、最大6台までグラフ化します。

十分な数の計測ログがあれば、スクロールさせながら表示できます。

##基本動作
setupでBLEアドレスのリストとグラフ番号を設定します。（最大6件）（未設定の場合、登録された順になります）
https://gist.github.com/panda728/01a314b66890d8060b61efaef4b272ee#file-main-cpp-L447

計測データは1分単位で丸めて時系列データに保存
最終データから過去5時間分のデータをグラフ（点）で描画します。

##応用
SwithBotの複数台からデータを収集してグラフ表示
収集データはAmbient Iotにアップロードして保存
といった用途に使います。

##（余談）リセット対策
電源が消えるとログも消えるので最初から計測になります。
以下のデータをsave loadする機能を追加すれば、リセットされてもグラフが消えないものになります。

Logger::logs
Logger::keys

##補足
namespace Logger　グラフ表示用のデータ管理
namespace ScrollGraphPanel　グラフ表示処理
namespace GraphUtil グラフ表示関連の計算処理

BLEがメモリを使うのでスプライトを抑えるため10分割にしています。
https://gist.github.com/panda728/01a314b66890d8060b61efaef4b272ee#file-main-cpp-L410

drawBodyでグラフ以外の表示を行っています
y座標をすべて-yOffすることで、スプライト上に必要な部分の描画を行います。(領域外の描画は無視される)
https://gist.github.com/panda728/01a314b66890d8060b61efaef4b272ee#file-main-cpp-L256