Подключение сенсорного TFT дисплея к ESP32: Схема и пример кода

26.04.2024Вольтик.руПрограммирование в Arduino IDE, Проекты на ESP8266 / EPS324

В этом руководстве вы узнаете, как начать работу с сенсорным TFT дисплеем на контроллере ESP32. Он отлично подходит для создания графических пользовательских интерфейсов для ваших проектов Интернета вещей.

Дисплей, который мы используем в этом руководстве, имеет размер 2.8 дюйма и выполнен в технологии TFT LCD, а также обладает сенсорным экраном. Для обмена данными с дисплеем используется протокол SPI, а для управления им – драйвер ILI9341. Вы можете писать текст, рисовать фигуры и отображать изображения. Сенсорный экран также использует протокол SPI.

Подключение сенсорного TFT дисплея к ESP32: Схема и пример кода

Этот дисплей TFT LCD также оснащен интерфейсом для SD-карты, если вам нужно загрузить файлы для вашего конкретного проекта.

Схема подключения

Подключите контакты TFT LCD и сенсорного экрана к следующим GPIO ESP32 (обязательно используйте именно эти контакты, в противном случае проект не будет работать):

TFT LCD	ESP32
T_IRQ	GPIO 36
T_OUT	GPIO 39
T_DIN	GPIO 32
T_CS	GPIO 33
T_CLK	GPIO 25
SDO(MISO)	GPIO 16
LED	GPIO 21
SCK	GPIO 14
SDI(MOSI)	GPIO 13
D/C	GPIO 2
RESET	GPIO 12
CS	GPIO 15
GND	GND
VCC	5V (or 3.3V)*

На контакте VCC вы можете использовать напряжение 5 В или 3.3 В в зависимости от того, открыта или закрыта перемычка J1 (по умолчанию обычно она открыта, как показано на рисунке ниже).

VCC = 5 В, если J1 открыта
VCC = 3.3 В, если J1 закрыта

Библиотеки для Arduino IDE

ESP32 общается с дисплеем TFT и сенсорным экраном с использованием протокола SPI. Мы будем использовать библиотеки TFT_eSPI и XPT2046_Touchscreen.

Откройте вашу Arduino IDE и перейдите в меню Скетч > Подключить библиотеку > Управление библиотеками. Откроется Менеджер библиотек. Найдите библиотеку TFT_eSPI. Выберите библиотеку TFT_eSPI от Bodmer и установите ее.

Установка библиотеки XPT2046_Touchscreen

Откройте вашу Arduino IDE и перейдите в меню Скетч > Подключить библиотеку > Управление библиотеками. Найдите библиотеку XPT2046_Touchscreen. Выберите библиотеку XPT2046_Touchscreen от Paul Stoffregen и установите ее.

Подготовка файла User_Setup.h

Чтобы правильно использовать библиотеку TFT_eSPI, вам понадобится файл конфигурации с именем User_Setup.h с правильными определениями. Мы уже подготовили этот файл, чтобы у вас не возникало проблем с конфигурацией при следовании нашим примерам. Вам просто нужно его скачать и переместить в правильную папку. Следуйте следующим инструкциям, чтобы узнать, как это сделать.

а) Подготовка файла конфигурации для Windows

После установки обеих библиотек (TFT_eSPI и XPT2046_Touchscreen) загрузите файл конфигурации User_Setup.h. Нажмите здесь, чтобы скачать .zip-архив с файлом конфигурации User_Setup.h (просмотреть исходный файл).

В вашей среде разработки Arduino IDE перейдите в меню “Файл” и откройте пункт “Настройки”.

Скопируйте путь к “Рабочей папке” Arduino IDE. В нашем случае это C:\Users\rui_s\Documents\Arduino

Затем в окне Проводника вашего компьютера введите путь к рабочей папке, чтобы открыть папку Arduino (обычно она находится в папке Документы).

Откройте папку с библиотеками:

Вы должны увидеть там папку с библиотекой TFT_eSPI. Откройте ее.

Ваш путь к папке должен быть примерно таким же, как показано ниже: C:\Users\rui_s\Documents\Arduino\libraries\TFT_eSPI

