ESP32 S3 UNO - Round Circular TFT LCD Display

Hardware Preparation

Or you can buy the following kits:

Overview of 1.28 Inch Round Circular TFT LCD Display Module

A round screen makes your project look like a real product, such as a watch, a speedometer or a smart knob. This small module packs a bright, colorful IPS panel into a 1.28 inch circle, and it talks to the ESP32 S3 Uno over a fast SPI bus.

The panel is driven by the GC9A01 chip. Its pixel grid is 240x240 pixels, but only the round area inside that square is visible. It shows 65K colors in the RGB565 format. The DIYables_TFT_Round library handles all the low-level work, so you can draw text, pictures and graphics with a few simple function calls.

Pinout

The module has seven pins. Two are for power, and the other five carry the SPI signals and control lines.

VCC

The power input. The module accepts 3.3V or 5V.

GND

Ground, 0V.

CS

Chip Select. The board pulls this pin LOW to talk to the display.

DC

Data/Command select. LOW means the byte is a command, HIGH means the byte is pixel data.

SDA

The SPI data line (MOSI). Pixel data flows from the ESP32 S3 Uno to the screen on this pin.

SCL

The SPI clock line.

RST

Resets the display chip.

ESP32 S3 Uno Pinout

The image below shows the pinout diagram of the ESP32 S3 Uno form board. Use it to find the Uno header pins (D8, D9, D10, D11, D13…) and their GPIO numbers when you wire the round display.

Wiring Diagram

The display uses the hardware SPI pins of the ESP32 S3 Uno, so the clock and data wires go to D13 and D11. Follow the diagram and the table below.

This image is created using Fritzing. Click to enlarge image

ESP32 S3 Uno Code

This tutorial comes with several example sketches. Each one shows a key feature of the round TFT display, and each one has full code and clear steps.

1. DrawImage.ino shows a bitmap image from the ESP32 S3 Uno flash memory.
2. DrawImageSDcard.ino reads a picture from a microSD card and draws it.
3. DrawShapes.ino draws basic geometric shapes.
4. ShowTextAndNumber.ino prints text and numbers in different styles.
5. UseExternalFont.ino draws text with external fonts.
6. ClockWatch.ino draws an analog and digital clock that updates smoothly.

Start with the first one below, then try the others.

ESP32 S3 Uno Code - Display Text, Integer, and Float Number on 1.28 Inch Round TFT LCD Display

Text and numbers are the base of almost every display project. This sketch fills the screen with white and prints a temperature and a humidity value in two colors, each with one decimal place. It even shows a degree symbol next to the temperature.

Detailed Instructions

1. New to the ESP32 S3 Uno? Follow ESP32 S3 Uno - Getting Started first.
2. Wire it up 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 Arduino IDE.
6. Search “DIYables TFT Round” and find the DIYables_TFT_Round library by DIYables.
7. Install the library by clicking the Install button.

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

1. Install the dependencies. Arduino IDE may ask to install other libraries too. Click Install All.
2. Copy the code above and paste it into the Arduino IDE editor.
3. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
4. Tip: If the screen stays blank, check the DC, CS and RST wires first. A wrong control wire is the most common cause.

The round screen now shows the temperature and humidity values. The built-in font is plain, but the next section shows how to make it look much nicer.

Using External Fonts on 1.28 Inch Round TFT LCD Display

The default font works, but it looks blocky on a sharp 240x240 screen. The DIYables_TFT_Round library can use the fonts from the Adafruit GFX Library, which gets installed as a dependency. These fonts make your text smoother and easier to read.

How to add a custom font

1. Find the Adafruit GFX Library folder that was installed together with DIYables_TFT_Round.
2. Open its Fonts subfolder and pick a font file, for example FreeSans9pt7b.h.
3. Include the font file in your ESP32 S3 Uno code:

1. Select the font in the setup() function:

The full sketch below prints the same greeting four times: once with the default font, then with three external fonts. Each line uses its own color and position on the circular screen.

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. Check the screen. It should look like the picture below.
4. Tip: Try other font files from the Fonts folder, such as the bold or 12pt versions, to find the look you like.

