ESP32 S3 UNO - TFT LCD Touch Screen Display

Hardware Preparation

Or you can buy the following kits:

Overview of TFT LCD Touch Display

Before you write code, it helps to know what is on this shield and how it talks to the board. This knowledge makes the pin table and the touch calibration much easier to follow.

What you get

The DIYables 3.5" TFT LCD Touch Display Shield has a bright 3.5-inch color screen with 320x480 pixels. On top of the screen sits a resistive touch panel, so people can press on the display to control your project. The shield also has a microSD card slot for images and data. It sends pixels over an 8-bit parallel bus, which is much faster than sending them one bit at a time. Because it has the Uno shape, it plugs straight onto the ESP32 S3 Uno headers.

Two hardware versions

The shield was sold in two versions. The table below shows the differences.

The RM68140 or HX8357D driver chip handles the screen. This makes the shield a good choice when you want a large, colorful display with simple touch control.

Pins used by the shield

The shield takes most of the Uno header pins. The table shows each header pin, its GPIO number on the ESP32 S3 Uno, and what the shield does with it.

How the touch panel works

A resistive touch panel is two thin layers with a small gap. When you press, the layers touch and form a voltage divider. The library sets two pins as outputs, then reads the voltage on the other two pins with the ADC. On the ESP32 S3 Uno these analog reads happen on A1 (GPIO1) and A2 (GPIO7). The calibration step later on turns those raw ADC numbers into screen pixels.

ESP32 S3 Uno Pinout

The image below shows the pinout of the ESP32 S3 Uno form board. Use it to match the Uno header pins (D2, A0, SDA…) with their GPIO numbers.

Wiring Diagram

You do not need any jumper wires or soldering. Place the shield on top of the ESP32 S3 Uno so the microSD card slot is on the same side as the USB port, then press it down gently.

This image is created using Fritzing. Click to enlarge image

ESP32 S3 Uno Code - Display Text, Integer and Float Number on TFT LCD Touch display

This first sketch is a simple test. It turns the screen to landscape, fills it with white and prints a temperature and a humidity value in magenta, with one decimal place. The object is created with the touch pins of the ESP32 S3 Uno: TFT_display(3, 1, 7, 14).

Detailed Instructions

1. New to the ESP32 S3 Uno? Follow ESP32 S3 Uno - Getting Started first.
2. Mount the shield on the ESP32 S3 Uno as shown in the diagram.
3. Connect the board to your computer with a USB Type-C cable.
4. Open Arduino IDE, choose the ESP32S3 Dev Module board and the correct COM port.
5. Open the library manager by clicking the Libraries icon on the left bar of the Arduino IDE.
6. Search “DIYables TFT Touch Shield” and find the DIYables_TFT_Touch_Shield library by DIYables.
7. Install it by clicking the Install button. Pick the latest version.

• Search for DIYables TFT Touch Shield created by DIYables.io and click the Install button.

1. Install the dependencies when the IDE asks: click Install All. This adds the Adafruit GFX Library.
2. Copy the code above and paste it into the Arduino IDE editor.
3. Upload by clicking the Upload button.
4. Tip: if the screen stays white or shows noise, check the driver chip on your shield and switch to the matching class (RM68140 or HX8357D).

The text and numbers now appear on the screen. The built-in font is easy to read, but it looks a bit blocky. The next section shows how to make it nicer with custom fonts.

Using External Fonts on TFT LCD Touch with ESP32 S3 Uno

The Adafruit GFX Library, which was installed as a dependency, comes with many good-looking fonts. You can use any of them on the DIYables TFT LCD Touch Display with just two extra lines.

1. Open the folder where the Adafruit GFX Library is installed and look in its Fonts folder.
2. Pick a font, for example FreeSansBold12pt7b.h.
3. Include it at the top of your ESP32 S3 Uno code:

1. Select it inside setup():

Here is a full example that prints the same values with the bold sans font.

ESP32 S3 Uno Code – Draw Shapes on TFT LCD Touch display.

