M5Stack UIFlowのはじめかた

概要

書籍の発売から一年が経過して、いろいろ状況が変わっているのでUIFlowのはじめかたの部分を説明しなおしたいと思います。

対象機種

CoreシリーズStickシリーズATOMシリーズSTAMPシリーズその他シリーズ
ESP32
搭載ボード
BASIC
GRAY
FIRE
M5GO
CORE2
CORE2 FOR AWS
M5Stick
M5StickC
M5StickC PLUS
M5StickT
M5StickT2
ATOM LITE
ATOM MATRIX
ATOM ECHO
ATOM U
STAMP PICOCORE.INK
M5PAPER
TOUGH
STATION 485
STATION BAT
ESP32-C3
搭載ボード
STAMP C3
STAMP C3U
ESP32-S3
搭載ボード
CORES3AtomS3
AtomS3 Lite
StampS3

上記がM5Stackのコントローラーと呼ばれるボード一覧です。赤い文字で書いてあるボードについてはUIFlowでサポートしていないので注意してください。青い文字はESP32-S3で新しいバージョンのUIFlow2.0でサポートされる予定ですが、まだ完成しておらずお試し版しかない状態です。

これ以外にもカメラ系のものやAI系、Raspberry PIのCM4を搭載したいしたCM4Stackなどもありますが、UIFlowではサポートされていません。

おすすめ機種も書籍の時からはあまり変わっておらず、M5StickC PLUSかCORE2 FOR AWSあたりがUIFlowで利用するのであれば使いやすいと思います。

UIFlowの導入方法

書籍ではM5Burnerのバージョン2で解説してありますが、現在はバージョン3が公開されています。2から3は自動バージョンアップの対象ではないので、新規に3を入れる必要があるので注意してください。

m5-docs
ThereferencedocsforM5Stackproducts.Quickstart,getthedetailedinformationorinstructionssuchasIDE,UIFLOW,Arduino.ThetutorialsforM5Burner,Firmware,Burning,programmi...

上記のページからダウンロードすることができます。

いろいろなファイルが置いてありますが、上記の「UIFLOW FIRMWARE BURNING TOOL」にあるものになります。Windows、MacOS、Linux用があるので環境に合わせてダウンロードします。

インストーラーなどはないので、解凍したファイルから実行する形となっています。

M5Burnerのログインについて

右上に人の形のアイコンがあり、クリックするとログインすることが可能です。アカウントはRegisterのボタンを押すと、M5Stackの掲示板であるフォーラムの登録ページにジャンプします。このログインは通常は不要ですが、自分で作成したプログラムをM5Burner上で公開したい場合や、UIFlow2.0のアルファ版を利用する場合には必要になります。

また、ログインして書き込んだ端末はアカウントと紐付けられるので、UIFlowのプログラム画面でもログインをする必要が出てきてしまいます。通常はログイン不要だと思いますが、UIFlow2.0のアルファ版を使う場合にのみログインが必須となります。

ドライバーのインストール

右上のアイコンで人の右側に三本線のアイコンがあり、その中にSerial Monitorがあります。

この画面を利用して、シリアルポートのドライバが必要かを確認することができます。まずボードを接続していない状態で選択できるシリアルポートを確認します。私の環境だとCOM256のみありました。Windowsの場合には何も表示されていないことが多いはずです。

「Found New Device」と表示されて、COM7が増えました。この増えたシリアルポートが接続したボードのものになるので覚えておいてください。

シリアルポートが増えなかった場合

なんどか試してシリアルポートが増えなかった場合にはシリアルポートのドライバが必要な可能性があります。

Windowsの場合には、Windows Updateを行ってから「オプションの更新プログラムを表示」を選択できる場合には、ドライバのインストールが可能な場合があります。

上記のように追加のドライバをインストールすることで接続するとシリアルポートが追加される状態になる場合があります。

だめだった場合やWindows以外の場合

m5-docs
ThereferencedocsforM5Stackproducts.Quickstart,getthedetailedinformationorinstructionssuchasIDE,UIFLOW,Arduino.ThetutorialsforM5Burner,Firmware,Burning,programmi...

上記からUSBドライバをインストールする必要があります。

上記のどれかなのですが、実際のところ非常に選ぶのが難しいです。自分の環境にあったものを上から入れていって、シリアルポートが認識するのかを確認するのがよいと思います。

ボードに対応したUIFlowのダウンロード

まずは一番左側にカテゴリ別のタブがありますので選択して、その後に該当するアプリケーションを縦スクロールから選択する手順になります。

