ATOM Matrix・ATOM Lite を UIFlow で制御してみる（ #M5Stack ）

## はじめに

4/10（金）に、いよいよ技適が OK な [ATOM Matrix](https://docs.m5stack.com/#/en/core/atom_matrix)・[ATOM Lite](https://docs.m5stack.com/#/en/core/atom_lite) が、スイッチサイエンスさんから発売開始となりました。

この記事は、それらを注文後にゲットできたので、早速ビジュアプルプログラミングで開発が行える [UIFlow](https://m5stack.github.io/UIFlow_doc/ja/) で制御してみようという記事です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スイッチサイエンス さんで注文していた、<br>　ATOM Matrix（2個）と ATOM Lite（1個）<br>をゲット！！<br><br>サイズ比較用に、500円玉を一緒に置いて写真を撮ってみました。 <a href="https://t.co/tfoUhrVZAs">pic.twitter.com/tfoUhrVZAs</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1249912050626658304?ref_src=twsrc%5Etfw">April 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちなみに、本体の側面に技適マーク等が表示されています。
![技適マーク.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/03a01f1e-7614-ffec-495a-a8e7eceb4271.jpeg)

## ATOM Matrix と ATOM Lite の情報

詳細スペックは、以下のスイッチサイエンスさんの製品ページか、そこにリンクが書かれている公式ドキュメントをご覧ください。

- [ATOM Matrix - スイッチサイエンス](https://www.switch-science.com/catalog/6260/)
- [ATOM Lite - スイッチサイエンス](https://www.switch-science.com/catalog/6262/)

こちらは、過去の M5Stack等と異なり USBケーブルは付属していないため、別途用意する必要があります。また、過去のシリーズと異なる点として、内蔵バッテリーは搭載していません。

## UIFlow について
[UIFlow](https://m5stack.github.io/UIFlow_doc/ja/) はブロックを使ったビジュアプルプログラミングで、M5Stackシリーズの開発が行える環境です。電子工作も行えたり、IoT に便利な MQTT や HTTP の処理も扱えたりと、デバイスに関わるたくさんの機能を利用することができます。詳細は、[公式ページ](https://m5stack.github.io/UIFlow_doc/ja/) をご参照ください。
<img width="502" alt="M5Flow_と_名称未設定.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6251879e-c837-e61b-820d-243ed4860af3.jpeg">


## ATOM Matrix と ATOM Lite を UIFlow で使う

### 参考にした情報

UIFlow は、既に持っている「M5Stack Gray、M5GO、M5StickC」と組み合わせて使ったことがあったため、利用時のデバイスのセットアップ方法や使い方はだいたい分かりそうだったものの、ATOM はディスプレイを搭載していない点が異なり、それによりセットアップ手順で異なる部分がでてきそうでした。
そんな中、ちょうど以下のツイートにリンクを書いた記事を見かけていたので、公式ドキュメントを確認する方法もありましたが、まずはこちらの中の[1つ目](https://raspberrypi.mongonta.com/howto-use-uiflow-with-m5atom/)を見て進めてみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">明日、Matrix と Lite の両方が届く予定のため、<br>先ほどリツイートした記事を読んで予習しておこう。<br><br>●M5Atomの始め方【UIFlow編】<br>　<a href="https://t.co/cyQLajfV4p">https://t.co/cyQLajfV4p</a><br><br>●M5Atomの始め方【ArduinoIDE編】<br>　<a href="https://t.co/3FBgyc0hCM">https://t.co/3FBgyc0hCM</a><br><br>●M5Atomの細かい仕様<br>　<a href="https://t.co/TBrjBxPQP5">https://t.co/TBrjBxPQP5</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1249687764066426880?ref_src=twsrc%5Etfw">April 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

では、上記でリンクを書いていた 1つ目の記事、「[M5Atomの始め方【UIFlow編】 | ラズパイ好きの日記](https://raspberrypi.mongonta.com/howto-use-uiflow-with-m5atom/)」の内容を見つつ、セットアップ等を進めていきます。
なお、今回の自分の記事の環境・手順は参照した記事と異なる部分があります。まず PC の OS が、参照した記事内では Windows10 ですが、自分が使ったのは macOS Mojave でした。また、API key の確認手順の方法も、参照した記事と自分が行った方法とは異なる部分があります。

### ファームウェアの書き込みと Wi-Fi設定

#### UIFlowのファームウェアを書き込む（M5Burner を利用）
今回、Mac用の M5Burner を使い、ファームウェアは UIFlow 1.4.5.1 を書き込みました。M5Burner は下記のリンク先のページで、ダウンロード可能です。
　●Download – m5stack-store
　　https://m5stack.com/pages/download
2020/4/15時点の最新ファームウェアは 1.5 ですが、M5Burner上で 1.5 のファームウェアを選択していると、書き込み対象のデバイスの選択肢に ATOM が出てきません。そのため、、1.4.5.1 のファームウェアを選びました。

書き込みの設定を行う画面は以下のとおりです。
<img width="600" alt="M5Burner_での設定.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5707738e-1fa6-e9e6-d103-13a60cc6b838.jpeg">
上の画像で赤い矢印と赤枠で指した部分がファームウェアのバージョンを指定するところです。
また、緑の矢印と緑枠で指した部分（2箇所）が、シリアルポートと書き込み対象デバイスの種類を選択するところです。シリアルポートは「/dev/tty.usbserial-XXXXXXXXXX」という名称のもの（※「XXXXXXXXXX」の部分はダミーで、実際は英数字を含む文字列）、デバイスの種類は「ATOM-Matrix」か「ATOM-Lite」のうち利用するデバイスのものを選びました。
また、黄色の枠で囲んだ部分は、M5Burner の最新バージョンのアプリを使い、かつ、UIFlow のファームウェアのバージョンで 1.4.5 以上を選択すると表示される、Wi-Fi設定用の SSID とパスワード設定を入力するところです。こちらに設定を入れておくと、ファームウェアの書き込み時に Wi-Fi設定を書き込んでくれます。

#### API key の確認方法
[参照した記事](https://raspberrypi.mongonta.com/howto-use-uiflow-with-m5atom/)では、ArduinoIDE のシリアルモニタを使った方法が書かれてましたが、「シリアル通信用アプリであれば確認できます」とも書かれていたため、Mac のターミナルを使って API key を確認してみました（正確には iTerm を使った形）。

まず、ATOM を USBケーブルで Mac に接続し、以下のコマンドの出力結果をチェックします（下記の「XXXXXXXXXX」の部分はダミーで、実際は英数字を含む文字列でした。

```bash
$ ls /dev/tty.usb*
/dev/tty.usbserial-XXXXXXXXXX
```

そして screenコマンドで、上記で表示された内容と、ボーレート指定 `115200bps` を設定した以下のコマンドを実行します。

```bash
$ screen /dev/tty.usbserial-XXXXXXXXXX 115200
```
その後、ATOM本体のリセットボタンを押すと、以下のような部分を含む文字列がターミナル上で表示されます。
画像の赤枠で囲んだ矢印で指し示した部分に API key が表示されるため、これをメモしておき、そのまま次へ進みます。
<img width="546" alt="iTerm_screen.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4e946fe3-d2aa-d66e-0ebc-4c3d56783687.jpeg">

#### WiFiセットアップ（M5Burner での設定書き込みを行っていない場合）
もし、上記の M5Burner でのファームウェアの書き込みのところで、SSID・パスワードを書き込んでいない場合は、先ほどの API key が表示された画面で、続きとして以下のような SSID 等が書かれた部分がでてきています。その場合、以下の手順で SSID・パスワードを設定してください。
もし、ファームウェアの書き込み時に設定済みの場合は、「[UIFlow を使ったプログラミング のステップ](https://qiita.com/youtoy/items/17739b7f4197a8d3fa4d#uiflow-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)」へ進んでください。

画像の赤枠で囲んだ矢印で指し示した部分に M5Stack-XXXX（※左記の「XXXX」の部分はダミーで、実際は4桁の数字です）という SSID が表示されているため、こちらに PC やスマホなどで接続し、ブラウザを開きます。
<img width="522" alt="SSID.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5e71c8d2-dc26-8916-4012-765daec2d98d.jpeg">

そして、アドレスバーに IPアドレス「192.168.4.1」を入力し（※上の画像で SSID の書かれた場所の、右下あたりに表示されているアドレス）、アクセスしたページ内で接続したい Wi-Fi の SSID の選択とパスワードの入力を行います。
以下は、iPad でアクセスした設定画面ページをキャプチャしたものです。赤い矢印で示した部分で、SSID とパスワードを設定し、画面内の青い「Configureボタン」を押してください。
![Wi-FIの設定画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/167c6ef7-cf7a-a19b-820a-3fb54654cf09.jpeg)

上手く設定が行われれば、以下の画面が表示されますので、デバイスをリセットして次へ進んでください。
![設定成功.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2b2c8b50-83df-6b25-d429-ae67560e3fe2.jpeg)

### UIFlow を使ったプログラミング
#### UIFlow での下準備
それでは、[UIFlow](https://m5stack.github.io/UIFlow_doc/ja/) でプログラミングを行っていきます。

ブラウザで「 http://flow.m5stack.com 」にアクセスします。そして、上記の手順で書き込んだファームウェアが 1.4.5.1 であるため、ブラウザ上の UIFlow のバージョンが 1.4.5 以外となっている場合、 1.4.5 へと変更する必要があります。以下の画像の緑の矢印で示した部分をクリックし、その下に表示される赤い矢印と赤枠で指した部分（V1.4.5 と書かれた部分）を選択してください。
<img width="441" alt="M5Flow_1_4_5.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/47847fee-5c93-f7f9-c2b8-69c5d3778d0f.jpeg">

そして、以下の画像の緑の矢印で示した部分をクリックし、その下に表示される赤い矢印と赤枠で指した部分（設定 と書かれた部分）を選択してください。
<img width="505" alt="設定メニュー.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/16432adf-db85-fb23-34db-a17e80189451.jpeg">

そして、以下の設定画面が重畳表示されるため、以下の緑の矢印と緑の枠で示した Api key の部分に、上記の手順でメモしていた API key を入力し、以下の赤い矢印と赤枠で示した部分で「Atom-Lite」か「Atom-Matrix」のうち、ご自身が利用しようとしているデバイスを選んでください。
<img width="532" alt="APIキーの設定とデバイスの選択.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/28235b87-7341-9026-30d6-ed76cbf6e514.jpeg">

その後、画面左上に「Atom-Lite」か「Atom-Matrix」のうち、上記の手順で選択したデバイスの絵が表示され（以下の例は「Atom-Matrix」のほうです）、以下の赤い矢印と赤枠で示した部分に「緑色の 接続済み という文字」が表示された状態になります。
<img width="557" alt="UIFlow_Matrix.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/30ad04da-7b9b-675f-34af-130eefe0ed77.jpeg">
これで、準備完了です。

#### UIFlow でプログラムを組んでみる（ATOM Matrix）
では、UIFlow で簡単なプログラムを動かして、動作確認をしてみます。
まずは、上記の手順でセットアップした ATOM Matrix のほうを試します。

とりあえずは Lチカ的な感じにしてみようかと、以下の左上部分で、赤い矢印と赤枠で示した「ハードウェア の中の RGBカラー」にあるブロックを 1つ使い、プログラムを組んでみました。
使ったブロックは、以下の下部で、赤い矢印と赤枠で示した「Set atom matrix」のブロックです。
<img width="512" alt="プログラム1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/86c209f8-0eff-5e06-72c5-ada3e2c6e4cd.jpeg">

以下のようなプログラムにしました。
そして、以下の赤い矢印と赤枠で示した部分をクリックし、プログラムを実行してみます。
<img width="525" alt="プログラムの実行.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/75bc0bcb-65de-4268-d924-33868126efd6.jpeg">

そうすると、無事に以下の画像のように、プログラム通りの LED表示ができました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ATOM Matrix を UIFlow で制御。<br>LEDを複数の色で点灯させてみた。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング交流会</a> <a href="https://t.co/oi89VY5zdW">pic.twitter.com/oi89VY5zdW</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1250117030381907968?ref_src=twsrc%5Etfw">April 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### UIFlow でプログラムを組んでみる（ATOM Lite）
ATOM Matrix と同様に、ATOM Lite でもファームウェアの書き込みや API key の確認、Wi-Fi の設定を行い、UIFlow での制御を行ってみます。
ここでは、作ったプログラムと動作させた結果のみ、簡単に示します。

まずは、プログラムです。
以下の赤い矢印と赤枠で示した部分 2箇所「イベント と ハードウェア の中の RGBカラー」のブロックを組み合わせて作りました。
<img width="464" alt="プログラム2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1fb2b7b4-0aa5-84f9-91d0-6331bb3c97f5.jpeg">

最初は LED が緑色で点灯している状態で、ボタンを長押ししたときは LED の色が赤色へと変わり、短く押した場合は LED の色が青色に変わるというシンプルな内容です。
動作させた時の様子は、以下のツイートの動画のと折りです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ATOM Lite の方も UIFlow で制御。<br>LEDの色がボタン押下で変わるようにしてみた。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング交流会</a> <a href="https://t.co/sf7occYNpc">pic.twitter.com/sf7occYNpc</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1250125083865018369?ref_src=twsrc%5Etfw">April 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### UIFlow でプログラムを組んでみる（ATOM Matrix ＋ Unit）
最後に、ATOM Matrix と 距離が測定できる [ToF Unit](https://www.switch-science.com/catalog/5219/)とを組み合わせて使ってみました。

プログラムは以下の通りで、以下の左下辺りで緑の矢印と緑枠で示した部分で Unit を選択しています。
そして、以下の赤の矢印と赤枠で示した部分の中のブロックを使って、計測した距離が変わると LED 表示が変わる、というものを組んでみました。
<img width="643" alt="プログラム3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7f0d1a1d-8e18-6a51-0798-8a92d1a9d661.jpeg">

動作させた際の様子は以下のとおりで、下の面から ToF Unit が離れたり、また近づいたりすると、ATOM Matrix の LED表示が変化しているのが分かると思います。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">今度は、ATOM Matrix と 距離が測定できる ToF Unitとを組み合わせて、UIFlow でこれらの制御をやってみた！<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E4%BA%A4%E6%B5%81%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#ビジュアルプログラミング交流会</a> <a href="https://t.co/TyHzupUVkk">pic.twitter.com/TyHzupUVkk</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1250142136344776704?ref_src=twsrc%5Etfw">April 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに

今回、ATOM Matrix と ATOM Lite のそれぞれについて、本体の LED を UIFlow を使って制御してみました。また、ToF Unit との組み合わせも合わたものも試してみました。
UIFlow と ATOM を組み合わせて試せそうな内容はたくさんありそうなので、活用法を考えていければと思います。

## 【追記】早速、LT登壇の機会にこの話を活用
この記事をアップした週に、オンライン開催となっていたイベント [IoTLT](https://iotlt.connpass.com/) の LT（ライトニングトーク）で登壇をする予定だったため、登壇ネタに活用しました！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">先ほどの <a href="https://twitter.com/hashtag/IoTLT?src=hash&amp;ref_src=twsrc%5Etfw">#IoTLT</a> での登壇資料、<br>ATOM Lite、ATOM Matrix と ToF Unit を、UIFlowで制御した話の資料です！<br><br>●ATOM Matrix・ATOM Lite を UIFlow で制御してみる / IoTLT vol.62 - Speaker Deck<br>　<a href="https://t.co/tZQVDROnFa">https://t.co/tZQVDROnFa</a><a href="https://twitter.com/hashtag/M5ATOM?src=hash&amp;ref_src=twsrc%5Etfw">#M5ATOM</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1250796246861676544?ref_src=twsrc%5Etfw">April 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、IoTLT の主催者の @n0bisuke さん（のびすけさん）が、同イベントでの LT登壇を準備する際に活用いただいたという話も！
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">先ほどの <a href="https://twitter.com/hashtag/IoTLT?src=hash&amp;ref_src=twsrc%5Etfw">#IoTLT</a> で自分の登壇で説明に使った、<br>また、 <a href="https://twitter.com/n0bisuke?ref_src=twsrc%5Etfw">@n0bisuke</a> さんに今回の登壇準備で活用いただいていたという話でスライドに登場していた、最近書いたばかりの Qiita の記事の URL です！<br><br>●ATOM Matrix・ATOM Lite を UIFlow で制御してみる（ <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> ） - Qiita<br>　<a href="https://t.co/ENFRdWXU3a">https://t.co/ENFRdWXU3a</a> <a href="https://t.co/qB8Qr992rD">pic.twitter.com/qB8Qr992rD</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1250799095104462848?ref_src=twsrc%5Etfw">April 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 余談
M5Stack等のシリーズは、以下のツイートにある「M5Stack Gray、M5GO、M5StickC、M5StickV」を持っていたのですが、さらに今回で台数が増えましたｗ
何か、複数台の連携とか、これを活用したことを試したいな・・・。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">今日の <a href="https://twitter.com/hashtag/IoTLT?src=hash&amp;ref_src=twsrc%5Etfw">#IoTLT</a> で M5なデバイスの裏は磁石、という話を今になって知った側だったのですが、<br>帰宅してから家にあるやつを、自宅の冷蔵庫に貼り付けて確認してみた！<br><br>Gray、Go、StickC は全てくっつきましたが、写真で手に持ってる StickV はさすがにダメだったw <a href="https://t.co/g5dwOy28zp">pic.twitter.com/g5dwOy28zp</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1184122307888893952?ref_src=twsrc%5Etfw">October 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記】他の方の記事（Arduino IDE での開発など）
2020/4/15 の午前中あたりで、Qiitaの記事の検索で「ATOM Lite」・「ATOM Matrix」・「M5Atom」をキーワードに検索した結果や、「M5Atom」タグに紐付いている記事のリストを見て、スイッチサイエンスさんから販売されたデバイスをゲットされて記事を書かれている方のリンクをまとめてみました。

- [ATOM Matrixに心拍センサを繋ぐ - Qiita](https://qiita.com/jksoft/items/1307056b2d001388974a)
- [M5AtomをUIFlowで書き込んだあとにWiFiでUIFlowに接続するモードに戻す方法 - Qiita](https://qiita.com/wakasamasao/items/eea919cc525abbf90eab)
- [ATOM Matrixを触ってみた - Qiita](https://qiita.com/jksoft/items/fa92281f90bcbc32929c)
- [M5AtomをPlatformIOで動かす-ライブラリインストールから加速度取得まで - Qiita](https://qiita.com/ELIXIR/items/663114ddb2d5ab621c66)