5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-10-30

はじめに

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

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

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

UIFlowとは

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

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

Arduino IDEUIFlow排他で、どちらか一つしか使えない

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

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

UIFlow開発環境の2つのモード

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

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

モード オンラインモード デスクトップモード
ATOM Lite側の接続 無線(Wifi) USBケーブル
ユーザー I/F Webブラウザ デスクトップアプリケーション

(UIFlow-Desktop-IDE)

特徴

(メリット)

常に最新バージョンが

使える

安定した開発環境を構築しやすい
デメリット Wifi環境と

インターネット接続が必須

各PCに設定が必要

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

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

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

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

バージョン ATOM Lite用 ATOM Matrix用(参考) オンラインモード (Web版UIFlow) デスクトップモード

(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ファイル)をダウンロードM5Burner_ダウンロード.jpg

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

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

  1. ATOM LiteとWindows PCをUSBケーブルで接続

  2. M5Burnerを起動する

  3. M5Burner画面の左側、ATOMを選択する。M5Burner(1).jpg

  4. M5Burner画面のATOM Lite用の適切なUIFlowイメージ(v1.6.x-lite)を選択して[Download]を押してダウンロードする。M5Burner(3).jpg

  5. M5Burner画面の上部、ATOM LiteのCOMポートを選択、Baudrateを1500000に設定後、[Burn]を選択してATOM Liteにイメージをインストールする。この時[SSID][Password]を要求されるが両方とも空白でよいB5Burner.jpg

  6. 最後に"Burn Successfully"の文字が出れば終了なので、Closeを選択する。エラーが発生する場合はBaudrateを小さい数字にすると成功するかもしれない。B5Burner.(2)jpg.jpg

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

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

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

  1. M5Buernerの画面のまま[Configuration]を選択M5Burner(5).jpg

  2. [Start Mode]を"USB Mode"に変更して[Save]ボタンを押す。M5Burner(6).jpg

  3. ATOM LiteのLEDがになれば成功

  4. M5Burnerは終了する。M5Burnerを終了しておかないと、後でUIFlow-Desktop-IDEとATOM Liteが接続できない事がある。

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

  1. UIFlow-Desktop-IDE(ZIPファイル)をダウンロードダウンロード(2).jpg

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

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

  1. UIFlow-Desktop-IDEを起動する

  2. UIFlowのバージョンの選択画面でBetaを選択UIFLow.jpg

  3. 設定画面でATOM LiteのCOMポート、DeviceとしてATOM Liteを選択して、OKボタンを押すUIFLow(2).jpg

  4. 左下に"接続済み"の文字が出ていれば接続完了。UIFlowを使う準備はすべて完了。UIFLow(3).jpg

  5. 左下に"Disconnected"が出ている場合はATOM Liteと接続できていないので問題を修正してから"Disconnected"の右のリサイクルマークのようなマークを選択する。COMポートが間違っていないならば、ATOM LiteとUSBケーブルをいったん抜き差しするとうまくいく場合がある。UIFLow(4).jpg

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

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

  1. M5Buernerの画面のまま[Configuration]を選択M5Burner(5).jpg

  2. ApiKeyを控えておく(横のボタンでクリップボードにコピーもできる)M5Burner(7).jpg

  3. [Start Mode]を"Internet Mode"に変更して、Wifiの[SSID][Password]にATOM Liteを接続させるWifiアクセスポイントの接続情報を設定して[Save]を押す。(ATOM Liteは2.4GHzのみなので注意)M5Burner(8).jpg

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

  5. M5Burnerは終了する。

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

  1. UIFlowオンラインに接続

  2. UIFlowオンラインのバージョンの選択画面でBetaを選択UIFLow(5).jpg

  3. 先ほど控えておいたApiKeyを入力、Languageに日本語、DeviceとしてATOM Liteを選択して、[OK]ボタンを押すUIFLow(8).jpg

  4. 左下に"接続済み"の文字が出ていれば接続完了。UIFlowを使う準備はすべて完了。UIFLow(7).jpg

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?