LoginSignup
2
1
@t-sho(Shota Yano)inKumaMCN

UIFlowを使ってM5Stackと環境センサーを動かしてみる

Last updated at Posted at 2023-06-10

この資料は2023/6/9開催の高校生向けプチハンズオンの資料です
今回はUIFlowを使ってM5Stackと環境センサーを動かしてみます。

使うもの

  • M5Stack
  • ENV Sensor

前提条件

M5Stackはファームウェアを書き換えて画面にAPI KEYが表示されてる状態としておきます。
余談ですが、ファームウェアの書き換えについてはこちらの資料を見てください。
参考：ChromebookだけでM5StackのUIFlowを使えるようにする

UIFlowにアクセスする

下記のリンクテキストからUIFlowにアクセスしてください。
https://flow.m5stack.com/

初期設定

この画面は左のUOFlow1.0を選択して、右下のConfirmボタンをクリックしてください。
※選択してる方は左上が緑色になってるのでそれで判断してください。
image.png

M5Stackの画面に表示されている8桁のAPI KEYを入力してください。
※イベント参加者は教室のホワイトボードにもAPI KEYが記載されてるので、そちら見てもよいです。
言語は日本語のままで良いです。Deviceは真ん中の赤丸で印をつけたCore2を選択し、最後にOKボタンをクリックしてください。
image.png

画面右下に「接続済み」を表示されたら完了です。
image.png

画面にラベルを配置する

ここからプログラミング開始です。
まずはラベルを画面に配置していきます。ドラッグ＆ドロップで左上のラベルを画面に配置します。
FontはUnicode24を選択します。
anime20230608001.gif

同様の要領で以下のように7個のラベルを配置してください。位置はだいたい同じであればよいです。
image.png

ラベルの初期化を行う

UIの配下のラベルのうち、この部品をBlocklyのエディタにドラッグ＆ドロップで配置します。
Setupのブロックの下にくっつけてください。
image.png
操作イメージはこんな感じです。
anime20230608002.gif

こんな感じになっていればOKです。
これは先ほど画面に配置した「label0」に"Hello M5"という文字列を表示するための部品です。
"Hello M5"の部分は任意の文字に変えれます。
一応日本語も表示できますが、一部対応していない文字もあります。
image.png

同じ要領で、ラベル7個分のブロックを並べてください。
image.png

ラベルのドロップダウンを操作して、Label0～6になるよう変更してください。
anime20230608003.gif

こうなっていればOKです。
image.png

各ラベルに表示する値は以下の通りです。それぞれ値を修正してみてください。
※label0には自分の名前をアルファベットで入力してください（イベント中誰が動かしてるプログラムかわかるようにするため）

ラベル 入力する値
label0 yano
label1 気圧(Pa)
label2 気温(℃)
label3 湿度(%)
label4 0
label5 0
label6 0

こうなっていればOKです。
image.png

もし、間違って多く配置しすぎたとか、必要なのに間違って消してしまった場合は画面右上の「Undo」ボタンをクリックしてください。1つ前の状態に戻ります。
image.png

一度実行してみる

ここで一度プログラムを実行してみましょう。
イベント参加者は、手元にM5Stackを用意し、API KEYと端末番号が一致してるか確認してください。
M5Stackの数が限られてるので譲り合って順番に実行してみてください。
プログラムを実行するときは右下のRUNボタンをクリックしてください。
※今回ダウンロードボタンは押さないでください。（ファームウェアの書き換えが必要になるため）
image.png

エラーが発生しなければこんな感じになります。
image.png

環境センサーのユニットを組み込んでみる

ここからはM5Stackに環境センサーのユニットを組み込んでみます。
左下の＋ボタンをクリックします。
image.png

ユニットの一覧が出てくるので、ENV Ⅲを選択し、Portは変更せずに、ＯＫボタンをクリックします。
image.png

追加後、こうなっていればOKです。
image.png

今度はイベントの「ずっと」というブロックをドラッグ＆ドロップでBlocklyエディタに追加します。
image.png

こんな感じで一番下のブロックに繋げてください。
image.png

こうすることで、プログラムの実行ボタンをクリックしたら、Setupからプログラムが順番に実行され、「ずっと」ブロックまで来たらアプリケーションが終了するまで「ずっと」ブロックの中に書いた処理が繰り返し実行されます。
ここに環境センサーから読み取った値を画面に表示し続けるようプログラムを追加していきます。

まずは新しくラベルブロックを3つ配置します。
ラベルはlabel4～label6を指定します。
anime20230608004.gif

こんな感じになってればOKです。
image.png

ユニットの中にある環境センサーのブロックをドラッグ＆ドロップで追加していきます。
先ほど追加したラベルブロックの中に配置していきます。
image.png
anime20230608005.gif

