micro:bitのシリアル通信とmakcecodeのシリアルモニターを使うと、変数やInputにあるセンサー値を時系列風に表示できることがわかった。上手に使うとデバックや動作確認に有用なので紹介したい。

micro:bitのシリアル通信の準備

micro:bitのシリアル通信はUSB端子を使っておこなわれるので、Connect deciveでmicro:bitとWebブラウザーを接続しておく必要がある。詳細は別の記事を参照してほしい。

USBケーブルでmicro:bitとPCを接続する。
WebUSBを対応しているブラウザー¹でmakecodeを起動する。
コードのダウンロードと同じく、[ダウンロード]ボタンの右にある[・・・]から、接続しているmicro:bitを接続する。

お試しで、センサーのInput値のピッチをグラフ化する

micro:bitの傾きをグラフ化してみる。

[高度なブロック]を押すと出てくる[シリアル通信]から、[シリアル通信名前と数値を書き出す]ブロックを取り出す
シリアル通信のブロックのラベルに"pitch"と記入する
[入力]の[その他]から[傾斜ピッチ]を取り出し、シリアル通信のブロックに入れる
シリアル通信のブロックを[ずっと]ブロックに入れる
[基本]の[一時停止]ブロックを200ミリ秒にして[ずっと]ブロックに入れる
コードをmicro:bitにダウンロードする

makecode上のmicro:bit本体の下に表示される[データを表示]という2つのボタンのうち、[デバイス]側がシリアルモニターなので、それを押す。グラフ表示に切り替わり、リアルなmicro:bitからのデータが表示される。
本題から離れるが、この時に別のシリアル受信ソフトが動作しているとシリアルデバイスを占有してしまい、makecodeがデータ受信できなくなるので注意が必要。

複数のパラメータ表示

複数のパラメータのグラフが同時に表示ができると嬉しい。makecodeへの送るフォーマットによって2種類の表示方法が切り替えられる。

グラフをパラメータ毎に別々に表示する方法

コロン(:)でラベルを付けると、パラメータ毎にグラフエリアが別れる。[名前と数値を書き出す]ブロックを表示したいパラメータ分用意する。例として加速度X、Y、Zを表示してみた。

すべてのパラメータを1つのグラフ内に表示する方法

CSV²で送られてくると、1つのグラフに複数のパラメータが表示されるようになる。以下では加速度のXYZを1つのグラフで表示させてみた。使用するブロックは[複数の数値をカンマくぎりで書き出す]だ。

ちょっと応用

もちろん以下のようなこともできて、加速度センサーと傾斜の関係がきれいに可視化された。

また一部の方にお話ししていたことだが、私のmicro:bitの地磁気センサーは正しく動作していないのではないか疑惑も、下のグラフから私の気の迷いだったことが判明した。とほほ、、、

制約や気づいたこと

細かいことだけど、制約となりそうなことをに遭遇したので列挙しておく。また気づいたことも書いておく。

[名前と数値を書き出す]ブロックの名前には英数字や記号以外の、例えば漢字やひらがなを入れると、グラフが表示されなくなる。
ブロックコード表示とグラフ表示を行き来すると、時々グラフがうまく表示されないことがある。これは何度か行き来すれば表示されるようになる。
数字以外でグラフは書けないので、"真"、"偽"はグラフ表示できない。表示したいときは0や1を使うと可能。
[複数の数値をカンマくぎりで書き出す]ブロックを使わなくても、文字列連結でカンマくぎりの文字列を作れば表示可能。

さいごに

はっきりってめちゃくちゃ便利。
気づいたことにも書いたけど、フラグやソフトの状態を数値にして表示すると、プログラムの流れが把握できるようになる。その昔、組み込みソフトで使ったタイムチャートがリアルタイムで表示できるので、コードの善し悪しはあるけれど、デバックはやりやすくなると感じた。
ぜひ試してもらいたい。

ここではMac mini(2023)のChromeを使用している。 ↩
カンマで区切られた文字列データ形式。 ↩