M5StackとM5UI.Flowで子供のプログラミング教室#2
前回はの記事はこちら
第２回の勉強は、UIを触るところをメインで進める
課題１ボタンを押したら表示する文字を変えてみよう（その１）
IDEの左側にM5StackのUIが編集できるエディタがあります。 今回は、タイトルとラベルを利用します。
それぞれをドラッグ＆ドロップで、表示したい場所に配置します。
最初にタイトルを選ぶと、設定を変えるポップアップが出てくるので、表示するテキストを「Programing Study」に変更します
次に、ラベルのフォントを「Comic」に変更します
ここからは、ボタンAを押したら「button A」とラベルに表示するようにブロックを組みます
まずは、「イベント」からボタンを押したときのブロックを配置します。
次に、「UI」->「ラベル」->「ラベル〜に〜を表示」のブロックを配置します。
最後に、表示する文字を編集します。
これで、実行ボタンを押して、M5Stackの一番左のボタンを押すと、文字が表示されます。
けど、最初にラベルに「Text」と表示されていてイマイチなので、ボタンを押していないうちは、ラベルには何も表示されないようにしたいですね。
「UI」->「ラベル」->「Set label1 hide」のブロックを「Setup」のブロックに配置して、実行ボタンを押してM5Stackに反映します。
期待通りに非表示の状態から、ボタンを押すと表示されるようになりました。
後は、残りのボタンを押すと、「button B」、「button C」と表示されるようにします。
この課題を通して、Setupの役割と、ラベルの使い方を学ぶことが出来ました。
課題２ボタンを押したら表示する文字を変えてみよう（その２）
ここでは、違う方法で同じ結果を実現することを試してみます。具体的にはボタンを押したイベントを使わずに、判定処理でこれを実現します。
まずは、「イベント」->「くりかえし」のブロックをSetupにつけます。 その中に、「ロジック」->「もし」のブロックを入れます。「もし」のブロックの条件に「イベント」->「ボタンがA wasPressed」をつけます。最後に、「もし」doにラベルの文字を変更するブロックを入れます。
この処理を、ボタンB、ボタンCの分追加します。
実行ボタンで書き込んだ後にボタンを押してみましょう。さっきと同じ動きをすることが確認できます。
この課題では、「くりかえし(loop)」を使いながら、「もし(if)」について知ることが出来ました。Pythonのコードを見ると、課題１と課題２の仕組みの違いが理解することが出来ます。
ボタンのイベントを使う方
ボタンの状態を見る方
課題３ボタンを押したら表示する文字を変えてみよう（その３）
「もし」の使ってみましたが、「もし」には「そうでなくもし(else if)」のような設定もできるので、この課題では「もし」を使って課題２を改造してみます。
左上にある歯車みたいなアイコンをクリックすると、編集用のポップアップが表示されます。
「else if」の部品を右側に必要な分配置します。
これにボタンの判定と、ラベルへのテキストの設定を組み合わせると、こんな感じになります。
ソースコードを見ると、課題２の時よりも無駄な判定が減っているのでスッキリしてますね。
「もし(if)」はカスタマイズできるので、必要な判定文をわかりやすく作ることを知ることが出来ました。
応用問題その１
画面上に３つの円を表示して、それぞれのボタンを押すと、「赤」、「黄」、「青」と変わるようなものを作ってみましょう。
回答例
応用問題その２
ボタンAを押すと本当の信号機みたいに、「青」->「黄」->「赤」と自動で変わるようにする。
ヒント：タイマー
回答例
ボタンAを押したら、少し待ってから黄色に変わり、少し待ってから赤に変わるようにしました。
まとめ
今回は、UIのいじり方や、タイマー、「もし(if)」について学ぶことが出来ました。タイマーと「もし」を組み合わせることで、色々なことが出来るようになりそうです。
