この資料は2023/6/9開催の高校生向けプチハンズオンの資料です
今回はUIFlowを使ってM5Stackと環境センサーを動かしてみます。
使うもの
- M5Stack
- ENV Sensor
前提条件
M5Stackはファームウェアを書き換えて画面にAPI KEYが表示されてる状態としておきます。
余談ですが、ファームウェアの書き換えについてはこちらの資料を見てください。
参考：ChromebookだけでM5StackのUIFlowを使えるようにする
UIFlowにアクセスする
下記のリンクテキストからUIFlowにアクセスしてください。
https://flow.m5stack.com/
初期設定
この画面は左のUOFlow1.0を選択して、右下のConfirmボタンをクリックしてください。
※選択してる方は左上が緑色になってるのでそれで判断してください。
M5Stackの画面に表示されている8桁のAPI KEYを入力してください。
※イベント参加者は教室のホワイトボードにもAPI KEYが記載されてるので、そちら見てもよいです。
言語は日本語のままで良いです。Deviceは真ん中の赤丸で印をつけたCore2を選択し、最後にOKボタンをクリックしてください。
画面右下に「接続済み」を表示されたら完了です。
画面にラベルを配置する
ここからプログラミング開始です。
まずはラベルを画面に配置していきます。ドラッグ＆ドロップで左上のラベルを画面に配置します。
FontはUnicode24を選択します。
同様の要領で以下のように7個のラベルを配置してください。位置はだいたい同じであればよいです。
ラベルの初期化を行う
UIの配下のラベルのうち、この部品をBlocklyのエディタにドラッグ＆ドロップで配置します。
Setupのブロックの下にくっつけてください。
操作イメージはこんな感じです。
こんな感じになっていればOKです。
これは先ほど画面に配置した「label0」に"Hello M5"という文字列を表示するための部品です。
"Hello M5"の部分は任意の文字に変えれます。
一応日本語も表示できますが、一部対応していない文字もあります。
同じ要領で、ラベル7個分のブロックを並べてください。
ラベルのドロップダウンを操作して、Label0～6になるよう変更してください。
こうなっていればOKです。
各ラベルに表示する値は以下の通りです。それぞれ値を修正してみてください。
※label0には自分の名前をアルファベットで入力してください（イベント中誰が動かしてるプログラムかわかるようにするため）
| ラベル | 入力する値 |
|---|---|
| label0 | yano |
| label1 | 気圧(Pa) |
| label2 | 気温(℃) |
| label3 | 湿度(%) |
| label4 | 0 |
| label5 | 0 |
| label6 | 0 |
こうなっていればOKです。
もし、間違って多く配置しすぎたとか、必要なのに間違って消してしまった場合は画面右上の「Undo」ボタンをクリックしてください。1つ前の状態に戻ります。
一度実行してみる
ここで一度プログラムを実行してみましょう。
イベント参加者は、手元にM5Stackを用意し、API KEYと端末番号が一致してるか確認してください。
M5Stackの数が限られてるので譲り合って順番に実行してみてください。
プログラムを実行するときは右下のRUNボタンをクリックしてください。
※今回ダウンロードボタンは押さないでください。（ファームウェアの書き換えが必要になるため）
エラーが発生しなければこんな感じになります。
環境センサーのユニットを組み込んでみる
ここからはM5Stackに環境センサーのユニットを組み込んでみます。
左下の＋ボタンをクリックします。
ユニットの一覧が出てくるので、ENV Ⅲを選択し、Portは変更せずに、ＯＫボタンをクリックします。
追加後、こうなっていればOKです。
今度はイベントの「ずっと」というブロックをドラッグ＆ドロップでBlocklyエディタに追加します。
こんな感じで一番下のブロックに繋げてください。
こうすることで、プログラムの実行ボタンをクリックしたら、Setupからプログラムが順番に実行され、「ずっと」ブロックまで来たらアプリケーションが終了するまで「ずっと」ブロックの中に書いた処理が繰り返し実行されます。
ここに環境センサーから読み取った値を画面に表示し続けるようプログラムを追加していきます。
まずは新しくラベルブロックを3つ配置します。
ラベルはlabel4～label6を指定します。
こんな感じになってればOKです。
ユニットの中にある環境センサーのブロックをドラッグ＆ドロップで追加していきます。
先ほど追加したラベルブロックの中に配置していきます。
こうなってればOKです。
M5Stackに環境センサーと接続する
M5Stackの本体左側面にある赤いポートを使ってENVセンサーをこんな感じでGroveコネクタを使って接続します。
これだけでOKです。
余談ですが、温湿度センサーDHT11などをRaspberryPiで使用する場合、このように自分で抵抗をかませて回路を作ってあげる必要があるので、これに比べると楽ですね。
プログラムを実行してみる
イベント参加者は、手元にM5Stackを用意し、API KEYと端末番号が一致してるか確認してください。
M5Stackの数が限られてるので譲り合って順番に実行してみてください。
プログラムを実行するときは右下のRUNボタンをクリックしてください。
※今回ダウンロードボタンは押さないでください。（ファームウェアの書き換えが必要になるため）
うまくいけばこのように気圧、気温、湿度が表示されます。
環境センサーを手で握っておくと、湿度などが変化していくのがわかります。
このように非常に簡単にセンサーと繋いで情報を取得することができます。
ここまでできれば今日のメイン目標は達成です。お疲れさまでした。
もし、時間が余ってる場合は、以下も試してみてください。
データを記録してみる
今のままだとセンサーから取得した気温等のデータをただ表示しているだけなので、ボタンを押したタイミングで表示している気温を保持して画面に表示してみます。
イベントのこのブロックをBlocklyエディタに配置します。
今まで作ったものとは独立した状態で使っていきます。
こんな感じになってればOKです。
このブロックはM5Stackの左下のボタンをタッチした時に実行されるブロックです。
では、このブロックに処理を追加するための準備をしていきます。
まずは、ラベルを2つ追加します。FontはUnicode24を選択してください。
こんな感じに配置されてればOKです。
Setupに先ほど追加したラベルの処理を追加します。
ここではSetupとずっとのブロックの間に差し込んでいきます。
ラベルはlabel7とlabel8を選択してください
追加したラベルには以下のように何も表示しないよう入力文字を消してください。
こうなっていればOKです。
次は変数を作成します。
変数から「変数の作成」を選択します。
変数の名前を入力してくださいというポップアップが表示されるので、「SaveValue」を入力し、OKボタンをクリックします。
こんな風にブロックが表示されたらOKです。
作成した変数のブロックを「ずっと」ブロックの中の1番目に差し込みます。
こうなってればOKです。
この変数ブロックの空欄に、label5のラベル表示ブロックの中にある、温度取得ブロックをドラッグ＆ドロップで移動させてください。
こうなってればOKです。
label5のラベル表示の中身は、変数SaveValueをセットします。
こうなっていればOKです。
何が変わったのかというと、今まではlabel5のラベルには環境センサーから取得した温度の値をそのまま格納していましたが、温度の値を変数SaveValueという箱に一度格納し、label5には変数に格納したデータを使うようになりました。
では、ボタンAの処理を作っていきましょう。
ラベル表示部品を2つ追加します。それぞれlabel7とlabel8を指定してください。
追加したlabel7のラベル表示ブロックの値は「記録した温度(℃)」をしてください
一方label8のラベル表示ブロックは、変数SaveValueのブロックをセットしてください。
こうなっていればOKです。
プログラムを実行してみる
画面右下のRunボタンをクリックして実行してみましょう。
ボタンAをタッチするたびに、タッチした時の温度データが変わって表示されれば成功です。
もし、label8の表示データが中途半端に見切れる場合は、label8の位置を左にずらして調整してみてください。
時間に余裕上がれば、Bボタン押したときに気圧、Cボタン押したときに湿度が記録され画面に表示されるよう修正してみてください。
今日のハンズオンのソースコードの完成版はここに置いておきます。
必要に応じてダウンロードしてください。
ここからダウンロード
今回は単にボタンをタッチするたびに画面上に表示しているだけですが、たとえば、ボタンを押すたびにSDカードに記録したり、HTTPリクエストなどネットワークを介してGoogleのスプレッドシートに記録していくと、データを集めることができ、集めたデータは分析等に使用することができます。また、ボタンを押したタイミングではなく、30秒に1回とか、10分に1回とかタイマー処理を使って自動で記録し続けるといったことも可能です。ぜひ、いろいろ試してみてください。
プチハンズオンはこれで終了です。
お疲れさまでした。