ATOM Matrix・ATOM Lite を UIFlow で制御してみる（ #M5Stack ）

19191 ワード
ATOMLite uiflow M5Atom M5stack ATOMMatrix uiflow テキストリンク

はじめに

4/10（金）に、いよいよ技適が OK な ATOM Matrix・ATOM Lite が、スイッチサイエンスさんから発売開始となりました。

この記事は、それらを注文後にゲットできたので、早速ビジュアプルプログラミングで開発が行える UIFlow で制御してみようという記事です。

ちなみに、本体の側面に技適マーク等が表示されています。

ATOM Matrix と ATOM Lite の情報

詳細スペックは、以下のスイッチサイエンスさんの製品ページか、そこにリンクが書かれている公式ドキュメントをご覧ください。

こちらは、過去の M5Stack等と異なり USBケーブルは付属していないため、別途用意する必要があります。また、過去のシリーズと異なる点として、内蔵バッテリーは搭載していません。

UIFlow について

UIFlow はブロックを使ったビジュアプルプログラミングで、M5Stackシリーズの開発が行える環境です。電子工作も行えたり、IoT に便利な MQTT や HTTP の処理も扱えたりと、デバイスに関わるたくさんの機能を利用することができます。詳細は、公式ページ をご参照ください。

ATOM Matrix と ATOM Lite を UIFlow で使う

参考にした情報

UIFlow は、既に持っている「M5Stack Gray、M5GO、M5StickC」と組み合わせて使ったことがあったため、利用時のデバイスのセットアップ方法や使い方はだいたい分かりそうだったものの、ATOM はディスプレイを搭載していない点が異なり、それによりセットアップ手順で異なる部分がでてきそうでした。
そんな中、ちょうど以下のツイートにリンクを書いた記事を見かけていたので、公式ドキュメントを確認する方法もありましたが、まずはこちらの中の1つ目を見て進めてみました。

では、上記でリンクを書いていた 1つ目の記事、「M5Atomの始め方【UIFlow編】 | ラズパイ好きの日記」の内容を見つつ、セットアップ等を進めていきます。
なお、今回の自分の記事の環境・手順は参照した記事と異なる部分があります。まず PC の OS が、参照した記事内では Windows10 ですが、自分が使ったのは macOS Mojave でした。また、API key の確認手順の方法も、参照した記事と自分が行った方法とは異なる部分があります。

ファームウェアの書き込みと Wi-Fi設定

UIFlowのファームウェアを書き込む（M5Burner を利用）

今回、Mac用の M5Burner を使い、ファームウェアは UIFlow 1.4.5.1 を書き込みました。M5Burner は下記のリンク先のページで、ダウンロード可能です。
　●Download – m5stack-store
　　https://m5stack.com/pages/download
2020/4/15時点の最新ファームウェアは 1.5 ですが、M5Burner上で 1.5 のファームウェアを選択していると、書き込み対象のデバイスの選択肢に ATOM が出てきません。そのため、、1.4.5.1 のファームウェアを選びました。

書き込みの設定を行う画面は以下のとおりです。

上の画像で赤い矢印と赤枠で指した部分がファームウェアのバージョンを指定するところです。
また、緑の矢印と緑枠で指した部分（2箇所）が、シリアルポートと書き込み対象デバイスの種類を選択するところです。シリアルポートは「/dev/tty.usbserial-XXXXXXXXXX」という名称のもの（※「XXXXXXXXXX」の部分はダミーで、実際は英数字を含む文字列）、デバイスの種類は「ATOM-Matrix」か「ATOM-Lite」のうち利用するデバイスのものを選びました。
また、黄色の枠で囲んだ部分は、M5Burner の最新バージョンのアプリを使い、かつ、UIFlow のファームウェアのバージョンで 1.4.5 以上を選択すると表示される、Wi-Fi設定用の SSID とパスワード設定を入力するところです。こちらに設定を入れておくと、ファームウェアの書き込み時に Wi-Fi設定を書き込んでくれます。

API key の確認方法

参照した記事では、ArduinoIDE のシリアルモニタを使った方法が書かれてましたが、「シリアル通信用アプリであれば確認できます」とも書かれていたため、Mac のターミナルを使って API key を確認してみました（正確には iTerm を使った形）。

まず、ATOM を USBケーブルで Mac に接続し、以下のコマンドの出力結果をチェックします（下記の「XXXXXXXXXX」の部分はダミーで、実際は英数字を含む文字列でした。

$ ls /dev/tty.usb*
/dev/tty.usbserial-XXXXXXXXXX

そして screenコマンドで、上記で表示された内容と、ボーレート指定 115200bps を設定した以下のコマンドを実行します。

$ screen /dev/tty.usbserial-XXXXXXXXXX 115200

その後、ATOM本体のリセットボタンを押すと、以下のような部分を含む文字列がターミナル上で表示されます。
画像の赤枠で囲んだ矢印で指し示した部分に API key が表示されるため、これをメモしておき、そのまま次へ進みます。

WiFiセットアップ（M5Burner での設定書き込みを行っていない場合）

もし、上記の M5Burner でのファームウェアの書き込みのところで、SSID・パスワードを書き込んでいない場合は、先ほどの API key が表示された画面で、続きとして以下のような SSID 等が書かれた部分がでてきています。その場合、以下の手順で SSID・パスワードを設定してください。
もし、ファームウェアの書き込み時に設定済みの場合は、「UIFlow を使ったプログラミング のステップ」へ進んでください。