Скопируйте предоставленный ранее файл User_Setup.h и замените им существующий файл.

ВАЖНО: другие файлы User_Config.h, доступные в интернете, скорее всего НЕ будут работать с данным примером. Вы должны использовать именно тот файл User_Config.h, который предоставлен в этой статье.

а) Подготовка файла конфигурации для MAC OS

В вашей среде разработки Arduino IDE откройте меню Настройки.

Скопируйте путь к “Рабочей папке” Arduino IDE. В нашем случае это C:\Users\rui_s\Documents\Arduino

В Finder введите ~/.arduinoIDE/ и откройте эту папку.

Откройте папку с библиотеками.

Вы должны увидеть там папку с библиотекой TFT_eSPI. Откройте ее.

Ваш путь к папке должен быть примерно таким же, как показано ниже:
/Users/rui/Documents/Arduino/libraries/TFT_eSPI

Скопируйте ранее предоставленный файл User_Setup.h и замените им существующий файл.

Теперь у вас должен быть файл User_Setup.h, предоставленный в этом пути.

ВАЖНО: другие файлы User_Config.h, доступные в интернете, скорее всего НЕ будут работать с данным примером. Вы должны использовать точно такой же файл User_Config.h, который предоставлен в этой статье.

Пример кода

Код ниже отображает простой текст на вашем дисплее TFT и позволяет вам проверить сенсорный экран. При нажатии на сенсорный экран пальцем или ручкой он должен выводить координаты и давление.

