はじめに
M5StackCore2で画面(タッチスクリーン)へ「画像の表示する方法」と「画像の切り替える方法」について解説します。言語はMicroPythonを使います。
環境
| 環境 | バージョンなど | 備考 |
| UIFlow(MicroPython) | 1.7.4 | デスクトップ版を使います |
| デバイス | M5Stack Core2 | |
| 開発PCのOS | Windows11 | Window10でもOKです |
ポチップ
プログラム概要
今回のプログラムの概要は以下の通りです。
- 表示する画像を作成する
- 画像を表示する
- 画像を隠す
- 画像を切り替える
実行結果
後述するプログラムの実行結果です。画面上に画像が表示されて、表示→非表示→別画像へと切り替わります。
コードを書く前にUIの設定
コードを作成する前に、画像(Image)の表示位置や、表示したい画像の指定などの、UIの設定を行います。
使用する画像は、あらかじめCore2内部に保存(アップロード)しておく必要があるので、その作業も併せて行います。手順は以下の通りです。
アップロードできる画像には以下の制限があります。
| 形式 | PNGのみ |
| サイズ | 50KB以下 |
画像のアップロード
右上の「MANAGER」のアイコンをクリックして、「Device File Manager」を開きます。
開いた画像の「Add Image」ボタンを押します。
画像選択のためのウインドウが表示されるので、使用したい画像を選択します。
複数の画像を使用する際は、もう一度「Add Image」ボタンを押して、画像を選択してください。
以上で画像のアップロードは完了です。
画像の配置
左側のImageのアイコンをドラッグ&ドロップして、Core２の画面に配置します。
画像の設定
画面に配置したImageをクリックし、表示されたメニューの「imagePath」のドロップダウン(▼)をクリックします。一覧から、アップロードした画像を選択します。
選択すると、画面上のImageが選択した画像に変わります。
これでUIFlow上での画像の配置・設定は完了です。
全体コード
全体コードは以下の通りです。詳細な内容は後述する「コードのポイント」で解説します。
from m5stack import *
from m5stack_ui import *
from uiflow import *
import time
import wifiCfg
screen = M5Screen()
screen.clean_screen()
screen.set_screen_bg_color(0xFFFFFF)
# 自動生成される画像のコードです
# このコードで指定された画像が表示されます
image = M5Img("res/rooster1.png", x=11, y=6, parent=None)
# 2秒待機します
wait(2)
# 画像を隠します
image.set_hidden(True)
# 画像を切り替えます
image.set_img_src("res/rooster2.png")
# 隠した画像を再度表示します
image.set_hidden(False)
# 2秒待機します
wait(2)
# 画像を隠さずに切り替えます
image.set_img_src("res/rooster1.png")
# 2秒待機します
wait(2)
コードのポイント
画像の表示
画面表示のコードは、UIの設定(Imageの配置)をすると自動生成されます。
# 自動生成される画像のコードです
# このコードで指定された画像が表示されます
image = M5Img("res/rooster1.png", x=11, y=6, parent=None)画像を隠す
set_hidden関数で画像の「表示/非表示」を切り替えることが出来ます。
- set_hidden(True) ・・・ 画像を隠す
- set_hidden(False) ・・・ 画像を表示する
# 画像を隠します
image.set_hidden(True)画像を切り替える
set_image_src関数で、表示する画像を切り替えることができます。切り替えは画像の表示中/非表示中、どちらでも実行できます。
アニメーション風に画像を切り替えたい場合は、隠さずに変更した方がスムーズに画像を切り替えることができます。
# 画像を隠します
image.set_hidden(True)
# 画像を切り替えます
image.set_img_src("res/rooster2.png")
# 隠した画像を再度表示します
image.set_hidden(False)
# 2秒待機します
wait(2)
# 画像を隠さずに切り替えます
image.set_img_src("res/rooster1.png")まとめ
M5StackCore2で画面(タッチスクリーン)へ「画像の表示する方法」と「画像の切り替える方法」について解説しました。参考になればうれしいです。
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がおすすめです。
ポチップ
応援・要望お待ちしてます
ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。
ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。
