工作記録帳

子供達と作った工作いろいろ
Home › Archives for 2023

2023/11/18

M1 MACでM5Stack ATOM S3 をUIFlowで使う試行錯誤

event_note11月 18, 2023 forumNo comments

 

M5Stack社のATOM S3を手に入れたので遊んでみたいと思います。M1 Macで設定をした際に色々と大変だったので備忘録です。これを書いている時の環境は2023年11月現在の最新のOSはSonoma 14.1.1、UIFlow関連のバージョンもこの時点での最新のものを使用しています。

ATOM S3は液晶画面がついた小さなマイコンボードです。ESP32-S3というコントローラを搭載していて、センサーを繋いだりモーター繋いだり、WiFiもついているので色々なことができそうです。バッテリーは積んでいないので、電源は外部から供給します。

https://www.switch-science.com/products/8670


このATOMS3にプログラムを書き込む方法はいくつかあるようなのですが、UIFlowというブラウザで動作する開発環境を使ってみます。この方法ではプログラムの書き込みの際にケーブルで繋げる必要はなく、WiFiを通じて無線で行うことができます。この無線でのプログラムの書き込みを可能にするために、ATOM S3のファームウェアを書き換えてあげなければ行けないそうです。

セットアップの流れについてはこちらの記事に色々と助けてもらいました。ありがとうございました。

https://qiita.com/youtoy/items/ecc61ae5eb1cb57cc64b


ファームウェア書き換え編

まずファームウェアを書き込むソフトをダウンロードします

ここからUIFLOW FIRMWARE BURNING TOOLをダウンロード

https://docs.m5stack.com/en/download

ダウンロードしたZipファイルを解凍して中にあるm5burner.app(Windowsの場合はm5burner.exe)を起動します。

すると早速エラーが出ました。とりあえず「キャンセル」で閉じます。
左上のリンゴマークを押して、システム設定の中のプライバシーとセキュリティの中をスクロールするとAppがブロックされた旨が書かれています。「このまま開く」を押します。プライバシーとセキュリティのポップアップが出るのでMacのパスワードを入れてください。
するとこんなポップアップが出てくるので「開く」で開きます。それでも開けないときはm5burner.appのファイルをアプリケーションフォルダに移動してから開いてみてください。
初期画面が開きました。起動したら自動で最新版にアップデートしたらしく、右下にrestartしますかとメッセージが出ています。restartを押すとm5burnerが再起動します。

パソコンとATOM S3をUSBケーブルで繋いでください。
再起動したら左のリストの中からATOM S3を選択します。この時点でのファームウェアの最新versionはAlpha-28でした。ダウンロードを押してm5burner内にこのファームウェアをダウンロードします。さあ、ここでBurnを押せばATOM S3にファームウェアが書き込まれ…
エラーが出ました。ログインしなければならないそうです。なんで？
しょうがないのでここからアカウントを作ります。
Resisterを押すとアカウント作成ページに飛ぶので、そこでアカウントを作成します。アカウントが作成できたらまたm5burnerに戻ってきてEmailとパスワードを入力してログイン。
無事ログインができたらBurnを押して書き込みのセッティングを行います。
さあ、Nextを押していよいよ書き込み…
エラー出ました…
--chip auto --port /dev/tty.usbmodem2201 --baud 1500000 --before default_reset write_flash -z --flash_mode dio --flash_freq 80m --flash_size detect 0x9000 /Applications/M5Burner.app/Contents/Resources/packages/tmp/uiflow2-cfg.bin
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

エラーの文章で検索すると以下の記事が出てきました。ありがたい。

記事に従ってXcode Command Line Toolをインストールします。画面右上の虫眼鏡マークをクリックするとSpotlight検索が出てくるのでそこにTerminalと打ち込んで「ターミナル.app」をクリックして立ち上げます。
立ち上がったらそのまま以下の文を打ち込み、returnを押してください。

xcode-select --install

するとこのようなポップアップが出るのでインストールをしてください。

Xcode Command Line Tool インストールが終わったら再度試してみます。
あ、書き込む前にATOM S3の側面ボタンを長押しして書き込みモードにします。ボタンの隙間からLEDが内部で光っているのが見えたら書き込みモードに入っています。
COMはATOM S3を繋いでいるUSBポートの番号を選びます。どれだかわからないときはこの画面のままATOM S3を外したり繋いだりしてください。増えたのがATOM S3が繋がっているポートです。
Startを押すとアカウントの紐づけに関するWarningが出てきます。これでこのATOM S3の個体がアカウントに紐づきます。YESを押して次へ。
Nameは好きに設定できるようです。どの個体か見分けるための用途です。
Nextを押すと元の画面に戻るのでまたStartを押すとWIFIの設定画面になります。WIFI SSIDとWIFI Passwordは自身のWiFiの情報を入力してください。プログラムをするPCと同じWiFiに繋がっている必要があります。また、ATOM S3は2.4GHz帯にしか対応していないので注意です。Timezoneは関係あるのかわかりませんが一応設定しておきます、日本はGMT+9です。その他の項目はデフォルトのままいじっていません。
NEXTを押して