Shapes are the building blocks of any user interface, from gauges to buttons. This sketch draws outlined and filled circles, triangles, rectangles, rounded rectangles and diamonds in different colors. It turns the screen to landscape (480x320) and redraws everything every 10 seconds.

Detailed Instructions

1. Copy the code above and paste it into the Arduino IDE editor.
2. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
3. Tip: the fillDiamond() helper builds a diamond from two triangles. You can use the same trick for other shapes.

You should now see circles, triangles, rectangles, rounded rectangles and diamonds on the screen.

ESP32 S3 Uno Code – Display Image on TFT LCD Touch display.

Pictures make a project look finished. There are two ways to store an image and show it on the TFT LCD Touch display.

Method 1: bitmap array in the code

You convert a PNG or JPG image into a bitmap array and put it in your ESP32 S3 Uno code. Drawing is very fast. The ESP32 S3 Uno has much more flash memory than a classic Uno, so you can store bigger images, but the code size still limits how many you can keep.

Method 2: BMP file on a microSD card

You convert the image into a .bmp file and copy it to a microSD card. The ESP32 S3 Uno reads the file and draws it. The shield already has a microSD socket, so you do not need an extra adapter. You can store many large images, but drawing is slower.

The next two parts show both methods.

Store Images as Bitmap Arrays in Code

This sketch draws the DIYables logo in the middle of the screen. In the loop, it inverts the display colors every two seconds.

Detailed Instructions

1. Copy the code above and paste it into the Arduino IDE editor.
2. Create the bitmap.h file in the Arduino IDE. Click the button just below the Serial Monitor icon and choose New Tab, or press Ctrl+Shift+N.

1. Name the file bitmap.h and click the OK button.

1. Paste the bitmap data below into the new bitmap.h file. It holds the bitmap array of the DIYables logo.

1. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
2. Tip: if you change only the .h file, add a space or an empty line to the .ino file too. This makes the Arduino IDE see the change when it compiles.

The DIYables logo now appears on the TFT LCD Touch display, like in the image below.

Show your own image

1. Prepare your image in JPEG or PNG format.
2. Open the Image to Bitmap Converter tool and upload the image.
3. Set the width for rescaling. Keep it smaller than the screen size.
4. For a transparent PNG, choose a background color. Transparency is lost during conversion, so this color fills the transparent pixels.
5. Click the Convert button and wait.
6. Copy the generated bitmap array and paste it into the bitmap.h file.

1. In the ESP32 S3 Uno code (.ino file), set img_width and img_height to the size of the scaled image.
2. Upload the code to the ESP32 S3 Uno.

Display Images from a MicroSD Card on TFT Touch display

On the ESP32 S3 Uno, the microSD slot of the shield is on D10 (GPIO10), D11 (GPIO11), D12 (GPIO13) and D13 (GPIO12). These are the default SPI pins of the board, so SD.begin(10) works with no extra wiring. One ESP32 S3 Uno detail is different from other boards: every file name must start with a slash, so the sketch opens "/diyables.bmp".

Detailed Instructions

1. Download the diyables.bmp file and save it on the microSD card.
2. Insert the microSD card into the SD card socket on the TFT display.
3. Copy the code below and paste it into the Arduino IDE editor.

1. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
2. Tip: open the Serial Monitor at 9600 baud. It tells you if the SD card or the file was not found.

The DIYables logo is now read from the microSD card and drawn on the TFT LCD Touch display.

Show a different image

1. Prepare the image you want to show (JPG or PNG).
2. Convert it with the Image to Bitmap Converter: click Convert, then click Save as Bitmap to download the file.
3. Keep the file name shorter than 9 characters, not counting the extension.
4. Copy the bitmap file to the microSD card and put the card in the TFT display socket.
5. Change the file name in the ESP32 S3 Uno code. Keep the slash in front, for example "/logo.bmp".
6. Upload the code again. Your image now appears on the screen.

