【M5Stack AtomS3】画面に任意の画像を表示する方法【Platform IO】

AtomS3に画像を表示したくなったので、手元の環境で試してわかったことの手順メモです。

検証環境

ハードウェア

• M5Stack AtomS3

ソフトウェアビルド環境

• PlatformIO
• M5Unified
• SPIFFS（ファイルシステム）

エディタ

• VSCode

環境構築（Hello World表示）

こちらの記事を参考に環境構築して、「Hello World」が出るようにします。
VS Code ＋ PlatformIO ＋ M5Unified の組み合わせです。

画像ファイルの追加

エクスプローラーのメニューからプロジェクトのファイル一式を表示させ、「data」フォルダの中に画像ファイルを追加します。

※AtomS3 のディスプレイは 128x128 ドットなので、128ピクセルの画像が推奨です。

画像ファイルのアップロード

data フォルダの中に画像ファイルを追加するだけでは、AtomS3 本体には画像は保存されません。

AtomS3 の内部ストレージ（SPIFFS）へ、画像ファイルを書き込む操作が必要です。

手順

1. 左側メニューから Platform IO の Project Tasks を開く
2. Upload File System Image をクリック

これを実行すると、PC側の data フォルダの内容が
AtomS3 のファイルシステム領域（SPIFFS）へ書き込まれます。

パス指定の注意点

SPIFFS 内では、多くの場合ファイルはルート（/）に配置されます。

そのため、コード内でのパス指定は次のようになります。

static const char* IMAGE_PATH = "/zundamon.png";

画像表示プログラム

main.cppを以下のプログラムに置き換えます。
必要に応じて、画像パス名と画面の明るさを書き換えてください。

#include <SPIFFS.h>
#include <M5Unified.h>

M5Canvas canvas(&M5.Display);

// ===== ユーザーが変えるのはここだけ =====
static const char* IMAGE_PATH = "/zundamon.png";  // SPIFFS内の画像パス
static const uint8_t BRIGHTNESS = 128;            // 画面の明るさ（0-255）
// =======================================

static void die(const char* msg) {
  // 画面にエラー表示して停止
  M5.Display.clear(TFT_BLACK);
  M5.Display.setTextSize(2);
  M5.Display.setTextColor(TFT_WHITE);
  M5.Display.setCursor(0, 0);
  M5.Display.println(msg);
  while (true) { delay(100); }
}

void setup() {
  auto cfg = M5.config();
  M5.begin(cfg);

  M5.Display.setBrightness(BRIGHTNESS);
  M5.Display.clear(TFT_BLACK);

  // 1) SPIFFSをマウント
  if (!SPIFFS.begin(true)) {
    die("SPIFFS mount failed");
  }

  // 2) ファイル存在チェック
  if (!SPIFFS.exists(IMAGE_PATH)) {
    String s = "File not found:\n";
    s += IMAGE_PATH;
    die(s.c_str());
  }

  // 3) ちらつき防止：スプライトに描いてから一発表示
  canvas.createSprite(M5.Display.width(), M5.Display.height());
  canvas.fillSprite(TFT_BLACK);

  // PNGを描画（JPGなら drawJpgFile、BMPなら drawBmpFile）
  canvas.drawPngFile(SPIFFS, IMAGE_PATH, 0, 0);

  canvas.pushSprite(0, 0);
  canvas.deleteSprite(); // 1回表示なら解放してOK
}

void loop() {
  // 画像を1回表示するだけなら何もしない
}

画像表示

プログラムをビルド、アップロードすると、AtomS3に画像が表示されます。

応用するとGIF動画も表示できました。

以上です。

参考