ついに書き込みに成功しました！USBを指し直すと、ATOM S3にもUIFLOW2と表示され、WiFiにも無事繋がっているようです
ここから先、ATOM S3とパソコンを直接USB-Cケーブルで繋ぐ必要はありません。ATOM S3へは電源供給だけのケーブルで大丈夫です。パソコンとATOM S3が設定した同じWiFiネットワークに繋がっていることだけ注意してください。

UIFlow編

UIFlow2.0にアクセスします
右上の人のマークをクリックして先程作ったアカウントでログインします。
ログインができたら画面下にある「Select Device」をクリック。すると先程UIFlow2をインストールした個体がありました。それをクリックしたら画面右下のConfirmをクリック。
これでプログラムの書き込み先が先程設定した個体になりました。試しに画面に"1"を表示して、画面の色を青くするプログラムを書いてみます。画面下のRunを押すと書き込まれます。
書き込み成功のメッセージが出るのですが、一瞬で消えるのでスクリーンショットを取り損ないました。なにはともあれATOM S3のスクリーンはこんな感じに青くなりました。
無事スクリーンは青くなりましたが、あれ？print "1"の部分が表示されていない…？
画面に文字を表示するやり方が違うようです。

labelという機能を使うようです。以下の画面から、ATOM S3の画面に何を表示させるかのレイアウトを編集できます。ここでLabelを画面上にマウスでドラッグして「label0」というものを作ります。
プログラムの方でこのlabel0に”Hello”という文字を代入してあげると…
あれ？変わらないじゃん！

どうやら背景色を設定するタイミングがいけなかったようです。Helloは書かれているけど、背景色が上書きされて見えなくなっているのかな。
Set screen background colorをLoopの中ではなくSetupの中に移動しました。
これでどうだ

Hello！！！
成功！

RUNとDownloadの違い

プログラムを実行するのにRunというボタンとDownloadというボタンの2つがあります。（現在のUIFlowの右側のボタンにはDownloadという文字は書いてありませんが、昔のバージョンのUIFlowにはDownloadと書いてあったようです）

RUN
1回だけ自分のプログラムを実行します。自分のプログラムが動くのはUIFlowとオンラインで繋いでいる間だけで、ATOM S3の電源を切って再度入れ直すとリセットされ、書き込んだ自分のプログラムは消えてます。

Download
ATOM S3に自分の作ったプログラムを書き込んで、電源が入ったときに最初に実行するプログラムにします。UIFlowとオンラインで繋いでなくてもATOM S3が単体で動作できるようになります。

公式の説明はこんな感じです。
原文：
https://docs.m5stack.com/en/quick_start/atoms3/uiflow
The Run/Download of the program:
1. The Run button (triangle) in the menu bar of UIFlow online version is the Single test operation, and the device will re-enter the online programming mode after reset.
2. The download button will download the current program to the device and configure it to start automatically. Note: If the downloaded program involves network communication, please add a WiFi connection program at the beginning of the program. If you need to re-enter the programming mode in offline operation mode, you can refer to the mode switching instructions at the bottom of this document.

Runで動かしているうちはATOM S3はonline programming modeとなっていて、新しいプログラムを受け付けるモードです、DownloadをするとATOM S3はApp modeになり、自分のプログラムを実行するモードになります。再びUIFlowと繋いで新しいプログラムを書き込むためにはonline programming modeにしなければなりません。このやり方がなぜかどこにもはっきりと書いてないのですが、ATOM S3の電源を切り、液晶画面スイッチを押しながら電源を入れるとonline programming modeに入れます。
m5burnerのConfigureからもできるらしいのですが、UIFlow使い始めている時点でm5burnerはもう起動してないし、m5burnerからまたログインしてからじゃないとConfigureに入れないし、入ってもどうすればonline programming modeにできるのかわからないし、ということで電源を切って入れ直す方が簡単かと思います。

なお、一度online programming modeに入り直すと、Appモードに単体では戻れません。電源をもう一度入れ直してもonline programming modeにしかならないので注意してください。Downloadで書き込んだプログラムは消えてはいないんだろうけど、UIFlowでまたプログラムを書き直さないとだめみたいです。。。
Read more