M5Stack

【MicroPython】M5Stack Core2 画像の表示方法と切り替え 【image】

はじめに

M5StackCore2で画面(タッチスクリーン)へ「画像の表示する方法」「画像の切り替える方法」について解説します。言語はMicroPythonを使います。

~ この記事の内容 ~

※ クリックでジャンプできます。

環境

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

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

プログラム概要

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

  • 表示する画像を作成する
  • 画像を表示する
  • 画像を隠す
  • 画像を切り替える

実行結果

後述するプログラムの実行結果です。画面上に画像が表示されて、表示→非表示→別画像へと切り替わります。

画像を表示するプログラムの実行結果

コードを書く前にUIの設定

コードを作成する前に、画像(Image)の表示位置や、表示したい画像の指定などの、UIの設定を行います。

使用する画像は、あらかじめCore2内部に保存(アップロード)しておく必要があるので、その作業も併せて行います。手順は以下の通りです。

アップロードできる画像には以下の制限があります。

形式PNGのみ
サイズ50KB以下

画像のアップロード

右上の「MANAGER」のアイコンをクリックして、「Device File Manager」を開きます。

デバイスマネージャの選択を解説

開いた画像の「Add Image」ボタンを押します。

AddImageボタンを解説

画像選択のためのウインドウが表示されるので、使用したい画像を選択します。

複数の画像を使用する際は、もう一度「Add Image」ボタンを押して、画像を選択してください。

画像の選択の解説

以上で画像のアップロードは完了です。

画像の配置

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

イメージを画面に配置の解説

画像の設定

画面に配置した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)も付属しているので、買ってすぐに始めることができます。セットアップ方法については、こちらの記事をご覧ください。

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

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

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

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

¥1,300 (2022/10/18 06:44時点 | Amazon調べ)

質問・要望 大歓迎です

「こんな解説記事作って」「こんなことがしたいけど、〇〇で困ってる」など、コメント欄で教えてください。 質問・要望に、中の人ができる限り対応します。

使えたよ・設定できたよの一言コメントも大歓迎。気軽に足跡を残してみてください。記事を紹介したい方はブログ、SNSにバシバシ貼ってもらってOKです。

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です