クリエイター手抜きプロジェクト[580]IoT M5 Stack編 M5 Stack本体にあるボタンを使う
── 古籏一浩 ──

投稿:  著者:



今回は、M5 Stack本体にあるボタンを使ってみます。ボタンが押されたら何か処理を行う、という一般的なものです。

まず、簡単なところで、ボタンを押したら画面の色が変わるプログラムを作成してみましょう。

ボタンが押されたら何かするという場合、「イベント」のカテゴリにある[ボタン[ A ]が[ 押されたとき ]]ブロックを使います。このブロックを使いたいボタンの数だけ配置します。

ここでは3つのボタンを押したら画面の色を変えるの、で3つのブロックを配置します。それぞれのブロックで、ボタンA,B,Cが押されたときに実行されるように変更します。

次に、配置したイベントブロック内に、画面の色を変更するブロックを埋め込みます。「グラフィック」のカテゴリから[ 画面を[■]で塗りつぶし ]ブロックを配置します。

これを3つのボタンのイベントブロック内に埋め込みます。色は好きな色を設定してください。ブロックの配置ができたら実行してみましょう。ボタンを押すと色が変わるはずです。





Pythonのコードだと以下のようになります。

--------------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x000000)
btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)
def buttonA_pressed():
# global params
lcd.fill(0xff0000)
pass
def buttonB_pressed():
# global params
lcd.fill(0x33ccff)
pass
def buttonC_pressed():
# global params
lcd.fill(0x33ff33)
pass
buttonA.wasPressed(callback=buttonA_pressed)
buttonB.wasPressed(callback=buttonB_pressed)
buttonC.wasPressed(callback=buttonC_pressed)
--------------------------------------------------------------------------

それでは次に、ボタンが押されたら円を動かしてみましょう。ここでの円は図形として描くものではなく、円のオブジェクトとして処理できるものにします。

このオブジェクトとして処理するためには、開発画面(UI.Flow)のM5 Stack画面上にある「Title Label rect Circle Image」のアイコンの中からCircleのアイコンを、その下にあるM5 Stack画面にドラッグ&ドロップします。円の位置はX座標を160、Y座標を120に設定します。

次に円のX座標を示す変数を作成します。ここではxという名前の変数にします。最初に円のX座標を変数に入れておきます。[ Setup ]ブロックの下に[ [x]に[160]をセット]というようにブロックをくっつけます。次に「イベント」のカテゴリから[ くりかえし ]ブロックを配置し、[ [x]に[160]をセット]のブロックの下にくっつけます。

繰り返しブロックの中に円の位置を設定するブロックを埋め込みます。このブロックは「UI」カテゴリをクリックすると表示される「円形」カテゴリの中から配置します。[[circle0]の位置[0]]のブロックです。この[0]の部分を変数xのブロックに置き換えます。

次に、先ほどの作成したボタンが押されたら画面の色が変わるプログラムと同様に[[ボタンA]が[押されたとき]]ブロックを配置します。ボタンAが押されたら変数xを-5増やすように設定します。ボタンCが押されたら変数xを5増やすように設定します。なお、ボタンBが押されたら最初の位置である160に変数xを設定します。

これでできあがりです。実行ボタンを押して動作を確認してみましょう。ボタンを押すと円が左右に移動します。

Pythonのコードだと以下のようになります。

--------------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x000000)
btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)
circle0 = M5Circle(160, 120, 15, 0xFFFFFF, 0xFFFFFF)
from numbers import Number
x = None
def buttonA_pressed():
global Number, x
x = (x if isinstance(x, Number) else 0) + -5
pass
def buttonB_pressed():
global Number, x
x = 160
pass
def buttonC_pressed():
global Number, x
x = (x if isinstance(x, Number) else 0) + 5
pass
buttonA.wasPressed(callback=buttonA_pressed)
buttonB.wasPressed(callback=buttonB_pressed)
buttonC.wasPressed(callback=buttonC_pressed)
x = 160
while True:
circle0.setPosition(x=x)
wait(0.001)
--------------------------------------------------------------------------

配置する図形を四角形にして、動かしてみるといいかもしれません。また、画像も同様の方法で動かすことができます。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/


うちの地域では、今年も田植えの季節になりました。まわりは高齢化して田んぼを売りたいという人が結構いたりするけど買い手なし。まわりは供出米でなく自家用米として作ってる人も多くいます。この人たちが一斉にお米とか作れなくなると、どうなるんでしょうか。

・InDesign自動化サンプルプログラム逆引きリファレンス上/下
https://www.amazon.co.jp/dp/4844396846/

https://www.amazon.co.jp/dp/4844396854/


・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram


・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936

[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/


・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591

https://www.amazon.co.jp/dp/4844397605


・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP

http://digiconcart.com/dccartstore/cart/info/2561/218591


・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/


・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/


・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/


・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/


・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/