Hướng dẫn kết nối và lập trình màn hình TFT SPI (như ILI9341, ST7735, ST7789) với ESP32. Bài viết giải thích nguyên lý SPI, cung cấp sơ đồ kết nối, mã ví dụ hiển thị văn bản, đồ họa và hình ảnh.

Mục lục

1. Giới thiệu màn TFT SPI
2. Phân biệt các dòng TFT phổ biến
3. Chuẩn bị phần cứng
4. Sơ đồ kết nối ESP32 – TFT SPI
5. Code ví dụ 1: Hiển thị chữ cơ bản
6. Code ví dụ 2: Vẽ đồ họa (hình tròn, đường, hình chữ nhật)
7. Code ví dụ 3: Hiển thị hình ảnh BMP
8. Lỗi thường gặp & cách khắc phục
9. Gợi ý mở rộng

1) Giới thiệu màn TFT SPI

Màn hình TFT LCD (Thin-Film Transistor) là loại màn màu, sử dụng gắn chip hiển thị ILI9341, ST7735, ST7789, …

• Kích thước: 1.8″, 2.4″, 2.8″, 3.5″, …
• Chuẩn giao tiếp: SPI (hoặc song song 8-bit, nhưng SPI phổ biến hơn)
• Màu sắc: 65.000 hoặc 262.000 màu (16-bit RGB565)

2) Phân biệt các dòng TFT phổ biến

Model	Kích thước	Driver IC	Độ phân giải	Giao tiếp
ST7735	1.8″	ST7735	128×160	SPI
ST7789	1.3″ – 1.54″	ST7789	240×240	SPI
ILI9341	2.4″ – 2.8″	ILI9341	240×320	SPI

---

3) Chuẩn bị phần cứng

Linh kiện	SL	Ghi chú
ESP32 DevKit V1	1	Board chính
Màn TFT (ILI9341/ST7735)	1	SPI 4 hoặc 5 dây
Dây Dupont	6-8	Nối SPI

---

4) Sơ đồ kết nối ESP32 – TFT SPI

TFT Pin	ESP32 Pin	Ghi chú
VCC	3.3V	Nguồn
GND	GND	Mass
CS	GPIO5	Chip Select
RESET	GPIO4	Reset màn
DC	GPIO2	Data/Command
MOSI	GPIO23	Master Out Slave In
SCK	GPIO18	Clock
LED	3.3V	Nếu có, cấp nguồn cho backlight

---

⚠️ Một số module TFT hoạt động tốt với 3.3V, nếu là 5V phải dùng mạch chia áp logic hoặc level shifter.

5) Code ví dụ 1: Hiển thị chữ cơ bản

#include <TFT_eSPI.h>   // Thư viện mạnh cho ESP32 + TFT
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI(); // Tự động map chân SPI

void setup() {
  tft.init();
  tft.setRotation(1); // Hướng ngang
  tft.fillScreen(TFT_BLACK);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.drawString("Hello TFT!", 10, 20, 4);
}

void loop() {
}

6) Code ví dụ 2: Vẽ đồ họa

#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.setRotation(1);
  tft.fillScreen(TFT_BLACK);

  // Vẽ hình tròn (mặt robot)
  tft.fillCircle(60, 60, 30, TFT_YELLOW);
  tft.fillCircle(45, 50, 5, TFT_BLACK);
  tft.fillCircle(75, 50, 5, TFT_BLACK);
  tft.drawLine(45, 70, 75, 70, TFT_BLACK);

  // Vẽ hình chữ nhật
  tft.fillRect(120, 40, 80, 50, TFT_BLUE);
  tft.drawRect(120, 40, 80, 50, TFT_WHITE);

  // Vẽ đường chéo
  tft.drawLine(0, 0, 240, 135, TFT_GREEN);
}

void loop() {}

7) Code ví dụ 3: Hiển thị hình ảnh BMP

#include <TFT_eSPI.h>
#include <SPIFFS.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {
  Serial.begin(115200);
  tft.init();
  tft.setRotation(1);
  SPIFFS.begin(true);

  // Vẽ hình từ file BMP (phải upload trước qua Tools > ESP32 Sketch Data Upload)
  tft.fillScreen(TFT_BLACK);
  tft.drawBmpFile(SPIFFS, "/robot.bmp", 0, 0);
}

void loop() {}

⚠️ Để hiển thị hình BMP, định dạng phải là 24-bit bitmap, không nén.

8) Lỗi thường gặp & cách khắc phục

Lỗi	Nguyên nhân	Giải pháp
Màn không hiển thị	Sai chân SPI hoặc CS/DC	Kiểm tra config TFT_eSPI/User_Setup.h
Hình đảo ngược	Chưa xoay màn	Thêm tft.setRotation(1)
Độ phân giải sai	Cấu hình chưa đúng	Kiểm tra model (ST7735/ILI9341)

---

9) Gợi ý mở rộng

• Hiển thị dữ liệu cảm biến (nhiệt độ, độ ẩm, nồng độ).
• Vẽ giao diện dashboard mini.
• Tạo menu chạm (với TFT có Touch Controller XPT2046).