LCDS & DISPLAYS

nterfacing 2.8 INCH TFT LCD Touch Screen with ESP32

Written by Mohammad Damirchi

.8 INCH TFT LCD Display Features

e TFT display is a kind of LCD that is connected to each pixel using a transistor and it features low current consumption, high-quality,
h-resolution and backlight. This 2.8-inch full color LCD has a narrow PCB display. The resolution is 320×280 pixels and it has a four-wir
I interface and white backlight.

s display also has a touch screen and SD card slot.

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 Note

The module voltage is 3.3V and voltage divider is required to interface it with Arduino.

download datasheet and for more details, refer to link below.

p://www.lcdwiki.com/2.8inch_SPI_Module_ILI9341_SKU:MSP2807

.8 INCH TFT LCD Display Pinout

s module comprises 20 pins, each serving a specific purpose. Here is a breakdown of the essential pins:

VIN: Module power supply – 3.3-5 V

GND: Ground
RST: LCD reset
CS: LCD chip select signal, low level enable
D/C: Data selection signal
MOSI: SPI bus write data signal
SCK: SPI bus clock signal
LED: Backlight control
T_CLK: Touch SPI bus clock signal
T_CS: Touch screen chip select signal, low level enable

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 T_DIN: Touch SPI bus input
T_DO: Touch SPI bus input
T_IRQ: Touch screen interrupt signal, low level when touch is detected
SD-MOSI: SPI bus write data signal
SD-MISO: SPI bus read data signal, if you do not need to the read function, you can not connect it
SD-SCK: SPI bus clock signal
SD-CS: Chip select signal for SPI protocol (SD Card)

u can see the pinout of this module in the image below.

equired Materials

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
ardware Components

SP32 × 1 

8 inch IPS Full Color Touch TFT Display Module × 1 

emale to Female jumper wire × 1 

oftware Apps

rduino IDE 

nterfacing 2.8 INCH TFT LCD Display with ESP32

ep 1: Circuit
e following circuit diagram shows how you should connect ESP32 to this Display. Connect wires accordingly.

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
ep 2: Library
ensure seamless compatibility, install the TFT_eSPI library in the Arduino IDE using the following link:

ps://github.com/Bodmer/TFT_eSPI

er that, go to the address of installed library and open the User_Setup.h file and refer to line

IT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP32 SETUP

d uncomment the following lines and comment on the lines which are uncommented.

efine TFT_MISO 19

efine TFT_MOSI 23

efine TFT_SCLK 18

efine TFT_CS 15 // Chip select control pin

efine TFT_DC 2 // Data Command control pin

efine TFT_RST 4 // Reset pin (could connect to RST pin)

u can also download the ready file from here, unzip it and use in your project.

ep 3: Code

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
load the following code to your ESP32 microcontroller.

1 /*
2 Example animated analogue meters using a ILI9341 TFT LCD screen
3
4 Needs Font 2 (also Font 4 if using large scale label)
5
6 Make sure all the display driver and pin comnenctions are correct by
7 editting the User_Setup.h file in the TFT_eSPI library folder.
8
9 #########################################################################
10 ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
11 #########################################################################
12 */
13
14 #include <TFT_eSPI.h> // Hardware-specific library
15 #include <SPI.h>
16
17 TFT_eSPI tft = TFT_eSPI(); // Invoke custom library
18
19 #define TFT_GREY 0x5AEB
20

s code serves as a test script, showcasing various graphical shapes and designs on the display. Verify the successful integration of th
play by observing the displayed visuals.

t ready to explore the possibilities of the 2.8 Inch TFT LCD display with touch screen capability and unleash your creativity in your ESP3
ojects.

Comments (19)

Jerry Renken Reply

