M5 / プログラミング

M5StickCとUIFlowでビジュアルプログラミングしてみる

こんにちは、Lineaです。
前回の記事で紹介した小型マイコンボード(?)M5StickCのビジュアルプログラミング環境「UIFlow」の使い方について解説していきます
Webブラウザから手軽に開発できるのでプログラム初心者の方や簡単なプログラムをサクッと作りたいときに向いています
手軽とはいえ専用ファームウェアの書き込みやネットワークを経由した接続など前準備や注意点もあるので解説していこうと思います

前回のM5StickC紹介記事はこちらです

手のひらサイズの高機能マイコンボードM5StickC

UIFlow用ファームウェアの書き込み

まずはUIFlowに接続してプログラムを動作させるためのファームウェアをM5StickCに書き込む必要があります
ファームウェアの書き込みにはM5Burnerというソフトを使用します
まずは公式サイトからM5Burnerをダウンロードします

ダウンロードされたzipファイル内のM5Burner.exeを起動します
起動できたら左の欄からSTICKCを選択します
選択するとM5StickCとM5StickC PlusのUIFlow用ファームウェアがトップに表示されるので種類に合わせてダウンロードしておきます
ちなみに他にも様々な作例をダウンロードできますがM5Stick Plusの方ではうまく動かないものが多かったです（内部の部品が異なるためM5StickCと互換性が薄いため）
自分が持っているのがPlusの方だったのでちょっと残念です

その後M5StickCとPCをUSBケーブルで接続します
接続すると左上のCOM欄にCOMポートが増えるので増えた方を選択します（この場合COM3）

もしCOMポートが増えない場合は対応するUSBIドライバがない可能性が高いので、インストールしてから試してみてください

いよいよ書き込んでいきます
ファームウェアの欄のBurnボタンを押すとWifiのSSIDとパスワードの入力を求められます
Webブラウザから開発するために必要なのでネットワークに接続したWifiアクセスポイントの情報を入力してください
Startを押すと書き込みが開始されるので書き込みが終わるまで待ちましょう

インターネット経由の接続

ファームっウェアを書き込めたら一度再起動しましょう
本体左横の電源ボタンを押し続けると電源が切れます。その後電源ボタンを長押しすると起動します
起動後にWifiのSSIDが表示された後、下のように青い背景とcloudの表示になればネットワークに接続完了です
接続できない場合は背景がオレンジ色になります

もし、うまく接続できなかった場合には起動直後にAボタン（画面下のM5と書かれたボタン）を押すと設定画面に入れます
Bボタン（本体右横のボタン）でsetingを開いてmodeがinternetになっているか確認してください
それでもだめな場合はファームウェア書き込みをやり直してWifiの設定を再度やり直してみてください

本体がネットワークに接続できたらUIFlowと接続をしていきます

UIFlowを開いたらまずは左下のAPI Keyと書かれた部分をクリックします
そうすると設定画面が表示されるのでAPI KeyにM5SStickCに表示されているキーコードを入力します
これで自分のM5StickCと紐付けることができます
また、Deviceの部分も対応する機種を選択します

OKを押すと自動的に接続が開始され成功すると接続済みと表示されます

これでWebブラウザからプログラミングをする準備ができました

プログラミングしてみよう

準備が整ったのでプログラミングを始めていきましょう
UIFlowの画面は下の画像の示すように3つのメニューと右側のプログラミングエリアで構成されます

1. UI要素メニュー　　　　　　　　：本体液晶に表示するテキストや図形などを配置するメニュー
2. 拡張ユニットメニュー　　　　　：接続する公式拡張ユニットを管理するメニュー
3. プログラミングブロックメニュー：プログラミングで使用するブロックのメニュー

一番使うことになるのは3.のブロックメニューです
ここから使うブロックを選んで画面右のプログラミングエリアに配置してプログラムを作成していきます
プログラムの作り方自体はScratchにだいぶ似ていますね

それでは画像の例と同じ”Hello World”を液晶画面に表示するプログラムを作っていきます
最初の状態ではSetupブロックだけが配置されていると思うので液晶画面の初期設定を行います
UI⇨画面から表示されるブロック3つをプログラミングエリアにドラッグアンドドロップで接続します

このようにカテゴリを選択していくと対応するブロックが表示され選択できるようになります
今回配置した画面の3つのブロックは画面の設定に関する処理になります
配置したブロックの数字や色の部分をクリックすると変更することができるので自由に変更してみてください
「画面の向きのモード」だけ分かりづらいので説明すると0を縦の状態として90°ずつ変化します

それでは画像のようにブロックを配置してプログラムを完成させましょう
「ずっと」ブロックはイベント
「テキストを表示」ブロックはグラフィックにあります

うまくできたでしょうか？
完成したら右上の再生かダウンロードボタンでプログラムをM5StickCに書き込みます

M5Stickの画面にHello Worldと表示されればプログラムが無事に書き込まれ動作しています！

センサーの数値を表示してみる

Hello Worldを表示させましたが、これだけでは寂しいですよね
発展編としてジャイロセンサーの数値を表示してみましょう

表示をしやすくするためにUIメニューの機能を使用します
UIメニューから追加したい要素をM5SitickCのアイコンにドラッグアンドドロップすると配置することができます
配置したUIをクリックすると要素毎の設定が編集できます

まずはTitleを画面の一番上に配置してnameとtextを以下のように編集しましょう
nameはプログラム上で識別するための名前になります
textは表示するテキストになります（日本語はフォントがないので使えないです）

できたら更に次の画像のようにLabelを4つ追加、編集していきます
これらのLabelはジャイロセンサーの角度を表示するために使用します

次に先程のHello Worldのプログラムを元に変更を加えていきます
下の画像を参考に作成してみてください
追加したUIのブロックはUIカテゴリの中に追加されています
ピッチ角とロール角はユニット⇨加速度＆ジャイロにあります
配置したブロックを消す際はブロックを選択してDeleteキーを押すかブロックメニューにD&Dで消します

プログラムを解説するとずっとブロックは内側のブロックの処理を無限ループさせるブロックです
ずっとブロック内でUIラベルのテキスト表示ブロックにピッチ角とロール角のブロックを接続しています
ピッチ角ブロックとロール角ブロックはジャイロセンサーの角度をそれぞれ取得します
ピッチやロールというのは物体の回転を表現するために3つに分けた回転軸の角度を指します（参考）
ラベルの表示更新がずっとブロック内にあるため、処理が終わるとずっと内の先頭に戻ることで常に最新のジャイロセンサーの角度が取得され、表示されるようになります

このプログラムを実際に動かすと画像のように数値の部分にジャイロセンサーで計測された角度が表示されます
本体を傾けると数値の表示が変わると思います

あとがき

ガーデニングで見に来た人の中でプログラミングに興味持つ人もいるかもと思い、今回は少しチュートリアル風に始め方を書いてみました
今回の内容だけでプログラミングできるほどではないですが、こんな風にやってるんだよということが伝わればなと思います
拡張ユニットをつかえばIoTデバイスとして温度や湿度など計測することもできるので興味がある人は色々調べてトライしてみてほしいです
自分も水分センサで水やりセンサを作ってみたりしているのでそちらも記事にしたいと思います
それではまた