M5Stamp Pico のお試しを UIFlow でやってみる

今回の記事は「M5Stamp Pico DIY Kit」を入手できたので、早速 UIFlow を使って試してみた、というものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昼休みに届いていた<br>M5Stamp Pico DIY Kit、開封！ <a href="https://t.co/brj9troHp2">pic.twitter.com/brj9troHp2</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1429007312803401739?ref_src=twsrc%5Etfw">August 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

試した結果は、以下のツイートの動画の通りです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">M5Stamp Pico DIY Kit と <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> を使い、<br>デバイス本体内蔵のボタンとフルカラーLED を使った処理をお試し！<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/CejWfp6SNR">pic.twitter.com/CejWfp6SNR</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1429019937159319553?ref_src=twsrc%5Etfw">August 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 電源・ファームウェア等の書き込みについて
今回試した M5Stamp Pico は、従来の M5Stackシリーズを扱う際に自分がよく行っていた「USB からの給電・データの書き込み」を行うことができません。

ただし、USB による給電やデータ書き込みを行う方法がないわけではなく、今回購入した DIY Kit に含まれている「ESP32-DOWNLOADER」等といったような別のパーツを用いて、デバイスへの給電やデータ書き込みを行うことができます。
![ESP32-DOWNLOADER](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/67165e07-3dae-f5e6-f163-7ef04e4ee656.jpeg)

ESP32-DOWNLOADER と M5Stamp Pico の接続は以下のように行えます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日、M5Stamp Pico と <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> のお試しをした際に、ツイートし忘れていたもの。<br><br>写真の内容は、ESP32-DOWNLOADER を M5Stamp Pico に接続した時の様子。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/wUnUsg5YnB">pic.twitter.com/wUnUsg5YnB</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1429078683365511179?ref_src=twsrc%5Etfw">August 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この接続方法については、[公式のドキュメント内](https://docs.m5stack.com/en/quick_start/stamp_pico/quick_start_uiflow)で以下のような図・写真で示されていたりします。
![m5-docs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/73cb2bf3-b016-86a5-598a-fc1a23df7c14.jpeg)

ちなみに、ESP32-DOWNLOADER と PC との接続部分は USB Type-C になります。

## UIFlow で利用するためのファームウェアを書き込む
USB による給電・データ書き込みの方法が分かったところで、ファームウェアの書き込みを進めていきます。

この記事の執筆時点では、Windows版の M5Burner を最新バージョンにアップデートすると、以下のように 「左側のメニューの STAMP」 ⇒ 「UIFlow_PICO」 とたどることで M5Stamp Pico用のファームウェアの書き込みのメニューにたどり着くことができます。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">M5Burner の Windows版、バージョンが上がって、<br>メニュー左下に「STAMP」のカテゴリが増えて、その中に「UIFlow_PICO」がある！<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://t.co/a30UtNf2Ug">pic.twitter.com/a30UtNf2Ug</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1429012988707569665?ref_src=twsrc%5Etfw">August 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ここで最新のファームウェアをダウンロードして、M5Stamp Pico に書き込みます。
その後、UIFlow からデバイスにオンラインで接続可能な状態になるので、そうしたらブラウザ上の UIFlow でプログラムを作っていきます。

## UIFlow でプログラムを作る
UIFlow上のデバイス選択で M5Stamp Pico を選択し、APIキーを入力して、UIFlow と M5Stamp Pico が接続された状態になるようにします。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 上で接続済みになった！！<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/nDuOeJaden">pic.twitter.com/nDuOeJaden</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1429015081782677505?ref_src=twsrc%5Etfw">August 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

APIキーについては[公式ドキュメント上](https://docs.m5stack.com/en/quick_start/stamp_pico/quick_start_uiflow)で以下のような記載がありますが、自分はパッケージ内にキーが記載されたものが同梱されていて、それを利用できました。
![APIキーの確認方法.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f8495e6f-8370-012f-659a-2d8e8222dc6d.jpeg)

ここまでくれば、あとはプログラムを作るだけです。
既にデバイス上にあるものだけで処理を完結させたかったので、ボタンとフルカラーLED を使うプログラムにしています。
![試しに作ったプログラム.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/602e2295-f1b9-5a7d-0fa5-6e02ada48f96.jpeg)

これで、冒頭に掲載していた動画の内容が実現できます。

## おわりに
今回、M5Stamp Pico DIY Kit が届いたので、早速 UIFlow を使って簡単なプログラムを動かしてみるということをやりました。

今後の活用については、別途、考えていければと思います。

## 追記
この記事の中では、M5Burner は Windows版を使っていたのですが、Mac版でも 2021/8/25現在でメニュー左の CORE を選ぶと、その中に UIFlow_PICO があって書き込みが行えます。

この記事を書いたタイミングでは、Mac版だとこれが表示されていない状況になっていたため、Windows版を使ってました。
そのちょっと前は、Mac版でメニュー左の CORE を選んだ中に、UIFlow_PICO が一度出てきていた、という状態もあったのですが...（Windows版のアップデートが行われた時、表示メニューの構成が変わって、その影響を受けていたのでは？、と思われる挙動）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Mac版のM5Burnerで一度 UIFlow_PICO が出てきてたけど、Windows版のアップデートがかかったあたりで出てこなくなってた件、<br>また表示が復活していた！ <a href="https://t.co/CenH1v5ne8">pic.twitter.com/CenH1v5ne8</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1430187178831745026?ref_src=twsrc%5Etfw">August 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>