M5StackやM5StickCを使って、面白いことをするコーナー「M5Stackカフェ」。第3回はM5StickCを使って温度計を作ってみます。
温度を測るために、温度センサを使います。M5StickCには「M5StickC ENV Hat」という温度、湿度、気圧と磁界が測れるセンサがあるので、これを使ってみましょう。
このセンサはHatといって、M5StickCの上部のソケットにHatのピンを挿して使います。Hatには温湿度・気圧センサの他に人感センサなどいろいろなセンサ類があり、これを使うことでコンパクトなセンサ端末が作れます。
M5StickCでENV Hatを制御するプログラムをUIFlow(Blockly)で作ります。UIFlow(Blockly)を使う準備方法は第1回の記事を、UIFlowの操作方法は第2回の記事もご覧ください。
しばらくM5StickCを触っていなかったら、充電も兼ねてUSBケーブルでM5StickCとパソコンをつなぎましょう。
次にパソコンのブラウザで次のアドレスにアクセスします。
ブラウザ画面左下のApi keyに、M5StickCの画面に表示されているAPIキーと同じものが表示されていることを確認します。Api keyが同じでない場合は、Api keyの欄をクリックして、M5StickCの画面に表示されているAPIキーを入力してください。Api keyの右の欄が[接続済み]になっていることを確認します。なっていない場合は、さらに右の更新ボタンをクリックして、UIFlowとM5StickCを接続します。
M5StickCの液晶画面にAPIキーが表示されていない場合は、 第1回の記事に沿ってM5StickCを初期設定してください。
これでM5StickCのプログラムを作る準備は完了です。
画面左上の「プロジェクト」と書かれた右側の「main」の部分を「3_Thermometer」に変えておきましょう。
次に、「Hat」を選択して「＋」をクリックし、Hatの一覧から「ENV」を選んで「OK」をクリックします。
真ん中のメニューの「HAT」を選択すると、「環境」が現れます。それが環境（Environmental）センサです。それをクリックすると、「hat_env0の温度[℃]」「hat_env0の湿度[%]」「hat_env0の気圧[hPa]」というブロックが現れます。まず、「hat_env0の温度[℃]」を選んで、右側のプログラムエリアにドラッグ＆ドロップします。
このブロックは「ENV Hat」というセンサから温度データを取得するブロックです。では取得した温度データをM5StickCの液晶画面に表示してみましょう。そのためには「グラフィック」メニューから「テキスト” ”をｘ0 ｙ0 に 色で表示」というブロックをドラッグ＆ドロップします。
「テキストを…」というブロックの中に「hat_env0の温度[℃]」ブロックを入れて、次の図のようにします。
画面右上の右三角の実行ボタンをクリックして、プログラムを動かしてください。M5StickCの液晶画面に温度らしき数字が表示されます。
このプログラムは温度を1回取得して液晶画面に表示したら終わりです。次に、このプログラムを改造して、5秒毎に繰り返し温度を取得して表示するようにしてみましょう。
そのためには、「イベント」メニューから「ずっと」ブロックを、「タイマー」メニューから「1[秒]停止」ブロックを選び、次のように組み合わせます。「1[秒]停止」ブロックの中の数字は5に変えます。
プログラムができたら、実行ボタンをクリックしてください。M5StickCの液晶画面の数字が5秒毎に更新されるようになりました。
今度は表示をもう少し見やすくしてみましょう。今は液晶画面の上に小さい字で小数点以下6桁の数字が表示されています。M5StickCの画面は縦長なので、90度回転させて、左（あるいは右）を上にして表示し、フォントも標準より大きなものに変えてみます。
画面を90度回転させるには「UI」メニューの「画面」の「画面の向きのモードを 0 に設定する」ブロックを使います。モードを1にするとM5StickCの右が上に、3にすると左が上になります。フォントは「グラフィック」メニューの「フォントを FONT_Default に設定」ブロックで設定します。「FONT_Default」の部分をいろいろ変えて、どんなフォントになるか試してみてください。
画面の向きとフォントの設定はプログラムが始まって1回だけ実行すればいいので、「Setup」ブロックと「ずっと」ブロックの間に置きます。
数字の桁数を指定するのは「テキスト」メニューの「□ の小数点以下 0 桁までのテキスト」ブロックを使います。数字の桁数なので「数学」メニューにあるかと思いましたが、「テキスト」メニューにありました。どのメニューにどんな機能ブロックがあるか、暇な時にいろいろと見ておくといいですね。
表示を見やすくしたプログラムは次のようになりました。
画面には次のように温度が表示されます。
「HAT」メニューの「環境」には「hat_env0の温度[℃]」の他に「hat_env0の湿度[%]」というブロックがありました。これを使って、温度と湿度を測って、画面に表示してみましょう。
温度の下に湿度を表示するには、どうしたらいいでしょう？
これには、テキストを表示するのに使っている「テキスト” ”をｘ0 ｙ0 に 色で表示」ブロックのｘとｙを指定することで好きな位置にテキストを表示できます。M5StickCの液晶画面には座標があり、左上が x = 0、y = 0になります。座標を表す時は x = 0、y = 0 の代わりに (0, 0) と書くことにします。右下の座標は、画面を縦にしたときは (79, 159)、横にした時は (159, 79) です。
温度の表示位置も左上過ぎるので、温度を (10, 10)、湿度を (10, 40) の位置に書いてみます。数字だけだと分かりにくいので、温度の表示には「Temp: 25.5」というように先頭に「Temp: 」「Humid: 」という文字も付けてみます。文字を付け足すには「テキスト」メニューの「” ” ＋ □」というブロックを使います。
プログラムは次のようになります。
実際の画面は次のように、温度と湿度が数字で表示されて、デジタル温湿度計のようになりました。
M5StickCの液晶画面に温度と湿度が表示できるようになりました。離れたところからでも温度が分かるように、第2回の「クリスマスの飾り」で使ったLEDテープを使い、温度を表示してみましょう。
今回は10cmのLEDテープを使います。
室温を測ることを想定し、0℃から40℃の温度を表示することにします。0℃のときは1番目のLEDだけを光らせ、40℃のときは15個全部のLEDを光らせるようにします。
LEDテープを制御するために、UIFlow画面左側の「Units」から「RGB LED」を選択します。「count」はLEDテープのLEDの個数に合わせて「15」に設定します。次に、真ん中の「Units」メニューの「Neopixel」から「neopixel0 の 1 から 5 番目のLEDの色を□に設定」を選びます。
0℃のときは1番目のLEDだけを光らせ、40℃のときは15個全部のLEDを光らせるには、真ん中の「高度なブロック」メニューの「Easy I/O」にある「マップ」ブロックを使います。
「マップ」ブロックはセンサの値などを別の範囲に変換してくれる便利なブロックです。「マップ」ブロックを上の図のように設定すると、「マップ」の右側の値が0（変換前下限）のときは1（変換後下限）に、40（変換前上限）のときは15（変換後上限）に、その間の値のときは比例計算して変換してくれます。
「変数」メニューから「変数の作成…」で「temp」という変数を作り、「hat_env0の温度[℃]」に設定します。「temp」を「マップ」ブロックで1から15の値に変換し、その「マップ」ブロックを「neopixel0 の 1 から 5 番目のLEDの色を□に設定」ブロックの「5」の部分に入れます。こうすることで、温度に対応してLEDテープのLEDを光らせられます。
温度をLEDテープで表示する温度計の出来上がりです。
話が長くなってきたので、今回はこのくらいにします。作ったプログラムはUIFlowの下のフロッピーのアイコンをクリックして保存しておきましょう。プロジェクト名（3_Thermometer）に「.m5f」を付けたファイル名でダウンロードフォルダに保存されます。
「M5Stackカフェ」第3回は温湿度・気圧センサHatを使って、温度計を作ってみました。またLEDテープをつないで、温度をLEDで表示してみました。いかがだったでしょうか？Hatを使いUIFlowでプログラムを作ると、簡単にセンサ端末が作れますね。
