PlatformIOでシリアルプロットを使ってみる

こんにちは。えーちゃんです。
本日はVSCodeでマイコン開発をするのに便利な拡張機能「Teleplot」を紹介します。

Teleplotは、シリアル出力された数字をグラフにしてくれるVSCodeの拡張機能です。
これを使うことでセンサーの値をグラフにして可視化することができます。

ArduinoIDEではデフォルトでシリアルプロッタというシリアル出力された数値をグラフ化する機能があるのですが、PlatformIOにはありません。
センサーの値をグラフにしたいけどいいものないかな～と思っていた矢先にTeleplotを発見しました。
使うとこんな感じで可視化できます。
グラフの大きさを変えたり、重ね合わせたりできてとっても便利です！
github.com

開発環境

PlatformIO IDE
M5GO

使い方

①teleplot拡張機能のインストール
VSCode拡張機能タブからTeleplotをインストールします。

②データ送信プログラムの作成
Teleplotで数値をグラフ化するには、変数名と数値を決まったフォーマットでシリアル出力する必要があります。
以下のような感じで出力します。

Serial.printf("<変数名:%f\n", 変数);

「<」と「:」の間に変数名を入れます。「:」の後ろに数値を入れて改行します。改行を忘れやすいので注意です。
マイコンボードは何でもいいのですが本記事ではM5Stackを使ってサンプルコードを用意しました。
グラフ化しない適当な文章がシリアル出力されていても正常に動きます。

#include <M5Stack.h>

void setup() {
    M5.begin();
    // ジャイロセンサの立ち上げ
    M5.IMU.Init();
    M5.Lcd.println("Gyro Test");
}

void loop() {
    float GyroX = 0.0f;
    float GyroY = 0.0f;
    float GyroZ = 0.0f;

    // M5Stack内蔵ジャイロセンサの値（角速度）を取得
    M5.IMU.getGyroData(&GyroX, &GyroY, &GyroZ);

    // Teleplotに出力する用のデータをシリアル送信
    Serial.printf(">GyroX:%f\n", GyroX);
    Serial.printf(">GyroY:%f\n", GyroY);
    Serial.printf(">GyroZ:%f\n", GyroZ);

    // グラフにしない出力
    Serial.println("Gyro Testing");

    delay(100);
}

③Teleplotを開く
TeleplotがインストールされているとVSCode左下にTeleplotタブが現れます。

こちらクリックするとTeleplotが開きます。
上のメニューから繋がれているデバイスを選んでopenを押すとグラフが表示されます。
左側にシリアル出力されている変数一覧、中央にグラフ、右側にシリアル出力されるテキストが表示されています。

グラフはグラフ上部のボタンから大きさを自由に変えたり、ドラッグして重ね合わせたりできます。
右側にグラフにしないprint文も見ることができます。

④Teleplotの接続解除
右上の停止ボタンを押して接続解除します。
接続解除しておかないと新しくプログラムが書き込めないので要注意です。

以上がTeleplotの使い方です。簡単なのでぜひ使ってみてください！
現在M5Stack内蔵ジャイロセンサーを使ったおもちゃをつくっております。
本当はGW前に完成させてご紹介したかったのですが・・・
あと一歩間に合わず残念です。完成したらまたご紹介しますので是非見ていってください！
それではみなさま、よいGWをお過ごしください。