タブ名称対応ボード
COREUIFlowBASIC
GRAY
M5GO
COREUIFlow_FireFIRE
CORE2 & TOUGHUIFlow_Core2CORE2
CORE2 FOR AWS
CORE2 & TOUGHUIFlow_ToughTOUGH
STICKUIFlow_StickCM5StickC
STICKUIFlow_StickC_PlusM5StickC PLUS
ATOMUIFlow_MatrixATOM MATRIX
ATOMUIFlow_LiteATOM LITE
ATOMUIFlow_AtomUATOM U
ATOMUIFlow_AtomDisplayAtom Display
PAPERUIFlowM5PAPER
COREINKUIFlowCORE.INK
STAMPUIFlow_PICOSTAMP PICO
STATIONUIFlow_StationSTATION 485
STATION BAT
ATOMS3UIFlow2.0AtomS3
AtomS3 Lite
STAMPS3UIFlow2.0StampS3

上記の対応になっています。M5GOが特殊なのですが、個別のUIFlow_M5GOがあるのですが中身が古くて、最新版はBASICなどと同じUIFlowに統合されています。

UIFlow2.0は現在アルファバージョンで、ログインしないと利用できないのにも注意してください。

ダウンロード

CORE2 FOR AWSにUIFlowを転送する例になります。左側のタブをCORE2を選択して、一番上にあるUIFlow_Core2を選択して、右下にあるDownloadボタンを押します。

ダウンロードが成功すると書き込むためのBurnボタンが表示されます。

Burnボタンを押すと、ボードが接続するWi-Fiアクセスポイントの情報を入力する画面がでます。注意点としてはM5Stackが利用しているESP32は2.4GHzのWi-Fiアクセスポイントにしか対応していません。5GHzのみのアクセスポイントには接続できないので注意しましょう。

次に転送するシリアルポートの選択画面になります。ここで先程接続して増えたシリアルポートを選択します。

Eraseボタンを押すとボードの中身を初期化してくれます。通常は問題ありませんが、なにかおかしいなと思った場合には一度Eraseで初期化してから転送すると環境がリセットされると思います。

Burnを押すと転送がはじまります。プログラムを転送することを焼くと表現することがあるのでBurnボタンになっているはずです。

転送が終わりました。これでUIFlowがボードに転送され、自動的に起動したはずです。

そのままボードを触ってもよいのですが、非常に重要なConfigurateボタンの使い方を紹介します。

Configurationボタンを押すと、シリアルポートの選択画面が表示されます。Loadで次に進みます。

UIFlowの内部の設定が表示されました。

COM接続されているシリアルポート
MACボードのMACアドレス
APIKEYUIFlow接続用のAPIKEY
Start ModeInternet / USB / Appモード
Boot MenuShow / Hide
Boot BeepOn / Off
Serverflow.m5stack.com / sg.flow.m5stack.com
WIFI SSIDボードが接続するSSID
WIFI Passwordボードが接続するKEY
COM.XFlase / True

上記の設定項目になっています。気をつけないと行けないのがAPIKEYです。このキーを使ってブラウザからボードに接続することになります。APIKEYは公開してはいけない情報なのですが、Eraseしてから転送し直すことで別のキーに更新が可能です。

Start Modeはかなりわかりにくく、そしてハマりがちな選択肢となります。

モード備考
Internetブラウザ経由でプログラムを行う標準的なモード
USBUSB接続で古いUIFlow Desktopアプリで接続するモード
App内部に保存したプログラムを実行するモード

上記の3種類あるのですが、USBはすでにアプリの更新が止まっており利用できないと思ったほうがよいです。基本的にはInternetモードになっているのが標準的なのですが、ブラウザ上でUIFlowのプログラムダウンロードボタンを押してしまうとAppモードに変更されてしまいます。このモードになると保存したプログラムが立ち上がり、ブラウザから接続できない状態になるので注意してください。Boot MenuからInternetモードに変更するか、Configurationボタンから設定しなおしてください。

Boot Menuは最初に選択画面を表示するかの設定になります。ボードによるのですが、上記のように起動モードを選択する画面が表示されるかの選択です。基本的にはボードの画面上から設定するより、Configurationボタンから設定したほうがわかりやすいと思います。

Boot Beepは起動時の音になります。Core2系の場合にはピコーンと音がします。個人的にはOFFにしていますが、好みで設定してください。

Serverは中国国内サーバーとしてsg.flow.m5stack.comが提供されています。通常は変更する必要はありません。

WIFI SSIDは転送時と違うSSIDに接続する場合に上書き設定することが可能です。

COM.Xは通信モジュールを使っている場合Trueに変更しますが、日本国内だとあまり対応モジュールが販売されていないので通常は未使用のFlaseになるはずです。

