クリエイター手抜きプロジェクト［578］IoT M5 Stack編　画像の表示処理
── 古籏一浩 ──

投稿：2019年04月22日　著者：古籏一浩

今回も、M5 Stackを使ったグラフィックの処理を行ってみます。前回は、図形や画像を表示するだけでした。せっかく画像を表示したので、この画像を動かしてみます。

これまでと同様に、ブロックでプログラミングするので、UI.Flowのページにアクセスします。
http://flow.m5stack.com

http://flow.m5stack.com

画像の配置や表示方法については、前回を参照してください。ここでは、すでに画像がひとつ配置済みになっているものとして、解説していきます。

配置した画像はimage0という名前になっているはずです。もし、複数の画像を配置してimage0という名前になっていない場合は、表示されている画像をクリックして、表示されるダイアログでimage0に変更してください。

それでは、画像を右側から左側までスライドして表示させてみましょう。この場合、画像のX座標を右側から左側に変化させていきます。M5 Stackの液晶画面は、320×240ドット（ピクセル）です。最初に画像のX座標を320にしておきます。

ブロックエディタは最初の状態のままであれば、[ Setup ]というブロックだけが表示されています。画像の最初の座標を設定するには、この[ Setup ]ブロックの下に、[ image0 の位置 x [ ] ]というブロックをつなぎます。

[ image0 の位置 x [ ] ]は、ブロックのカテゴリのUIの中のイメージにあります。このイメージのカテゴリですが、画像が配置されていない場合は出てきません。最初に画像を配置してからにしましょう。

[ image0 の位置 x [ ] ]ブロックをクリックすると、ブロック配置画面に出てきます。[ Setup ]ブロックの下にドラッグするとくっつきます。

くっつけたら座標を設定します。座標値はそのままでは入力できないので、ブロックの「数学」カテゴリをクリックします。一番上に[ 0 ]という数値だけ表示されたブロックがありますので、クリックして配置します。

このブロックを[ image0 の位置 x [ ] ]ブロックの座標値に、ドラッグ＆ドロップします。ドラッグ＆ドロップしたら、数値を320に変更します。

次に、座標を320から0まで変えていきます。この場合、繰り返しブロックを使うと簡単です。ブロックのカテゴリに「繰り返し」があるので、クリックします。その中に[[i]を[ ]から[ ]まで[ ]ずつカウントする]ブロックがありますので配置します。数値のブロックを「数学」のカテゴリから配置して、以下のようにブロックの値を設定します。

[[i]を[320]から[0]まで[-1]ずつカウントする]

次にこの繰り返しブロックの中に、新たに[ image0 の位置 x [ ] ]を配置します。位置xの右側の部分には変数iを指定します。この変数iのブロックは、「変数」のカテゴリをクリックすると出てきます。

これでできあがりです。実行ボタンをクリックして、画像が右から左にスライドしてくるかどうか確認してみてください。

ちなみに、ブロックで作成したコードを、Pythonコードで確認することもできます。画像がスライドするコードは、以下のようになります。Pythonなので、インデントがひとつでもずれると、動かなくなってしまいますので注意してください。

----------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x0016ff)
btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)
image0 = M5Img(-2, 0, "res/img717f.jpg", True)
i = None
image0.setPosition(x=320)
for i in range(320, -1, -1):
image0.setPosition(x=i)
----------------------------------------------------------------------

ちなみに、画像をスライドさせるだけなら、以下のコードでも動作します。しかし、Pythonコードを変更した後で、ブロックの方に切り替えると、修正したPythonプログラムは消えてしまいますので、注意してください。

消えるというよりも、ブロックで作成したコードで上書きされてしまうといった方がいいかもしれません。Pythonエディタで修正した状態で実行ボタンを押せば、ちゃんと反映されます。

ですので、Pythonコードで保存しておきたい場合は、エディタなどにコードをペーストして残しておく方が安全かもしれません。ここらへんは将来的に改善されるのではないかと思います。

----------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x5d63a2)
image0 = M5Img(320, 0, "res/img717f.jpg", True)
i = None
image0.setPosition(x=320)
for i in range(320, -1, -10):
image0.setPosition(x=i)
----------------------------------------------------------------------

それでは次に、2枚の画像を交互に切り換えてみましょう。切り替える画像を用意し、JPEG形式で保存します。これまでと同様に、2つの画像をアップロードします。

アップロードしたら、開発画面で画像を2つ配置します。画像の名前はimage0とimage1にします。

画像を配置したら、最初に画像を表示しないようにvivibilityをFalseに変更しておきます。これで準備完了です。表示する座標はどちらも(0,0)にしてください。

画像を無限に繰り返し切り替えるので、「繰り返し」のカテゴリから[繰り返す：続ける条件[ ]]ブロックを使います。[ Setup ]ブロックの下にくっつけます。無限に繰り返すので、続ける条件にはめるブロックは[ true ]にします。[ true ]ブロックは「ロジック」のカテゴリにあります。

繰り返しブロックの中には、以下のようにブロックを配置します。なお、[[ ]秒間停止]ブロックは、「タイマー」のカテゴリ内にあります。

[ Setup ]
[繰り返す：続ける条件 [true]]
　[[image1]を隠す]
　[[image0]を表示]
　[[2]秒間停止]
　[[image0]を隠す]
　[[image1]を表示]
　[[2]秒間停止]

これでできあがりです。実行ボタンをクリックして動作を確認してください。なお、Pythonコードだと以下のようになります。

----------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x5d63a2)
btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)
image0 = M5Img(0, 0, "res/img717f.jpg", False)
image1 = M5Img(0, 0, "res/img774s.jpg", False)
while True:
image1.hide()
image0.show()
wait(2)
image0.hide()
image1.show()
wait(2)
----------------------------------------------------------------------

【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

http://www.openspc2.org/

M5 Stackのセンサー、いろいろ買ってみたけど、よく分からないセンサーもあって、そこらへんは時間をみて実験したいところ。今年は10連休だそうですが、休みは関係ないですねぇ……

・InDesign自動化サンプルプログラム逆引きリファレンス上/下
https://www.amazon.co.jp/dp/4844396846/

https://www.amazon.co.jp/dp/4844396846/

https://www.amazon.co.jp/dp/4844396854/

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936

https://www.amazon.co.jp/dp/4865940936

［正誤表］
http://www.openspc2.org/book/error/ichigoLatte/

http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム　上巻、下巻
https://www.amazon.co.jp/dp/4844397591

https://www.amazon.co.jp/dp/4844397591

https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP