Getting Started with ESP32 : ILI9341 TFT Display

Published Nov. 27, 2024, 9:08 a.m. by Ezra

In today’s guide, we’ll dive deep into interfacing the ILI9341 TFT display with the ESP32, creating a visually appealing and functional graphical user interface (GUI). Whether you’re building an IoT dashboard, an interactive device, or a simple display project, the combination of the ILI9341 and ESP32 offers power, versatility, and performance.

This tutorial is perfect for beginners and seasoned developers alike, as we’ll cover everything from hardware setup and library integration to advanced features like rendering text and images. Let’s get started!

ILI9341 and ESP32

The ILI9341 TFT display is a popular 2.4-inch to 3.5-inch screen module with vibrant colors, high resolution, and touch support (optional in some variants). It uses the SPI protocol, making it a fast and efficient choice for embedded systems.

ILI9341 Pinout

The ESP32, on the other hand, is a powerhouse microcontroller with Wi-Fi, Bluetooth, and dual-core processing. Its high-speed SPI capabilities make it an ideal match for driving the ILI9341 display while handling complex tasks like data transmission or real-time processing.

ESP32 Pinout

What You’ll Need

To follow along, you’ll need the following components:

ESP32 Dev Board (e.g., ESP32-WROOM-32) ILI9341 TFT Display (SPI variant) Connecting wires or a breadboard A 5V power source or USB connection Adafruit GFX and Adafruit ILI9341 libraries Arduino IDE or PlatformIO

Step 1: Setting Up the Hardware

Pin Connection:

Component	ESP32 Pin	ILI9341 Pin
TFT_DC	18	DC
TFT_CS	23	CS
TFT_RST	19	RST
VCC	3V3	VCC
GND	GND	GND
SCK	13	SCK
MISO	12	MISO (Not used in this example)
MOSI	14	MOSI

To drive the ILI9341 display, we’ll use the Adafruit GFX and Adafruit ILI9341 libraries. These libraries simplify the process of rendering graphics and text, providing pre-built functions for drawing shapes, images, and more.

How to Install the Libraries

Open Arduino IDE.
Navigate to Sketch > Include Library > Manage Libraries.
In the Library Manager, search for Adafruit GFX and click Install.
Similarly, search for Adafruit ILI9341 and click Install.

Once installed, you’re ready to write and upload your code.

Step 3: Writing the Code

#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"

#define TFT_DC 2
#define TFT_CS 15
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

void setup() {
  tft.begin();

  tft.setCursor(18, 120);
  tft.setTextColor(ILI9341_RED);
  tft.setTextSize(3);
  tft.println("EmbeddedXpress");

  tft.setCursor(24, 160);
  tft.setTextColor(ILI9341_GREEN);
  tft.setTextSize(2);
  tft.println("I can do this :-)");
}

void loop() { delay(10); }

Step 4: Uploading the Code

Connect your ESP32 to your computer using a USB cable.
In the Arduino IDE, select your ESP32 board under Tools > Board (e.g., “ESP32 Dev Module”).
Select the correct port under Tools > Port.
Click Upload to compile and upload the code.
Once the upload completes, the display should show 'EmbeddedXpress" text

Results

This is the result obtained

Capture Image

Applications

With the ESP32 and ILI9341, you can create projects such as:

IoT Dashboards: Display live sensor data, device statuses, and controls.
Wearables: Compact, low-power graphical interfaces.
Smart Home Displays: Monitor and control home automation systems.

Happy coding!

Getting Started with ESP32 : ILI9341 TFT Display

Similar posts

Comment on this post