はじめに

Node-RED MCU EditionはMCU用のノードが少なく、Node-RED Dashboardで日本語を表示する方法と合わせて画像を表示する方法を調査していました。
Node-RED DashboardはModdableのPiuモジュールを使用しており、日本語を表示するにはフォントファイルを用意すれば実現できることがわかりました。

(Dashboardで日本語表示できるようにした経緯はこちら)

Piuで画像を表示するには、manifest.jsonで事前にリソース情報(画像)を定義する必要があり、サイネージ用途でデバイスに表示する(画像を切り替える)のは難しいと考えていました。

Moddable SDKのサンプルプログラム

Moddable SDKのサンプルプログラムの中を調査しているときに、CommodettoとPocoというグラフィックライブラリ・レンダリングエンジンを使用してJPEG/PNGをディスプレイに表示するプログラムを見つけました。

examples/commodetto/jpeghttp
と
examples/commodetto/pngdisplay
がプログラムで、ブログ記事でも紹介されていることを確認しました。

Moddable SDKのサンプルプログラムをNode-RED MCU Editionのノードへ移植する

Node-RED MCU Editionのサードパーティノードを作成するノウハウは過去の補足書を参考にしました。

最初にJPEG画像をデバイス(シミュレーター)に表示することができました。

PNG画像の表示は少し苦労しました(必要なライブラリやモジュールが足りず、シミュレータでエラーが表示されました)が、JPEGと同じように表示することができました。

npmとNode-REDノードライブラリに登録しましたので、ぜひご利用ください！

デバイスでPNG画像を表示できない (2024年6月8日追記)

シミュレーターではPNG画像の表示は問題ありませんが、実際にデバイスで表示させようとすると、メモリ不足やzlibライブラリの初期化でエラーが表示されます。

JPEG画像でもサイズによってデバイスでは表示できない場合があることがわかりました。

Moddable SDKのGitHubでissueを上げたところ、zlibライブラリの初期化には画像ファイルのサイズによらず、ある程度のメモリ容量が必要であることがわかりました。

PSRAM(8MB)を積んだデバイス(M5Stack Core2、など)では問題なく表示されることを確認しました。

デバイスで画像を表示する場合はJPEGをおすすめします。PNG画像を使用する場合はお気をつけください！