はじめに
M5StackCore2で画面(タッチスクリーン)上にボタンを作る方法を解説します。言語はMicroPythonを使います。
環境
| 環境 | バージョンなど | 備考 |
| UIFlow(MicroPython) | 1.7.4 | デスクトップ版を使います |
| デバイス | M5Stack Core2 | |
| 開発PCのOS | Windows11 | Window10でもOKです |
ポチップ
プログラム概要
今回のプログラムの概要は以下の通りです。
- ボタンを作成する
- ボタンの大きさ/色を設定する。
- ボタンが押されたら、ラベル(テキスト)を表示する。
実行結果
プログラムの実行結果は以下の通りです。
UI(ボタン・ラベル)の作成
コードを作成する前に、UIFlowのエディタで、ボタン×2・ラベル×1を画面に配置します。手順は以下の通りです。
ボタンの配置
左側のButtonのアイコンをドラッグ&ドロップして、Core２の画面に配置します。
ボタンのサイズ・色などを変更する
配置したボタンをクリックして、大きさや色を設定します。設定内容は以下の通りです。
| 項目 | 設定内容 |
|---|---|
| name | touch_buttonA |
| width | 100 |
| height | 80 |
| text | ButtonA |
| color | 白 (#ffffff) |
| backgroundColor | 青 (#4169e1) |
同様に「Button2」も以下の内容で設定します。
| 項目 | 設定内容 |
|---|---|
| name | touch_buttonB |
| width | 100 |
| height | 80 |
| text | ButtonB |
| color | 黒 (#000000) |
| backgroundColor | 黄色 (#ffff66) |
ラベルの配置
左側の「Label」のアイコンをドラッグ&ドロップして、画面に配置します。
ラベルのフォントサイズを変更する
配置したラベルをクリックして、フォントの大きさを設定します。
これでUIの作成は完了です。
全体コード
ボタンが押された時の処理を作成します。UIの設定を含めて、全体コードは以下のようになります。
from m5stack import *
from m5stack_ui import *
from uiflow import *
screen = M5Screen()
screen.clean_screen()
screen.set_screen_bg_color(0xFFFFFF)
#
# 自動生成されるUIのコードです
#
touch_buttonA = M5Btn(text='ButtonA', x=24, y=27, w=100, h=80, bg_c=0x4169e1, text_c=0xffffff, font=FONT_MONT_14, parent=None)
touch_buttonB = M5Btn(text='ButtonB', x=190, y=27, w=100, h=80, bg_c=0xffff66, text_c=0x000000, font=FONT_MONT_14, parent=None)
label0 = M5Label('Text', x=30, y=142, color=0x000, font=FONT_MONT_24, parent=None)
#
# ボタンが押された/離された時に実行したい処理を、
# 関数で作成します。
#
# ボタン"A" が「押された」時の処理
def touch_buttonA_pressed():
label0.set_text('Button A PRESS')
# ボタン"A" が「離された」時の処理
def touch_buttonA_released():
label0.set_text('Button A RELEASE')
# ボタン"B" が「押された」時の処理
def touch_buttonB_pressed():
label0.set_text('Button B PRESS')
#
# 自動実行される関数に、自作の関数を登録します
#
# ボタン"A" が「押された時」の処理として登録
touch_buttonA.pressed(touch_buttonA_pressed)
# ボタン"A" が「離された時」の処理として登録
touch_buttonA.released(touch_buttonA_released)
# ボタン"B" が「押された時」の処理として登録
touch_buttonB.pressed(touch_buttonB_pressed)コードのポイント
ボタン押された / 離された ときの処理
「ボタンが押された/離された時のにさせたい処理」は、あらかじめ自作の関数にまとめ、
ボタン名.pressed ボタン名.released関数に登録することで実行できるようになります。
ボタン名.pressed ボタン名.released関数は、実際にユーザから、ボタンが押された/離された時にシステムから自動的に呼び出される関数です。呼び出された後は自身に登録された関数の実行のみを行います。
そのため、上記関数に自作の関数を予め登録しておくことで、ボタンが押された/離された時に、させたい処理を自動実行することが出来ます。
なお、上記の自動呼出しは、プログラムが実行されている間(≒Core2が起動している間)はずっと続きます。無限ループ等でプログラムの終了を防止する必要はありません。
# ボタン"A" が「押された」時の処理
def touch_buttonA_pressed():
label0.set_text('Button A PRESS')
# ~~~ 中略 ~~~
# ボタン"A" が「押された時」の処理として登録
touch_buttonA.pressed(touch_buttonA_pressed)
M5Stack関連のネットの情報で、「isPressed(ボタン押下の確認)」や「pressed_for(長押しの検知)」などの関数も見かけますが、M5Stack Core2の「画面(UI)上のボタン」では利用できない関数のようです。
https://docs.m5stack.com/en/mpy/display/m5stack_lvgl
※ Core2のボタンに関する公式のAPIです。
まとめ
M5StackCore2で画面(タッチスクリーン)上にボタンを作る方法を解説しました。RaspberryPI Picoなど、他のIoT系モジュールと違ってイベントドリブン系の処理なので、「Core2ではどう作ればいいの？」という方も多いかと思います。そういった方の参考になればうれしいです。
M5Stack Core2 をはじめよう
M5Stack Core2には標準でUSBケーブル(TypeA-TypeC)が付属しているので、買ってすぐに始めることができます。アマゾンで買えるので購入も簡単です。
「ポイントやチャージを使いたい」「日用品・他の買い物と合わせて買いたい」という方は以下のリンクをご利用ください。
2022年4月現在、円安と半導体不足の影響からか、M5Stack Core2も在庫小・価格上昇・長納期化が進んでいるようです。今後の動向は読めないので、購入予定の方は早めの行動をおすすめします。
こちらの記事で開発時に使えるおすすめツールも紹介しています。
今ならAmazonで、通常会員0.5~2% Prime会員なら最大2.5%のポイントが貰える「現金チャージ」も使えます。
もう少し安いやつないの？
WifiやBluetoothの機能はありませんが、H/W制御の特化の「RaspberryPi Pico」なら1000円程度で始めることができます。「激安でH/Wを動かしたい」という方にはRaspberryPi Picoがおすすめです。
ポチップ
M5Stack Core2の他の機能の使い方
このブログでは、M5Stack Core2のセットアップや他の機能の使い方についても解説しています。興味のある方は以下のリンクもご覧ください。
応援・要望お待ちしてます
ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。
ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。