Mohammad: This is an impressive posting! I have been looking for this type of post in order to interface my DOIT ESP32
DEVKIT V1 to my 2.8-inch SPI TFT MSP2807 Display. I have made a successful interface between my Arduino UNO Rev 3
Module and the MSP2807 Display. However, I wish to move away from using 10 pairs of series connected step down
voltage divider resistors.
I need some help from you to configure my user setup file for my application. I am using the MSP2807 Display with the ILI9341 Driver,
driven by the DOIT ESP32 DEVKIT V1. I have placed the DOIT ESP32 DEVKIT V1 Board File into my IDE Board List.
Please help me to configure my attached User File to make this happen. I would like to e-mail the following documents to you:
1. A PDF showing a close up drawing for the DOIT ESP32 DEVKIT V1 with all of its pin outs identified
2. A PDF showing the connection between this ESP32 Module and the MSP2807, taken from this posting; a larger drawing of the ESP32
Module by itself; and a table summarizing the interconnections shown in your connection drawing at the top of this figure .
3. A copy of your “Animated Analog Meter” sketch with the User Setup File pasted on top of the sketch.
How can I send these items to you?

December 12, 2021 at 5:13 pm

john
please explain, dumbass. how do you connect 3 pins from the required materials with one wire? fucking copy-paste

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 December 18, 2022 at 1:33 pm Reply

Ali Abdolmaleki Reply

please let me know dirty john. do you have any expereince with SPI interface?

February 15, 2023 at 2:40 pm

Kevin Reply
Thanks for the post. It worked for me right away. Saved me a lot of time.

February 8, 2023 at 12:35 am

Ron Reply
This worked on the the first go around. That never happens with me. LOL
Thanks for the excellent presentation and fine business graphic demo display.
Very Nice!

April 13, 2023 at 9:40 pm

Mohammad Damirchi Reply

you got it my friend

April 15, 2023 at 8:38 am

summer Reply
Hi,
Do ou have done any touch function testing?
Thanks
summer

June 14, 2023 at 2:09 am

Richard Reply
I have set up as per your diagram except for the touch, but all I get is a blank white screen, I wonder how it worked for
some folks, Any suggestions?

July 16, 2023 at 12:58 am

Mohammad Damirchi Reply

Hi Richard
It mostly comes down to wiring.
Double-check your wiring as well as the config file

July 17, 2023 at 11:54 am

lkat Reply
Hello, I’ve coded a tft 2.8 touchscreen LCD with an Arduino uno; using the
SPI and #include
#include
#include ,
libraries to code it
I recently learnt about the esp23, and i was wondering if it will work if i just transfer the wiring to it

March 28, 2024 at 2:39 am

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 Mohammad Damirchi Reply
Hello
Can you send just the library name? In your message, after “include,” there’s nothing.
Also, if you’re referring to the MCUfriend or Adafruit library, I recommend using TFT_eSPI for ESP to achieve better
results.
The two libraries for Arduino often don’t function properly with ESP, or they might lead to issues.

March 30, 2024 at 6:24 am

Sameerudeen Reply
Hi sir, I made connection by your circuit diagram and I only get white screen sir .
Do I get you WhatsApp numbers for clarification of doubt sir

April 14, 2024 at 9:03 am

Mohammad Damirchi Reply

Hi, have you configured the “User_Setup.h” file in the library directory?
The library directory is usually located in %UserProfile%\Documents\Arduino\libraries

April 15, 2024 at 7:21 am

Sameerudeen Reply
Hi,sir
I have configured correctly sir.but I did mistake is wiring after I made wiring perfectly and made user setup file
correctly then I got the display sir thank you so much for your guidance. Sir
Sir now I have problem to make touch. I used Adafruit_FT6206 library on my final year project entirely on simulation
(WOKWI SIMULATOR) . But in real time I cannot configure this library to my project .sir

April 19, 2024 at 4:17 pm

Mohammad Damirchi Reply

You’re welcome!
The touch driver for this LCD is the XPT2046. For configuring the touch functionality of this display, it’s best to
refer to these links. link1 , link2

April 20, 2024 at 7:56 am

Sameerudeen Reply
Thank you sir , the display working perfectly. I get the proper touching coordinates and mapping. 😁😁😁😁😁😁😁
April 22, 2024 at 1:53 pm

