M5StickC Plusの開発環境として、いくつか選択できる中から使い慣れたArduinoを選んだのですが、それ以外で少し気になったのが、UIFlowと言う開発環境です。
ちょっとだけ浮気して、UIFlowを試してみようと思います。
早速、UIFlowの開発環境を立ち上げて行きましょう。公式HPより、「Tutorial ⇒ UIFlow」と進み、手順に従って環境を立ち上げていきます。
オンライン版は、PCのブラウザでUIFlowページ(https://flow.m5stack.com/)を開き、ブラウザ上でプログラミングします。
オフライン版は、WindowsにインストールしたIDEで開発する環境です。
UIFlowを使って、プログラムを組んでみましょう。所謂「Lチカ」なら、以下図の様なブロックで終了です。
以下にUIFlowのセーブデータをリンクして、上のエディタ画面の説明を続けます。
UIFlowプログラム：brink.m5f
※M5Fファイルはテキストファイルなのですが、一切改行の無いテキストなので、ちょっといただけません。
UIFlowエディタ(上図)の説明：
「簡単〜！」と言っても、この程度ならC言語で記述しても、たかが知れているので、UIFlowが特段簡単にプログラミングできると言う証明にはなりません。C言語なら、たらたらとキーボードを打つだけの数式も、UIFlowでは一々「ブロックを選択して、配置して、数値を与えて」と、むしろまどろっこしいです。
ただ、ブロックを使ったプログラミングは楽しいです（１＾−＾）。
中央のブロックパネルから使えそうなブロックを選んで、左側に並べて行くだけで、何となくプログラムの動作を記述して行くことができます。
ライブラリの整備されたC言語でも、「ライブラリ関数を叩けばおしまい」ってところは確かにあります。けど、ライブラリ関数に渡す引数やら、とある関数を実行するために必要な前処理とか、こっちの関数で初期化しておきなさいとか、色々とお作法を読み解いて使って行かなければならないのが、いつも面倒なのです。
UIFlowにも多少は、そういう面も残っていますが、かなり容易になっています。その代わり、UIFlow(ブロック)が想定していない使い方は一切できないので、歯がゆく思う事もありそうです。
もう少し複雑なプログラムを組んでみましょう。
SNTP(Simple Network Time Protocol)による時刻合わせと、時計を表示するアプリケーションを作って見たいと思います。
SNTP時計の目標仕様：
工場出荷時テストプログラムを実行して見た時から気になっていたのだけど、RTCの時間がでたらめでした。M5StickC Plusはバッテリ内蔵で、電源遮断中もずっとRTCが時を刻み続けているので、SNTP等を使って時刻合わせしておきたいところでした。
いずれ、Arduino IDEでサンプルコードを眺めながらSNTPの実行方法を探って行きたいのですが、まだそこまで手が回りません。
UIFlowなら、以下のブロックがあるので、これを置いて並べるだけで良さそうです。
SNTPはラウンドトリップ時間の短い方が誤差を小さく抑えることが可能なので、実用的には日本国内のネットワーク的距離が近いサイトを指定して使うのが良いと思います。今回は、プリセットされていたSNTPサーバから選択して使いました。
日本のタイムゾーン(JST)は、「9(GMTから9時間差)」です。
文字列をTFT画面に描画するのは、「ブロックパネル ⇒ Graphic ⇒ Lcd.print」ブロックで可能です。ただ、これを使うと、文字の背景色が透明になってしまうので、同じ位置に別な文字を再描画すると、前の文字と重なって読めなくなってしまいます。
これは使い難い。
UIFlow画面左側のUIエディタで、M5StickC PlusのTFT画面上に「ラベル」を配置して、ラベルに文字を表示する様にすると上書きとなるので、これを使うのが正しいスタイルらしいです(「ブロックパネル ⇒ UI ⇒ Label ⇒ Label show」ブロック)。
上図左端のパレットからTFT画面にドラッグして、配置やサイズ、色などを設定できます。
今回の時計表示アプリケーションの様に、日付や時刻の表示位置、フォントサイズなどが決まっている場合、上図の様に位置とサイズをGUIで確定できて、後から表示する文字列だけを現在の日時に変更すれば良いので、慣れると、こっちの方が楽です。
UIエディタで設定したテキストや図形の、サイズ、位置、色、文字列、表示／非表示、等の状態は、ブロックで変更することができます(下図)。
Windowsのプログラミングで、リソースエディタを使ってウインドウのUIを設計後、C言語で動作をプログラミングして行く感覚に近いです。ただ、Windowsのリソースエディタみたいに、複数のウインドウを開発することはできないので、あまり手の込んだことはできません。
RTCから取得した時刻を1秒毎に更新表示したいので、1秒毎のイベント(割り込み)を作ります。
おそらく、Startブロックでタイマを設定して、timer callbackブロック内に必要な処理を記述すれば良いのでしょう。C言語だと、整備されたライブラリを使ったとて、ここまで簡単には使えません。
1秒毎にイベントを発生させて、コールバックルーチン内で表示を更新しています。
この他、M5StickC Plus本体のユーザスイッチを押した／離したなどのイベント処理ブロックも完備されているので、これを使えば楽チンです。
スイッチBの長押し(1秒くらい？)でSNTP時刻合わせするようにしておきました。イベント「longPress」は、スイッチを離した時に発動するので、少し使い難いです。
スイッチAには割り当てなしですが、デバッグ用として、日時をクリアする記述が入っています。
簡単な関数も作成できるので、日時の数値が1桁だった場合に上位側ゼロ(0)詰めの2桁文字列に変換する関数(dec2)を作って対応しました。
以下図が、完成した「SNTP時計」の全体図です。
ブロックを並べて行くだけで簡単ではあるのですが、ちょっと時計を表示するだけで上図のサイズですから、手の込んだことをするとブロックが肥大化して、どこにどんなプログラムを配置したか把握できなくなってきます。プログラミングもデバッグも困難になるので、そもそも、大規模なプログラム開発には向かないようです。
M5StickC PlusのTFT 1画面分のUIを作って、それを制御する程度の簡単なプログラムを作るのがせいぜいでしょう。ただ、何度でも言っておきますが、ブロックを使ったプログラミングは楽しいです（１＾−＾）。
以下に、完成したプログラムファイルをリンクしておきますので、UIFlowで読み込んで確認して見てください。
SNTP時計プログラム：sntp_clock.m5f
前の節でも少し指摘しておいたのですが、プロックに存在しない機能を実装することはできません。今回も、SNTPからは「曜日」を取得できたのですが、RTCには曜日を設定できませんでした。日付に曜日を表示したい場合、一苦労することになります。
時に、M5StickC PlusのUIFlowでは、プログラム実行時、IR LEDが(無駄に)光っていることに気が付きました。CMOSセンサカメラ内蔵スマホのカメラアプリで、IR LEDの発光状態を確認して見てください。機能的に悪さはしませんが、こちらで指摘したように、IR LEDには電流制限抵抗が入っておらず、そこそこ大きな電流が流れているはずです。バッテリの持ち時間に影響する(悪さする)ので、消灯させておいた方が賢明です。
上図「Setup」ブロックに繋がっている、Init PinブロックでGPIO9の初期設定を実行すると、IR LEDを消灯することができます。
動作中の様子を動画にしておきました。
TFTディスプレイはデフォルトの明るさで、IR LEDは消灯させてあります。最初にSNTPで時刻合わせする様子をご確認いただけます。その後、タイムラプス撮影に切り替えて、時計表示の様子を動画にしてあるのですが、注目はバッテリの消費状況です。
画面下の水色のバーがバッテリ残量を示していて、時間の経過と共に減って行きます。さて、何分持ったでしょうか？答えは上の動画でご確認ください。
※バッテリ容量値120mAhから逆算すると、おおよその消費電流値を知ることができます。
UIFlowのブログラムで確認していただくと、SNTPの時刻問い合わせが終了後、「Disconnect wifi」してあるのですが、PCからpingを投げたところ応答がありましたので、どうやらWiFiに接続したままの状態だったようです。電波飛ばしてますので、バッテリの消費量は大きかったはずです。
「Disconnect wifi」でダメと言う事は、UIFlowでWiFiの電波を停止する方法が他にあるのかどうか、不明です。
おもちゃとしてはね。けど、小回り利かないし、変数や数式などの記述が煩雑で使い難いです。
ちょっと凝ったことをし始めると、あっという間にブロックが肥大化して、「大作」になってしまいます。大規模なプログラムを組むのは難しそうです。
逆に、ちょっとした簡単なアプリケーションを作るには、良いです。色々な周辺ハードウェアなどの制御ブロックも揃っていて簡単に使えるので、C言語のライブラリ関数仕様を読み解きながらプログラムして行く困難はありません。
アプリケーション次第では、C言語で開発するより、ずっと楽に完成できる物もありそうです。
なお、最終的にM5StickC Plusへ書き込んでいるのは、Python🐍とか言う言語のソースリストみたいです。UIFlow開発環境から、完成したソースリストを見ることはできます。ソースリストの方で修正することはできないので、見るだけです。
UIFlow以外にPython実行環境をお使いの方は、ソースリストをコピー＆ペーストして使えるのかもしれませんが、当方、Pythonなるものに興味は無いので、詳細は不明です。
大規模なプログラムを作るのは困難ですが、ちょっとしたアプリケーションであれば容易に作成できる面もあるので、時々使って見たいと思います。