Boot MenuからFlowを選択したあとの画面です。Wi-Fiアクセスポイントに接続をして成功すると上記のような画面になり、APIKEYが表示されます。Configurationボタンと同じキーが表示されていることを確認してください。

キーが表示されない場合 その1 Wi-Fi接続失敗

このキーが表示されない場合にはWi-Fiアクセスポイントへの接続が失敗している可能性が高いです。とくに2.4GHzのWi-Fiアクセスポイントにしか接続することができませんので、5GHzのアクセスポイントに接続しにいっていないのかを確認しなおしてSSIDとKEYの再設定をしてみてください。

キーが表示されない場合 その2 Firewall

大学などの環境の場合、UIFlowに必要なポートが許可されていない可能性があります。

GitHub - akita11/uiflow_checker
Contributetoakita11/uiflow_checkerdevelopmentbycreatinganaccountonGitHub.

上記にakita11先生が作成したネットワーク環境のチェックツールになります。UIFlowを利用するためにはflow.m5stack.comとの間でMQTT(TCP/1883)が利用できる必要があります。

ブラウザからUIFlowサイトにアクセス

M5Flow

上記のURLにアクセスを行います。

現状は既存のUIFlowと作成途中のUIFlow2.0アルファ版の2種類の画面があるので最初に選択を行います。

あとは書籍の通りなのですが、左下にあるAPIKEYをクリックして、上記の画面から接続するボードのAPIKEYを入力して、ボードを選択します。

くるくる回るマークをクリックして、接続済みになることを確認してください。

上記のように接続済みになればUIFlowが使える状態になりました!

ちなみにログインボタンもありますが、M5Burnerでログインをしていた場合にはこちらもログインする必要があります。UIFlow2.0のアルファ版を利用する場合にはログインが必須となります。通常私はログインをしない状態で利用しています。

書籍との違いについて

書籍が販売されてから、若干UIFlowの画面レイアウトが変わっていますので大きな変更点を紹介したいと思います。

実行ボタンの位置変更

上メニューにあった実行ボタンが右下のRunの場所に移動しています。その右にあるダウンロードボタンは現在のプログラムをボードに保存して、Appモードで起動するためのボタンです。まちがってダウンロードボタンを押してしまうとこのブラウザから接続することができなくなりますので、本体の操作かConfigurationボタンからInternet(Flow)モードに戻す必要があるので注意してください。

ターミナル

書籍ではM5Burnerのシリアルモニターを利用していたと思いますが、Chromeブラウザを利用している場合にはUIFlowの画面からも接続することができるようになりました。

上記のような黒い画面が表示されますので、Terminalと書いてあるタイトルの右側にあるリンクボタンを押します。

するとシリアルポートの選択画面が表示されますので接続することができます。

すると上記のようにボードがリセットして、UIFlowの起動画面が表示されました。

その他の変更

いろいろ細かいところは変わっていますが、書籍から大幅に変わっているところはありません。新規販売したユニットが追加されたり、細かい機能追加が主ですので書籍の情報のみでも使うことはできるとは思います。

まとめ

対応ボードがかなり増えて、導入のしかたも変わりましたがUIFlow自体のプログラムに関してはあまり変更がないと思っています。UIFlow2.0が正式版になったときには、現状と大幅に変更があると思いますので、また記事にまとめる予定です。

コメント

  1. Uta Aoya より:

    いつもありがとうございます!
    これは誤字かも?『シリアルポートが増えたなった場合』
    シリアルポートが増えなかった場合、ということでしょうか?

  2. ハク より:

    ブログと本を大変参考にさせていただいております。現在セットアップをしている中での質問なのですが、UIFLOW画面下部メニューバーのボードとの接続状況が「disconnected」のままで(右の再接続ボタンを押しても変わりません)変わらないのですが、何が原因と考えられるでしょうか。ちなみにM5StickC plusの画面は「Reconnect」と出ています。もし知見ございましたら、教えていただけないでしょうか。

    • たなかまさゆき より:

      M5StickC plusの画面にAPIキーが表示されていない場合には、Wi-Fi接続ができていません
      5Ghz帯のWi-Fiには接続できないので2.4Ghz帯のWi-Fiアクセスポイントに接続する必要があります
      M5Burnerから設定し直すか、クリアしてから転送しなおしてみてください
      ただし、学校などの環境からですとファイアウォールとかで通信が禁止されている場合があります

      あとはパソコンも端末と同じWi-Fiアクセスポイントに接続しないとだめな場合もあるようです

  3. ハク より:

    パソコンと端末を同じWi-Fiアクセスポイントに接続したところ接続できました!ご回答いただき大変ありがとうございました。