#UIFlow の BLE UART を使った文字のやりとりを #M5Stack_Core2 で試してみた（ #M5Stack ）

対象デバイスは限定されるのですが、UIFlow のファーム 1.7.0 で BLE UART が使えるようになりました（あと、Blynk なんかも追加されてたり）。

公式ドキュメントでいうと、この部分です。

●M5Stack Docs - The reference docs for M5Stack products.
 「BLE UART(support M5Stack Fire only)」
　https://docs.m5stack.com/#/en/uiflow/advanced?id=ble-uartsupport-m5stack-fire-only

![M5Stack_Docs_BLE_UART.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e7086b1-3a5a-ae17-fb9e-554617fe108b.png)

「support M5Stack Fire only」と書いてますが、M5Stack Core2 でも動作しています。

## Mac・iPhone から検出できるかを軽くお試し
まずは、Mac・iPhone のそれぞれで BLEデバイスをスキャンして、この BLE UART のプログラムを動作させた M5Stack Core2 が見えるか、シンプルに試してみました。

とりあえずスキャンできれば OK という感じで、UIFlow で作ったプログラムは以下のシンプルなもの。

![セットアップのみ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/03102473-e6fe-3c73-7a2e-3598e3b8417e.jpeg)

ここから、昨年書いた以下の記事でも利用していた Mac用・iPhone用アプリを用いて、スキャンを行ってみます。

●【micro:bit 2019】micro:bit と #obniz で BLE ＋ UART を試そうとした話と Mac用ツール（30記事目） - Qiita
　https://qiita.com/youtoy/items/34b70bb57c9f54c9e971
●【IoTLT 2019】新しい obniz で obniz-noble を試す（2019/12/22） - Qiita
　https://qiita.com/youtoy/items/1a2e92ae7a83df7e9a82

### Mac からのスキャン
上記の UIFlow のプログラムを実行した後に、Appleさんの Mac用アプリ「Bluetooth Explorer」を起動して、BLEデバイスのスキャンを行いました。アプリのインストールは以前行っていたため、アプリを起動して、メニューの「Devices ⇒ Low Energy Devices」と選んでスキャンを行うための画面へ進んでいきます。

![Bluetooth_Explorer.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d4a1f403-b1b1-2770-05dd-f2c8f9574f8c.jpeg)

以下の画面で、「Start Scanning」ボタンを押すと、スキャンできたデバイスの一覧が表示されます。
その中を見てみると、リストの中に「m5ble（この名称は、UIFlow で設定したもの）」という名前も表示されていました。

これを選択して、リスト上部にある「Connect」ボタンを押すと、以下のように UUID 等の情報も見ることができました。

![Low_Energy_Devices.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/217b2bc4-fc8d-65f6-b894-7beffe6ac87c.jpeg)

### iPhone からのスキャン
今度は、上記の UIFlow のプログラムを実行した後に、iPhone で「LightBlue Explorer」 というアプリを立ち上げてスキャンを行ってみます。

スキャンした中で M5Stack Core2 と思われるものが表示されたので、それを選択して接続します。
接続を行った後の画面は、以下のとおりです。

![iPhoneアプリでスキャン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9f314352-78cb-f59b-bbed-47ca688ddc73.jpeg)

## BLE経由で値のやりとりを行ってみる。
とりあえずスキャンができたようなので、テキストのやりとりも試してみます。
まずは、テキストの送受信が試せる UIFlow のプログラムを作成します。

### UIFlow のプログラム
公式サンプルも見つつ、以下のような内容にしてみました。

![UIFlow_BLE_UART_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/75a25dfd-1830-19ca-7689-370da2e6e02b.jpeg)

### Macアプリとの間でテキストのやりとりを試す
先ほど、スキャンに使った「Bluetooth Explorer」は、データの送受信を行うこともできます。

以下のツイートにのせた動画は、Bluetooth Explorer側からテキストを送った様子と、M5Stack Core2 からテキストを送った様子です。
Bluetooth Explorer側で aaa 等の適当なテキストを入力して送信ボタンを押すと、そのテキストが M5Stack Core2 の画面上に表示されます。また、特定のテキストだった場合は、M5Stack Core2 の画面の色が変わるような処理も入れてみました。
また、逆方向の処理も試してみています。M5Stack Core2 の 3つのボタンをそれぞれ押すと、Bluetooth Explorer側で受信したテキストの情報が表示されます。画面上に直接テキストが出ているわけではないのですが、Bボタンを押した時は「0x30」が、Cボタンを押した時は「0x31」が Bluetooth Explorer の画面に表示されています。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/M5Stack_Core2?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack_Core2</a> ＋ <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> で BLE利用の動作検証。<br><br>地味な内容ですが、Mac の Bluetooth Explorer で入力したテキストが <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> の画面に出たり（テキストの内容によっては画面の色も変わる）、<br>逆に M5Stack 側のボタン押下によるテキスト送信ができたり（写真側の表示はテキストではないけど） <a href="https://t.co/x0AwYXNOFo">pic.twitter.com/x0AwYXNOFo</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1339535602337763328?ref_src=twsrc%5Etfw">December 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## まとめ
UIFlow で BLE UART を利用できるようになったため、軽いお試しをしてみました。
これから色々と試していければと思っています！

## 追記： ブラウザから文字列を送信する（Web Bluetooth API を利用）
Web Bluetooth API を使って、ブラウザから M5Stack へ文字列を送るのは成功させられました。

●【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 （ #M5Stack ）への文字の送信 - Qiita
　https://qiita.com/youtoy/items/3da58570972803134f6c