ESP32 CYD with VS Code: Setup TFT_eSPI & LVGL for Display Projects

Are you ready to move beyond the Arduino IDE and unlock a more professional, efficient workflow for your ESP32 Cheap Yellow Display (CYD) projects? Developing in VS Code with PlatformIO offers powerful features like intelligent code completion, a superior library manager, and seamless project management. This guide provides a complete, project-ready path to set up your entire development environment, configure the essential display and touch libraries, and build your first graphical user interface (GUI) using LVGL.

We’ll go beyond a simple setup tutorial. You’ll learn exactly why upgrading to VS Code transforms your development experience, how to perfectly configure the finicky TFT_eSPI and LVGL libraries for the CYD, and—most importantly—how to replicate this setup for every new project so you can build professional IoT devices with confidence.

Why Upgrade to VS Code and PlatformIO for Your CYD Projects?

The Arduino IDE is great for beginners, but for serious development on a powerful board like the ESP32-2432S028R (Cheap Yellow Display) , VS Code with PlatformIO is a game-changer. Here’s why:

• Intelligent Code Assistance: Get real-time syntax highlighting, autocomplete, and error detection as you type, which speeds up coding and reduces bugs.

• Simplified Library Management: PlatformIO handles dependencies elegantly. You specify libraries in a simple platformio.ini file, and it automatically downloads the correct versions.

• Project-Based Organization: Each project has its own isolated environment, libraries, and configurations. No more library version conflicts between projects.

• Professional Debugging: Integrate with debugging tools for a more powerful troubleshooting experience (though external debugger hardware may be needed).

By making the switch, you’re adopting the same tools used by professional embedded developers, which is essential as your projects grow in complexity.

Your Complete VS Code + PlatformIO Setup for the CYD

Let’s get your environment configured. This step-by-step process ensures your display and touchscreen work perfectly every time.

1. Prerequisites: What You’ll Need

• Your CYD Board: The ESP32-2432S028R (Cheap Yellow Display). This guide also applies to other ESP32 boards with a separate 2.8-inch ILI9341 TFT touchscreen, with minor pin adjustments.

• Software: VS Code with the PlatformIO extension installed. We assume you have basic familiarity with creating PlatformIO projects for ESP32.

• Prior Knowledge: While not strictly required, having previously programmed your CYD with the Arduino IDE and being familiar with the TFT_eSPI, XPT2046_Touchscreen, and LVGL libraries will make this process more intuitive.

2. Step 1: Create Your Project and Configure platformio.ini

The heart of any PlatformIO project is the platformio.ini file. This is where you define your board, dependencies, and settings.

1. Create a New Project: In VS Code, open the PlatformIO Home, click “New Project,” name it (e.g., “CYD_VSCode_Test”), select your ESP32 board (e.g., “Espressif ESP32 dev module”), and choose a location.

2. Add Library Dependencies: Open the platformio.ini file in your project root. Replace its contents with the following to add the necessary libraries and set the monitor speed:

[env:esp32dev]
platform = espressif32
board = esp32dev
framework = arduino
monitor_speed = 115200

lib_deps = 
    ; XPT2046 Touchscreen library - using GitHub URL ensures latest version
    https://github.com/PaulStoffregen/XPT2046_Touchscreen.git
    ; TFT_eSPI library by Bodmer
    bodmer/TFT_eSPI@^2.5.43

Important Note on XPT2046_Touchscreen: Due to a known issue in PlatformIO’s library manager, adding this library via the lib_deps URL (as shown above) is the most reliable method to get the correct, latest version.

3. Step 2: Configure the TFT_eSPI Library with the Custom User_Setup.h

This is the most critical step. The TFT_eSPI library needs a special configuration file, User_Setup.h, to work correctly with the CYD‘s specific pins and display settings. The default file will not work.

1. Locate the Default File: In the VS Code Explorer pane, navigate to your project folder, then to: .pio > libdeps > esp32dev (or your board name) > TFT_eSPI. You will find the User_Setup.h file there.

2. Replace with the CYD-Specific File: You must replace the contents of this file with the correct configuration for the CYD.

   • Click here to download the correct User_Setup.h file for the CYD (https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/refs/heads/master/Projects/LVGL/CYD/User_Setup.h) (This link points to the raw file from the tutorial source).

   • Open the downloaded file, copy its entire contents.

   • Go back to VS Code, open the User_Setup.h file located in the TFT_eSPI folder, replace all the existing code with the code you copied, and save the file.

