M5Atomの始め方【UIFlow編】
M5Atom MatrixとM5Atom Liteの二種類が2020/4/10から購入できるようになりました。24mmx24mmのサイズに収まったESP32の開発端末としてこれから人気になりそうです。
M5StackのUIFlowでも使用できるので今回の記事では簡単なプログラムを実行するまでを紹介します。
もくじ(Index)M5Stack関連の目次へ戻る
環境について
記事で使用している環境は以下の通りです。使用するバージョンにより操作方法が異なる場合があるのでその点はご了承ください。
- OS:Windows10 1909 Build 18363.752
- M5Burner Version 1.0.1
- M5Stack UIFlow 1.4.5.1
UIFlowのデスクトップ版もありますが、初心者向けということでUIFlowブラウザ版のみです。
UIFlowのファームウェアを書き込む
M5Burnerを使ってUIFlowのファームウェアを書き込みます。詳細の手順はM5Burnerのインストール方法と使い方を参照してください。
★2020/4/11時点ではUIFlow1.5.0はM5Atomに対応していないようです。UIFlow1.4.5.1を使いましょう。
APIKeyの確認方法
M5Atomには液晶がありません。従ってUIFlowに接続するのに必要なAPIKEYを画面に表示はできないので調べる必要があります。
調べ方は二種類あります。セットアップ後も調べられるので、私としてはシリアルモニタで調べる方法を推奨します。
ArduinoIDEのシリアルモニタで確認する
ArduinoIDEでなくてもTeraterm等のシリアル通信用アプリであれば確認できます。下記の条件で開いておきます。
- CR及びLF
- 115,200 bps
PCに接続して確認する。
ArduinoIDEを起動してシリアルモニターが表示されている状態でM5Atomを接続すると下記のように表示されます。(接続した後でもM5Atomのリセットボタンを押して表示することが可能。)
WiFiセットアップ時の画面で確認する
UIFlowのファームウェアを「WiFi設定なし」で書き込んだ後に、M5AtomをWiFiセットアップモードで起動してスマホから確認する方法です。
★注意★
WiFi設定後はこのモードは使えません。WiFi設定を初期化するにはM5Burnerを使ってEraseする必要があります。
①WiFi設定モードで起動する。
以下の手順で起動するとWiFiAPモードが有効になり、スマホから接続が可能になります。
- ボタンAを押しながら電源に接続
- 黄色になったところでボタンを離す
②スマホからWiFi接続する
M5Stack-XXXX(XXXXは4桁の16進数)へ接続します。
③ブラウザで「192.168.4.1」を開く
スマホのブラウザから192.168.4.1を開きます。この時のM5FLOW-XXXXXXX(7桁の16進数)がAPIKeyなのでメモしておいてください。
UIFlowの起動
M5Atomの電源を入れる
電源を入れると、下記のようにLEDが点滅します。緑点滅の状態になればブラウザから接続可能になります。
- 赤点滅:起動中
- 青点灯:WiFi接続完了
- 緑点滅:UIFlowに接続完了
ブラウザからUIFlowを開いて起動
ブラウザから下記のURLを呼び出します。
API Key、言語、Deviceを選ぶ
メモしておいたAPIKeyを入力し、言語を選んで、Deviceは「Atom-Matrix」か「Atom-Lite」を選びます。
接続画面
下記のように、左下にAPI Keyが表示されて「接続済み」になったらプログラムを実行することができます。
サンプル
何から始めていいかわからない方もいるとおもうのでサンプルを置いておきます。使い方は体で覚えましょう。(`・ω・´)
これを実行すると下記のようになります。
UIFlowで参考になるページ
- https://m5stack.com/pages/uiflow(英語)
- https://docs.m5stack.com/#/en/uiflow/uiflow_home_page(英語)
- M5Stack UI Flowを使ってみよう (ver 1.4.3)
- M5StickCでUIFlow入門
公式の英語動画
英語に抵抗のある方もいらっしゃると思いますが、よく観ると丁寧に解説されています。
おわりに
M5Atom Matrix/Liteはまだ発売されたばかりなので私も使い込んではいません。バグ等もあると思いますが頑張って使っていきましょう。