Zenn
🐾

【M5Stack】画像ファイルを画面に表示しよう1(ATOMS3,S3R)

2024/12/31に公開
M5Stack
M5Atom
ESP32
tech

【画像ファイルのまま、画面に表示したいですよね？】

マイコンを使用していても、どうせならPCのように画像ファイルのまま表示したい人が多いのでは？少なくても私はそうなので、AtomS3Rが発売された動作確認と合わせてテストしてみました。
https://x.com/UtaAoya/status/1872894166323347659

【実践：画像ファイルをUploadしてAtomS3/S3Rの画面に表示する】

シンプルかつ、SPIFFSより速い速度と言われる ファイルシステム：LittleFS、開発環境：Arduino IDE 2.x (Windows環境) で、まずはやり方を公開します。

1.画像をファイルを表示するプログラム

AtomS3_Image_LittleFS.ino - AtomS3/S3R 画像ファイル表示：
/*
  M5GFX(M5Unified)- drawJpgFile (JPGファイルを描画します)
  https://docs.m5stack.com/ja/arduino/m5gfx/m5gfx_functions
*/
#include <Arduino.h>
#include <LittleFS.h>
#include <M5Unified.h>

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

  LittleFS.begin();
  M5.Lcd.drawJpgFile(LittleFS, "/icon.jpg",0,0);  // uploadした画像ファイル名
}

void loop() {
}

2. プログラムと同じ場所に「フォルダ：data」を作成し、画像ファイル※をコピーする

※上記プログラムの「icon.jpg」となります

3. ファイルUpload tool： arduino-littlefs-upload を使って、画像ファイルをUpload

※ Arduino IDE 2.2.1以降の2.x環境で使用可能

1.以下のサイトから「arduino-littlefs-upload-1.5.2.vsix」をダウンロードする

https://github.com/earlephilhower/arduino-littlefs-upload/releases

2.ダウンロードしたファイルを「C:\Users<username>.arduinoIDE\plugins\」のフォルダにコピーする

3.Arduino IDE を再起動し「Ctrl＋Shift＋P」を押下してコマンドパネルを開き、「Upload LittleFS to Pico/ESP8266/ESP32」のコマンドが追加されていることを確認する。


※検索窓から文字でフィルタリングすると見つかりやすいです

4.「Upload LittleFS to Pico/ESP8266/ESP32」をマウスで選択すると、dataフォルダ内の画像ファイルがUploadされて、画面に表示されます

【最後に】

時間が無くなってしまった（今、12/31 21:25..）ので、続きは来年記載します！
・M5社：AtomS3 / AtomS3R
https://www.switch-science.com/products/8670
https://www.switch-science.com/products/9915
・M5Unified
https://docs.m5stack.com/ja/arduino/m5unified/helloworld
https://github.com/m5stack/M5Unified

Discussion