ATOM Lite ( M5Stackシリーズ ) のUIFlowセットアップ方法

# はじめに

M5Stackシリーズのモデルの中でも新しめのATOMシリーズ、その中でも表示にLEDが1つしかないATOM Liteは情報も少なく、サンプルやライブラリ等もあまり充実しているようには感じられない。

開発環境の１つであるUIflowを使えるようにセットアップする方法は一度実行できれば特別に難しい訳ではないが、ツール類や用語もアップデートされていたり、何よりいろいろな方法があり理解しずらかった。

忘備録も含めてセットアップ方法を記載しておく。

# UIFlowとは

ATOM Liteの開発方法には大まかに２つの方法がある。

+ `Arduino IDE`：C++ベースのArduino用開発環境で一番基本的
+ `UIFlow`：ブロックを組み合わせてプログラミングするビジュアルプログラミング開発環境

:::note warn
`Arduino IDE`と`UIFlow`は**排他**で、**どちらか一つしか使えない**。
:::

`Arduino IDE`と`UIFlow`を切り替えるためにはATOM Liteの**再セットアップが必要になる場合がある**ので注意。

|　　　　　　　　　　　　　　　|ATOM Liteの(再)セットアップ|
|:--------------------------|:----:|
|Arduion IDE環境　→　UIFlow環境|毎回必要|
|UIFlow環境　　　 →　Arduion IDE環境|必要なし|

# UIFlow開発環境の２つのモード

UIFlow開発環境には`オンラインモード`と`デスクトップモード`がある。

:::note info
`オンラインモード`は`インターネットモード`、`デスクトップモード`は`オフラインモード`や`USBモード`と記載されていることもある。
:::

|モード|オンラインモード|デスクトップモード|
|:-----:|:----:|:----:|
|ATOM Lite側の接続|無線（Wifi）|USBケーブル|
|ユーザー I/F|Webブラウザ|デスクトップアプリケーション<P>（UIFlow-Desktop-IDE)|
|特徴<P>(メリット)|常に最新バージョンが<P>使える|安定した開発環境を構築しやすい|
|デメリット|Wifi環境と<P>インターネット接続が必須|各PCに設定が必要|

オンラインモードもデスクトップモードも画面や操作自体はほぼ同じなので、どちらを使うかは個人の好みで良いと思う。

ただし、イベントや展示会のように厳しいWifi環境だったりそもそもインターネット接続がない状況や、多数の人間が集まる勉強会などはデスクトップモードが向いていると思う。



# UIFlowのバージョン (2020/10/30 現在)

ATOM LiteのUIFlowのバージョンとWeb版UIFlow、UIFlow-Desktop-IDEのバージョンがあり、それぞれ複数のバージョンが存在する。


|バージョン|ATOM Lite用|ATOM Matrix用(参考)|オンラインモード (Web版UIFlow)|デスクトップモード<P>(UIFlow-Desktop-IDE Windows版)|
|:-------|:----:|:-------------------:|:-----------:|:-----------:|
|v1.6.5  |◎|◎|〇（β）|-|
|v1.6.4  |◎|◎|-|〇（β）|
|v1.6.3  |◎|◎|-|-|
|v1.4.5.x|Ⅹ|〇(1.4.5.1)|〇(1.4.5)|〇(1.4.5)|

ATOM LiteのUIFlowのバージョンと、Web版UIFlow/UIFlow-Desktop-IDEのバージョンがあっていないと警告が表示されるのでバージョンを合わせるのが前提のようだ。（バージョンを合わせなくても動かないわけではない）

ATOM Matrixと違ってATOM Lite用UIFlowはv1.4.5(.x)がないため、必然的にv1.6.xを使用することになる。v1.6.xはオンラインモードではv1.6.5(β)のみ、デスクトップモードではv1.6.4(β)のみしかないため、**最初にオンラインモード(執筆時点ではv1.6.5)を使用するか、デスクトップモード(執筆時点ではv1.6.4)を使用するか決めたほうがいいだろう**。




# セットアップ手順

## 環境

下記の環境で確認したが、いずれアップデートされると思われるので参考程度に。

Windows PC：`Windows 10 Pro 64bit (1909)`
M5Burner：`バージョン 2.1.6`
UIFlow-Desktop-IDE：`V1.0.13`

## 1. デスクトップモード、オンラインモード共通の手順

### 1.1. M5BurnerをPCにインストール

