Introduction: Interfacing ST7789 320x240 TFT Screen With an ESP32

By
About: Hello! I'm a second year Engineering Science student at University of Toronto! I have been tinkering and creating electronics projects since middle school, and I'd love to share this passion with more people a…

I recently stumbled across this incredibly inexpensive and relatively high resolution screen on Aliexpress, touting a resolution of 320x240. Due to its lack of real documentation, it required a lot of online research to even find what kind of control IC it was using. Not only that, but despite using SPI as its communication protocol, its pins were not labelled in an orthodox manner as it uses SDA, SCL instead of MOSI and SCK. Anyhow, I wanted to made this quick article to document the concrete circuit connections to help anyone in the future with interfacing this screen using any SPI-enabled microcontroller. Specifically in this article, I used my favourite MCU of choice, the XIAO ESP32-C3.

Supplies

  • TFT Display: https://www.aliexpress.com/item/1005003797803015.html?spm=a2g0o.order_detail.order_detail_item.9.7ab1f19ca2FnoR
  • (Any screen using the ST7789 controller will work with this library)
  • XIAO ESP32-C3 (any MCU with SPI will work): https://www.aliexpress.com/item/33011482127.html?spm=a2g0o.order_list.order_list_main.41.5c9b1802sjKltp
  • Breadboard
  • Wires/jumpers

Step 1: Circuit Connections

The exam connection details will vary by the MCU and the exact screen you are using. However, the connections follow the standard SPI connections, so it would be worth checking online for your exact microcontroller's pinout. For the ESP32-C3, the following connections were made, as per the provided pinout diagram of the XIAO ESP32-C3:

Screen --- XIAO ESP32-C3

VCC --- 3.3V

GND --- GND

SCL = SCK --- D8

SDA = MOSI--- D10

This is using the dedicated hardware SPI pins of the XIAO ESP32-C3. The rest of the pins, however, can be configured in software to any pin you want. In this case, the following connections were made:

RST --- D6

DC --- D5

CS --- D4


It's also worth noting that SCL and SDA could also be connected to any pin you'd like, as long as it is explicitly stated in code, but that is only if you use a software SPI connection. This means that the microcontroller is emulating the SPI protocol through software, which results in lower speeds and higher overhead. As such, this is not recommended.

Step 2: Programming

Now, actually interfacing through SPI and writing low-level drivers for this screen would be incredibly tedious. That's why I used a pre-existing library from Adafruit called the Adafruit ST7735 and ST7789 library. As the name suggests, this supports both of these display types. This can be found under the Arduino library manager. Be sure to install this. You could also get it from this link: https://www.arduino.cc/reference/en/libraries/adafruit-st7735-and-st7789-library/


Then, you can upload this following code. This code is a direct modification of the pre-existing graphicstest.ino example from the library, so all credits to its original authors. Nevertheless, there are a few changes I had to make:

  1. The pins for the CS, RST, and DC pins were specified, as per the circuit.
  2. Then, the correct display was uncommented. In this case, this is the ST7789 display with hardware SPI. Of course, these pins and displays will vary by the exact model you have, so make sure you change them to your setup.
  3. The correct resolution for the display was uncommented. Here, it is a 240x320 display.

Attachments

Step 3: Upload

Finally, upload the code, ensuring that the correct board and COM ports are selected. In this case, it is the XIAO ESP32-C3. Sometimes with the ESP32 chips, you have to enter into Flash Mode in order to program or upload a sketch to it. To enter this, hold the BOOT button on the board while clicking the RESET button. Then, try uploading again. After the uploading is done, click the RESET button again, and the code should begin running.

Step 4: Voila!

It should all be working great now. To write your own code to make new UIs and display cool things, check out the documentation for Adafruit's library here: https://github.com/adafruit/Adafruit-ST7735-Library. Checking our their other examples can also be a great way to learn how to use the library to its fullest!


Now, this can be used in various different projects. This one specifically is likely going to end up in my RC electric golf cart project as the main HUD, displaying important metrics like battery life, remaining range, connection quality to the RC, and more. Stay tuned for an article on that project!