M5Stack

【MicroPython】M5StackCore2 ボタンの作り方

はじめに

M5StackCore2で画面(タッチスクリーン)上にボタンを作る方法を解説します。言語はMicroPythonを使います。

環境

この記事は以下の環境で作成しています。

環境 バージョンなど 備考
M5Stack M5Stack Core2
開発用PCのOS Windows11 Window10でもOKです
UIFlow 1.7.4 デスクトップ版を使います

プログラム概要

今回のプログラムの概要は以下の通りです。

  • ボタンを作成する
  • ボタンの大きさ/色を設定する。
  • ボタンが押されたら、ラベル(テキスト)を表示する。

実行結果

プログラムの実行結果は以下の通りです。

ボタンのプログラムの実行結果

UI(ボタン・ラベル)の作成

コードを作成する前に、UIFlowのエディタで、ボタン×2・ラベル×1を画面に配置します。手順は以下の通りです。

ボタンの配置

左側のButtonのアイコンをドラッグ&ドロップして、Core2の画面に配置します。

ボタンの配置方法を解説する画像

ボタンのサイズ・色などを変更する

配置したボタンをクリックして、大きさや色を設定します。設定内容は以下の通りです。

項目設定内容
nametouch_buttonA
width100
height80
textButtonA
color白 (#ffffff)
backgroundColor青 (#4169e1)
Button1の設定内容

ボタンの設定方法を解説する画像

同様に「Button2」も以下の内容で設定します。

項目設定内容
nametouch_buttonB
width100
height80
textButtonB
color黒 (#000000)
backgroundColor黄色 (#ffff66)
Button2の設定内容

ラベルの配置

左側の「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ではどう作ればいいの?」という方も多いかと思います。そういった方の参考になればうれしいです。

UdemyでPythonを学ぼう

M5Stack Core2で使う『Python(MicroPython)』を学びたい方は、Udemyの動画講座がおすすめです。無料講座だけでも130本近く公開されており、アプリからならオフラインで見ることもできます。「本は苦手」という方でも、動画講座なら簡単です。

M5Stackで作れるものも広がるので、是非Pythonを学んでみてください。

⇒ Python(入門編)の講座一覧はこちら

※ リンク先の左側のメニュー「価格->無料」で無料講座が絞り込めます。

M5Stack Core2 をはじめよう

M5Stack Core2は、USBケーブル(TypeA-TypeC)も付属しているので、買ってすぐに始めることができます。セットアップ方法については、こちらの記事をご覧ください。

¥5,990 (2022/03/30 18:04時点 | Amazon調べ)

こちらの記事で「おすすめ工具」も紹介しています。

もう少し安いやつないの?

Wifi・Bluetoothはありませんが、H/W制御特化の「RaspberryPi Pico」なら1000円程度で始められます。「とにかく安くH/Wを動かしたい」という方にはRaspberryPi Picoがおすすめです。このブログでこちらの記事でセットアップ方法などを解説しています。

M5Stack Core2の他の機能の使い方

このブログでは、M5Stack Core2のセットアップや他の機能の使い方についても解説しています。興味のある方は以下のリンクもご覧ください。

応援・要望お待ちしてます

ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。

ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

メールアドレスが公開されることはありません。