見出し画像

(1)M5GOとUIFlowでプログラミング - 準備

shintaro

※ヘッダ画像差し替えました。

はじめに

中学校技術でプログラミングを行うにあたり、ここ数年は、M5StickC Plusを使用してきました。
今年度（2024年度）は、M5Go IoT スターターキットを使用する機会に恵まれましたので、こちらを使用して実践をしていきたいと思います。

例のごとく自分の備忘録として、ですが、一連の流れを掲載していきたいと思っています。

M5GOとは？

単体として売られているのではなく、IoTスターターキットというキットのセット販売の商品です。はじめから、いくつかのGroveセンサが付属しています。
基本的にはM5Stack Basic相当のようです。

大きな違いは、M5Stack Basicにはある、GPIOのピンソケットがありません。その代わり、2個のGroveコネクタ、RGB LEDバー、マイク、6軸IMUなどが追加されているようです。

　また、バッテリーの容量が110mAhから500mAhに強化されているのも特徴のようです。そのほか、裏面には、LEGOブロックで接続できるようになっていて、キットにもいくつかのLEGOパーツが含まれています。

　M5GOには当初からUIFLow（v.1.8.1）が書き込まれ、機能を説明するためのプログラム（M5GO.py）が起動するようになっているので、何ができるか、などはそれを弄りながら理解ができるようになっています。

方針としては、UIFlowをアップデートすることと、LocalUIFlowを使用すること、生徒がつまづきそうな操作は、なるべくこっちで隠蔽して、生徒にいじらせる感じで考えています。GPIOがなくてGrove接続になっていたりLEGOブロックが接続できたりするのも、教材として考えたときにはプラスに働く感じがします。

デモプログラムなど、すでに、製品の時点でよくできているので、UIFlowは更新しない、という展開も考えられます。

…というのも、スピーカーを使用してWavファイルを再生しているであろうデモプログラムは、UIFlowをv1.13.4に更新するとv1.8.1用のM5GO.pyでは、Wavファイルを再生できなくなったので、UIFlowの更新で動作周りが変更されている可能性があります。
公式も、途中で動作していないことに気づいたらしく、M5GO用のUIFlowをv1.10.6 → 1.10.6.1にするときにデモプログラムのスピーカー部分はWavファイルを再生するのではなく、トーン音に変更されていました。

私は、LocalUIFlow v1.13.4を使用するので、UIFlowを更新し、デモプログラムも、もったいないので、一旦退避させておいて再び書き込むことにします。その際、M5GO.pyは1.10.6.1のものを書き戻すようにします。（複雑）

M5BurnerのUIFlow_M5GOは、v.1.10.6.1が最新(2024/9現在)

M5StickC Plusとの違い

まずは価格です。M5StickC Plusは¥4,037ですが、M5GOはGroveセンサ込みで¥12,749（2024/9/23 いずれもスイッチサイエンス）です。
教材として考えたとき、価格面ではStickC Plusが手を出しやすい（特に、クラス人数分確保すると考えると）ですが、最初からいくつかのセンサが付属して、Basic相当、LEGOが使用できる仕様なら、予算が許すのであれば、コストパフォーマンスはかなりいいです。

直接関係ないですが、M5StickC Plus（無印）はディスコンだと思っていたのですが、在庫が復活してますね。スイッチサイエンスも在庫限りから通常販売に切り替えたようです。（2024/9/23）

基本的にはBasicなので、液晶が大きいのと、ボタン類が３つ使用できること、GroveポートがA、B、Cの３ポートあります。スピーカーはWavが再生できますし、microSDカードも使用できます。

逆に、M5StickC Plusには、RTCが入っているのですが、M5GOには搭載されていませんし、HATの接続（HATはStick用）もできません。

ローカルで使用する際には、RTCがあると便利なのですが、まぁ、必要ならGroveでUnitをつなげるしかないでしょう。

準備編

基本的にWindows環境で行います。