Mohammad Damirchi Reply

You’re Welcome

April 23, 2024 at 5:48 am

Shaiguy96 Reply
Hello, I am stuck with a white screen. i am using waveshare esp32-s3-nano https://www.waveshare.com/esp32-s3-
nano.htm. and i changed the pin configuration in the set up as the micro controller doesnt hace the designated GPIO
numbers in the regualr setup. and no matter how i change it i cannot get the screen to display anything but a white screen.
please help!

August 29, 2024 at 8:14 am

Mohammad Damirchi Reply

Hello! you’re using the ESP32S3 board, please update the TFT_eSPI library to the latest version. Then, in the library file
‘User_Setup_Select’, comment out the line ‘#include <User_Setup.h>’ and uncomment the line ‘#include
<User_Setups/Setup70b_ESP32_S3_ILI9341.h>’. Next, open the ‘Setup70b_ESP32_S3_ILI9341’ file and configure the

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 pinout according to your setup. Keep in mind that the pins for TFT_MOSI, TFT_SCLK, and TFT_MISO should remain as 11, 12, and 13
respectively. You can modify the other pins as needed.

August 31, 2024 at 6:23 am

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 /*
Example animated analogue meters using a ILI9341 TFT LCD screen

Needs Font 2 (also Font 4 if using large scale label)

Make sure all the display driver and pin comnenctions are correct by
editting the User_Setup.h file in the TFT_eSPI library folder.

#########################################################################
###### DON’T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
#########################################################################
*/

#include <TFT_eSPI.h> // Hardware-specific library

#include <SPI.h>

TFT_eSPI tft = TFT_eSPI(); // Invoke custom library

#define TFT_GREY 0x5AEB

#define LOOP_PERIOD 35 // Display updates every 35 ms

float ltx = 0; // Saved x coord of bottom of needle

uint16_t osx = 120, osy = 120; // Saved x & y coords
uint32_t updateTime = 0; // time for next update

int old_analog = -999; // Value last displayed

int old_digital = -999; // Value last displayed

int value[6] = {0, 0, 0, 0, 0, 0};

int old_value[6] = { -1, -1, -1, -1, -1, -1};
int d = 0;

void setup(void) {
tft.init();
tft.setRotation(0);
Serial.begin(57600); // For debug
tft.fillScreen(TFT_BLACK);

analogMeter(); // Draw analogue meter

// Draw 6 linear meters

byte d = 40;
plotLinear("A0", 0, 160);
plotLinear("A1", 1 * d, 160);
plotLinear("A2", 2 * d, 160);
plotLinear("A3", 3 * d, 160);
plotLinear("A4", 4 * d, 160);
plotLinear("A5", 5 * d, 160);

updateTime = millis(); // Next update time

}

void loop() {
 if (updateTime <= millis()) {
updateTime = millis() + LOOP_PERIOD;

d += 4; if (d >= 360) d = 0;

//value[0] = map(analogRead(A0), 0, 1023, 0, 100); // Test with value form Analogue 0

// Create a Sine wave for testing

value[0] = 50 + 50 * sin((d + 0) * 0.0174532925);
value[1] = 50 + 50 * sin((d + 60) * 0.0174532925);
value[2] = 50 + 50 * sin((d + 120) * 0.0174532925);
value[3] = 50 + 50 * sin((d + 180) * 0.0174532925);
value[4] = 50 + 50 * sin((d + 240) * 0.0174532925);
value[5] = 50 + 50 * sin((d + 300) * 0.0174532925);

//unsigned long t = millis();

plotPointer();

plotNeedle(value[0], 0);

//Serial.println(millis()-t); // Print time taken for meter update

}
}