You can also change the code to show several images at once, as in the image below.

ESP32 S3 Uno Code – Get Touch Point

Reading the touch point is the base of every touch project. This sketch prints the X and Y position of your touch to the Serial Monitor and draws a red dot at that spot on the screen.

The touchscreen works with the default calibration values. If the dot does not appear under your finger, run the TouchCalibration example and put your own values in the code.

About the two ADC lines in setup()

The touch sketches add two lines at the start of setup(). The ESP32 S3 Uno ADC gives 12-bit values (0–4095) by default, but the touch library and the default calibration values (136, 907, 942, 139) use the 10-bit range (0–1023). The line analogReadResolution(10) makes the board report 0–1023, so the library math stays correct. The line analogSetAttenuation(ADC_11db) lets the analog pins measure the full voltage from 0V up to about 3.3V. Without it, the readings can hit the top value too early and the touch position looks wrong.

Detailed Instructions

1. Copy the code above and paste it into the Arduino IDE editor.
2. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
3. Open the Serial Monitor and set the baud rate to 9600.
4. Touch the screen in a few places.
5. Check the coordinates shown in the Serial Monitor.
6. Tip: use a stylus or the tip of your fingernail. A resistive panel needs a little pressure.

ESP32 S3 Uno Code – Draw on TFT LCD Touch display

Now you can turn the screen into a small drawing pad. The sketch draws a small red circle everywhere you press, so moving the pen leaves a line behind it.

The touchscreen works with the default calibration values. If the drawing is not under the pen, run the TouchCalibration example.

Detailed Instructions

1. Copy the code above and paste it into the Arduino IDE editor.
2. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
3. Draw by touching the screen and dragging the pen.
4. Lift the pen to stop drawing.
5. Tip: change PEN_RADIUS to draw with a thinner or thicker pen.

ESP32 S3 Uno Code – Touch Button Example

Touch buttons let people control your project without any physical switch. This sketch draws a red "PRESS" button. When you press inside it, it turns gray and shows "PRESSED". When you let go, it goes back to red. A short debounce time stops the button from flickering.

The touchscreen works with the default calibration values. If the button does not react in the right place, run the TouchCalibration example.

Detailed Instructions

1. Copy the code above and paste it into the Arduino IDE editor.
2. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
3. Open the Serial Monitor at 9600 baud to see the press and release events.
4. Press the on-screen button and watch it change.
5. Tip: change BUTTON_X, BUTTON_Y, BUTTON_W and BUTTON_H to move or resize the button.

The button should look like the image below.

ESP32 S3 Uno Code – Touch Calibration

The examples above use default calibration values and usually work right away. If the touch position is off, calibrate the touchscreen once.

Calibration is needed because the touch layer is never placed exactly on top of the pixels. Small differences from the factory move the raw readings. Calibration measures your panel and maps its raw values to the real screen positions.

1. Upload the calibration sketch below to your ESP32 S3 Uno.

1. Open the Serial Monitor in the Arduino IDE (Ctrl+Shift+M) and set the baud rate to 9600.
2. Watch the screen. A blinking red dot appears in each corner, one after another, numbered 1 to 4: 1 is top-left, 2 is top-right, 3 is bottom-right and 4 is bottom-left.
3. Press and hold the blinking dot firmly. Keep holding until the Serial Monitor prints "Captured!" for that corner.
4. Release and repeat for the next corner, until all four are done.
5. Copy the result. The Serial Monitor prints the four values and a ready line such as TFT_display.setTouchCalibration(140, 902, 938, 145);.
6. Paste the values into your sketch. Update the LEFT_X, RIGHT_X, TOP_Y and BOT_Y defines, or put the line in setup() before you use any touch function.
7. Tip: you only need to calibrate once per display, unless you change the hardware.

Video Tutorial

Watch the video below to see this ESP32 S3 Uno project step by step.

FAQ

Does the 3.5-inch TFT touch shield work with the ESP32 S3 Uno?