/*  Rui Santos & Sara Santos - Random Nerd Tutorials
    THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE:
    1) ESP32-2432S028R 2.8 inch 240×320 also known as the Cheap Yellow Display (CYD): https://makeradvisor.com/tools/cyd-cheap-yellow-display-esp32-2432s028r/
      SET UP INSTRUCTIONS: https://RandomNerdTutorials.com/cyd/
    2) REGULAR ESP32 Dev Board + 2.8 inch 240x320 TFT Display: https://makeradvisor.com/tools/2-8-inch-ili9341-tft-240x320/ and https://makeradvisor.com/tools/esp32-dev-board-wi-fi-bluetooth/
      SET UP INSTRUCTIONS: https://RandomNerdTutorials.com/esp32-tft/
    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

#include <SPI.h>
#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>

TFT_eSPI tft = TFT_eSPI();

// Пины сенсорного экрана
#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

// Координаты сенсорного экрана: (x, y) и давление (z)
int x, y, z;

// Вывод информации о сенсорном экране о X, Y и давлении (Z) в мониторе последовательного порта
void printTouchToSerial(int touchX, int touchY, int touchZ) {
  Serial.print("X = ");
  Serial.print(touchX);
  Serial.print(" | Y = ");
  Serial.print(touchY);
  Serial.print(" | Pressure = ");
  Serial.print(touchZ);
  Serial.println();
}

// Вывод информации о сенсорном экране о X, Y и давлении (Z) на TFT дисплее
void printTouchToDisplay(int touchX, int touchY, int touchZ) {
  // Очистка экрана TFT
  tft.fillScreen(TFT_WHITE);
  tft.setTextColor(TFT_BLACK, TFT_WHITE);

  int centerX = SCREEN_WIDTH / 2;
  int textY = 80;
 
  String tempText = "X = " + String(touchX);
  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

  textY += 20;
  tempText = "Y = " + String(touchY);
  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

  textY += 20;
  tempText = "Pressure  = " + String(touchZ);
  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);
}

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

  // Начать использовать SPI для сенсорного экрана и инициализировать сенсорный экран
  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  // Установить поворот сенсорного экрана в ландшафтный режим
  // Примечание: на некоторых дисплеях сенсорный экран может быть перевернут, поэтому может потребоваться установить поворот в 3: touchscreen.setRotation(3);
  touchscreen.setRotation(1);

  // Начать использовать TFT дисплей
  tft.init();
  // Установить поворот TFT дисплея в ландшафтный режим
  tft.setRotation(1);

  // Очистить экран перед записью на него
  tft.fillScreen(TFT_WHITE);
  tft.setTextColor(TFT_BLACK, TFT_WHITE);
  
  // Установить координаты X и Y для центра дисплея
  int centerX = SCREEN_WIDTH / 2;
  int centerY = SCREEN_HEIGHT / 2;

  tft.drawCentreString("Hello, world!", centerX, 30, FONT_SIZE);
  tft.drawCentreString("Touch screen to test", centerX, centerY, FONT_SIZE);
}

void loop() {
  // Проверка, коснулся ли кто-то сенсорного экрана, и вывод информации о X, Y и давлении (Z) на TFT дисплей и в монитор последовательного порта
  if (touchscreen.tirqTouched() && touchscreen.touched()) {
    // Получение координат сенсорного экрана
    TS_Point p = touchscreen.getPoint();
    // Калибровка координат сенсорного экрана с помощью функции map к правильной ширине и высоте
    x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
    y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
    z = p.z;

    printTouchToSerial(x, y, z);
    printTouchToDisplay(x, y, z);

    delay(100);
  }
}

100

101

102

103

104

105

106

107

108

/* Rui Santos & Sara Santos - Random Nerd Tutorials

THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE:

1) ESP32-2432S028R 2.8 inch 240×320 also known as the Cheap Yellow Display (CYD): https://makeradvisor.com/tools/cyd-cheap-yellow-display-esp32-2432s028r/

SET UP INSTRUCTIONS: https://RandomNerdTutorials.com/cyd/

2) REGULAR ESP32 Dev Board + 2.8 inch 240x320 TFT Display: https://makeradvisor.com/tools/2-8-inch-ili9341-tft-240x320/ and https://makeradvisor.com/tools/esp32-dev-board-wi-fi-bluetooth/

SET UP INSTRUCTIONS: https://RandomNerdTutorials.com/esp32-tft/

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

#include <SPI.h>

#include <TFT_eSPI.h>

#include <XPT2046_Touchscreen.h>

TFT_eSPI tft = TFT_eSPI();

// Пины сенсорного экрана

#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

// Координаты сенсорного экрана: (x, y) и давление (z)

int x, y, z;

// Вывод информации о сенсорном экране о X, Y и давлении (Z) в мониторе последовательного порта

void printTouchToSerial(int touchX, int touchY, int touchZ) {

Serial.print("X = ");

Serial.print(touchX);

Serial.print(" | Y = ");

Serial.print(touchY);

Serial.print(" | Pressure = ");

Serial.print(touchZ);

Serial.println();

}

// Вывод информации о сенсорном экране о X, Y и давлении (Z) на TFT дисплее

void printTouchToDisplay(int touchX, int touchY, int touchZ) {

// Очистка экрана TFT

tft.fillScreen(TFT_WHITE);

tft.setTextColor(TFT_BLACK, TFT_WHITE);

int centerX = SCREEN_WIDTH / 2;

int textY = 80;

String tempText = "X = " + String(touchX);

tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

textY += 20;

tempText = "Y = " + String(touchY);

tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

textY += 20;

tempText = "Pressure = " + String(touchZ);

tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

}

void setup() {

Serial.begin(115200);

// Начать использовать SPI для сенсорного экрана и инициализировать сенсорный экран

touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);

touchscreen.begin(touchscreenSPI);

// Установить поворот сенсорного экрана в ландшафтный режим

// Примечание: на некоторых дисплеях сенсорный экран может быть перевернут, поэтому может потребоваться установить поворот в 3: touchscreen.setRotation(3);

touchscreen.setRotation(1);

// Начать использовать TFT дисплей

tft.init();

// Установить поворот TFT дисплея в ландшафтный режим

tft.setRotation(1);

// Очистить экран перед записью на него

tft.fillScreen(TFT_WHITE);

tft.setTextColor(TFT_BLACK, TFT_WHITE);

// Установить координаты X и Y для центра дисплея

int centerX = SCREEN_WIDTH / 2;

int centerY = SCREEN_HEIGHT / 2;

tft.drawCentreString("Hello, world!", centerX, 30, FONT_SIZE);

tft.drawCentreString("Touch screen to test", centerX, centerY, FONT_SIZE);

}

void loop() {

// Проверка, коснулся ли кто-то сенсорного экрана, и вывод информации о X, Y и давлении (Z) на TFT дисплей и в монитор последовательного порта

if (touchscreen.tirqTouched() && touchscreen.touched()) {

// Получение координат сенсорного экрана

TS_Point p = touchscreen.getPoint();

// Калибровка координат сенсорного экрана с помощью функции map к правильной ширине и высоте

x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);

y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);

z = p.z;

printTouchToSerial(x, y, z);

printTouchToDisplay(x, y, z);

delay(100);

}

Пояснения к коду

Библиотеки

Подключаем библиотеки SPI, TFT_eSPI и XPT2046_Touchscreen:

#include <SPI.h>
#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>

#include <SPI.h>

#include <TFT_eSPI.h>

#include <XPT2046_Touchscreen.h>

Инициализация TFT

TFT_eSPI tft = TFT_eSPI()

1	TFT_eSPI tft = TFT_eSPI()

Инициализация сенсорного дисплея

Пины подключения дисплея:

#define XPT2046_IRQ 36
#define XPT2046_MOSI 32
#define XPT2046_MISO 39
#define XPT2046_CLK 25
#define XPT2046_CS 33

#define XPT2046_IRQ 36

#define XPT2046_MOSI 32

#define XPT2046_MISO 39

#define XPT2046_CLK 25

#define XPT2046_CS 33

Создание объектов touchscreenSPI и touchscreen:

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

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

Другие переменные

Ширина и высота экрана, размер шрифта:

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

#define SCREEN_WIDTH 320

#define SCREEN_HEIGHT 240

#define FONT_SIZE 2

Переменные с координатами и давлением:

int x, y, z;

1	int x, y, z;

setup()
Устанавливаем последовательную (Serial Monitor) на скорости передачи данных 115200 бит/с:

Serial.begin(115200);

1	Serial.begin(115200);

Инициализируем SPI для сенсорного экрана:

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

touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);

touchscreen.begin(touchscreenSPI);

touchscreen.setRotation(1);

На некоторых дисплеях сенсорный экран может быть перевернут, поэтому может потребоваться установить поворот в 3: touchscreen.setRotation(3);

Инициализация TFT-дисплея:

tft.init();
tft.setRotation(1);

1 2	tft.init(); tft.setRotation(1);

Устанавливаем белый цвет фона на экране. Затем устанавливаем цвет текста на черный с белым фоном.

tft.fillScreen(TFT_WHITE);
tft.setTextColor(TFT_BLACK, TFT_WHITE);

1 2	tft.fillScreen(TFT_WHITE); tft.setTextColor(TFT_BLACK, TFT_WHITE);

Устанавливаем координаты X и Y для центра дисплея:

int centerX = SCREEN_WIDTH / 2;
int centerY = SCREEN_HEIGHT / 2;

1 2	int centerX = SCREEN_WIDTH / 2; int centerY = SCREEN_HEIGHT / 2;

Отображаем приветственное сообщение:

tft.drawCentreString("Hello, world!", centerX, 30, FONT_SIZE);
tft.drawCentreString("Touch screen to test", centerX, centerY, FONT_SIZE);

1 2	tft.drawCentreString("Hello, world!", centerX, 30, FONT_SIZE); tft.drawCentreString("Touch screen to test", centerX, centerY, FONT_SIZE);

loop()

В функции loop() постоянно проверяется, коснулся ли кто-то сенсорного экрана:

if (touchscreen.tirqTouched() && touchscreen.touched())

1	if (touchscreen.tirqTouched() && touchscreen.touched())

Если обнаружили касание, получаем координаты (x, y) и давление (z) в точке:

TS_Point p = touchscreen.getPoint();
// Calibrate Touchscreen points with map function to the correct width and height
x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
z = p.z;

TS_Point p = touchscreen.getPoint();

// Calibrate Touchscreen points with map function to the correct width and height

x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);

y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);

z = p.z;

Выводим информацию о касании в последовательные порт и на дисплей:

printTouchToSerial(x, y, z);
printTouchToDisplay(x, y, z);

1 2	printTouchToSerial(x, y, z); printTouchToDisplay(x, y, z);

printTouchToSerial()

Эта функция печатает координаты и давление в последовательный порт:

void printTouchToSerial(int touchX, int touchY, int touchZ) {
  Serial.print("X = ");
  Serial.print(touchX);
  Serial.print(" | Y = ");
  Serial.print(touchY);
  Serial.print(" | Pressure = ");
  Serial.print(touchZ);
  Serial.println();
}

void printTouchToSerial(int touchX, int touchY, int touchZ) {

Serial.print("X = ");

Serial.print(touchX);

Serial.print(" | Y = ");

Serial.print(touchY);

Serial.print(" | Pressure = ");

Serial.print(touchZ);

Serial.println();

}

printTouchToDisplay()

Эта функция печатает координаты и давление на экран дисплея:

void printTouchToDisplay(int touchX, int touchY, int touchZ) {
  // Clear TFT screen
  tft.fillScreen(TFT_WHITE);
  tft.setTextColor(TFT_BLACK, TFT_WHITE);

  int centerX = SCREEN_WIDTH / 2;
  int textY = 80;
 
  String tempText = "X = " + String(touchX);
  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

  textY += 20;
  tempText = "Y = " + String(touchY);
  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

  textY += 20;
  tempText = "Pressure = " + String(touchZ);
  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);
}

void printTouchToDisplay(int touchX, int touchY, int touchZ) {

// Clear TFT screen

tft.fillScreen(TFT_WHITE);

tft.setTextColor(TFT_BLACK, TFT_WHITE);

int centerX = SCREEN_WIDTH / 2;

int textY = 80;

String tempText = "X = " + String(touchX);

tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

textY += 20;

tempText = "Y = " + String(touchY);

tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

textY += 20;

tempText = "Pressure = " + String(touchZ);

tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);

}

Демонстрация работы

После загрузки кода на плату, он отобразит текст “Hello, World!”. Нажмите на сенсорный экран пальцем, чтобы протестировать его.

На дисплее TFT должны отображаться координаты: (x, y) и давление (z).

Координаты и давление также выводятся в монитор последовательного порта:

В этом уроке вы узнали, как использовать сенсорный TFT LCD дисплей с драйвером ILI9341 с помощью ESP32. Эта настройка полезна для создания панелей инструментов и графических пользовательских интерфейсов для ваших DIY-проектов.

Данный материал был переведен с сайта RandomNerdTutorials.com. Авторские права принадлежат ее автору - Rui Santos. Автор продает очень полезные и толковые курсы по ESP8266 / ESP32 (на английском языке), ознакомиться с которыми можно по ссылке.
Вопросы по прошивке и работе с кодом лучше писать напрямую автору в комментариях к статье (на англ. языке)

Вольтик.ру

Вольтик - это слаженная команда амбициозных и заядлых инженеров. Мы создали этот проект с целью вовлечения вас, талантливых и начинающих профессионалов, в увлекательный мир мейкерской микроэлектроники!

4 комментария. Оставить новый

Дмитрий

11.09.2024 01:35

товарищи, ваш setup не верный, проверьте пины MOSI и MISO

Ответить

supportvoltiq

11.09.2024 11:52

Здравствуйте, мы не видим ошибки.

Ответить

Сергей

29.11.2024 10:53

Сколько смотрю примеры подключения, но все просто игнорируют подключение SD карты …Это такая не нужная вещь ?????

Ответить

supportvoltiq

02.12.2024 11:09

Здравствуйте!

В этом примере мы рассматривали подключение именно дисплея. Процесс подключения SD карты является стандартным и не отличается от подключения других SD модулей для Arduino, поэтому мы не стали углубляться в эту тему. Чтобы подключить SD карту, необходимо использовать интерфейс SPI, для чего на дисплее предусмотрены специальные контакты.

Для работы с SD картой в среде Arduino IDE вы можете воспользоваться библиотекой SD.

Ответить

Подключение сенсорного TFT дисплея к ESP32: Схема и пример кода

Схема подключения

Библиотеки для Arduino IDE

Подготовка файла User_Setup.h

Пример кода

Пояснения к коду

Демонстрация работы

4 комментария. Оставить новый

Добавить комментарий Отменить ответ