はじめに
M5StackCore2で「画面(タッチスクリーン)上にボタンを作る方法」を解説します。言語はMicroPythonを使います。
環境
この記事は以下の環境で作成しています。
| 環境 | バージョンなど | 備考 |
| M5Stack | M5Stack Core2 | |
| 開発用PCのOS | Windows11 | Window10でもOKです |
| UIFlow | 1.7.4 | デスクトップ版を使います |
ポチップ
プログラム概要
今回のプログラムの概要は以下の通りです。
- ボタンを作成する
- ボタンの大きさ/色を設定する。
- ボタンが押されたら、ラベル(テキスト)を表示する。
実行結果
プログラムの実行結果は以下の通りです。
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)も付属しているので、買ってすぐに始めることができます。セットアップ方法については、こちらの記事をご覧ください。
こちらの記事で「おすすめ工具」も紹介しています。
もう少し安いやつないの？
Wifi・Bluetoothはありませんが、H/W制御特化の「RaspberryPi Pico」なら1000円程度で始められます。「とにかく安くH/Wを動かしたい」という方にはRaspberryPi Picoがおすすめです。このブログでこちらの記事でセットアップ方法などを解説しています。
ポチップ
M5Stack Core2の他の機能の使い方
このブログでは、M5Stack Core2のセットアップや他の機能の使い方についても解説しています。興味のある方は以下のリンクもご覧ください。
質問・要望 大歓迎です
「こんな解説記事作って」「こんなことがしたいけど、〇〇で困ってる」など、コメント欄で教えてください。 質問・要望に、中の人ができる限り対応します。
使えたよ・設定できたよの一言コメントも大歓迎。気軽に足跡を残してみてください。記事を紹介したい方はブログ、SNSにバシバシ貼ってもらってOKです。
