M5Paperの画像表示でもうちょっと遊ぶ

前回はとりあえずの練習としてM5Paperに挿したSDカードにある画像を表示させました。

hollyhockberry.hatenablog.com

画像が簡単に表示できて満足したんですが、もうちょっと練習してみます。

前回適当に用意した画像はサイズがバラバラでした。
練習なので挙動を知りたくてわざとサイズを変えたんですが、これらを同じ大きさで表示させたいと思います。

と言ってもライブラリ使うだけであいかわらず楽ちんですが。

ライブラリ

ESPシリーズでLCD表示するならなんと言っても最強の名をほしいままにしているLovyanGFXですよね！

github.com

M5StackのLCD関連のライブラリとして中身がLovyanGFXそのものであるM5GFXというものがあります。
せっかくなので(?)、今回はM5GFXを使って練習してみたいと思います。

github.com

ビットマップファイルの描画

M5GFXのインスタンスのメソッドを直接呼んで描画する方法と、スプライトを描画しM5GFXへpushする２通りの方法があるようです。
それぞれの方法でビットマップファイルを描画してみました。

f:id:hollyhockberry:20210926201820j:plain

キレイに描画できました！

サイズを拡大縮小して描画

前項では540x540と270x270のビットマップを描画しました。
今度はそれぞれを400x400サイズになるように拡大縮小して描画します。

拡大縮小する際は元のサイズがわからないと期待通りにならないので、ビットマップのサイズを知りたくなります。
M5Canvasのサイズを指定する方法はcreateだけでなくビットマップファイルからできるメソッドcreateFromBmpFileがあります。この方法だとビットマップのサイズに合わせてくれるのでちょうどいいですね。

このスプライトをpushSpriteではなくpushRotateZoomWithAAで回転拡大縮小して描画してあげればOKです。

M5Canvas::pushRotateZoomWithAA(
  描画中心点x座標, 描画中心点y座標, 
  回転角,
  幅の拡大率, 高さの拡大率);

f:id:hollyhockberry:20210926210436j:plain

同じサイズでキレイに描画できましたね！

ちなみに、実験してたら270x270サイズのビットマップを読み込むと必ずリブートして悩んで苦し紛れに現象をツイートしたんですが、M5GFXのMaintainerであるらびやんさんが捕捉してくれてライブラリを修正してくれました。どうもありがとうございます！

M5GFXで同じインスタンスを使い回してM5Canvas::createFromBmpFileを何度も叩くとCORRUPT HEAPでabortっちゃう。デストラクタでコールしてるdeleteSprite, deletePaletteしてみたり、setPsram(true)してみたりも変化なし。同じファイルを繰り返し開いてもabortしないのでメモリリークではなさそう?
— イナバ (@hollyhockberry) 2021年9月25日