１．教材が届いたら、まずは、全てにラベリング

見た目は全て同じ製品ですので、本体とケースに番号を振って区別できるようにしました。41台あったので、No.1～No.41としました。

２．M5Burnerのダウンロード、インストール

公式サイトからM5Burnerをダウンロードしてインストールします。

M5Burner

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

M5BurnerでUIFlow（OSのようなもの）をM5GOに入れる際に、PCと接続してシリアル通信をさせますが、シリアル通信ができる機器として認識させるためにPCにドライバを入れる必要があります。（私は既に入れてあるので不要でしたが、念の為）

該当のドライバを入れる（２種類ある。両方いれてもよい。）

４．M5Burnerから使用するバージョンのUIFlowをダウンロード

M5Burnerは各製品に専用のUIFlowを入れることができます。
UIFlowは、OSのようなもので、基本的な機器の設定などの操作ができるほか、プログラミングサイト、UIFlowから本体にプログラムを送る仲立ちをしてくれます。

※これ以降、本体に書き込むソフトウェアとしてのUIFlowと、プログラミングサイトとしてアクセスする先としてのUIFlowが混在するのでご注意ください。

M5GO用のUIFlowは（CORE）のものを使用すればよいようです。

私が使用する予定のLocalUIFlowのバージョンがv1.13.4なので、
同じバージョンをダウンロードしておく
説明には「BASIC/GRAY/M5GO用」と書いてある

気づいたのは、書き込みや通信時に、本体のリセットがかかることです。スピーカーと接続されているせいか、プツンプツン言うのですがまぁ、気にしないことにします。
まだ書き込みはしません。

５．「Configure」で通信させ、設定を呼び出す。

買ってきたばかりのM5GOには、標準でv1.8.1のUIFlowが入っているので、ドライバが正しく当たり、PCとM5GOの間でシリアル通信ができるようであれば、設定が開けます。

「Configue」を押すと、このような画面が出ますが、この画面で通信するポートCOMポートを指定します。

基本的には、M5GOを接続した時点で、

このようなツールチップが出て、自動で認識したCOMポートが選ばれるはずですが、そうでない場合、COM1とCOM2は、はじめから用意されているポートなので、それ以外になるでしょう。

正しく選んだら「Load」を押します。

Loadを押します

こんなツールチップが出て、

設定の取得に成功しました

設定が表示されます。

呼び出した設定

ここで重要なのは、「MAC」と「APIKEY」を控えておくことです。
MACアドレスは機器固有のアドレスで、相手を一意に特定することができるので、M5製品同士の通信に使用します。APIKEYは、UIFlowとM5GOの接続に使います。再発行も可能ですが、基本的には変わりません。機器側で表示ができるのですが、控えておくと、機器上でAPIKEYが表示されていないときもUIFlow側で設定ができて便利です。

スプレッドシートに控えてある

インターネット上のUIFlowに接続して使用するつもりであれば、「Server」の欄は変更不要ですし、「WIFI SSID」「WIFI Password」はインターネットにつながる無線LANの設定のものを使用します。

LocalUIFlowを使用するのであれば、「Server」は、「LocalUIFlowのIPアドレス」「WIFI SSID」「WIFI Password」はLocalUIFlowの無線LANルーターの設定を使用します。

「Save」して、設定を保存すると、 リセットがかかります。
教材に使用する全てのM5GOに対して同じようにします。

６．MACアドレスとAPIKEYをラベルライターで印刷して本体に貼る

やらなくてもよいですが、その都度いちいち調べるのが面倒なので、私はやっています。

７．全てのM5GOのMACアドレスを控えたら、機器に振った番号とMACアドレスを対応してEEPROMに書き込むプログラムを書いて１台にダウンロードして.pyファイルとして転送する

MACアドレスは12桁の文字列であり、人間が覚えていられるものではないので、EEPROMに書き込んでおき、必要なら、機器の番号から引けるようにしておきます。これも、通信を行わせるような活動がないなら不要です。

