UIFlow の toio用ブロック・サンプルの一覧を見てみた（2023/12/17時点）【M5Stack】

この記事は [Adventar](https://adventar.org/) でのアドベントカレンダーの 1つとして作られている、「[M5Stack Advent Calendar 2023](https://qiita.com/advent-calendar/2023/m5stack)」の 19日目の記事です。

## 今回の内容
今回の内容は、特定のデバイスと UIFlow の組み合わせで使える「toio用ブロック」の話です。

![toio用ブロック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b9cee8dd-fba5-2a23-5909-65a932435d2e.png)

昨年10月に Qiita で以下の記事を書いて以来、Qiita で扱ってなかったので、この M5Stack のアドベントカレンダーを書くタイミングで、最新の状況を見てみようと思います。

●UIFlow の toio用ブロックを軽く試す【その1：Write】（対応デバイスは ATOM Matrix／ATOM Lite） - Qiita
　https://qiita.com/youtoy/items/b3e3f7a8767cbdf7ba6d

上記の記事を書いた当時は、まだベータ版で情報が出揃ってない段階だったので、ブロック・サンプルを見ていくだけでもボリュームがある内容になった感じが...

## 利用できるブロックの一覧
まずは、記事執筆時点で利用できるブロックを画像ベースで見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0c806b36-f200-f449-1481-e19a8acf1ea4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fc2b1ce3-58ab-64fd-5023-16519b882700.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fc135160-7a49-0250-05cf-8ab37e6aba94.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/810e6425-b415-4877-aca9-ac72845a3740.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bb420b8e-8c30-e8f5-98b6-febd2a32190b.png)

かなりの数のブロックがありました。

### 気になったものを 1つだけピックアップ
上で見ていったブロックの中で、最後の英語表記のブロックが気になったので、もう少し見てみます。

[toio公式の技術仕様（英語版）の「Motor」の部分](https://toio.github.io/toio-spec/en/docs/ble_motor/)を見てみると、パラメータ的に以下の部分に該当しそうでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/829863cf-6392-df3f-fbba-a2402715febb.png)

[日本語版の toio公式の技術仕様では、「モーター」の「目標指定付きモーター制御」](https://toio.github.io/toio-spec/docs/ble_motor/#%E7%9B%AE%E6%A8%99%E6%8C%87%E5%AE%9A%E4%BB%98%E3%81%8D%E3%83%A2%E3%83%BC%E3%82%BF%E3%83%BC%E5%88%B6%E5%BE%A1)に該当しそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/97641d70-1168-aa47-287e-cfee3325c13b.png)

パラメータを見比べると、最後の角度関連の 2つ（angle type と angle の 2つ）のうち片方が、上記の仕様の何に該当しそうかが分からずでした。別途、この部分は探っていこうと思います。

## サンプルを確認する
次に、ブロックが並んでいる部分の上にあるサンプルを読み込んで、中身を見てみます。
記事執筆時点では、全部で 8個です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7942c258-b629-95c7-24a5-3a4a43de6a78.png)

まずはサンプルを画像で並べていって、その後にそれらについてざっくりですが、ちょっとした補足を書いてみようと思います。

### サンプル1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/97494441-e1ae-ba6a-2d45-17cc96784f81.png)

### サンプル2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b101bb21-39c5-93eb-3c5e-884b907d06bf.png)

### サンプル3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1523317b-6432-b973-9c00-ae4d89a8c16a.png)

### サンプル4
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9b7164b2-ede6-d545-c38a-148415b471ae.png)

### サンプル5
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/32a7d67c-fe7a-a1ff-169e-a284830a6185.png)

### サンプル6
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fe935949-ac60-e3b4-fbeb-93c4f7b2948e.png)

### サンプル7
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/99b15585-a3ef-ac15-7edf-2d00fbac31b5.png)

### サンプル8
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/39dea92a-91d9-a752-da5d-bdb45095cd8a.png)

### 8つのサンプルについて
以下にサンプルの 1〜8 について、ちょっとした補足を書いてみます。

- 概要
   1. サンプル2 とセットで使うもののようです。3つのボタンを 1つまたは 2つ押した時、それに応じた数値（全部で6パターン）を ESP-NOW で送信する内容です
   1. サンプル1 とセットで使うもののようです。ESP-NOW で受信した数値（全6パターン）に応じて、toio を動かしたり、止めたり、最寄りの toio との接続を行ったりという処理をしているようです
   1. ボタンを長押しするごとに、toio を動かしたり、止めたり、最寄りの toio との接続を行ったり、接続を切断したり、という処理をしているようです
   1. ToFセンサーで取得した距離の値によって、toio を直進させたり右に旋回させたりという動作をさせるものでした（また、ボタン押下で toio との接続を実行）
   1. toio専用マットの指定した座標に toio　を動かすサンプルで、、ボタン押下をトリガーに処理するもののようです（その他、デバッグ情報をシリアル通信で出力したなども）
   1. toio専用マット上で読み取れるID を読み取るサンプルで、ボタン押下をトリガーに処理するもののようです（その他、デバッグ情報をシリアル通信で出力したなども）
   1. toio専用マット上で読み取れるID を読み取るサンプルで、「ずっと」の処理の中で処理するもののようです（その他、デバッグ情報をシリアル通信で出力したなども）。その「ずっと」の中での読み取りをする時に、次の読み取りをするまでのウェイトの時間が 200ミリ秒以上必要、ということも書かれていました
   1. サンプル7 と似た処理を行っていますが、このサンプル8 は、読み取った位置情報を ATOM Matrix の LED の表示に反映させるもののようです

## おわりに
今回、記事執筆時点での「UIFlow の toio用ブロック・サンプルの一覧」を見ていきました。

それらの一覧を見ていくだけでも、記事の分量がけっこう増えたので、今回の内容を受けたお試しは別記事で扱えればと思います。

### 余談： 当初考えていた記事用のトピック
M5Stack のアドベントカレンダー用の記事を何にしようか考えていた時、M5Paper を使った電子ペーパー名札の第二弾の記事か（※ [第一弾はこちら](https://qiita.com/youtoy/items/545cb81fd3188e63f8aa)）、この記事を執筆した日に参加したハッカソンの内容をネタにすることを考えていました。

https://twitter.com/youtoy/status/1736168940999717004

しかし、名札ネタはもう少し検討したい事項があり、またハッカソンネタは M5Stack の記事にするネタが少ない感じの実装（Teachable Machine を使った機械学習を、それを toio Do での制御に連携させたという実装）をしたので、記事で扱う内容を「UIFlow の toio用ブロック・サンプルの話」にしてみました。