ESP32 S3 Uno Code – Draw Shapes on 1.28 Inch Round TFT LCD Display

Shapes are the building blocks of gauges, icons and buttons. This sketch draws outlined and filled circles, triangles, rectangles, rounded rectangles and diamonds in bright colors. It clears the screen 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. Watch the display. You will see circles, triangles, rectangles, rounded rectangles and diamonds. The screen refreshes every 10 seconds.
4. Tip: Keep shapes away from the four corners of the 240x240 grid. Those corners are outside the round visible area.

ESP32 S3 Uno Code – Display Image on 1.28 Inch Round TFT LCD Display

A picture or a logo makes your project look finished. There are two ways to show an image on this round display, and each one has its own trade-off.

Method 1 - Bitmap array in the code

You convert a PNG or JPG into a bitmap array and put it inside your ESP32 S3 Uno code. Drawing is very fast. The downside is that every image uses program memory, so you can only store a limited number of pictures.

Method 2 - BMP file on a microSD card

You convert the image into a .bmp file and save it on a microSD card. The ESP32 S3 Uno reads the file and draws it. You need a microSD card module, wired with CS to D7, MOSI to D11, MISO to D12 and SCK to D13. This way you can store many large images, but drawing is slower.

Both methods are shown below.

Store Images as Bitmap Arrays in Code

Detailed Instructions

1. Copy the code above and paste it into the Arduino IDE editor. In this example, the sketch is saved as DrawImage.ino.
2. Create a new tab for the bitmap.h file. Click the button below the Serial Monitor icon and choose New Tab, or press Ctrl+Shift+N.

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

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

1. Use your own image (optional). You can replace this array with one made by an image converter tool.
2. Upload the code to the ESP32 S3 Uno by clicking the Upload button.
3. Tip: The sketch inverts the colors every 2 seconds. This is normal, and it shows that the display is still running.

The DIYables logo now appears in the middle of the round TFT LCD screen.

Show your own picture

1. Pick a JPEG or PNG picture.
2. Open the Image to Bitmap Converter tool.
3. Upload your picture and set the width (240 pixels max) to resize it.
4. If your PNG has transparent parts, choose a background color.
5. Click the Convert button and wait a moment.
6. Copy the bitmap array and paste it into the bitmap.h file.

1. Change img_width and img_height in DrawImage.ino to match your picture size.
2. Click Upload in Arduino IDE.

Display Images from a MicroSD Card on 1.28 Inch Round TFT LCD Display

For this method you need a Micro SD Card and a Micro SD Card Module. The sketch opens a 24-bit BMP file, reads its size, centers it on the screen and draws it row by row.

Detailed Instructions

1. Prepare the card. Download the diyables.bmp file and copy it to a formatted microSD card.
2. Insert the card into the SD card module.
3. Wire the SD card module to the ESP32 S3 Uno:

1. Connect the board to your computer with a USB Type-C cable.
2. Open Arduino IDE, choose the ESP32S3 Dev Module board and the correct COM port.
3. Copy the code above and paste it into the Arduino IDE editor.
4. Upload the code by clicking the Upload button.
5. Tip: Open the Serial Monitor at 9600 baud. The sketch prints the BMP details there, which helps a lot when the image does not show.

When the code runs, the DIYables logo appears on the 1.28 inch round TFT LCD screen.

Use a new picture

1. Get your picture ready (JPG or PNG).
2. Open the Image to Bitmap Converter, click Convert and wait a moment.
3. Click Save as Bitmap to download the file.
4. Give the file a short name, under 9 characters (not counting .bmp).
5. Copy the file to your microSD card and put the card in the module.
6. Change the file name in the code, for example replace "diyables.bmp" with your file name.
7. Click Upload in Arduino IDE.

To show more pictures, call the draw function again with other file names and positions.

ESP32 S3 Uno Code – Analog and Digital Clock on 1.28 Inch Round TFT LCD Display