表示部分

Aボタンで書き込み、BボタンはNoの減算、CボタンはNoの加算に使用して、EEPROMに書かれたMACアドレスを読み出して表示します。
自分のMACアドレスと合致したら文字色を赤にしています。

メインプログラム

B、Cボタンは減算と加算の処理と、EEPROMからの読み込み、ラベル表示を担当します。

ボタンB、C（No送り部）

Aボタンは、画像では省略していますが、key1～41としてMACアドレスを愚直に書き込んで書き込んだら「Done!」メッセージを表示します。

ボタンA（書き込み部）

最後に、ダウンロードボタンを押して、実機で実行できるファイルとして転送します。

８．ampyのインストール、ファイルのバックアップ

M5Stack製品は、ESP32というマイコンをベースに作られていますが、Adafruit社が開発したampyというツールを使うと、シリアル通信を利用してPCとESP32ボード間でファイル転送ができます。

Windowsのコマンドプロンプト（「Windowsキー」→「cmd」と入力）から

pip install adafruit-ampy

で、インストールができます。
M5GOとPCが接続された状態で、

set AMPY_PORT=COMx
ampy ls

※COMxのxは、M5Burnerのときに自動選択されたCOMポートと同じです。

とすると、通信します。
M5GOがUSB Modeだと通信に失敗します。Internet ModeかAPP Modeにしておいてください。
lsコマンドは、そのディレクトリ（フォルダ）に存在するファイルやディレクトリのリストを表示するコマンドです。
慣れてないととっつきづらいかもしれません。

成功すると

/flash

と表示されます。これは、M5GOの本体内蔵ストレージにアクセスできたことを指します。

ampy ls /flash

で、更にM5GOの中を確認します。

/flash/apps
/flash/blocks
/flash/boot.py
/flash/emojiImg
/flash/img
/flash/main.py
/flash/res
/flash/temp.py
/flash/test.py
/flash/update

拡張子.pyがついているのはプログラムのファイル、ついていないのはディレクトリ（フォルダ）です。

ampyでは、getコマンドでM5GOからファイルをPCに転送でき、putでPCからM5GOにファイルを転送できます。
例えば、こんな感じです。

ampy get /flash/apps/M5GO.py c:\m5stack\M5GO\apps\M5GO.py

これを利用して、M5GOにあるファイルをバックアップしておくことができます。バージョンアップ等で新しくUIFlowをM5Burnerで書き込んだ場合、内蔵ストレージに保存されていた内容はクリアされてしまうので、作ったプログラムや、転送した画像、そのバージョンで標準で入っていないプログラムなどは消えてしまいます。
ampyにより、それを一旦PCに退避しておき、再度書き込めるのです。

追記（24/10/05）
公式がGitHubで公開しているようです（詳しくは(2)で触れます）。そちらを使えばバックアップする必要はなかったようです。でも、書き戻すのには必要なので、ampyを入れる事自体は無駄ではなかったです…！

M5GOは、専用のUIFlowがv1.10.6.1までしか提供されていません。
デモプログラム（M5GO.py）などはそれにしかありませんが、使用したいのはv.1.13.4のUIFlowなので、Core用を書き込みます。その時点で、プログラム類は真っ更になってしまいますが、更新後に、退避しておいた、M5GO専用UIFlow v1.10.6.1に入っていたM5GO.pyを書き戻すのです。なお、前述の通り、購入後にはv1.8.1が入っていますが、そこで正常に動作したデモプログラムでのwavファイルの再生プログラムは、v1.10.6.1では動作せず、トーン音の再生に変更されています。v1.13.4も正常動作しないのは同様なので、そのv.10.6.1のものを使用します。（ややこしい）