4. Step 3: Test Your Setup with a Simple Sketch

Now, let’s verify everything is working. Create a new file in your src folder (e.g., main.cpp) and paste the following test code. This sketch displays text and prints touch coordinates to both the serial monitor and the screen.

#include <SPI.h>
#include <TFT_eSPI.h>       // Graphics and font library for ST7735 driver chip
#include <XPT2046_Touchscreen.h>

TFT_eSPI tft = TFT_eSPI();

// Touchscreen pins
#define XPT2046_IRQ 36   // T_IRQ
#define XPT2046_MOSI 32  // T_DIN
#define XPT2046_MISO 39  // T_OUT
#define XPT2046_CLK 25   // T_CLK
#define XPT2046_CS 33    // T_CS

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

#define SCREEN_WIDTH 320
#define SCREEN_HEIGHT 240
#define FONT_SIZE 2

int x, y, z;

void setup() {
  Serial.begin(115200);

  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  touchscreen.setRotation(1); // Landscape orientation

  tft.init();
  tft.setRotation(1); // Landscape orientation
  tft.fillScreen(TFT_WHITE);
  tft.setTextColor(TFT_BLACK, TFT_WHITE);

  int centerX = SCREEN_WIDTH / 2;
  tft.drawCentreString("Hello, CYD!", centerX, 30, FONT_SIZE);
  tft.drawCentreString("Touch to test", centerX, 120, FONT_SIZE);
}

void loop() {
  if (touchscreen.tirqTouched() && touchscreen.touched()) {
    TS_Point p = touchscreen.getPoint();
    // Simple mapping - you may need to calibrate this for accuracy!
    x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
    y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
    z = p.z;

    Serial.printf("X = %d | Y = %d | Pressure = %d\n", x, y, z);

    tft.fillScreen(TFT_WHITE);
    tft.setTextColor(TFT_BLACK, TFT_WHITE);
    tft.drawCentreString("X = " + String(x), SCREEN_WIDTH/2, 80, FONT_SIZE);
    tft.drawCentreString("Y = " + String(y), SCREEN_WIDTH/2, 110, FONT_SIZE);
    tft.drawCentreString("Pressure = " + String(z), SCREEN_WIDTH/2, 140, FONT_SIZE);
    delay(200);
  }
}

Build and Upload: Click the PlatformIO “Upload and Monitor” button (→) in the bottom blue bar. If everything is configured correctly, the code will compile, upload, and you should see the test screen. Touching the display will print coordinates on the screen and serial monitor.

5. Level Up: Adding LVGL for Professional GUIs

For complex user interfaces, LVGL (Light and Versatile Graphics Library) is the industry standard. Here’s how to add it to your project:

1. Add LVGL Dependency: Go back to your platformio.ini file and add lvgl/lvgl@^9.2 to the lib_deps list. It will look like this:

   ini

   lib_deps = 
       https://github.com/PaulStoffregen/XPT2046_Touchscreen.git
       bodmer/TFT_eSPI@^2.5.43
       lvgl/lvgl@^9.2

   PlatformIO will automatically download it on the next build.

2. Add the LVGL Configuration File: LVGL also needs a configuration file named lv_conf.h.

   • In the VS Code Explorer, right-click on the libdeps folder (inside .pio) and select “New File”. Name it lv_conf.h.

   • [Click here to download the correct lv_conf.h file for use with these tutorials](https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/refs/heads/master/Projects/LVGL/CYD/lv_conf.h). Copy its entire contents.

   • Paste the code into your newly created lv_conf.h file in VS Code and save it.

With these steps complete, your environment is fully ready for LVGL development. You can now run the more complex LVGL example code (provided in the original tutorial link) to create buttons, sliders, and animated interfaces.

Important Note for Every New Project

The library installation and custom configuration files (User_Setup.h, lv_conf.h) must be set up for every new VS Code project you create for the CYD. There is no global setting. This ensures each project is isolated and repeatable.

From Setup to Creation

Your development environment is now a professional-grade powerhouse. With VS Code, PlatformIO, and perfectly configured libraries, you can efficiently build amazing projects on your ESP32 Cheap Yellow Display—from smart home controllers and weather stations to handheld gaming devices and industrial data loggers.

Ready to build your next professional project?
Get your ESP32 Cheap Yellow Display today and start creating with a world-class development setup.

Check the latest price and buy your CYD board here to begin your next masterpiece.

Contact Us