趣味の開発ノート

ITの学習やプログラミング・ノーコードアプリ開発のことなど。

【UIFlow】M5Stickでカウントダウンタイマーを作って過ごした大晦日

M5Stack UIFlow IoT

新年、あけましておめでとうございます。

今年の大晦日は、M5StickC Plusというマイコンボードを使ってカウントダウンタイマーを作って過ごしていました。とても有意義な年越しになりましたね。笑

作ったものを紹介します。

UIFlowでのビジュアルプログラミングを学ぶ

2023年はIoTの年にしようと考えていて、大晦日の午前中はM5Stackシリーズの学習をしていました。UIFlowというビジュアルプログラミングができる開発環境をはじめて触りましたが、すごく便利ですね。

学習の基本はアウトプットということで…インプットの後は手を動かして何か一つ作りたいなーと思って、ちょうど手頃で今が旬のカウントダウンタイマーを題材に作ってみました。

UIFlowを使うと、こんな感じでGUIでプログラムを作っていくことになります。

ボートはWi-Fiでネットに繋げており、ボードごとに一意のAPIキーが発行されます。これを使うとケーブルで物理的に接続しなくても、通信さえ繋がっていればPC上で作ったプログラムを書き込むことができるんですね。これはすごく便利です。

現在時刻をセットする

カウントダウンの仕組みを作る前に、まずはボードに現在時刻をセットする必要がありました。こちらを参考にしながら、現在時刻を設定していきます。

news.mynavi.jp

この作業は残念ながらかなりアナログで、正確な現在時刻を秒単位で見ながら、書き込みタイミングを見計らってだいたい合うようにしました。

time.is

プログラムはこんな感じです。これを書き込むと、その瞬間に数値で入力した時刻がボードに設定されます。

画面に現在時刻を表示する

次に、書き込んだ現在時刻を画面に表示させる仕組みを作ります。

UIFlowの画面左側の領域に、ボードの実際の画面が表示されています。この画面にラベル（テキスト）や図形、画像といったオブジェクトをドラッグアンドドロップで配置していきます。

あとから、ここで作成したオブジェクトをプログラムから操作して表示を変えたりします。とりあえずこんな感じに、日付と時間を表示するラベルを配置。

次に、この表示を変えるようなプログラムを作成します。タイマー機能とラベル表示を変更するブロックを用いて、後からカウントを100ミリ秒（1/10秒）ごとに画面が更新されるようにしました。

書き込んで実行すると、ちゃんと現在時刻を表示させることができました。ただ、年が下二桁しか設定できず、その結果なぜか1900年台にタイムスリップしています。

秒数も表示させたかったのですが、後でカウントダウン表示を付けた時に更新間隔がズレたりしてうまくいかなかったので、ここでは秒数の表示は省略しました。

画面にカウントを表示する

次に、カウントを表示するオブジェクトの設置とプログラムの作成を行います。

こんな感じで、大きな黄色文字で残り秒数のカウントが表示されるようにラベルを設置しました。

M5StickCボードの時刻機能では、パッと見た感じ簡単に時刻の引き算ができなさそうです。なのでカウントを現在時刻から算出する必要がありましたが、この時点でもう、12月31日の23:30頃。

日が変わるまでに間に合う気がしなかったので、かなり大雑把に「現在の分と秒から残り秒数を算出する」というだけの式にしました。

残り秒数 = 3600（1時間の秒数） - 60 * 現在の分 - 現在の秒

残り秒数のカウントは、普通のプログラミングと同じように「変数」を用意してあげます。そして初期設定として変数に算出した値をセットし、その後は100ミリ秒ごとに変数にセットし直してラベルに表示する、という処理を行っています。

全くスマートじゃないですが、良しとしましょう。笑

これで、カウントダウンの基本はできました。これだけでも良かったのですが…残り15分くらいで、欲が出てしまいました。

カウントが0の瞬間に画面表示を変更する

カウントが0になった瞬間に「Happy New Year!!!」という文字に切り替えたいと思い、挑戦してみることに。

まずはこんな感じで「Happy New Year!!!」と表示するためのラベルを設置。表示が重なってしまっていますが、ラベルを隠したり表示させたりといった操作も、プログラムから可能そうです。

カウントが0になった瞬間に画面下半分に先程のラベルが表示されるように、ブロックを組み立てました。時間がなかったので、新しく使うブロックについてちゃんと調べる余裕も動作を検証する暇もありません。

結果、だめでした。カウントが0になった瞬間、カウントが3600に戻ってまたカウントダウンが始まってしまいました。

うまくいけば、こんな感じで赤と黄色で文字がチカチカしてニューイヤー感を出してくれるはずでした。残念です。

うーん。カウント変数が0になった瞬間に再度カウントがはじまったので、「もし〜であれば〜」のブロックの内部が違っていたんでしょうね。「ずっと」ブロックの使い方もこれで良いのか、もうちょっと勉強が必要そうです。

おわりに

カウントはだいたい正確だったのでよしとしましょう！なかなか楽しかったです。

家のWi-Fiの問題だと思うのですが、時々M5StickCとの接続が切れてボードに書き込むことができず、かなり焦りました。大雪があってから非常に調子が悪いです。うちの無線Wi-Fi。

あと、ホッタ先生もPythonで同じような大晦日の過ごし方をしていたようで、仲間がいてうれしかったです。笑

みなさま、昨年は大変お世話になりました！今年もよろしくお願いいたします。