また、デモプログラムで使用されている画像ファイルはやや多く容量を使用しているので、画質を落として書き戻すようにします。これで、書き戻した際の本体ストレージの容量を削減できます。
更に、wavファイルの再生はどうせ正常に行われず、また、更新でどこで使用しているかよくわからないding.wavというファイルが１つ増えており、wavファイルは結構容量を食うので、削除しておきます。
ampyで削除する場合、rmコマンドを使用します。
以下は例です。

ampy rm /flash/res/ding.wav

なぜ容量を気にするかというと、プログラムを転送して実行させたときに、容量が足りないと転送できず、実行できないためです。はじめの段階でなるべく容量は消費しないようにしておきます。

JPEG画像については、GIMPというソフトを使用して一旦開き、エクスポートして保存し直します。

Adobe税が高いので、最近、PhotoshopからGIMPに乗り換えました。
(追記)乗り換えは失敗しました。CS3ぐらいから、17年くらい使用してきたPhotoshopとあまりに操作体系が違って、私には使いにくく感じられてしまったためです。思い通り選択や切り抜きができない…。勉強しなおすのも、Photoshopに戻るのも嫌なので、PhotopeaというWebサービスを使用するようにしました。Photoshopライクの操作感で使用できるようなので、そちらにします。下記の内容も、Photopeaでいけそうです。

品質を20に落とし（ややボケます）、
Save Exif data、XMPデータの保存、Save color profileなどのチェックを全て外し、余分な情報を付けないようにします。
詳細設定から、最適化、プログレッシブのチェックを外し、ベースラインJPEGとして保存します。最適化やプログレッシブがONだと表示できないようです。

結果がこの通りです。

容量削減前（オリジナルの画像の容量）
削減後

まぁ、別にやらなくても良いとは思いますが、せっかくなのでやっておきます。転送時間も短くなるので、41台もあると無視できなくなるはずです。

９．M5BurnerでUIFlowv.1.13.4に更新

４でダウンロードしておいた、v1.13.4に更新します。
「burn」ボタンで更新します。９と10は、連続して１つのM5GOに対して行います。

10．バックアップからプログラムと画像の書き戻し

保存しておいた、
M5GO.py（デモプログラム）、game.py（じゃんけんゲームデモ）、WriteROM_MAC.py（EEPROMへのMACアドレス書き込みプログラム）などを書き込みます。
また、授業で使用する予定のじゃんけん画像（gu_me.jpg、gu_you.jpgなど）もあらかじめ転送しておきます。UIFlowからでも転送できますが、APIKEYを利用して接続し転送するのは面倒ですので、こちらで転送しておきます。
これらを１つ１つコマンドを打つと大変なので、バッチファイルを作成しています。以下をコピーしてテキストファイルとして保存し、拡張子を.batにすれば、動作するはずです。
PC側のファイルは「C:\M5Stack\M5GO\」に本体内蔵ストレージと同じ階層構造で全て置いてあるものとします。3行目にPC側ローカルファイルの位置を指定する部分があるので、自分の環境のローカルファイルの位置を記載して使います。
なお、PC側ファイルの位置はファイルを検出して動作するようにしたのですが、M5GO側は、特にそういう処理がされていないので、ファイルがない場合、M5GOと通信ができない場合等は、応答にかなりの時間をかけてトライした上、エラーが出ます。応答に相当時間がかかっている場合は、どちらかの可能性があるので、「Ctrl+C」で終了させ、問題を解決してから動作させるとよいでしょう。

使い方は、最初に、COMポートを聞いてくるので、数字部分だけ答えます。
あとは自動で進みます。
９と10を連続して行うように記述したのは、９のときに、M5BurnerでCOMポートがいくつか教えてくれるためです。
本当は（？）デバイスマネージャで調べたりすることもできるのですが、M5Burnerが教えてくれるので、それで済まそうという魂胆です。

@echo off
setlocal
set LOCAL_FOLDER=C:\M5Stack\M5GO\

:INPUT_START
echo ===========================================
echo COMポートを指定してください(COMx、数値のみ)
echo ===========================================