こうなってればOKです。
image.png

M5Stackに環境センサーと接続する

M5Stackの本体左側面にある赤いポートを使ってENVセンサーをこんな感じでGroveコネクタを使って接続します。
これだけでOKです。
image.png

余談ですが、温湿度センサーDHT11などをRaspberryPiで使用する場合、このように自分で抵抗をかませて回路を作ってあげる必要があるので、これに比べると楽ですね。
image.png

プログラムを実行してみる

イベント参加者は、手元にM5Stackを用意し、API KEYと端末番号が一致してるか確認してください。
M5Stackの数が限られてるので譲り合って順番に実行してみてください。
プログラムを実行するときは右下のRUNボタンをクリックしてください。
※今回ダウンロードボタンは押さないでください。（ファームウェアの書き換えが必要になるため）
image.png

うまくいけばこのように気圧、気温、湿度が表示されます。
環境センサーを手で握っておくと、湿度などが変化していくのがわかります。
image.png
このように非常に簡単にセンサーと繋いで情報を取得することができます。
ここまでできれば今日のメイン目標は達成です。お疲れさまでした。
もし、時間が余ってる場合は、以下も試してみてください。

データを記録してみる

今のままだとセンサーから取得した気温等のデータをただ表示しているだけなので、ボタンを押したタイミングで表示している気温を保持して画面に表示してみます。

イベントのこのブロックをBlocklyエディタに配置します。
今まで作ったものとは独立した状態で使っていきます。
image.png

こんな感じになってればOKです。
image.png

このブロックはM5Stackの左下のボタンをタッチした時に実行されるブロックです。
image.png

では、このブロックに処理を追加するための準備をしていきます。
まずは、ラベルを2つ追加します。FontはUnicode24を選択してください。
anime20230608006.gif

こんな感じに配置されてればOKです。
image.png

Setupに先ほど追加したラベルの処理を追加します。
ここではSetupとずっとのブロックの間に差し込んでいきます。
ラベルはlabel7とlabel8を選択してください
anime20230608013.gif

追加したラベルには以下のように何も表示しないよう入力文字を消してください。
こうなっていればOKです。
image.png

次は変数を作成します。
変数から「変数の作成」を選択します。
変数の名前を入力してくださいというポップアップが表示されるので、「SaveValue」を入力し、OKボタンをクリックします。
anime20230608008.gif

こんな風にブロックが表示されたらOKです。
image.png

作成した変数のブロックを「ずっと」ブロックの中の1番目に差し込みます。
anime20230608014.gif

こうなってればOKです。
image.png

この変数ブロックの空欄に、label5のラベル表示ブロックの中にある、温度取得ブロックをドラッグ＆ドロップで移動させてください。
anime20230608015.gif
こうなってればOKです。
image.png

label5のラベル表示の中身は、変数SaveValueをセットします。
anime20230608016.gif

こうなっていればOKです。
何が変わったのかというと、今まではlabel5のラベルには環境センサーから取得した温度の値をそのまま格納していましたが、温度の値を変数SaveValueという箱に一度格納し、label5には変数に格納したデータを使うようになりました。
image.png

では、ボタンAの処理を作っていきましょう。
ラベル表示部品を2つ追加します。それぞれlabel7とlabel8を指定してください。
anime20230608017.gif

追加したlabel7のラベル表示ブロックの値は「記録した温度(℃)」をしてください
image.png

一方label8のラベル表示ブロックは、変数SaveValueのブロックをセットしてください。
anime20230608018.gif

こうなっていればOKです。
image.png

プログラムを実行してみる

画面右下のRunボタンをクリックして実行してみましょう。
image.png
ボタンAをタッチするたびに、タッチした時の温度データが変わって表示されれば成功です。
image.png

もし、label8の表示データが中途半端に見切れる場合は、label8の位置を左にずらして調整してみてください。
image.png

時間に余裕上がれば、Bボタン押したときに気圧、Cボタン押したときに湿度が記録され画面に表示されるよう修正してみてください。

今日のハンズオンのソースコードの完成版はここに置いておきます。
必要に応じてダウンロードしてください。
ここからダウンロード

今回は単にボタンをタッチするたびに画面上に表示しているだけですが、たとえば、ボタンを押すたびにSDカードに記録したり、HTTPリクエストなどネットワークを介してGoogleのスプレッドシートに記録していくと、データを集めることができ、集めたデータは分析等に使用することができます。また、ボタンを押したタイミングではなく、30秒に1回とか、10分に1回とかタイマー処理を使って自動で記録し続けるといったことも可能です。ぜひ、いろいろ試してみてください。

プチハンズオンはこれで終了です。
お疲れさまでした。

2
1
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
Sign upLogin
2
1