1. [M5Burner（ZIPファイル）をダウンロード](https://m5stack.com/pages/download)![M5Burner_ダウンロード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/5b811c10-f40e-bb8e-93d9-fe8bd5991576.jpeg)


2. ダウンロードしたZIPファイルを適当なフォルダに解凍してPCにM5Burnerをインストール

### 1.2. ATOM LiteにUIFlowをインストール

1. ATOM LiteとWindows PCをUSBケーブルで接続
2. M5Burnerを起動する
3. M5Burner画面の左側、ATOMを選択する。![M5Burner(1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/15020066-33bb-86dd-88e8-31a9b48750ad.jpeg)
4. M5Burner画面のATOM Lite用の適切なUIFlowイメージ(`v1.6.x-lite`)を選択して[Download]を押してダウンロードする。![M5Burner(3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/ef318af7-a9b3-58f3-7c68-533833d3354a.jpeg)
5. M5Burner画面の上部、ATOM LiteのCOMポートを選択、Baudrateを`1500000`に設定後、[Burn]を選択してATOM Liteにイメージをインストールする。この時[SSID][Password]を要求されるが両方とも空白でよい![B5Burner.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/c815d5ae-829f-1985-74b0-01d936f880d3.jpeg)

6. 最後に"`Burn Successfully`"の文字が出れば終了なので、`Close`を選択する。エラーが発生する場合は`Baudrate`を小さい数字にすると成功するかもしれない。![B5Burner.(2)jpg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/3c539507-08c4-a610-10fe-056682187b39.jpeg)


7. M5Burnerを起動したまま、続きの手順を実行

## 2(a). デスクトップモードの手順（続き）

### 2(a)-1. ATOM Liteのモードを設定

1. M5Buernerの画面のまま[`Configuration`]を選択![M5Burner(5).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/2cedc16d-6d84-a288-aa46-9aa3abba0685.jpeg)

2. [`Start Mode`]を"`USB Mode`"に変更して[Save]ボタンを押す。![M5Burner(6).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/0d780400-b1ee-cf41-c405-2b8f6f495b20.jpeg)


3. ATOM LiteのLEDが`青`になれば成功
4. M5Burnerは終了する。M5Burnerを終了しておかないと、後でUIFlow-Desktop-IDEとATOM Liteが接続できない事がある。

### 2(a)-2. UIFlow-Desktop-IDEをPCにインストール

1. [UIFlow-Desktop-IDE（ZIPファイル）をダウンロード](https://m5stack.com/pages/download)![ダウンロード(2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/482e9317-6334-d53c-f749-19a2e12b85ba.jpeg)

2. ダウンロードしたZIPファイルを適当なフォルダに解凍してPCにUIFlow-Desktop-IDEをインストール

### 2(a)-3. UIFlow-Desktop-IDEの起動

1. UIFlow-Desktop-IDEを起動する
2. UIFlowのバージョンの選択画面で`Beta`を選択![UIFLow.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/7cefe774-1b74-4568-2ec9-e94ec121291b.jpeg)

3. 設定画面でATOM LiteのCOMポート、DeviceとしてATOM Liteを選択して、OKボタンを押す![UIFLow(2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/1fa7475d-913c-9c86-1700-3ade7ab598ee.jpeg)

4. 左下に"`接続済み`"の文字が出ていれば接続完了。UIFlowを使う準備はすべて完了。![UIFLow(3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/ba6be3bf-7b97-f83c-b7f4-75036eb39d41.jpeg)

5. 左下に"`Disconnected`"が出ている場合はATOM Liteと接続できていないので問題を修正してから"`Disconnected`"の右のリサイクルマークのようなマークを選択する。COMポートが間違っていないならば、ATOM LiteとUSBケーブルをいったん抜き差しするとうまくいく場合がある。![UIFLow(4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/9bf70709-8c37-99e3-7351-b341ec7ffd0d.jpeg)



## 2(b). オンラインモードの手順（続き）

### 2(b)-1. ATOM Liteのモードを設定

1. M5Buernerの画面のまま[`Configuration`]を選択![M5Burner(5).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/849f2d8a-c5d9-90e8-2fbf-49c276bdecc4.jpeg)


2. `ApiKey`を控えておく（横のボタンでクリップボードにコピーもできる）![M5Burner(7).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/dc7c358c-095b-c2e1-9230-0bf84e0fb720.jpeg)


3. [`Start Mode`]を"`Internet Mode`"に変更して、Wifiの[`SSID`][`Password`]にATOM Liteを接続させるWifiアクセスポイントの接続情報を設定して[Save]を押す。（ATOM Liteは**2.4GHzのみ**なので注意）![M5Burner(8).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/92275f88-2845-101b-1a5f-19f3b3ac3b6d.jpeg)

4. ATOM LiteのLEDが`赤`→`緑`になれば成功。ATOM LiteのLEDが`赤`のままで`緑`にならない場合、[`SSID`][`Password`]が間違っているなどしてWifiの接続が失敗している。

5. M5Burnerは終了する。

### 2(b)-2. UIFlowオンラインの起動

1. [UIFlowオンライン](https://flow.m5stack.com/)に接続
2. UIFlowオンラインのバージョンの選択画面で`Beta`を選択![UIFLow(5).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/1dae88ea-775d-3823-1bbd-c871056d441e.jpeg)

3. 先ほど控えておいた`ApiKey`を入力、Languageに`日本語`、Deviceとして`ATOM Lite`を選択して、[OK]ボタンを押す![UIFLow(8).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/ef3645dc-50a8-e688-f2f7-c348bc215582.jpeg)


4. 左下に"`接続済み`"の文字が出ていれば接続完了。UIFlowを使う準備はすべて完了。![UIFLow(7).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774174/39e575e6-2943-85e6-b10f-e41584728aa7.jpeg)