// #########################################################################
// Draw the analogue meter on the screen
// #########################################################################
void analogMeter()
{
// Meter outline
tft.fillRect(0, 0, 239, 126, TFT_GREY);
tft.fillRect(5, 3, 230, 119, TFT_WHITE);

tft.setTextColor(TFT_BLACK); // Text colour

// Draw ticks every 5 degrees from -50 to +50 degrees (100 deg. FSD swing)
for (int i = -50; i < 51; i += 5) {
// Long scale tick length
int tl = 15;

// Coodinates of tick to draw

float sx = cos((i - 90) * 0.0174532925);
float sy = sin((i - 90) * 0.0174532925);
uint16_t x0 = sx * (100 + tl) + 120;
uint16_t y0 = sy * (100 + tl) + 140;
uint16_t x1 = sx * 100 + 120;
uint16_t y1 = sy * 100 + 140;

// Coordinates of next tick for zone fill

float sx2 = cos((i + 5 - 90) * 0.0174532925);
float sy2 = sin((i + 5 - 90) * 0.0174532925);
int x2 = sx2 * (100 + tl) + 120;
int y2 = sy2 * (100 + tl) + 140;
 int x3 = sx2 * 100 + 120;
int y3 = sy2 * 100 + 140;

// Yellow zone limits

//if (i >= -50 && i < 0) {
// tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_YELLOW);
// tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_YELLOW);
//}

// Green zone limits

if (i >= 0 && i < 25) {
tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_GREEN);
tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_GREEN);
}

// Orange zone limits

if (i >= 25 && i < 50) {
tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_ORANGE);
tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_ORANGE);
}

// Short scale tick length

if (i % 25 != 0) tl = 8;

// Recalculate coords incase tick lenght changed

x0 = sx * (100 + tl) + 120;
y0 = sy * (100 + tl) + 140;
x1 = sx * 100 + 120;
y1 = sy * 100 + 140;

// Draw tick
tft.drawLine(x0, y0, x1, y1, TFT_BLACK);

// Check if labels should be drawn, with position tweaks

if (i % 25 == 0) {
// Calculate label positions
x0 = sx * (100 + tl + 10) + 120;
y0 = sy * (100 + tl + 10) + 140;
switch (i / 25) {
case -2: tft.drawCentreString("0", x0, y0 - 12, 2); break;
case -1: tft.drawCentreString("25", x0, y0 - 9, 2); break;
case 0: tft.drawCentreString("50", x0, y0 - 6, 2); break;
case 1: tft.drawCentreString("75", x0, y0 - 9, 2); break;
case 2: tft.drawCentreString("100", x0, y0 - 12, 2); break;
}
}

// Now draw the arc of the scale

sx = cos((i + 5 - 90) * 0.0174532925);
sy = sin((i + 5 - 90) * 0.0174532925);
x0 = sx * 100 + 120;
y0 = sy * 100 + 140;
// Draw scale arc, don’t draw the last part
if (i < 50) tft.drawLine(x0, y0, x1, y1, TFT_BLACK);
}
 tft.drawString("%RH", 5 + 230 - 40, 119 - 20, 2); // Units at bottom right
tft.drawCentreString("%RH", 120, 70, 4); // Comment out to avoid font 4
tft.drawRect(5, 3, 230, 119, TFT_BLACK); // Draw bezel line

plotNeedle(0, 0); // Put meter needle at 0

}

