Skip to content
We have moved: pcb.esp32s.com → pcb32.comSame store. Existing accounts, orders and affiliate commission records are unchanged.
Номер заказа: USD
Номер заказа: USD
pcb32.com
Cart 0

ESP32 CYD с VS Code: настройка TFT_eSPI и LVGL для проектов отображения.

Are you ready to move beyond the Arduino IDE and unlock a more professional, efficient workflow for your Дешевый желтый дисплей ESP32 (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 (Дешевый желтый дисплей) , 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

  • Твой CYD Доска: The ESP32-2432S028R (Дешевый желтый дисплей). This guide also applies to other Платы ESP32 with a separate 2.8-inch ILI9341 TFT touchscreen, with minor pin adjustments.

  • Программное обеспечение: 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_Сенсорный экран, 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. Создать новый проект: In VS Code, open the PlatformIO Home, click “New Project,” name it (e.g., “CYD_VSCode_Test”), select your плата ESP32 (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]
платформа = 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_Сенсорный экран: 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 нет 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.

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.

cpp
#включать <SPI.h>
#включать <TFT_eSPI.h>       // Graphics and font library for ST7735 driver chip
#включать <XPT2046_Touchscreen.h>

TFT_eSPI tft = TFT_eSPI();

// Touchscreen pins
#определять XPT2046_IRQ 36   // T_IRQ
#определять XPT2046_MOSI 32  // T_DIN
#определять XPT2046_MISO 39  // T_OUT
#определять XPT2046_CLK 25   // T_CLK
#определять XPT2046_CS 33    // T_CS

Сенсорный экран SPIClass SPI = SPIClass(ВСПИ);
XPT2046_Сенсорный экран сенсорный экран(XPT2046_CS, XPT2046_IRQ);

#определять ШИРИНА_ЭКРАНА 320
#определять ВЫСОТА_ЭКРАНА 240
#определять FONT_SIZE 2

инт x, y, z;

пустота настраивать() {
  Серийный номер.начинать(115200);

  сенсорный экранSPI.начинать(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  сенсорный экран.начинать(сенсорный экранSPI);
  сенсорный экран.setRotation(1); // Landscape orientation

  тфт.инициализация();
  тфт.setRotation(1); // Landscape orientation
  тфт.fillScreen(TFT_WHITE);
  тфт.setTextColor(TFT_BLACK, TFT_WHITE);

  инт центрX = ШИРИНА_ЭКРАНА / 2;
  тфт.drawCentreString(""Привет, CYD!"", центрX, 30, FONT_SIZE);
  тфт.drawCentreString(""Проверка на ощупь"", центрX, 120, FONT_SIZE);
}

пустота петля() {
  если (сенсорный экран.tirqTouched() && сенсорный экран.тронут()) {
    TS_Point p = сенсорный экран.получить точку();
    // Simple mapping - you may need to calibrate this for accuracy!
    x = карта(p.x, 200, 3700, 1, ШИРИНА_ЭКРАНА);
    y = карта(p.y, 240, 3800, 1, ВЫСОТА_ЭКРАНА);
    z = p.z;

    Серийный номер.printf("X = %d | Y = %d | Pressure = %d\n", x, y, z);

    тфт.fillScreen(TFT_WHITE);
    тфт.setTextColor(TFT_BLACK, TFT_WHITE);
    тфт.drawCentreString(""X = "" + Нить(x), ШИРИНА_ЭКРАНА/2, 80, FONT_SIZE);
    тфт.drawCentreString(""Y = "" + Нить(y), ШИРИНА_ЭКРАНА/2, 110, FONT_SIZE);
    тфт.drawCentreString(""Давление = "" + Нить(z), ШИРИНА_ЭКРАНА/2, 140, FONT_SIZE);
    задерживать(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:

    ини
    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.

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—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 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.

======================================

О сайте ESP32S.com

С 2016 года, ESP32S.com Наша компания превратилась в полноценного партнера по экосистеме для вашего развития в сфере Интернета вещей. Расположенная в Шэньчжэне, глобальном центре инноваций в электронике, мы помогли сотням разработчиков и компаний реализовать свои проекты. ESP32Воплощаем идеи в жизнь. Наша команда стремится оказывать исключительную поддержку и предлагать инновационные решения, которые помогут вам достичь ваших целей в области Интернета вещей.
В ESP32S.com, мы осваиваем тонкости разработки ESP32Разработка продукта, основанного на концепции, включает в себя множество этапов, от разработки до вывода на рынок. Именно поэтому мы предлагаем комплексные решения, охватывающие весь жизненный цикл продукта. ESP32Устройства на базе [технологии]. Независимо от того, нужна ли вам помощь в проектировании печатных плат, создании прототипов, производстве или даже маркетинге и доставке, мы вам поможем.

Свяжитесь с нами

Готовы вывести свой IoT-проект на новый уровень? Свяжитесь с ESP32S.com Узнайте больше о наших комплексных решениях уже сегодня! ESP32Устройства на базе [технологии]. Позвольте нам стать вашим надежным партнером в воплощении ваших инновационных идей в жизнь. Свяжитесь с нами прямо сейчас для начала.