Skip to content

3.5inch_Lesson04_SD_BMP_Slideshow

This lesson uses the SD library to mount the TF card and read 1.bmp through 5.bmp from the card's root directory. After the program starts, the screen first shows the SD card initialization status, then switches to a new BMP image every 5 seconds. Through this experiment, learners can verify the TF card, SPI communication, BMP file format, file paths, and the LCD image display pipeline.

1. Course Introduction

This lesson uses the SD library to mount the TF card and read 1.bmp through 5.bmp from the card's root directory. After the program starts, the screen first shows the SD card initialization status, then switches to a new BMP image every 5 seconds. Through this experiment, learners can verify the TF card, SPI communication, BMP file format, file paths, and the LCD image display pipeline.

2. Learning Objectives

  • Be able to process images into 480 × 320 BMP files that fit the 3.5-inch screen.
  • Be able to copy BMP files to the root directory of the TF card and confirm that the file names are correct.
  • Be able to explain how the program reads the BMP line by line and pushes it to the LCD.
  • Be able to troubleshoot issues based on SD initialization failure, files failing to open, or abnormal image display.

3. Preparation

3.1 Hardware and Accessories

  • 1 × CrowPanel Advance 3.5 inch ESP32-S3 HMI development board.
  • 1 × USB Type-C data cable that supports data transfer, used for power, uploading programs, and viewing serial logs.
  • 1 × Micro SD / TF card, used to store the BMP images.
  • 1 × USB card reader, used to copy images to the SD card from a computer.
  • 1 × Computer, used to process images, copy files, and upload the Arduino program.

Insert the SD card into the card reader

Note: It is recommended to format the SD card as FAT32 first. If the computer cannot reliably recognize the SD card, the development board will likely also fail to mount it normally.

3.2 Software and Files

  • Arduino IDE.
  • The ESP32 Arduino development environment configured per Lesson 01.
  • The series of Arduino library files imported per Lesson 01.
  • Windows Paint, or another image-processing tool that can adjust pixel dimensions and export a 24-bit BMP.

Code and Resource Download

Code download: - lesson-04

Resource download: - 5 BMP image assets total link

4. SD Card Handling and BMP Image Processing

4.1 Overall Processing Sequence

  1. Select the image you want to display, and use an image-editing tool to crop or scale it to 480 × 320.

  2. Export the image as a BMP file. It is recommended to keep it as a 24-bit BMP and avoid compressed formats or incompatible color formats.

  3. Name the images according to the file-name requirements in the lesson code: 1.bmp, 2.bmp, 3.bmp, 4.bmp, 5.bmp.

  4. Format the TF card with a common FAT file system, and copy 1.bmp through 5.bmp to the root directory of the TF card.

Note: This lesson for the 3.5-inch screen uses 480 × 320 image assets. Do not use the 2.4-inch 320 × 240 images directly, otherwise you may see incorrect display ratios, misaligned images, or incomplete display.

4.2 Image Preparation

Choose an image to display on the screen. You can use an image you downloaded yourself, or use the sample assets provided with this lesson. Save the image to the desktop or another easy-to-find location first.

Prepare the image to display

The official tutorial provides the image resolution for each screen size. The 3.5-inch screen used in this lesson has a resolution of 480x320.

Image resolutions for different product sizes

4.3 Open the Image-Processing Tool

Open the "Paint" tool in Windows.

Open the Windows Paint tool

Drag the prepared image into Paint, or use Paint's Open function to select the image file.

Drag the image into Paint

The image is opened in Paint

4.4 Adjust the Image Pixel Dimensions

Click the Resize function in Paint, switch the unit to pixels, and then set the horizontal and vertical dimensions to:

Horizontal: 480
Vertical: 320

Set the image pixels to 480 x 320

Click OK to finish resizing the image.

Confirm the image resizing

After resizing, check whether the image ratio and content meet expectations.

Check the resized image

4.5 Save as a 24-bit BMP

Choose Save As and save the processed image to an easy-to-find location on your computer.

Choose the image save location

Select BMP as the save format and make sure the image depth is 24-bit. It is recommended to name the files 1.bmp, 2.bmp, 3.bmp, 4.bmp, 5.bmp following the default path in the code.

Save as a 24-bit BMP image

Note: Do not simply change the file extension. You must use an image tool to Save As a BMP, and confirm that it is a 24-bit image depth.

4.6 Copy the Images to the SD Card

