M5Stick-Cと、室温が測れるENV Hatを手に入れたので、簡単にUiFlowを使って動作させてみました。
UiFlowで動作させるまでの手順で戸惑ったので、まとめておきます。

# UiFlowとは

WEBベースで、M5Stack,M5Stick-Cをビジュアルプログラミングできるツールです。

M5Flow

# M5Stick-Cとは

ESP32を搭載したLCD付きのマイコンです。

  • WiFi
  • Bluetooth
  • 80×160 カラーLCD
  • 6軸センサー
  • 赤色LED
  • 2ボタン、1リセットボタン
  • 80 mAh LiPoバッテリー

と、小さいボディに色々つまっています。

M5StickC - スイッチサイエンス

# UiFlow導入手順

  1. M5Stick-Cに、UiFlow用のファームウェアを書き込む
  2. M5Stick-CをWifiに接続
  3. UiFlow起動＆プログラム

# ファームウェア書き込み

M5Burnerというツールを使って、M5Stick-CにUiFlow用のファームウェアを書き込みます。

# M5Burnerダウンロード

UiFlowを起動すると、M5Burnerがダウンロードできるメニューが表示されます。

以下、URLでUiFlowが起動します。
http://flow.m5stack.com/

起動すると、下のようなウィンドウが表示されていると思います。
(画面右上の設定ボタンでも表示されます)

「ファームウェア」の項目で、WindowsかMacのボタンを押すとダウンロードできます。

# M5Burnerでファームウェア書き込み

ダウンロードしたファイルを解凍して、実行ファイルを起動します。

  1. M5Burner起動
  2. M5Stick-CをPCにUSB接続
  3. 左側で書き込むファームウェアの選択(UiFlow-v1.4.4を選択)
  4. COMポートを選択
  5. ボーレートはそのまま
  6. Seriesは「StickC」を選択
  7. 「Burn」で書き込み

# Wifi接続

M5Stick-Cを再起動すると、以下のような表示になります。
(M5Stick-Cの電源ボタンは、左横のスイッチ長押しです)

この状態でスマホやPCからM5STick-CにWifi接続します。

Wifiの接続先として、M5Stick-Cに表示されている「M5-XXXXX」というアクセスポイントを探して接続します。
（パスワードはありません）

Wifi接続後、ブラウザでM5Stick-Cの画面下に表示されているIPアドレスに接続します。
「http://192.168.4.1」

すると、ブラウザに以下のような画面が表示されるので、インターネット接続するためのWifiアクセスポイントのSSIDとパスワードを入力します。

M5Stick-Cは以下のような表示になるはずです。

※一番上にUiFlowのバージョン（今回は1.4.4を書き込んだので本当は「V1.4.4」と表示されるはず）

# UiFlow起動＆プログラム

やっとUiFlowを使う準備ができました。

ブラウザで以下URLを開きます。
http://flow.m5stack.com/

設定ウィンドウが表示されます。

「Api key」　M5Stick-Cに表示されているAPIKEYを入力
「言語」　日本語を選択
「Device」　Stick-Cを選択
「OK」ボタンをクリック。

これでプログラム可能な状態になります。

# DEMOプログラムを読み込む

ENV Hat用のDEMOプラグラムが用意されているので、それを読み込んで試してみます。

  1. 画面右上の「DEMO」ボタンをクリック
  2. 「ENV Hat」をクリック
  3. 詳細が表示され「LOAD」ボタンが表示されるのでクリック

プログラムが読み込まれるので、画面右上の「実行」ボタンを押すと、M5Stick-Cですぐにプログラムが動作します。

画面下のダウンロードボタンは、M5Stick-Cにプログラムを保存するボタンです。

保存すると、M5Stick-Cの電源を入れ直してもプログラムが残ります。

M5Stick-Cの電源を入れるときに、右側面のボタンも同時に押していると、開発モードとAPPモードが入れ替わり、APPモードだと電源入れたときに開発したプログラムが動作するようになります。