UIFlowで動かすM5ATOM Matrix: 環境構築とデスクトップ版、ブラウザ版の違い
去年買ってずっと放置してたM5Atom Matrix をようやく動かしてみました。
いろいろ試しているので、その内容を何回かに分けて記事に残しておこうと思います。
今回は開発環境の設定と2種類あるUIFlowの違いを分かる範囲でチェックしてみました。
- 開発方法
- 2種類の UIFlow
- インストール
- M5Burner でファームウェア最新化
- 本体起動
- UIFlow デスクトップ版起動
- UIFlow ブラウザ版起動
- とりあえず実行
- デスクトップ版とブラウザ版の違い
- 最後に
開発方法
M5シリーズのマイコンは「UI Flow」か「Arduino IDE」で開発するのが一般的のようです。
| ツール名 | 概要 |
|---|---|
| UI Flow | GUIでブロックを組み合わせて作る「Blockly」言語で開発するためのツール。 |
| Arduino IDE | マイコン開発用のIDE。 |
Arduino IDEはまた今度にして、さくっと動かせそうな「UI Flow」を使います。
2種類の UIFlow
UI Flowはデスクトップ版とブラウザ版の2種類があるようです。
基本的には同じ機能のようですが、若干使い勝手が違うので後程紹介します。
| 種類 | 概要 |
|---|---|
| デスクトップ版 | PCとM5をUSB接続してインストールしたアプリで開発 |
| ブラウザ版 | M5ATOM MatrixをWiFi接続しブラウザから接続して開発 |
インストール
PCはWindowsマシンを使います。インストールするソフトは以下3つです。
| ソフト名 | 概要 |
|---|---|
| CP2104 Driver | M5のマイコン用ドライバ。PCとつなげるのに必要。 |
| M5Burner | マイコンのファームウェアを書き込むツール。UIFlow のファームウェアをインストールすのに必要。 |
| UIFlow-Desktop-IDE | デスクトップ版のUIFlow本体。 |
こちらからダウンロード、インストールします。
私の環境では「CP2104 Driver」はすでに入ってるようなメッセージが出て途中で終わってしまったので省略しました。
M5Burner でファームウェア最新化
まずは「M5Burner」を立ち上げて本体のファームウェアを最新化します。本体はUSB接続しておきます。
ATOM に移動して、
最新版で「Download」して、
COMは選択肢が一つだったので選択して「Burn」します。
書き込む前にWiFi 情報を設定するようです。
このタイミングで入力しないと、別途WiFi設定が必要になるようなので入力しておきます。
書き込みが始まり、
Successfullyになったら閉じます。
Configration を押すと、
ApiKey が表示されます。UIFlowのブラウザ版を利用する際に使います。
本体起動
UIFlowのファームをインストールしたM5ATOM Matrix は4種類の起動モードがあるようです。
こちらに起動方法が書かれてました。 docs.m5stack.com
LED面のボタン(ボタンA)を押しっぱなしにして横にあるリセットボタンをクリックします。(ボタンAはしばらく離さない)
色が4色に順次変わるので、起動したいモードの色でボタンを離すとそのモードで起動される仕組みのようです。
| 色 | モード |
|---|---|
| 緑 | Wi-Fiモード (ブラウザ版のUI Flowを使う場合) |
| 青 | USBモード (デスクトップ版のUI Flowを使う場合) |
| 黄 | Wi-Fi設定モード (ブラウザからM5にアクセスしてWiFiの設定をする) |
| 紫 | アプリモード (UIFlow から本体に書き込んだプログラムを実行する) |
まずはデスクトップ版で試すので青のタイミングで離します。
UIFlow デスクトップ版起動
早速、起動します。
COMはM5Burnerで選択したものと同じものを、DeviceはMatrixに、Themeはお好みでOK押します。
「接続済み」になればOKです。
UIFlow ブラウザ版起動
ボタンAを押しながらリセットを押して、今度は緑で離します。
赤＞青＞緑の順に色が変わり緑になればWiFi接続OKのようです。
PCから以下のURLに接続します。
Api key は先ほどM5Burner で確認したものを入力します。
接続完了です。
とりあえず実行
プログラムの実行は右上の再生ボタンです。
まだ何も作ってないですが、実行すると光ってたLEDが消えました。
作ったものをサクッと実行できるのはなかなか便利な仕組みっすね！
LEDを光らせるだけであれば、画面左のUIエディタでLEDを適当にポチって実行すると、
そのままLEDが点灯します。やっぱ便利っすね！
Python画面にするとコードで表示されます。
先頭だけ赤にすれば、
いい感じっすね！
この状態でBlocklyに戻ると、直接コードで編集したものは消えてしまうっぽいです。
デスクトップ版とブラウザ版の違い
見た目や使用感はほぼ同じですが、使っていて細かいとこでいくつか違いがありました。
ファイルの保存方法
個人的に一番気になったとこで、ファイルの保存方法が異なります。
デスクトップ版は普通にファイル名を入れて保存できますが、ブラウザ版で保存するとダウンロードになります。
同じファイルを保存すると(1)などが付いた別名でダウンロードされてしまいます。
頻繁に同じファイルを保存する場合はダウンロードだと別名ファイルが大量に作られてしまうのでちょっと微妙です。
逆に保存するたびに履歴が残るので、途中の状態に戻すような使い方ができそうです。
接続時間
本体をリセットしてからPCと接続されるまでの時間はデスクトップ版の方が早くなります。というかほぼ待ち時間がありません。
ブラウザ版だとWiFiの接続が必要なのでしょうがないとこですが、開発中にリセットを多用する場合は早くつながる方が使い勝手がよさそうです。
バージョン
この記事の執筆時点ではデスクトップ版がV1.7.4、ブラウザ版がV1.7.5で若干ブラウザ版が新しくなっていました。
バージョンの差なのかブラウザとデスクトップ版の差なのかわからないですが、使えるブロック種類はブラウザ版のほうが少しだけ増えていました。(Socketブロックなど)
UI の違い
画面の細かい違いとしては
- 右上のメニュー ： ブラウザ版にはドキュメントやフォーラムへのリンクボタンなどがありました。
- メニューバー ： デスクトップ版のみメニューがあります。
「Refresh」は押すと警告ウィンドウもなくアプリ起動直後の状態になってしまいます。
プログラムを保存しておかないと消えてしまうので要注意です。
- UIエディタ左上の色選択ポップアップ ： バージョンの違いかもですがレイアウトが別物になってました。
左がブラウザ版、右がデスクトップ版です。
シリアル通信
シリアル通信については別の記事にまとめようと思いますが、デスクトップ版UIFlowで本体接続中にシリアル通信を始めるとエラーが出てUIFlowと本体の接続が切れてしまうようです。
ブラウザ版であればポートが開いてるのでUIFlowで開発しながらのシリアル通信ができそうです。
最後に
UIFlowを使ったM5ATOM Matrixの開発環境を整えてみました。
プログラムを実機で動かすのにボタン一つですぐに実行されるのはなかなか便利で開発がスムーズにできそうな印象です。
エラー発生時のデバッグはプログラムが複雑になると追いにくくなりそうなので、デバッグの仕組みもあるとうれしいです。
実装するのは難しいのかもですが、例えばエラー発生したブロックに色を付けてくれるなど。
次回からプログラムを作ってみようと思います。
