ESP32S3 (Arduino framework) decode jpg and display on ST7789 SPI Display.

Base on former exercise of "240x240 ST7789V2 SPI IPS with FT6236 cap touch on XIAO ESP32S3 using GFX Library for Arduino", this exercise run on XIAO ESP32S3 Sense in Arduino framework, load jpg from SD, decode the jpg using JPEGDEC library, and display on 1.54 inch 240x240 ST7789V2 SPI IPS with FT6236 cap touch using GFX Library for Arduino (Arduino_GFX_Library).

Connection follow the former exercise.

Install the following libraries in Arduino IDE's Library Manager.
- GFX Library for Arduino (Arduino_GFX_Library) for display on ST7789
- JPEGDEC for jpg decoding

Exercise code:

XiaoS3_ST7789_SD_jpg_scale.ino

/*******************************************************************************
Xiao ESP32S3 Sense exercise
Display jpg on 240x240 ST7789 SPI IPS
- Display jpg in various scale.

Libraries needed (available in Arduino IDE Library Manager):
- GFX Library for Arduino (Arduino_GFX_Library) for display on ST7789
- JPEGDEC for jpg decoding

Connection follow:
~ https://coxxect.blogspot.com/2025/05/240x240-st7789v2-spi-ips-with-ft6236.html

Test image is 1024*1024 jpg generated using "Image Creator in Bing"
 ******************************************************************************/

/*******************************************************************************
 * Start of Arduino_GFX setting
 ******************************************************************************/
 #include <Arduino_GFX_Library.h>
//=== Custom to match my connection ===========================================

#define PIN_BLK 4
#define PIN_CS  3
#define PIN_DC  2
#define PIN_RES 1
#define PIN_SDA 9
#define PIN_SCL 7

#define GFX_BL PIN_BLK

#define DISP_WIDTH 240
#define DISP_HEIGHT 240

Arduino_DataBus *bus = new Arduino_HWSPI(PIN_DC, PIN_CS);
Arduino_GFX *gfx = new Arduino_ST7789(bus, PIN_RES, 0 /* rotation */, true /* IPS */, DISP_WIDTH, DISP_HEIGHT);
/*******************************************************************************
 * End of Arduino_GFX setting
 ******************************************************************************/

// SD
#include <SD.h>
#define SD_CS         21

#include <JPEGDEC.h>
JPEGDEC jpeg;

String IMAGE_FILE = "/images/img_003.jpg";

int callback_cnt;

// jpeg.open() callback function
int jpegDrawCallback(JPEGDRAW *pDraw) {
  callback_cnt++;
  Serial.printf("jpegDrawCallback() #%i\t%i\t%i\t%i\t%i \n", callback_cnt, pDraw->x, pDraw->y, pDraw->iWidth, pDraw->iHeight);

  // draw on ST7789
  gfx->draw16bitRGBBitmap(pDraw->x, pDraw->y, pDraw->pPixels, pDraw->iWidth, pDraw->iHeight);
  return 1; // Continue decoding
}

int iOptions_scale[] = {0, JPEG_SCALE_HALF, JPEG_SCALE_QUARTER, JPEG_SCALE_EIGHTH};
int iOptions_scale_index = 0;
#define iOptions_scale_MAX 3

void setup()
{
  delay(1000);
  Serial.begin(115200);
  delay(1000);
  Serial.println("Xiao ESP32S3 Sense exercise - Scale test");
  
  // Init Display
  if (!gfx->begin())
  {
    Serial.println("gfx->begin() failed!");
  }
  gfx->fillScreen(RGB565_BLACK);
  gfx->setTextSize(2);
  gfx->println(F("Xiao ESP32S3 Sense exercise"));
  gfx->println("Display jpg in various scale");
  gfx->println();

  pinMode(GFX_BL, OUTPUT);
  digitalWrite(GFX_BL, HIGH);

  if (!SD.begin(SD_CS))
  {
    Serial.println(F("ERROR: File System Mount Failed!"));
    gfx->println(F("ERROR: File System Mount Failed!"));

    for(;;); // Fatal error, do not continue
  }
  else
  {
    Serial.println(F("File System Mount Successful!"));
    gfx->println(F("File System Mount Successful!"));
  }

}

void loop() {
  gfx->fillScreen(RGB565_BLACK);

  File file = SD.open(IMAGE_FILE);
  if(!file){
    Serial.println("Fail to open image file!");
    gfx->println("Fail to open image file!");
    while(1);
  }

  Serial.println("Open image file successful");

  // decode JPG
  callback_cnt = 0;
  if (jpeg.open(file, jpegDrawCallback)) {
    Serial.println("jpeg.open() success!");
    Serial.printf("JPEG dimensions: %d x %d\n", jpeg.getWidth(), jpeg.getHeight());
    jpeg.setPixelType(RGB565_LITTLE_ENDIAN);

    Serial.println("jpeg.decode() Start -");
    jpeg.decode(0, 0, iOptions_scale[iOptions_scale_index]);
    Serial.println("jpeg.decode() Finished !");

    jpeg.close();
  } else {
    Serial.println("JPG decode failed");
  }
  
  file.close();

  if (iOptions_scale_index >= iOptions_scale_MAX){
    iOptions_scale_index = 0;
  }else{
    iOptions_scale_index++;
  }

  delay(3000);
}