Insert the Micro SD / TF card into the card reader, then connect the card reader to the computer.

Insert the SD card into the card reader

Open the SD card drive and copy the processed 1.bmp through 5.bmp to the root directory of the SD card.

Copy the BMP images to the SD card

The recommended root directory structure of the SD card is as follows:

/
├── 1.bmp
├── 2.bmp
├── 3.bmp
├── 4.bmp
└── 5.bmp

After copying, safely eject the SD card and remove it from the card reader, then insert it into the SD card slot of the CrowPanel Advance HMI 3.5-inch board.

IMG_8139

Note: The default code for this lesson reads the SD card root paths /1.bmp through /5.bmp, so do not put the images into subfolders. The file names must match the code exactly; it is recommended to use English alphanumeric names and avoid Chinese characters, spaces, and special symbols.

5. Software Operation Steps

5.1 Open the Arduino Project

Open the project file for this lesson using the Arduino IDE:

SD_CrowPanel_ESP32_Advance_HMI_3_5.ino

After opening, first confirm that the project files such as pins_config.h and LovyanGFX_Driver.h are in the same project directory, to avoid opening only a single .ino file and causing a compilation error due to missing header files.

image-20260730183039667

5.2 Configure the Board Parameters

Confirm the following parameters in the Tools menu of the Arduino IDE:

Board: ESP32S3 Dev Module
Port: Select the serial port corresponding to the current board
Flash Size: 16MB (128Mb)
PSRAM: OPI PSRAM
Partition Scheme: Huge APP (3MB No OTA/1MB SPIFFS)
Serial Monitor baud: 115200

image-20260730183133828

5.3 Compile and Upload the Program

Click the Upload button in the upper-left corner of the Arduino IDE and wait for compilation and uploading to finish.

image-20260730183200092

If the upload gets stuck at Connecting..., refer to the download troubleshooting steps in Lesson 01: check whether the port is occupied by the Serial Monitor, and if necessary, use BOOT / RESET per the board requirements to enter download mode.

5.4 Open the Serial Monitor to View Logs

After uploading is complete, open the Serial Monitor and select a baud rate of 115200. When the program starts, it prints the SD card mount result, the SD card capacity, and the root directory file listing.

image-20260730183605847

If you can see Card Mount Successed, SD Size, Listing directory: /, and the file list 1.bmp through 5.bmp in the serial output, it means the SD card mount and file preparation are basically normal. At this point, the LCD will first display SD_Card OK, then start the image slideshow.

image-20260730183657924

6. Hardware Operation Steps

  1. With the board powered off or not yet running, insert the prepared TF card into the 3.5-inch board's card slot. Connect the board to the computer with a USB cable, and after uploading finishes, wait for the board to reset.

IMG_8139

  1. Observe whether the screen first displays SD_Card OK.

IMG_8140

  1. Wait for the image slideshow and confirm that the screen switches to a new BMP image approximately every 5 seconds.

7. Key Code Explanation

#define SD_MOSI 6
#define SD_MISO 4
#define SD_SCK  5
#define SD_CS   7

These macros define the SD card SPI pins. If the board-level configuration does not match, SD.begin() will fail and the screen will display SD_Card failed.

if (!SD.begin(SD_CS, SD_SPI, 80000000))

This line attempts to mount the SD card with the specified SPI and frequency. On failure, first check the TF card format, insertion orientation, file system, and pin definitions.

f.seek(54);
for (int row = 0; row < Y; row++) {
  f.seek(54 + 3 * X * row);
  f.read(RGB, 3 * X);
  gfx.pushImage(0, row, X, 1, (lgfx::rgb888_t *)RGB);
}

The BMP file header is typically 54 bytes, and the program skips the header and then reads and displays the RGB data line by line. Drawing line by line reduces memory usage; if the image dimensions or format do not match, you may see color anomalies, misalignment, or incomplete display.

8. Experimental Observations

After the program is uploaded and the board resets, the LCD first displays the SD card initialization status:

  • Displays SD_Card OK: the SD card mounted successfully.

  • Displays SD_Card Failed: the SD card failed to mount; check the SD card, its format, and the insertion status.

image-20260729103503325

After the SD card mounts successfully, the LCD cyclically displays the 5 BMP images from the SD card, with each image shown for about 5 seconds.

22

Display effect of the 2nd image

Display effect of the 3rd image

Display effect of the 4th image

Display effect of the 5th image

9. Code Download

Code path: lesson-04