A round screen is perfect for a clock face. This sketch draws an analog clock with hour, minute and second hands, and it also prints the time as HH:MM:SS near the bottom.

The clock starts at 09:00:05 and counts time with the ESP32 S3 Uno millis() function. The face has the numbers 1 to 12 and small tick marks for the minutes. To avoid flicker, the sketch only redraws the hands and digits that change.

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. Watch the clock. You will see a classic clock face with three hands and the digital time at the bottom. The second hand moves every second, and the other hands follow as time passes.
4. Tip: Change PRESET_MS in the code to start the clock at a different time.

Notes

This clock counts from 09:00:05 with millis(), so it resets every time the board restarts. For real time, add an RTC module such as the DS3231.

Known small issues

The hands can sometimes flicker or leave small marks. The sketch erases an old hand by drawing over it in black, and this does not always work well when two hands overlap. Redrawing the whole clock face fixes it.

The digital time may also look a little off-center. Different digits have different widths. A fixed-width font, or a text position based on the text size, solves this.

Ideas to improve the clock

1. Use a custom font (see the UseExternalFont.ino example).
2. Make the hands smoother with anti-aliasing.
3. Show the date, or switch to a 24-hour format.

ESP32 S3 Uno Panoramic Radar with Round TFT LCD and Ultrasonic Sensor

This project turns the round display into a radar screen. A servo motor sweeps an HC-SR04 ultrasonic sensor from 0 to 180 degrees. Each object it finds within 45 cm shows up as a red dot, and the angle and distance are printed at the bottom of the screen. The sketch takes 5 readings at each angle and averages the middle 3 to remove noise.

The display wiring is the same as above. Add the ultrasonic sensor and the servo like this:

The sketch uses the ESP32Servo library instead of Servo.h. Install it from the Library Manager: search “ESP32Servo” and install the library by Kevin Harrington.

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

FAQ

Can I power the round TFT display from 3.3V on the ESP32 S3 Uno?

Yes. The module works with 3.3V or 5V on VCC. The wiring diagram uses 5V, but 3.3V is also fine. The control and data pins only receive signals from the board, so the 3.3V logic of the ESP32 S3 Uno drives them without a level shifter.

Which SPI pins does the ESP32 S3 Uno use for the GC9A01 display?

The Uno header SPI pins match the default SPI pins of the chip. D13 is SCK (GPIO12), D11 is MOSI (GPIO11), D12 is MISO (GPIO13) and D10 is CS (GPIO10). The DIYables_TFT_Round library uses this hardware SPI by default, so you only set the RST, DC and CS pins in the code.

Is the code different from the UNO R4 version?

The drawing code is the same. Only the pin numbers change, because ESP32 S3 Uno code uses GPIO numbers. RST is 21 (D8), DC is 46 (D9) and CS is 10 (D10). The radar sketch also swaps Servo.h for ESP32Servo.h.

Can I use other pins for DC, CS and RST?

Yes. Change the PIN_RST, PIN_DC and PIN_CS lines to any free GPIO. A good choice is to move DC away from D9 (GPIO46), because GPIO46 is a boot strapping pin. Keep SCK and MOSI on D13 and D11 for fast hardware SPI.

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

The ESP32 S3 Uno has two extra rows of holes with more GPIOs. GPIO15 and GPIO16 are I/O with PWM and analog. GPIO45 and GPIO35 to GPIO42 are I/O with PWM. GPIO47 and GPIO48 are output only with PWM. Solder pin headers to use them, and write the GPIO number in your code. For this project, GPIO35 to GPIO42 are good choices for extra control lines such as a second display CS or buttons. GPIO15 and GPIO16 suit analog sensors. 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.

How many images can I store on the ESP32 S3 Uno?

The ESP32 S3 Uno has much more flash memory than a classic Uno, so you can keep several full-size bitmap arrays in the code. A 240x240 RGB565 image uses about 115 KB. For many pictures, the microSD card method is still the better choice.

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 - TFT LCD Touch Screen 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