画像の赤枠で囲んだ矢印で指し示した部分に M5Stack-XXXX（※左記の「XXXX」の部分はダミーで、実際は4桁の数字です）という SSID が表示されているため、こちらに PC やスマホなどで接続し、ブラウザを開きます。

そして、アドレスバーに IPアドレス「192.168.4.1」を入力し（※上の画像で SSID の書かれた場所の、右下あたりに表示されているアドレス）、アクセスしたページ内で接続したい Wi-Fi の SSID の選択とパスワードの入力を行います。
以下は、iPad でアクセスした設定画面ページをキャプチャしたものです。赤い矢印で示した部分で、SSID とパスワードを設定し、画面内の青い「Configureボタン」を押してください。

上手く設定が行われれば、以下の画面が表示されますので、デバイスをリセットして次へ進んでください。

UIFlow を使ったプログラミング

UIFlow での下準備

それでは、UIFlow でプログラミングを行っていきます。

ブラウザで「 http://flow.m5stack.com 」にアクセスします。そして、上記の手順で書き込んだファームウェアが 1.4.5.1 であるため、ブラウザ上の UIFlow のバージョンが 1.4.5 以外となっている場合、 1.4.5 へと変更する必要があります。以下の画像の緑の矢印で示した部分をクリックし、その下に表示される赤い矢印と赤枠で指した部分（V1.4.5 と書かれた部分）を選択してください。

そして、以下の画像の緑の矢印で示した部分をクリックし、その下に表示される赤い矢印と赤枠で指した部分（設定 と書かれた部分）を選択してください。

そして、以下の設定画面が重畳表示されるため、以下の緑の矢印と緑の枠で示した Api key の部分に、上記の手順でメモしていた API key を入力し、以下の赤い矢印と赤枠で示した部分で「Atom-Lite」か「Atom-Matrix」のうち、ご自身が利用しようとしているデバイスを選んでください。

その後、画面左上に「Atom-Lite」か「Atom-Matrix」のうち、上記の手順で選択したデバイスの絵が表示され（以下の例は「Atom-Matrix」のほうです）、以下の赤い矢印と赤枠で示した部分に「緑色の 接続済み という文字」が表示された状態になります。

これで、準備完了です。

UIFlow でプログラムを組んでみる（ATOM Matrix）

では、UIFlow で簡単なプログラムを動かして、動作確認をしてみます。
まずは、上記の手順でセットアップした ATOM Matrix のほうを試します。

とりあえずは Lチカ的な感じにしてみようかと、以下の左上部分で、赤い矢印と赤枠で示した「ハードウェア の中の RGBカラー」にあるブロックを 1つ使い、プログラムを組んでみました。
使ったブロックは、以下の下部で、赤い矢印と赤枠で示した「Set atom matrix」のブロックです。

以下のようなプログラムにしました。
そして、以下の赤い矢印と赤枠で示した部分をクリックし、プログラムを実行してみます。

そうすると、無事に以下の画像のように、プログラム通りの LED表示ができました。

UIFlow でプログラムを組んでみる（ATOM Lite）

ATOM Matrix と同様に、ATOM Lite でもファームウェアの書き込みや API key の確認、Wi-Fi の設定を行い、UIFlow での制御を行ってみます。
ここでは、作ったプログラムと動作させた結果のみ、簡単に示します。

まずは、プログラムです。
以下の赤い矢印と赤枠で示した部分 2箇所「イベント と ハードウェア の中の RGBカラー」のブロックを組み合わせて作りました。

最初は LED が緑色で点灯している状態で、ボタンを長押ししたときは LED の色が赤色へと変わり、短く押した場合は LED の色が青色に変わるというシンプルな内容です。
動作させた時の様子は、以下のツイートの動画のと折りです。

UIFlow でプログラムを組んでみる（ATOM Matrix ＋ Unit）

最後に、ATOM Matrix と 距離が測定できる ToF Unitとを組み合わせて使ってみました。

プログラムは以下の通りで、以下の左下辺りで緑の矢印と緑枠で示した部分で Unit を選択しています。
そして、以下の赤の矢印と赤枠で示した部分の中のブロックを使って、計測した距離が変わると LED 表示が変わる、というものを組んでみました。

動作させた際の様子は以下のとおりで、下の面から ToF Unit が離れたり、また近づいたりすると、ATOM Matrix の LED表示が変化しているのが分かると思います。

おわりに

今回、ATOM Matrix と ATOM Lite のそれぞれについて、本体の LED を UIFlow を使って制御してみました。また、ToF Unit との組み合わせも合わたものも試してみました。
UIFlow と ATOM を組み合わせて試せそうな内容はたくさんありそうなので、活用法を考えていければと思います。

【追記】早速、LT登壇の機会にこの話を活用

この記事をアップした週に、オンライン開催となっていたイベント IoTLT の LT（ライトニングトーク）で登壇をする予定だったため、登壇ネタに活用しました！

そして、IoTLT の主催者の @n0bisuke さん（のびすけさん）が、同イベントでの LT登壇を準備する際に活用いただいたという話も！

余談

M5Stack等のシリーズは、以下のツイートにある「M5Stack Gray、M5GO、M5StickC、M5StickV」を持っていたのですが、さらに今回で台数が増えましたｗ
何か、複数台の連携とか、これを活用したことを試したいな・・・。

【追記】他の方の記事（Arduino IDE での開発など）

2020/4/15 の午前中あたりで、Qiitaの記事の検索で「ATOM Lite」・「ATOM Matrix」・「M5Atom」をキーワードに検索した結果や、「M5Atom」タグに紐付いている記事のリストを見て、スイッチサイエンスさんから販売されたデバイスをゲットされて記事を書かれている方のリンクをまとめてみました。