I Build DIY ESP32-S3 Touch UI GIF Player Using With ILI9341 and Sd Card

I built a GIF player that plays GIFs directly from an SD card. It features a touch control UI with a GIF selector, next, and previous functions, and it plays GIFs smoothly like a movie at 30 FPS. This guide will walk you through wiring the components, setting up the software, and formatting your files so you can build one yourself!

Hardware:

1. ESP32-S3 Development Board: You will need a board with 16 MB flash and 8 MB RAM.
2. Touch Display: An ILI9341 touch display with an embedded SD card cartridge. We don't need an external SD card reader because we are using the one directly embedded on the display.
3. Wiring: Jumper cables and a breadboard.
4. Storage: A MicroSD card.

Software:

1. Arduino IDE (Version 2.3.8 was used for this project).

Wiring the display to the ESP32 requires careful attention to the SPI pins.

1. The TFT driver and the touch panel driver share the same SPI pins, with the exception of the CS pin.
2. However, the SD card has different SPI pins and uses a different SPI port, so you must be careful with that setup.

(Note: Follow the specific pinout for your exact ESP32-S3 model).

1. If you don't have the Arduino IDE yet, go to their website and download the latest version.
2. Because the Arduino IDE doesn't come with the ESP32 board pre-installed, you need to install it. Copy the Espressif board manager URL, open your IDE Preferences, and paste it in.
3. Go to the board section on the left, search for "ESP32", and click to install. Version 3.3.7 was used in this script, and it takes a little time to install, so please be patient.
4. Next, you need to install the necessary 3rd party libraries: TFT_eSPI (2.5.43) and Animated GIF (2.2.0). You can reach these directly in the Arduino IDE libraries section or via a GitHub repo.

After installing, you must configure the display library to work with the ILI9341 touch display.

1. Go to the libraries installed location on your PC (usually Documents > Arduino > libraries > TFT_eSPI).
2. First, open the user_setup_select file using VS Code or Notepad.
3. Make sure the User_Setup.h line is uncommented, then save and close the file.
4. Next, open the user_setup file and redefine all the pins to match the wiring you set up in Step 1. Save and close. And check the library configuration part of video.

For getting the correct response on the touch UI, you need to learn the touch display calibration values.

Souce Code : https://github.com/derdacavga/Gif-Player

1. Open the touch_calibrate example in the Arduino IDE.
2. Go to Tools, select your ESP32 development board, and choose the right COM port.
3. Open the serial terminal and select the 115200 baud rate.
4. Click the upload button. When the upload is done, you will see the touch calibration screen on the display.
5. Click on the 4 corners of the display. When it is done, you will see the calibration values printed on the serial monitor.
6. Copy those lines, as we will use them in the next script.

In this application, we rely heavily on the PSRAM specs.

1. Why RAM is important: This gives us 8 Megabytes of temporary memory to prep a GIF for the display. The ESP32 reads a file from the SD card, creates a 320x240 frame buffer, and then pushes the image to the display.
2. If a 3-second GIF has 15 FPS, it can take up to 1.5 Megabytes of memory, which is too big for standard RAM. So, I chose the method of reading directly from the SD card and buffering it.

Once your main script is ready with your calibration values pasted in, configure your Tools menu (ensuring PSRAM is enabled) and click upload.

Troubleshooting: If you get a white screen after uploading, please check your user setup, tool configuration, and wiring again.

1. The SD card must be formatted to FAT32.
2. Keep your GIFs limited to a 320x240 resolution for uncut playing.
3. All files must have a .gif extension and be placed directly into the card's root folder.
4. Extract the SD card and place it in the embedded SD card reader on the display.

Click the reset button on your ESP32, and the GIF player is ready to use!

You can control it entirely with the touch panel:

1. If you touch the left area on the screen, it goes to the previous GIF.
2. If you touch the right area on the screen, it goes to the next GIF.
3. If you touch the middle of the screen, it goes to the main menu/GIF selector.

When you are in the main menu, you can select any GIF you uploaded, and you can also use a button to switch between autoplay or single GIF playing mode. Have fun!