Quick Start Guide: 4.0-inch ST7796 TFT with Capacitive Touch (ESP32)

⚡️ Quick Start Guide: 4.0-inch ST7796 TFT with Capacitive Touch (ESP32)

1. 📚 Requirements & Libraries

This display uses the ST7796 driver for the screen and a common Capacitive Touch Controller (often the FT series, e.g., FT6336U) for touch input.

1. Arduino IDE Setup: Ensure you have the ESP32 Core installed in your Arduino IDE (as described in the previous tutorial).

2. TFT Library: You must use the highly optimized TFT_eSPI library.

   • Go to Sketch > Include Library > Manage Libraries…

   • Search for TFT_eSPI and install it.

2. 🔌 Hardware Wiring (SPI Bus)

The display uses the 4-wire SPI interface. For optimal performance, connect the display to the ESP32’s dedicated VSPI pins (the most common pin mapping, check your specific ESP32 board documentation).

Note: The TFT_eSPI library allows you to define these control pins (CS, DC, RST, T_CS) to almost any available GPIO pin.

3. ⚙️ TFT_eSPI Configuration

The TFT_eSPI library requires you to define your specific display setup in a configuration file before compiling any code.

1. Locate Setup File: Navigate to the TFT_eSPI library folder (usually in your Arduino sketchbook folder).

   • Find the subfolder TFT_eSPI/User_Setups.

   • Find a file like Setup27_TTGO_T_Display.h or any file that uses a 4-line SPI display.

2. Create Custom Setup:

   • Copy one of the existing setup files (e.g., Setup27_TTGO_T_Display.h) and rename it to a custom name like Setup_ST7796_Custom.h.

3. Edit the File (Setup_ST7796_Custom.h):

   • Driver: Uncomment (or add) the line for the driver:

     C++

     #define ST7796_DRIVER
     

   • Resolution: Define the screen size:

     C++

     #define TFT_WIDTH  320
     #define TFT_HEIGHT 480
     

   • SPI Pins: Define the pins based on your wiring (using the common pins from Step 2):

     C++

     #define TFT_MOSI 23
     #define TFT_MISO 19
     #define TFT_SCLK 18
     #define TFT_CS   5  // Chip Select pin
     #define TFT_DC   2  // Data Command pin
     #define TFT_RST  4  // Reset pin (-1 if tied to ESP32 RST)
     

   • Touch: Since it is a Capacitive touch screen, you need to define the controller (often FT6x36):

     C++

     #define TOUCH_CS 15 // Touch Chip Select pin
     #define XPT2046_TOUCH // Comment this out if present, it is for resistive touch.
     
     // You may need to use a separate capacitive touch library (like Adafruit_FT6206)
     // or check if TFT_eSPI supports your specific FT controller directly.
     

4. Activate Setup:

   • Go back to TFT_eSPI/User_Setup_Select.h and comment out all existing #include directives.

   • Add your new custom setup file:

     C++

     #include "User_Setups/Setup_ST7796_Custom.h" 
     

4. ✍️ Example Code: Display & Touch

Upload this simple code to test the screen and verify the configuration.

#include <TFT_eSPI.h> // Includes the library and your custom setup

TFT_eSPI tft = TFT_eSPI(); 

void setup(void) {
  Serial.begin(115200);
  tft.init();             // Initialize the TFT
  tft.setRotation(1);     // Set orientation (0, 1, 2, or 3)
  
  tft.fillScreen(TFT_BLACK);
  
  tft.setTextSize(2);
  tft.setTextColor(TFT_YELLOW);
  tft.setCursor(10, 50);
  tft.println("ST7796 TFT Ready!");

  tft.setTextSize(1);
  tft.setTextColor(TFT_WHITE);
  tft.setCursor(10, 80);
  tft.println("320x480 SPI Display");
  tft.println("Tap the screen to test touch.");
}

void loop() {
  uint16_t touchX, touchY;

  // Check if the screen is being touched
  // Note: TFT_eSPI's internal touch functions often target resistive (XPT2046).
  // For capacitive (FT6336), you might need a separate I2C library (like Adafruit_FT6206) 
  // and specific I2C pins for SDA/SCL.
  // **Consult the module's documentation for the correct touch chip and library!**
  
  if (tft.getTouch(&touchX, &touchY, 600)) { 
    // This is for resistive touch. If using capacitive, replace this block.

    // Draw a small circle where the screen was touched
    tft.drawCircle(touchX, touchY, 5, TFT_RED); 
    
    Serial.print("Touch detected at: X=");
    Serial.print(touchX);
    Serial.print(", Y=");
    Serial.println(touchY);
  }
}