XiaoS3_ST7789_SD_jpg_slideshow.ino

/*******************************************************************************
Xiao ESP32S3 Sense exercise
Display jpg on 240x240 ST7789 SPI IPS
- display jpg in slideshow form.

Libraries needed (available in Arduino IDE Library Manager):
- GFX Library for Arduino (Arduino_GFX_Library) for display on ST7789
- JPEGDEC for jpg decoding

Connection follow:
~ https://coxxect.blogspot.com/2025/05/240x240-st7789v2-spi-ips-with-ft6236.html

Test image is 1024*1024 jpg generated using "Image Creator in Bing"
 ******************************************************************************/

/*******************************************************************************
 * Start of Arduino_GFX setting
 ******************************************************************************/
 #include <Arduino_GFX_Library.h>
//=== Custom to match my connection ===========================================

#define PIN_BLK 4
#define PIN_CS  3
#define PIN_DC  2
#define PIN_RES 1
#define PIN_SDA 9
#define PIN_SCL 7

#define GFX_BL PIN_BLK

#define DISP_WIDTH 240
#define DISP_HEIGHT 240

Arduino_DataBus *bus = new Arduino_HWSPI(PIN_DC, PIN_CS);
Arduino_GFX *gfx = new Arduino_ST7789(bus, PIN_RES, 0 /* rotation */, true /* IPS */, DISP_WIDTH, DISP_HEIGHT);
/*******************************************************************************
 * End of Arduino_GFX setting
 ******************************************************************************/

// SD
#include <SD.h>
#define SD_CS         21

#include <JPEGDEC.h>
JPEGDEC jpeg;

String images_files[] = {"/images/img_001.jpg",
                         "/images/img_002.jpg",
                         "/images/img_003.jpg",
                         "/images/img_004.jpg",
                         "/images/img_005.jpg",
                         "/images/img_006.jpg",
                         "/images/img_007.jpg",
                         "/images/img_008.jpg",
                         "/images/img_009.jpg",
                         "/images/img_010.jpg",
                         "/images/img_011.jpg",
                         "/images/img_012.jpg",
                         "/images/img_013.jpg",
                         "/images/img_014.jpg",
                         "/images/img_015.jpg"};
int images_files_index = 0;
#define images_files_MAX 14


// jpeg.open() callback function
int jpegDrawCallback(JPEGDRAW *pDraw) {
  // draw on ST7789
  gfx->draw16bitRGBBitmap(pDraw->x, pDraw->y, pDraw->pPixels, pDraw->iWidth, pDraw->iHeight);
  return 1; // Continue decoding
}

void setup()
{
  delay(1000);
  Serial.begin(115200);
  delay(1000);
  Serial.println("Xiao ESP32S3 Sense exercise - SlideShow");
  
  // Init Display
  if (!gfx->begin())
  {
    Serial.println("gfx->begin() failed!");
  }
  gfx->fillScreen(RGB565_BLACK);
  gfx->setTextSize(2);
  gfx->println(F("Xiao ESP32S3 Sense exercise"));
  gfx->println("jpg SlideShow");
  gfx->println();

  pinMode(GFX_BL, OUTPUT);
  digitalWrite(GFX_BL, HIGH);

  if (!SD.begin(SD_CS))
  {
    Serial.println(F("ERROR: File System Mount Failed!"));
    gfx->println(F("ERROR: File System Mount Failed!"));

    for(;;); // Fatal error, do not continue
  }
  else
  {
    Serial.println(F("File System Mount Successful!"));
    gfx->println(F("File System Mount Successful!"));
  }

}

void loop() {
  gfx->fillScreen(RGB565_BLACK);
  gfx->setCursor(0, 0);
  Serial.println();
  Serial.println(images_files[images_files_index]);

  File file = SD.open(images_files[images_files_index]);
  if(!file){
    Serial.println("Fail to open image file!");
    gfx->println("Fail to open image file!");
  }else{
    // decode JPG
    if (jpeg.open(file, jpegDrawCallback)) {
      Serial.printf("JPEG dimensions: %d x %d\n", jpeg.getWidth(), jpeg.getHeight());
      jpeg.setPixelType(RGB565_LITTLE_ENDIAN);

      long int decode_start = millis();
      jpeg.decode(0, 0, JPEG_SCALE_QUARTER);
      long int decode_end = millis();
      Serial.printf("Duration to decode & display: %i ms\n", decode_end-decode_start);

      jpeg.close();
    } else {
      Serial.println("JPG decode failed");
    }

  }

  file.close();

  if (images_files_index >= images_files_MAX){
    images_files_index = 0;
  }else{
    images_files_index++;
  }

  delay(3000);
}