Yes. The DIYables_TFT_Touch_Shield library (version 2.0.0 or later) has a fast built-in driver for the ESP32 S3 Uno form board. You only need to create the display object with the ESP32 S3 Uno touch pins: TFT_display(3, 1, 7, 14). The shield then plugs straight onto the Uno headers.

Why do I write (3, 1, 7, 14) when I create the display object?

These are the GPIO numbers of the four touch pins on the ESP32 S3 Uno: X+ on D6 (GPIO3), Y+ on A1 (GPIO1), X- on A2 (GPIO7) and Y- on D7 (GPIO14). On the UNO R4 the library uses header numbers by default, but on the ESP32 S3 Uno the header labels map to different GPIOs, so you pass them in.

Why do the touch sketches call analogReadResolution(10) and analogSetAttenuation(ADC_11db)?

The ESP32 S3 Uno ADC reads 0–4095 (12-bit) by default, but the touch library and the default calibration values expect 0–1023 (10-bit). analogReadResolution(10) fixes that. analogSetAttenuation(ADC_11db) sets the analog input range to about 0–3.3V, so the full touch signal can be measured. The UNO R4 does not need these lines; they are only for the ESP32 S3 Uno.

Can I add sensors or I2C modules while the shield is plugged in?

Yes, a few pins stay free. A5 (GPIO4) is not used by the shield. The SDA (GPIO8) and SCL (GPIO9) header pins are free for I2C modules, because on the ESP32 S3 Uno I2C is not on A4/A5. If you do not use the microSD card, D10 to D13 are free as well.

What if my project needs more pins than the Uno headers give?

This shield uses almost all Uno header pins, so the extra rows of holes on the ESP32 S3 Uno are very useful here. They give GPIO15 and GPIO16 (I/O, PWM, analog), GPIO45 and GPIO35 to GPIO42 (I/O, PWM), and GPIO47/GPIO48 (output only, PWM). Solder pin headers and write the GPIO number in your code. For an analog sensor, use GPIO15 or GPIO16. For buttons or digital sensors, use GPIO35 to GPIO42, not GPIO47/GPIO48. Be careful with two things. First, GPIO47 and GPIO48 may run at 1.8V instead of 3.3V on some modules (especially ones with "V" in the name, like R8V or R16V), so 3.3V devices can be damaged or act strangely. Second, GPIO0, GPIO3 (D6), GPIO45 and GPIO46 (D9) are boot strapping pins, and a wrong connection can stop the board from booting or uploading code. Use the other extra pins first.

Is drawing on the ESP32 S3 Uno slower than on the UNO R4?

No. The library writes the 8 data pins directly through the ESP32 S3 Uno GPIO registers, so drawing is very fast. Only the microSD image example is slower, because it reads the file from the card.

Troubleshooting

Learn More

• ESP32 S3 UNO - LCD I2C
• ESP32 S3 UNO - LCD 20x4
• ESP32 S3 UNO - LCD Keypad Shield
• ESP32 S3 UNO - OLED 128x64
• ESP32 S3 UNO - OLED 128x32
• ESP32 S3 UNO - SSD1309 OLED Display
• ESP32 S3 UNO - Round Circular TFT LCD Display
• ESP32 S3 UNO - TFT LCD Touch Display SPI
• ESP32 S3 UNO - Smart Weather Station
• ESP32 S3 UNO - Ultrasonic Sensor - LCD
• ESP32 S3 UNO - Ultrasonic Sensor - OLED
• ESP32 S3 UNO - LED Matrix
• ESP32 S3 UNO - Keypad - LCD
• ESP32 S3 UNO - Temperature Sensor - LCD
• ESP32 S3 UNO - Temperature Sensor - OLED
• ESP32 S3 UNO - DHT11 Temperature Humidity Sensor - OLED
• ESP32 S3 UNO - DHT11 - LCD
• ESP32 S3 UNO - DHT22 Temperature Humidity Sensor - OLED
• ESP32 S3 UNO - DHT22 - LCD