以前に下記ツイートを見てから試してみたいと思ってた UI Flow を試してみました。
https://t.co/C2k3JJp4RW = ui design +blockly + micropython pic.twitter.com/tt5mWRWNcb
— M5Stack (@M5Stack) August 17, 2018
UI Flow は Scratch のようにブロックを並べることでプログラミングができ、画面レイアウトもパーツを並べることで行うことができるようになっています。ブロックではなく Micro Python でコーディングをすることもできます。
チュートリアルとしては下記のページを参考にさせてもらいました。
ファームウェアのセットアップ
UI Flow を使うにはそれに対応したファームウェアを使う必要があります。ファームウェアを簡単に選択してフラッシュすることができる M5Burner というツールが用意されていて、 UI Flow 用のファームウェアを選択することもできるのですが、このツールは Windows 用にしか用意されていないので、 Mac ではそのまま使うことができません。ですが、 M5Burner をダウンロードして解凍するとその中にファームウェアのイメージは含まれていて、フラッシュ用のコマンドが書かれた sh ファイルも含まれているので、これを利用することで UI Flow を使うことができます。
M5Burner は M5Stack のサイトのダウンロードページからダウンロードすることができます。
ですが 2018/09/08 に試した時点では、ここからダウンロードできる zip に含まれている UI Flow 用のファームウェアはバージョン 0.4 までで、このバージョンだと UI Flow からプログラムを実行するところでうまく動きませんでした。
そこで UI Flow の設定画面から取得した zip にはバージョン 0.5 まで含まれており、そちらであれば実行まで動作させることができたのでそちらを使用します。
まずは M5UI.Flow にアクセスします。すると API Key 設定用のダイアログが表示されますが、まだ API Key はわからないので Skip します。
次に画面右上の設定ボタンをクリックして設定ダイアログを開きます。
API Key の設定フォームとファームウェア（M5Burner）のダウンロードリンクが表示されますので、ダウンロードリンクをコピーします。
ここからはターミナルで実行します。まずは wget で先ほどコピーしたダウンロードリンクから M5Burner をダウンロードします。
$ wget http://flow.m5stack.com/download/M5Burner-flow-only.zip --2018-09-08 11:36:33-- http://flow.m5stack.com/download/M5Burner-flow-only.zip Resolving flow.m5stack.com... 52.230.67.99 Connecting to flow.m5stack.com|52.230.67.99|:80... connected. HTTP request sent, awaiting response... 200 OK Length: 12199380 (12M) [application/zip] Saving to: 'M5Burner-flow-only.zip' M5Burner-flow-only.zip 100%[===========================================================================================================================================>] 11.63M 2.65MB/s in 4.6s 2018-09-08 11:36:38 (2.53 MB/s) - 'M5Burner-flow-only.zip' saved [12199380/12199380]
そして解凍します。
$ unzip M5Burner-flow-only.zip
すると下記のようファイルが展開されます。
$ ls -l total 27152 -rw-r--r-- 1 akanuma staff 12199380 Sep 6 20:38 M5Burner-flow-only.zip -rw-r--r-- 1 akanuma staff 31232 Aug 21 16:42 M5Burner.exe -rw-r--r-- 1 akanuma staff 189 Jun 9 13:37 M5Burner.exe.config -rw-r--r-- 1 akanuma staff 34304 Aug 21 16:42 M5Burner.pdb -rw-r--r-- 1 akanuma staff 662528 Mar 24 17:44 Newtonsoft.Json.dll -rw-r--r-- 1 akanuma staff 684778 Mar 24 17:44 Newtonsoft.Json.xml drwxr-xr-x 4 akanuma staff 128 Sep 6 19:14 firmwares drwxr-xr-x 3 akanuma staff 96 Sep 3 15:00 tools -rw-r--r-- 1 akanuma staff 169 Aug 31 19:51 update.log
使用するのは firmwares ディレクトリ配下のファイルだけで、 UI Flow 用のファームウェアの最新バージョンのディレクトリへ移動します。
$ cd firmwares/M5Flow/v0.5/ $ ls -l total 8152 -rw-r--r-- 1 akanuma staff 1351152 Aug 31 19:16 firmware_0x1000.bin -rw-r--r-- 1 akanuma staff 335 Sep 6 19:11 flash.sh -rw-r--r-- 1 akanuma staff 2818048 Sep 6 19:05 spiffs_image_0x150000.img
ここに flash.sh というファイルがあり、この中身はファームウェアをフラッシュするためのコマンドが書かれたものになっています。
$ cat flash.sh #!/bin/bash esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART --baud 961200 write_flash -z 0x1000 firmware_0x1000.bin esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART --baud 921600 --before default_reset --after no_reset write_flash -z --flash_mode dio --flash_freq 40m --flash_size detect 0x150000 spiffs_image_0x150000.img
このファイルに実行権限をつけて実行してしまっても良いのですが、それぞれのコマンドの実行結果を確認したかったので一つずつ実行します。 M5Stack を USB ケーブルで接続していれば下記のようにデバイスファイルが存在します。
$ ls -l /dev/tty.SLAB_USBtoUART crw-rw-rw- 1 root wheel 21, 24 Sep 8 11:03 /dev/tty.SLAB_USBtoUART
デバイスファイルが確認できたら、まず一つ目のコマンドで bin ファイルを M5Stack に書き込みます。
$ esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART --baud 961200 write_flash -z 0x1000 firmware_0x1000.bin esptool.py v2.5.0 Serial port /dev/tty.SLAB_USBtoUART Connecting........___ Chip is ESP32D0WDQ6 (revision 1) Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse MAC: 80:7d:3a:c4:71:bc Uploading stub... Running stub... Stub running... Changing baud rate to 961200 Changed. Configuring flash size... Auto-detected Flash size: 4MB Compressed 1351152 bytes to 841602... Wrote 1351152 bytes (841602 compressed) at 0x00001000 in 13.8 seconds (effective 784.0 kbit/s)... Hash of data verified. Leaving... Hard resetting via RTS pin...
特にエラーはなく実行できたようです。次にもう一つのコマンドを実行し、 img ファイルを書き込みます。
$ esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART --baud 921600 --before default_reset --after no_reset write_flash -z --flash_mode dio --flash_freq 40m --flash_size detect 0x150000 spiffs_image_0x150000.img esptool.py v2.5.0 Serial port /dev/tty.SLAB_USBtoUART Connecting........_ Chip is ESP32D0WDQ6 (revision 1) Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse MAC: 80:7d:3a:c4:71:bc Uploading stub... Running stub... Stub running... Changing baud rate to 921600 Changed. Configuring flash size... Auto-detected Flash size: 4MB Compressed 2818048 bytes to 667546... Wrote 2818048 bytes (667546 compressed) at 0x00150000 in 18.7 seconds (effective 1205.6 kbit/s)... Hash of data verified. Leaving... Staying in bootloader.
こちらも問題なく実行できたようです。これでひとまずファームウェアの書き込みは行えたので、これ以降は Windows 環境で実行している場合と同様かと思います。
Wi-Fi 接続設定
ファームウェアの書き込みが終了したら USB ケーブルを抜くか、 M5Stack 本体横のボタンで M5Stack を再起動すると UI Flow のロゴが表示されます。
そしてそのまま何もしなければ、標準でじゃんけんゲームのようなものが書き込まれているで、それが実行されます。
Wi-Fi の設定をするためにはもう一度 M5Stack を再起動して、 UI Flow のロゴが表示されている間に右のボタンを長押しします。
設定メニューが表示されますので、 set reconnect wifi を選択して真ん中のボタンを押します。
すると M5Stack が Wi-Fi AP として動作し、画面上に SSID とアクセス先 IP アドレスが表示されますので、 Mac からその AP に接続し、ブラウザから対象の IP アドレスにアクセスします。
下記のように M5Stack が接続する AP を選択する画面が表示されますので、 AP を選択してパスワードを入力し、 Configure をクリックします。
接続が成功すると下記のような画面になり、 M5Stack が再起動されます。
UI Flow から M5Stack への接続
M5Stack を再起動して UI Flow のロゴが表示されている間に、左のボタンを長押しします。
M5Stack から設定済み AP への接続が成功すると、下記のように API Key が表示されます。
これを UI Flow の設定画面から設定します。
API Key を設定しただけでは接続状態が画面に反映されていないので、画面左の M5Stack のイメージの Offline となっているところをクリックします。
接続に成功すると表示が Online に変わります。
UI Flow でのプログラミング
ここまででファームウェアの設定や接続等の環境の準備は完了なので、 UI Flow から簡単なプログラムを実装して実行してみます。まずは M5Stack のイメージの上部にある Label をイメージのディスプレイ上にドラッグ&ドロップします。
ブロックリストの Component -> Label から、 Label にテキストを表示するためのブロックを選択します。
元々配置されている Setup ブロックに選択したブロックを接続し、表示するテキストを変更します。画面にテキストを表示させるだけであればこれだけでOKなので、画面右上の実行ボタンをクリックして、 M5Stack 上で実行します。
下記のように実機の画面にテキストが表示されれば成功です。
テキストを変更して再度実行ボタンをクリックすれば、すぐに実機に反映されます。
実行ボタンではその場で実行するだけかと思いますので、開発中は実装と動作確認を繰り返すのには良いかと思いますが、起動時に実行されるようにするには画面右上の書き込みボタンで実機に書き込んでおきます。
まとめ
M5Stack の Micro Python での Web IDE 環境としては M5Cloud もありますが、 UI Flow の利点としては画面イメージを視覚的に確認しながら作成できる点と、ブロックの配置で処理が実装できるので、学習等の目的としてはとても良さそうに思います。ですが現状ではまだ実装したプログラムを保存しておくことなどはできないようですので、今後 IDE としても充実してくることを期待したいと思います。
