前回までESP32用「素の」MicroPythonをESP32 DevkitC上で練習。今回より同じESP32用のMicroPython処理系といっても「一味違う」M5Stack社のUIFlowを使用してみます。M5Stack系のデバイスはどんどん新しいのが出てますが、使用するのは基本のM5Stack Grayです。
※「MicroPython的午睡」投稿順 Indexはこちら
※ブラウザ上で動作するWeb開発環境UIFlow2.0 (Alpha-27)と、M5Stack Grayに書き込んだUIFlow2.0 (Alpha-27)対応のMicroPython処理系で動作確認しています。
M5Stack、あるいはM5StickなどはM5Stack社の人気の小型マイコン装置です。素っ気ない開発ボート類と異なり、ちゃんとシャーシに入っていてコネクタ等も装備。表示やキーを備えた機種も多く使いやすいデバイスです。ESP32系のマイコンを搭載しているので、標準でWiFi接続にも対応。いたれり尽くせりです。強いて言えば、最近円安のせいかお値段が上がったような気がしないでもないです。知らんけど。
人気のM5StackなのでMicroPythonのサポートも勿論あります。特有のハードウエアのサポートなどを含んだUIFlowというものです。大分前の過去記事で、M5StickC上のUIFlowについては触ってみたりもしています。
モダンOSのお砂場(12) M5StickC、UIFlowとMicroPython
久しぶりにUIFlowを触ってみるかと考えました。ターゲットは「遊休状態」のM5Stack Grayです。まあ「バニラ」風味でクラシックなM5Stackだけれども最新版のUIFlow走るみたいだし。
UIFlow、デスクトップ版は更新終了していた
さて、UIFlowはM5Stack側に書き込んで動作するMicroPython処理系とパソコン上で動作するIDEの２つからなります。パソコン上で動作するIDEは、blocklyの系譜をひく「ビジュアル」なIDEです。blocklyがJavaScriptを中心に複数の言語を裏でサポートしている中、M5Stack UIFlowの場合、バックエンドはMicroPythonとなっています。
クイックスタートガイドは以下のページにあります。
M5Stack MicroPython Quick Start
必要なファイル等はWelcome to M5Stack Developer Centerというところの以下のページにあります。
なお、上記のページの右肩には「日本語」という設定もあるのですが、設定しても日本語にならず中国語になってしまったので、English選択の方がお楽。
しかしそこで１件見つけてしまいました。
パソコン側で動作するUIFlowのIDEですが、デスクトップバージョンは更新が止まってしまったみたいです。ダウンロードはまだ出来るようですが。ブラウザ上で動作するWeb版に集約されてしまったみたい。
M5Stack Grayへのファームウエア書き込み
一方、MicroPythonを含むファームウエアをM5Stackに書き込まずにはいられません。上記ページなどみると最初のステップとしてUSBシリアルのドライバが並んでいたりもします。しかし手元の環境の場合、M5Stackを接続すると以下のように認識されたのでドライバの手動インストールは不要でした。
そこで、上記のページからファームウエアの書き込みツールをダウンロード。当方はWin10 x64版を選択しました。問題なくWindows11上でも動作しているように見えます（自己責任ってやつです。）
起動すると、書き込み対象のM5Stack系機種の種類が多いので、書き込みメニューがずらずら表示されます。今回は最新版らしい UIFlow 2.0 のターゲットにM5Stack Grayが含まれるバージョンを選択。Alpha版の表示だが、大丈夫か？
上記の右下のダウンロードボタンを押すと、なにやらダウンロードされて以下のようにボタンが３色に変わります。
黄色のConfigureと、青のBurnをやるためには、もう一手間ログインが必要でした。そしてログインするということには、UIFlowの開発者サイトにアカウントも必要ってこってす。
ログインのメニューからたどっていくとアカウントの新規登録もできるのでありがちな手順を繰り返しました。しばらくしてログインできたみたい。以下のJHalfmoonという表示が見えますか？
ようやくログインできたので、Configureボタンを押してみます。すると以下のようなウインドウが開きました。
流石ESP32機です、WIFI関係の情報なども最初から要求されます。上記をテキトーに入力しNext＞ボタンを押すとこんな感じ。
いかにもFlashに書き込んでます的なプログレスバーが現れ、上記のようなBurning結果らしきものも表示されます。ただあまりに短時間。こんなもんでMicroPythonが書き込まれたのか、仕事が速いな、などと感心してIDEに接続してみたら違いました。上記はあくまでConfigure情報の件だけみたいっす。
別途 青のBurnボタンを押さないとMicroPython処理系など本体情報は書き込まれないみたいです。Burnした後はこんな感じ。こちらは書き込むものが多いのかそれなりに時間がかかります。大したことはないけれど。
これでファームウエアはOKっと。
Web上のUIFlow開発環境からM5Stack Grayへ接続
さてWeb開発環境のURLは以下です。
起動するとUIFlow 1.0かUIFlow2.0か聞かれます。今回M5Stack Gray機にはUIFlow2.0 を書き込んでいるので2.0の方を選択します。開けば blocklyの系譜のビジュアル開発環境です。こんな感じ。
なお、ログインしないと実機に書き込んだりできないので先ほどのアカウント情報はここでも必須です。
結局実機との通信はブラウザ内でシリアル通信ができる仕組みを使っているようで、右下のRunボタンまたは Weberminalのボタンを押すとUSBシリアルに接続しようとします。その際、以下のポップアップが開くので、接続先のシリアルポートをクリックして「接続」ボタンをアクティブにしてから、「接続」ボタンを押さないとなりません。
目出度く接続できると以下のようにWebTerminal内にUIFlowのグリーティングメッセージが表示されます。MicroPython v1.20.0とな。多分最新版ね。
上記ではフツーにMicroPythonのプロンプトと思って各種の操作が可能です。
UIFlowらしいBlockエディタで、カウント値をインクリメントして表示するだけのコードを作ってみました。こんな感じ。
ブロックエディタから、Pythonソースに切り替えると以下のようでした。
上記の「ソース」をM5Stack上で実行するには、WebTerminalの右三角アイコンをクリックしてやります。
ループ内にウエイト無、通信速度も速いので飛ぶように数字がカウントアップされていきます。動いた？良かった。