// #########################################################################
// Update needle position
// This function is blocking while needle moves, time depends on ms_delay
// 10ms minimises needle flicker if text is drawn within needle sweep area
// Smaller values OK if text not in sweep area, zero for instant movement but
// does not look realistic... (note: 100 increments for full scale deflection)
// #########################################################################
void plotNeedle(int value, byte ms_delay)
{
tft.setTextColor(TFT_BLACK, TFT_WHITE);
char buf[8]; dtostrf(value, 4, 0, buf);
tft.drawRightString(buf, 40, 119 - 20, 2);

if (value < -10) value = -10; // Limit value to emulate needle end stops
if (value > 110) value = 110;

// Move the needle util new value reached

while (!(value == old_analog)) {
if (old_analog < value) old_analog++;
else old_analog--;

if (ms_delay == 0) old_analog = value; // Update immediately id delay is 0

float sdeg = map(old_analog, -10, 110, -150, -30); // Map value to angle
// Calcualte tip of needle coords
float sx = cos(sdeg * 0.0174532925);
float sy = sin(sdeg * 0.0174532925);

// Calculate x delta of needle start (does not start at pivot point)

float tx = tan((sdeg + 90) * 0.0174532925);

// Erase old needle image

tft.drawLine(120 + 20 * ltx - 1, 140 - 20, osx - 1, osy, TFT_WHITE);
tft.drawLine(120 + 20 * ltx, 140 - 20, osx, osy, TFT_WHITE);
tft.drawLine(120 + 20 * ltx + 1, 140 - 20, osx + 1, osy, TFT_WHITE);

// Re-plot text under needle

tft.setTextColor(TFT_BLACK);
tft.drawCentreString("%RH", 120, 70, 4); // // Comment out to avoid font 4

// Store new needle end coords for next erase

ltx = tx;
osx = sx * 98 + 120;
osy = sy * 98 + 140;

// Draw the needle in the new postion, magenta makes needle a bit bolder
// draws 3 lines to thicken needle
 tft.drawLine(120 + 20 * ltx - 1, 140 - 20, osx - 1, osy, TFT_RED);
tft.drawLine(120 + 20 * ltx, 140 - 20, osx, osy, TFT_MAGENTA);
tft.drawLine(120 + 20 * ltx + 1, 140 - 20, osx + 1, osy, TFT_RED);

// Slow needle down slightly as it approaches new postion

if (abs(old_analog - value) < 10) ms_delay += ms_delay / 5;

// Wait before next update

delay(ms_delay);
}
}

// #########################################################################
// Draw a linear meter on the screen
// #########################################################################
void plotLinear(char *label, int x, int y)
{
int w = 36;
tft.drawRect(x, y, w, 155, TFT_GREY);
tft.fillRect(x + 2, y + 19, w - 3, 155 - 38, TFT_WHITE);
tft.setTextColor(TFT_CYAN, TFT_BLACK);
tft.drawCentreString(label, x + w / 2, y + 2, 2);

for (int i = 0; i < 110; i += 10)

{
tft.drawFastHLine(x + 20, y + 27 + i, 6, TFT_BLACK);
}

for (int i = 0; i < 110; i += 50)

{
tft.drawFastHLine(x + 20, y + 27 + i, 9, TFT_BLACK);
}

tft.fillTriangle(x + 3, y + 127, x + 3 + 16, y + 127, x + 3, y + 127 - 5, TFT_RED);

tft.fillTriangle(x + 3, y + 127, x + 3 + 16, y + 127, x + 3, y + 127 + 5, TFT_RED);

tft.drawCentreString("---", x + w / 2, y + 155 - 18, 2);

}

// #########################################################################
// Adjust 6 linear meter pointer positions
// #########################################################################
void plotPointer(void)
{
int dy = 187;
byte pw = 16;

tft.setTextColor(TFT_GREEN, TFT_BLACK);

// Move the 6 pointers one pixel towards new value

for (int i = 0; i < 6; i++)
{
char buf[8]; dtostrf(value[i], 4, 0, buf);
tft.drawRightString(buf, i * 40 + 36 - 5, 187 - 27 + 155 - 18, 2);
 int dx = 3 + 40 * i;
if (value[i] < 0) value[i] = 0; // Limit value to emulate needle end stops
if (value[i] > 100) value[i] = 100;

while (!(value[i] == old_value[i])) {

dy = 187 + 100 - old_value[i];
if (old_value[i] > value[i])
{
tft.drawLine(dx, dy - 5, dx + pw, dy, TFT_WHITE);
old_value[i]--;
tft.drawLine(dx, dy + 6, dx + pw, dy + 1, TFT_RED);
}
else
{
tft.drawLine(dx, dy + 5, dx + pw, dy, TFT_WHITE);
old_value[i]++;
tft.drawLine(dx, dy - 6, dx + pw, dy - 1, TFT_RED);
}
}
}
}