set /p INPUT_COM=

rem IF "%INPUT_COM%=="" GOTO :INPUT_START

echo.
echo ==========================
echo COM%INPUT_COM%と通信します
echo ==========================
set AMPY_PORT=COM%INPUT_COM%

rem wavの削除
echo.
echo ================
echo wavを削除します
echo ================

ampy rm /flash/res/ding.wav
echo ding.wav削除処理終了
ampy rm /flash/res/mix.wav
echo mix.wav削除処理終了
rem imgフォルダに追加
echo.
echo ================
echo 画像を追加します
echo ================

set SUB_FOLDER=img

call :TENSO 3-1.jpg
call :TENSO 3-2.jpg
call :TENSO 3-3.jpg
call :TENSO 3-4.jpg
call :TENSO 3-5.jpg
call :TENSO 3-6.jpg
call :TENSO 3-7.jpg
call :TENSO 3-8.jpg
call :TENSO 3-9.jpg
rem call :TENSO 3-a.jpg
call :TENSO 2-1.jpg
call :TENSO 2-2.jpg
call :TENSO 2-3.jpg
call :TENSO 11aa.jpg
call :TENSO 11bb.jpg
call :TENSO rock_128.jpg
call :TENSO scissors_128.jpg
call :TENSO paper_128.jpg

rem プログラムの転送
echo.
echo ======================
echo プログラムを追加します
echo ======================

set SUB_FOLDER=apps

call :TENSO M5GO.py
call :TENSO game.py
call :TENSO WriteROM_MAC.py

rem リソースの追加
echo.
echo ======================
echo リソースを追加します
echo ======================

set SUB_FOLDER=res

call :TENSO gu_me.png
call :TENSO gu_you.png
call :TENSO tyoki_me.png
call :TENSO tyoki_you.png
call :TENSO pa_me.png
call :TENSO pa_you.png

rem プログラムの終了表示
echo.
echo ========================
echo プログラムが終了しました
echo ========================
endlocal
rundll32 user32.dll,MessageBeep
pause
exit

:TENSO
if exist %LOCAL_FOLDER%%SUB_FOLDER%\%1 (
echo %1 の転送を開始します
ampy put %LOCAL_FOLDER%%SUB_FOLDER%\%1 /flash/%SUB_FOLDER%/%1
echo %1 の転送終了
) else (echo %1がありません)
exit /b

12．実機でWriteROM_MAC.pyを実行してEEPROMにMACアドレスを書き込む

実機上で、WriteROM_MAC.pyを実行し、「Write」ボタンを押して、EEPROMにMACアドレスを書き込んでおきます。書き込んだ後、本体記載のNo.とESPNowで読み出したMACアドレス（myMAC）、EEPROMから読み出した該当NoのMACアドレス（EEPROM No.xx）が合致するか確かめます。

最後に

手順としてはこれでよいと思います。
準備ができれば、
　M5GO接続
　→M5Burnerで「Burn」（COMのNo確認）
　→「Config」で必要な設定
　→バッチファイル実行
　→M5GOリセット
　→APPモードでWriteROM_MAC.py実行
　→「Write」→MACアドレス合致確認
　→リセット
　→APPモードでM5GO.py実行
が、１台の手順になります。大体、１台につき、7～8分はかかりました。
これで、ESPNowを使ったM5GO同士の双方向通信や、画像の表示などの学習の際に生徒が意識しないといけないことを極力無くしておくことができます。これは、私の考えている授業構成で必要な環境を整える場合ですので、学習内容によって、追加でしなければならないことや、逆に省ける部分もあると思います。

個人的には標準のパッケージ（購入時の入れ物）にものが多すぎるな、と感じているので、別パッケージに移すかもしれません。
ものが多すぎると生徒は無くしたり、迷ったり、遊んだりするので、なるべく提示するものはシンプルがよいのです。

今日のところはこんな感じです。

いいなと思ったら応援しよう！