아두이노 나노 ESP32 ILI9341 ILI9488 ST7789 TFT LCD 터치 디스플레이 SPI 인터페이스
SPI TFT 디스플레이를 Arduino Nano ESP32에 연결하는 실습 워크숍에 오신 것을 환영합니다. Nano ESP32는 USB-C 커넥터가 있는 친숙한 Nano 폼 팩터에 듀얼 코어 처리, Wi-Fi, Bluetooth Low Energy를 제공하는 ESP32-S3 칩을 기반으로 합니다. 3.3V에서 작동하며, 이는 대부분의 SPI TFT 모듈의 전압 레벨과 일치하여 배선이 간단합니다.
이 워크숍에서 수행할 작업:
- 3.3V SPI TFT 디스플레이를 Arduino Nano ESP32에 배선합니다.
- Adafruit GFX 함수를 사용하여 도형과 그래픽을 그립니다.
- 다양한 크기로 텍스트 문자열과 숫자를 표시합니다.
- 프로그램 메모리(PROGMEM)에서 비트맵 이미지를 그립니다.
- SD 카드에서 로드한 비트맵 이미지를 그립니다.
- 커스텀 외부 폰트로 텍스트를 렌더링합니다.
- XPT2046 터치 컨트롤러에서 원시 터치 좌표를 읽습니다.
- 터치 드래그로 화면에 그립니다.
- 인터랙티브 터치 버튼을 만듭니다.
- 터치 스크린을 캘리브레이션합니다.
- 디스플레이에 보조 또는 커스텀 SPI 버스를 사용합니다.
이 워크숍은 터치 및 비터치 SPI TFT LCD 디스플레이 모두를 다룹니다. ILI9341, ILI9488, 또는 ST7789 컨트롤러 칩으로 구동되는 1.3, 1.54, 2.2, 2.4, 2.8, 3.2, 3.5인치 패널과 호환됩니다.
준비물
| 1 | × | 아두이노 나노 ESP32 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | SPI TFT display module | 쿠팡 | 아마존 | |
| 1 | × | 점퍼케이블 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 나노용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 나노용 브레이크아웃 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 나노 ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
SPI TFT 디스플레이에 대하여
SPI TFT 모듈은 드라이버 IC를 사용하여 픽셀 데이터를 관리하고 고속 SPI 링크를 통해 그리기 명령에 응답합니다. 세 가지 드라이버가 지원됩니다:
- ILI9341 - 16비트 RGB565 색상, 최대 40 MHz SPI.
- ILI9488 - SPI를 통한 18비트 RGB666 색상, 최대 24 MHz.
- ST7789 - 16비트 RGB565 색상, 최대 40 MHz SPI.
권장 사항: 아직 디스플레이를 구입하지 않은 경우, ST7789 드라이버를 권장합니다. 널리 사용 가능하고 전체 40 MHz SPI 속도로 실행되며 새 프로젝트에 가장 간단한 선택입니다.
라이브러리는 Adafruit GFX를 기반으로 하므로, 원, 사각형, 텍스트, 커스텀 폰트, 비트맵을 모두 바로 사용할 수 있습니다.
참고: Arduino Nano ESP32는 3.3V 로직을 사용합니다. TFT VCC는 3.3V 핀에만 연결하세요.
핀아웃
대부분의 SPI TFT LCD 디스플레이에는 다음 핀이 있습니다:
디스플레이 핀:
| Pin | Function |
|---|---|
| VCC | 전원 공급 |
| GND | 접지 |
| CS | 칩 선택 — SPI 버스에서 디스플레이를 선택하기 위해 LOW로 당김 |
| DC / RS | 데이터 / 명령 선택 — 픽셀 데이터는 HIGH, 명령은 LOW |
| RST | 하드웨어 리셋 — 선택 사항; 사용하지 않는 경우 3.3V에 연결 |
| MOSI / SDI / SDA | SPI 데이터 입력 (MCU → 디스플레이) |
| SCK / CLK | SPI 클록 |
| MISO / SDO | SPI 데이터 출력 (디스플레이 → MCU) — 디스플레이 전용 사용 시 선택 사항 |
| LED / BL / BLK | 백라이트 전원 — 3.3V 또는 디밍을 위한 PWM 핀에 연결 |
SD 카드 핀 (애플리케이션에서 SD 카드에 액세스해야 하는 경우):
| Pin | Function |
|---|---|
| SD_CS / TF_CS | SD 카드 칩 선택 |
| MOSI / SDI | MOSI — MCU에서 SD 카드로의 데이터 |
| SCK / CLK | SCK — SPI 클록 |
| MISO / SDO | MISO — SD 카드에서 MCU로의 데이터 |
터치를 지원하는 TFT 디스플레이의 경우 추가 터치 핀이 있습니다(애플리케이션이 터치 기능을 사용하고 디스플레이가 이를 지원하는 경우):
| Pin | Function |
|---|---|
| T_CS | 터치 컨트롤러 칩 선택 |
| T_CLK | SCK — SPI 클록 |
| T_DIN | MOSI — MCU에서 터치 컨트롤러로의 데이터 |
| T_DO | MISO — 터치 컨트롤러에서 MCU로의 데이터 |
| T_IRQ | 터치 인터럽트 — 선택 사항; 화면이 터치될 때 신호를 보냄 |
참고: 일부 비터치 디스플레이 모듈에도 T_CS, T_CLK, T_DIN, T_DO, T_IRQ 핀이 노출됩니다. 이러한 보드에서는 기능하지 않습니다 — 터치 컨트롤러 IC가 실장되어 있지 않습니다. 제조 변형을 줄이기 위해 PCB가 터치 지원 버전과 동일한 레이아웃을 재사용하기 때문에 나타납니다.
배선 다이어그램
터치 없음
Nano ESP32에 MOSI를 D11, SCK를 D13, MISO를 D12에 연결합니다. CS, DC, RST는 사용 가능한 GPIO를 사용할 수 있습니다 — 예제에서는 D10, D9, D8을 사용합니다.
디스플레이:
| TFT Pin | Arduino Nano ESP32 Pin | Description |
|---|---|---|
| VCC | 3.3V | 전원 공급 (3.3V 전용) |
| GND | GND | 접지 |
| CS | D10 | 칩 선택 |
| DC / RS | D9 | 데이터 / 명령 선택 |
| RST | D8 | 리셋 (선택 사항) |
| MOSI / SDI | D11 | 하드웨어 SPI MOSI |
| SCK | D13 | 하드웨어 SPI 클록 |
| MISO / SDO | D12 | 하드웨어 SPI MISO (선택 사항) |
| LED / BL | 3.3V | 백라이트 전원 |
SD 카드 (애플리케이션에서 SD 카드에 액세스해야 하는 경우):
| SD Pin | Arduino Nano ESP32 Pin | Description |
|---|---|---|
| SD_CS / TF_CS | any free GPIO | SD 카드 칩 선택 |
| MOSI / SDI | D11 | 디스플레이 MOSI와 공유 (D11) |
| SCK / CLK | D13 | 디스플레이 SCK와 공유 (D13) |
| MISO / SDO | D12 | 디스플레이 MISO와 공유 (D12) |
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
터치 있음
XPT2046 터치 컨트롤러를 Arduino Nano ESP32 SPI 버스에 연결하여 D11, D13, D12를 디스플레이와 공유합니다.
디스플레이:
| TFT Pin | Arduino Nano ESP32 Pin | Description |
|---|---|---|
| VCC | 3.3V | 전원 공급 (3.3V 전용) |
| GND | GND | 접지 |
| CS | D10 | 칩 선택 |
| DC / RS | D9 | 데이터 / 명령 선택 |
| RST | D8 | 리셋 (선택 사항) |
| MOSI / SDI | D11 | 하드웨어 SPI MOSI |
| SCK | D13 | 하드웨어 SPI 클록 |
| MISO / SDO | D12 | 하드웨어 SPI MISO (선택 사항) |
| LED / BL | 3.3V | 백라이트 전원 |
터치 컨트롤러 (애플리케이션이 터치 기능을 사용하고 디스플레이가 이를 지원하는 경우):
| Touch Pin | Arduino Nano ESP32 Pin | Description |
|---|---|---|
| T_CS | D7 | 터치 칩 선택 |
| T_IRQ | D6 | 터치 인터럽트 (선택 사항) |
| T_DIN | D11 | 디스플레이 MOSI와 공유 (D11) |
| T_CLK | D13 | 디스플레이 SCK와 공유 (D13) |
| T_DO | D12 | 디스플레이 MISO와 공유 (D12) |
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
MCU에 두 개 이상의 하드웨어 SPI 인터페이스가 있는 경우, 각 주변 장치(디스플레이, SD 카드, 터치 컨트롤러)를 별도의 전용 SPI 버스에 할당할 수 있습니다. MCU에 하드웨어 SPI 인터페이스가 하나만 있는 경우, 세 주변 장치 모두 동일한 세 데이터 선(MOSI, SCK, MISO)을 공유합니다 — Nano ESP32에서는 D11, D13, D12입니다. 각 주변 장치는 자체 CS 핀을 가지므로 한 번에 하나만 활성화됩니다. DIYables_TFT_SPI 라이브러리는 단일 API를 통해 디스플레이와 XPT2046 터치 컨트롤러를 모두 관리합니다 — 터치 쪽에 별도의 SPI 라이브러리가 필요하지 않습니다.
라이브러리 설정
- Arduino Nano ESP32를 USB-C 포트를 통해 컴퓨터에 연결합니다.
- Arduino IDE를 엽니다. 보드 목록에서 Arduino Nano ESP32를 선택하고 올바른 포트를 선택합니다.
- 왼쪽 사이드바의 Libraries 아이콘을 클릭합니다.
- 검색 필드에 "DIYables_TFT_SPI"를 입력합니다. DIYables 항목을 찾습니다.
- Install을 클릭합니다. 메시지가 표시되면 모든 의존성을 설치합니다.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
1
void setup() {
시작 스케치
DIYables_TFT_SPI 라이브러리로 시작하는 데 필요한 최소 코드:
#include <DIYables_TFT_SPI.h>
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Uncomment the line that matches your driver chip:
// DIYables_ILI9341_SPI TFT_display(240, 320, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(320, 480, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(240, 320, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
void setup() {
TFT_display.begin();
TFT_display.setRotation(1);
}
void loop() {
// drawing code here
}
워크숍 - 도형 그리기
DrawShapes 예제는 Adafruit GFX 그리기 기본 기능을 모두 활용합니다: 원, 사각형, 삼각형, 화면 전체에 선.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// MOSI and SCK use default hardware SPI pins
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define BLACK DIYables_TFT_SPI::colorRGB(0, 0, 0)
#define BLUE DIYables_TFT_SPI::colorRGB(0, 0, 255)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define GREEN DIYables_TFT_SPI::colorRGB(0, 255, 0)
#define ORANGE DIYables_TFT_SPI::colorRGB(255, 165, 0)
#define PINK DIYables_TFT_SPI::colorRGB(255, 192, 203)
#define VIOLET DIYables_TFT_SPI::colorRGB(148, 0, 211)
#define TURQUOISE DIYables_TFT_SPI::colorRGB(64, 224, 208)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
// Helper to draw a filled diamond
void fillDiamond(int cx, int cy, int h, int v, uint16_t color) {
int x0 = cx, y0 = cy - v;
int x1 = cx + h, y1 = cy;
int x2 = cx, y2 = cy + v;
int x3 = cx - h, y3 = cy;
TFT_display.fillTriangle(x0, y0, x1, y1, x2, y2, color);
TFT_display.fillTriangle(x0, y0, x2, y2, x3, y3, color);
}
void setup() {
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
}
void loop() {
TFT_display.fillScreen(WHITE);
uint16_t w = TFT_display.width();
uint16_t h = TFT_display.height();
// Scale positions relative to screen size with better spacing
int col1 = w / 8;
int col2 = w * 3 / 8;
int col3 = w * 5 / 8;
int col4 = w * 7 / 8;
int row1 = h / 4;
int row2 = h / 2;
int row3 = h * 3 / 4;
// Outlined circle
TFT_display.drawCircle(col1, row1, 30, RED);
// Filled circle
TFT_display.fillCircle(col2, row1, 30, RED);
// Outlined triangle
TFT_display.drawTriangle(col3 - 30, row1 + 25, col3 + 30, row1 + 25, col3, row1 - 25, BLUE);
// Filled triangle
TFT_display.fillTriangle(col4 - 30, row1 + 25, col4 + 30, row1 + 25, col4, row1 - 25, GREEN);
// Outlined rectangle
TFT_display.drawRect(col1 - 35, row2 - 20, 70, 40, ORANGE);
// Filled rectangle
TFT_display.fillRect(col2 - 35, row2 - 20, 70, 40, TURQUOISE);
// Outlined round rectangle
TFT_display.drawRoundRect(col3 - 35, row2 - 20, 70, 40, 10, VIOLET);
// Filled round rectangle
TFT_display.fillRoundRect(col4 - 35, row2 - 20, 70, 40, 10, PINK);
// Outlined diamond (centered between col1 and col2)
int diamond1_x = (col1 + col2) / 2;
TFT_display.drawLine(diamond1_x, row3 - 30, diamond1_x + 25, row3, GREEN);
TFT_display.drawLine(diamond1_x + 25, row3, diamond1_x, row3 + 30, GREEN);
TFT_display.drawLine(diamond1_x, row3 + 30, diamond1_x - 25, row3, GREEN);
TFT_display.drawLine(diamond1_x - 25, row3, diamond1_x, row3 - 30, GREEN);
// Filled diamond (centered between col3 and col4)
int diamond2_x = (col3 + col4) / 2;
fillDiamond(diamond2_x, row3, 25, 30, BLUE);
delay(10000);
}
실습
- 위의 표를 사용하여 TFT 모듈을 Nano ESP32에 연결합니다. VCC에는 3.3V를 사용하세요.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 디스플레이에 회전하는 색상 도형 패턴이 표시됩니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| begin() | 디스플레이를 초기화하고 리셋합니다. | TFT_display.begin(); |
| setRotation(r) | 방향을 설정합니다 (0=세로, 1=가로). | TFT_display.setRotation(1); |
| fillScreen(color) | 화면을 한 가지 색상으로 지웁니다. | TFT_display.fillScreen(BLACK); |
| colorRGB(r,g,b) | R, G, B에서 16비트 색상을 만듭니다. | colorRGB(255,128,0) |
| fillCircle(x,y,r,color) | 채워진 원. | TFT_display.fillCircle(100,100,50,RED); |
| fillRoundRect(x,y,w,h,r,color) | 채워진 둥근 사각형. | TFT_display.fillRoundRect(10,10,100,50,10,BLUE); |
| drawTriangle(x0,y0,x1,y1,x2,y2,color) | 삼각형 외곽선. | TFT_display.drawTriangle(60,10,10,110,110,110,GREEN); |
워크숍 - 텍스트 및 숫자 표시
ShowTextAndNumber 예제는 조정 가능한 크기와 색상의 내장 GFX 텍스트 엔진을 사용하여 문자열과 숫자를 출력합니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define MAGENTA DIYables_TFT_SPI::colorRGB(255, 0, 255)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
void setup() {
Serial.begin(9600);
Serial.println(F("TFT SPI Display - Show text and numbers"));
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
TFT_display.fillScreen(WHITE);
// Set text color and size
TFT_display.setTextColor(MAGENTA);
TFT_display.setTextSize(3);
// Sample values
float temperature = 23.5;
float humidity = 78.6;
// Display temperature
TFT_display.setCursor(20, 20);
TFT_display.print("Temperature: ");
TFT_display.print(temperature, 1);
TFT_display.print(char(247));
TFT_display.println("C");
// Display humidity
TFT_display.setCursor(20, 60);
TFT_display.print("Humidity: ");
TFT_display.print(humidity, 1);
TFT_display.print("%");
}
void loop() {
}
실습
- 위와 같이 배선하고 업로드합니다.
- 디스플레이에 다양한 색상과 크기의 텍스트 여러 줄이 출력됩니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| setTextColor(color) | 텍스트 출력의 전경색을 설정합니다. | TFT_display.setTextColor(WHITE); |
| setTextSize(size) | 텍스트를 정수 배율로 확대합니다. 크기 1 = 6×8 px. | TFT_display.setTextSize(2); |
| setCursor(x, y) | 텍스트 커서를 픽셀 위치 (x, y)로 이동합니다. | TFT_display.setCursor(10, 20); |
| print(value) | 커서 위치에 문자열이나 숫자를 출력합니다. | TFT_display.print("ESP32-S3!"); |
| println(value) | 출력하고 커서를 다음 줄로 이동합니다. | TFT_display.println(42); |
워크숍 - 이미지 그리기
이 워크숍 스테이션에서는 전체 색상 RGB565 비트맵 이미지를 디스플레이에 로드합니다. 픽셀 데이터는 bitmap.h 내의 PROGMEM 배열로 펌웨어에 컴파일됩니다. ESP32-S3에서 PROGMEM 데이터는 플래시에 저장되고 주소 공간에 매핑되므로, 이미지 데이터 자체로 인한 SRAM 소비가 없습니다. 컴파일 전에 bitmap.h를 스케치 폴더에 추가하세요.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
#include "bitmap.h"
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
int img_width = 120;
int img_height = 53;
void setup() {
Serial.begin(9600);
Serial.println(F("TFT SPI Display - Draw Image"));
TFT_display.begin();
uint16_t SCREEN_WIDTH = TFT_display.width();
uint16_t SCREEN_HEIGHT = TFT_display.height();
int x = (SCREEN_WIDTH - img_width) / 2;
int y = (SCREEN_HEIGHT - img_height) / 2;
TFT_display.fillScreen(WHITE);
TFT_display.drawRGBBitmap(x, y, myBitmap, img_width, img_height);
}
void loop() {
delay(2000);
TFT_display.invertDisplay(true);
delay(2000);
TFT_display.invertDisplay(false);
}
실습
- 스케치와 동일한 폴더에 bitmap.h를 놓습니다.
- TFT 모듈을 Nano ESP32에 연결합니다. VCC에는 3.3V를 사용하세요.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 디스플레이에 프로그램 플래시의 비트맵 이미지가 표시됩니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | 왼쪽 상단 모서리가 (x, y)인 RGB565 PROGMEM 비트맵을 그립니다. | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | 비트맵을 그리기 전에 화면을 한 가지 색상으로 지웁니다. | TFT_display.fillScreen(BLACK); |
워크숍 - SD 카드에서 이미지 그리기
이 워크숍 스테이션에서는 마이크로 SD 카드에서 원시 RGB565 이미지 파일을 디스플레이로 직접 스트리밍합니다. ESP32-S3는 하드웨어 SPI 중재 덕분에 동일한 SPI 버스에서 SD와 디스플레이를 문제없이 처리합니다. 스케치에서 SD 모듈의 CS 핀을 SD_CS_PIN으로 정의합니다.
SD 모듈을 디스플레이와 동일한 SPI 핀(Nano ESP32의 D11/D13/D12)에 연결합니다. SD CS를 선택한 핀에 연결합니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
#include <SD.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT + SD module pins
// TFT + SD module Arduino Nano ESP32
// ----------------------- ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// TFT CS -> D10 (TFT_CS_PIN)
// TFT RESET -> D8 (TFT_RST_PIN)
// TFT DC / RS -> D9 (TFT_DC_PIN)
// SD CS -> D4 (SD_CS)
// SDI / MOSI (shared) -> D11 (hardware SPI MOSI)
// SDO / MISO (shared) -> D12 (hardware SPI MISO)
// SCK (shared) -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
#define SD_CS D4 // SD card chip select (must differ from TFT_CS_PIN)
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define BUFFPIXEL 20
File bmpFile;
uint16_t SCREEN_WIDTH;
uint16_t SCREEN_HEIGHT;
// Helper functions to read BMP file header
uint16_t read16(File &f) {
uint16_t result;
result = f.read();
result |= (f.read() << 8);
return result;
}
uint32_t read32(File &f) {
uint32_t result;
result = f.read();
result |= ((uint32_t)f.read() << 8);
result |= ((uint32_t)f.read() << 16);
result |= ((uint32_t)f.read() << 24);
return result;
}
int32_t readS32(File &f) {
int32_t result;
result = f.read();
result |= ((uint32_t)f.read() << 8);
result |= ((uint32_t)f.read() << 16);
result |= ((uint32_t)f.read() << 24);
return result;
}
bool getBMPDimensions(const char *filename, uint32_t &w, uint32_t &h) {
File f = SD.open(filename);
if (!f) return false;
if (read16(f) != 0x4D42) { f.close(); return false; }
read32(f); // file size
read32(f); // reserved
read32(f); // image offset
read32(f); // DIB header size
w = read32(f);
int32_t sh = readS32(f);
h = (sh < 0) ? -sh : sh;
f.close();
return true;
}
void drawBMP(const char *filename, int x, int y) {
bmpFile = SD.open(filename);
if (!bmpFile) {
Serial.println("File not found");
return;
}
if (read16(bmpFile) != 0x4D42) {
Serial.println("Not a BMP file");
bmpFile.close();
return;
}
uint32_t fileSize = read32(bmpFile);
read32(bmpFile); // Reserved
uint32_t imageOffset = read32(bmpFile);
uint32_t dibHeaderSize = read32(bmpFile);
uint32_t bmpWidth = read32(bmpFile);
int32_t bmpHeight = readS32(bmpFile);
bool topDown = false;
if (bmpHeight < 0) {
bmpHeight = -bmpHeight;
topDown = true;
}
if (read16(bmpFile) != 1) {
Serial.println("Invalid BMP file");
bmpFile.close();
return;
}
uint16_t depth = read16(bmpFile);
if (depth != 24) {
Serial.println("Only 24-bit BMP is supported");
bmpFile.close();
return;
}
if (read32(bmpFile) != 0) {
Serial.println("Unsupported BMP compression");
bmpFile.close();
return;
}
bmpFile.seek(imageOffset);
uint8_t sdbuffer[3 * BUFFPIXEL];
uint16_t color;
uint32_t rowSize = (bmpWidth * 3 + 3) & ~3;
if (x >= SCREEN_WIDTH || y >= SCREEN_HEIGHT) return;
uint32_t maxRow = min((uint32_t)bmpHeight, (uint32_t)(SCREEN_HEIGHT - y));
uint32_t maxCol = min(bmpWidth, (uint32_t)(SCREEN_WIDTH - x));
for (uint32_t row = 0; row < maxRow; row++) {
int32_t rowPos = topDown ? row : bmpHeight - 1 - row;
uint32_t filePosition = imageOffset + rowPos * rowSize;
bmpFile.seek(filePosition);
for (uint32_t col = 0; col < maxCol; col += BUFFPIXEL) {
uint32_t pixelsToRead = min((uint32_t)BUFFPIXEL, maxCol - col);
bmpFile.read(sdbuffer, 3 * pixelsToRead);
for (uint32_t i = 0; i < pixelsToRead; i++) {
uint8_t b = sdbuffer[i * 3];
uint8_t g = sdbuffer[i * 3 + 1];
uint8_t r = sdbuffer[i * 3 + 2];
color = DIYables_TFT_SPI::colorRGB(r, g, b);
if ((x + col + i) < SCREEN_WIDTH && (y + row) < SCREEN_HEIGHT) {
TFT_display.drawPixel(x + col + i, y + row, color);
}
}
}
}
bmpFile.close();
Serial.println("BMP drawn");
}
void setup() {
Serial.begin(9600);
if (!SD.begin(SD_CS)) {
Serial.println("SD card initialization failed!");
return;
}
Serial.println("SD card initialized.");
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
SCREEN_WIDTH = TFT_display.width();
SCREEN_HEIGHT = TFT_display.height();
TFT_display.fillScreen(WHITE);
uint32_t imgWidth, imgHeight;
if (getBMPDimensions("diyables.bmp", imgWidth, imgHeight)) {
int x = (SCREEN_WIDTH - imgWidth) / 2;
int y = (SCREEN_HEIGHT - imgHeight) / 2;
drawBMP("diyables.bmp", x, y);
} else {
Serial.println("Failed to get BMP dimensions");
}
}
void loop() {
}
실습
- SD 모듈을 Nano ESP32에 연결합니다. MOSI (D11), SCK (D13), MISO (D12)를 디스플레이와 공유합니다. SD CS를 SD_CS_PIN으로 정의된 핀에 연결합니다.
- SD 카드의 루트에 원시 RGB565 바이너리 이미지를 복사합니다. 크기는 패널과 일치해야 합니다.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 디스플레이에 SD 카드에서 스트리밍된 이미지가 렌더링됩니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| startWrite() | 디스플레이 CS를 설정하는 원시 SPI 쓰기 세션을 엽니다. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | 데이터를 수신할 사각형 픽셀 영역을 설정합니다. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | RGB565 픽셀 값 버퍼를 패널에 직접 씁니다. | TFT_display.pushColors(buf, 512); |
| endWrite() | SPI 세션을 닫고 디스플레이 CS를 해제합니다. | TFT_display.endWrite(); |
워크숍 - 외부 폰트 사용
이 워크숍 스테이션에서는 기본 래스터 폰트를 더 선명한 Adafruit GFX 호환 커스텀 폰트로 교체합니다. 폰트 디스크립터는 헤더 파일로 포함됩니다. 런타임에 폰트를 전환하는 데 함수 호출 하나만 필요하며, 내장 폰트로 다시 전환하는 것도 마찬가지로 쉽습니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
#include <Fonts/FreeSansBold12pt7b.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define MAGENTA DIYables_TFT_SPI::colorRGB(255, 0, 255)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
void setup() {
Serial.begin(9600);
Serial.println(F("TFT SPI Display - Use external font"));
TFT_display.begin();
TFT_display.setFont(&FreeSansBold12pt7b);
TFT_display.setRotation(1); // Landscape
TFT_display.fillScreen(WHITE);
TFT_display.setTextColor(MAGENTA);
TFT_display.setTextSize(1);
float temperature = 23.5;
float humidity = 78.6;
TFT_display.setCursor(20, 30);
TFT_display.print("Temperature: ");
TFT_display.print(temperature, 1);
TFT_display.print(char(247));
TFT_display.println("C");
TFT_display.setCursor(20, 70);
TFT_display.print("Humidity: ");
TFT_display.print(humidity, 1);
TFT_display.print("%");
}
void loop() {
}
실습
- TFT 모듈을 Nano ESP32에 연결합니다. VCC에는 3.3V를 사용하세요.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 화면에서 커스텀 폰트 렌더링을 관찰합니다. 내장 폰트와 비교하여 개선된 점을 확인하세요.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| setFont(&FontName) | 커스텀 GFX 호환 폰트로 전환합니다. NULL을 전달하면 내장 5×7 폰트가 복원됩니다. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | 텍스트 커서를 지정된 픽셀 좌표에 배치합니다. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | 이후 모든 텍스트 출력의 전경색을 설정합니다. | TFT_display.setTextColor(WHITE); |
| print(text) | 활성 폰트를 사용하여 커서 위치에 문자열을 출력합니다. | TFT_display.print("ESP32 Workshop"); |
워크숍 - 터치 좌표 읽기
이 워크숍 스테이션에서는 Nano ESP32에 연결된 XPT2046 터치 컨트롤러에서 원시 ADC 출력을 읽습니다. 모든 터치 포인트는 원시 X, Y, 압력 Z 값으로 시리얼 모니터에 출력됩니다. 이러한 숫자는 패널이 생성하는 ADC 범위를 알려줍니다 — 캘리브레이션을 적용하기 전에 필수적인 정보입니다.
배선: XPT2046와 디스플레이 사이에 SPI 버스(D11/D13/D12)를 공유합니다. T_CS→D7, T_IRQ→D6. 모든 신호는 3.3V입니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Get Point Example
-----------------------
This example demonstrates how to read and display touch coordinates
using a DIYables SPI TFT display with a 4-wire resistive touch panel.
When you touch the screen, the sketch prints the mapped (screen) X and Y
coordinates to the Serial Monitor and draws a red dot at the touched location.
NOTE:
Run the TouchCalibration example first and paste the calibration values
into setTouchCalibration() below if the touch coordinates are inaccurate.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> D6 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// MOSI and SCK use default hardware SPI pins
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Calibration values.
// Run the TouchCalibration example and update these if touch is inaccurate.
// Typical raw ranges:
// - XPT2046 / HR2046 : ~200..3900 (default below)
// - 4-wire resistive : ~100..900
// =============================================
#define TOUCH_LEFT_X 300
#define TOUCH_RIGHT_X 3700
#define TOUCH_TOP_Y 300
#define TOUCH_BOT_Y 3700
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(0);
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment:
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X,
TOUCH_TOP_Y, TOUCH_BOT_Y);
Serial.println("Touch the screen to see coordinates.");
}
void loop() {
int x, y;
if (TFT_display.getTouch(x, y)) {
Serial.print("Touch at: ");
Serial.print(x);
Serial.print(", ");
Serial.println(y);
TFT_display.fillCircle(x, y, 4, RED);
delay(200);
}
}
실습
- XPT2046을 Nano ESP32에 연결하여 디스플레이와 SPI 버스를 공유합니다. T_CS→D7, T_IRQ→D6.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 9600 보드에서 시리얼 모니터를 엽니다. 화면을 눌러 원시 X, Y, Z 값이 표시되는 것을 확인합니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | 공유 SPI 버스에서 XPT2046을 초기화합니다. 인터럽트 핀이 연결되지 않은 경우 irq에 -1을 전달합니다. | TFT_display.initTouchSPI(7, 6); |
| readTouchRaw(x, y, z) | 캘리브레이션을 우회하여 컨트롤러에서 원시 ADC 값을 읽습니다. 눌렸을 때 true를 반환합니다. | TFT_display.readTouchRaw(x, y, z); |
워크숍 - 터치 그리기
이 워크숍 스테이션에서는 Nano ESP32에 터치 페인트 애플리케이션을 구축합니다. XPT2046은 픽셀 위치로 변환되는 캘리브레이션된 좌표를 제공하며, 각 포인트에 작은 채워진 원이 그려집니다. 손가락을 드래그하여 연속적인 그림 획을 만듭니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Draw Lines Example
-------------------------
Draws lines on the screen following the pen.
- Touch and drag on the screen to draw.
- Lift the pen to stop drawing.
- Touch again to start a new line from the last point.
NOTE:
Run the TouchCalibration example and update setTouchCalibration() below
if the touch coordinates are inaccurate.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> D6 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Calibration values.
// Run the TouchCalibration example and update these if touch is inaccurate.
// Typical raw ranges:
// - XPT2046 / HR2046 : ~200..3900 (default below)
// - 4-wire resistive : ~100..900
// =============================================
#define TOUCH_LEFT_X 300
#define TOUCH_RIGHT_X 3700
#define TOUCH_TOP_Y 300
#define TOUCH_BOT_Y 3700
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define PEN_RADIUS 3
void setup() {
TFT_display.begin();
TFT_display.setRotation(0);
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment:
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X,
TOUCH_TOP_Y, TOUCH_BOT_Y);
}
void loop() {
int x, y;
if (TFT_display.getTouch(x, y)) {
TFT_display.fillCircle(x, y, PEN_RADIUS, RED);
}
}
실습
- 위의 터치 좌표 읽기 스테이션에 설명된 대로 XPT2046을 Nano ESP32에 연결합니다.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 디스플레이를 터치하고 손가락을 드래그하여 화면에 그림을 그립니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | 공유 SPI 버스에서 XPT2046을 시작합니다. | TFT_display.initTouchSPI(7, 6); |
| setTouchCalibration(minX,maxX,minY,maxY) | 원시 ADC 읽기를 화면 픽셀 좌표에 매핑합니다. 네 값은 터치 캘리브레이션 스테이션에서 얻습니다. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | X 또는 Y가 특정 패널이나 배치에서 미러링될 때 터치 축을 반전합니다. setTouchCalibration() 전에 호출합니다. | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | 화면 픽셀의 캘리브레이션된 터치 좌표를 반환합니다. 화면이 눌려 있는 동안 true를 반환합니다. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | 터치 포인트에 점을 그려 그림 획을 형성합니다. | TFT_display.fillCircle(x, y, 3, RED); |
워크숍 - 터치 버튼
이 워크숍 스테이션에서는 손가락 탭에 반응하는 인터랙티브 온스크린 버튼을 구성합니다. 각 버튼은 색상이 있는 사각형이며, 모든 폴링 사이클마다 각 버튼의 경계에 대해 터치 좌표를 확인합니다. 버튼 내에서 탭이 감지되면 버튼 상태가 변경되고 동작이 실행됩니다.
T_IRQ는 여기서 선택 사항입니다. 인터럽트 핀 없이 폴링 모드로 실행하려면 irq 인수로 -1을 전달합니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Button Press/Release Example
------------------------------------
This example shows how to detect press and release events on a rectangular
button using a DIYables SPI TFT display with a 4-wire resistive touch panel.
When you touch inside the button, it changes colour and shows "PRESSED".
When you release, it returns to its original state.
NOTE:
Run the TouchCalibration example and update setTouchCalibration() below
if the touch coordinates are inaccurate.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> -1 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Calibration values.
// Run the TouchCalibration example and update these if touch is inaccurate.
// Typical raw ranges:
// - XPT2046 / HR2046 : ~200..3900 (default below)
// - 4-wire resistive : ~100..900
// =============================================
#define TOUCH_LEFT_X 300
#define TOUCH_RIGHT_X 3700
#define TOUCH_TOP_Y 300
#define TOUCH_BOT_Y 3700
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define BLACK DIYables_TFT_SPI::colorRGB( 0, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define GRAY DIYables_TFT_SPI::colorRGB(128, 128, 128)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define BUTTON_X 30
#define BUTTON_Y 100
#define BUTTON_W 180
#define BUTTON_H 60
#define DEBOUNCE_DELAY 50
bool lastPressed = false;
bool stablePressed = false;
unsigned long lastDebounceTime = 0;
void drawButton(bool pressed) {
uint16_t bg = pressed ? GRAY : RED;
TFT_display.fillRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, bg);
TFT_display.drawRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BLACK);
TFT_display.setTextColor(WHITE, bg);
TFT_display.setTextSize(3);
TFT_display.setCursor(BUTTON_X + 10, BUTTON_Y + 16);
TFT_display.print(pressed ? "PRESSED" : " PRESS ");
}
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(0);
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment:
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X,
TOUCH_TOP_Y, TOUCH_BOT_Y);
drawButton(false);
}
void loop() {
int x, y;
bool pressed = false;
if (TFT_display.getTouch(x, y)) {
if (x >= BUTTON_X && x < (BUTTON_X + BUTTON_W) &&
y >= BUTTON_Y && y < (BUTTON_Y + BUTTON_H)) {
pressed = true;
}
}
if (pressed != lastPressed) {
lastDebounceTime = millis();
}
lastPressed = pressed;
if ((millis() - lastDebounceTime) > DEBOUNCE_DELAY) {
if (pressed != stablePressed) {
stablePressed = pressed;
drawButton(stablePressed);
Serial.println(stablePressed ? "Button PRESSED" : "Button RELEASED");
}
}
}
실습
- T_CS를 D7에 연결합니다. T_IRQ는 연결하지 않아도 됩니다.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 디스플레이의 각 버튼을 탭합니다. 버튼이 강조 표시되고 동작이 트리거되는 것을 확인합니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | XPT2046을 초기화합니다. 인터럽트 핀을 비활성화하려면 irq에 -1을 전달합니다. | TFT_display.initTouchSPI(7, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | getTouch()가 정확한 화면 좌표를 반환하도록 캘리브레이션을 적용합니다. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | X 또는 Y가 특정 패널이나 배치에서 미러링될 때 터치 축을 반전합니다. setTouchCalibration() 전에 호출합니다. | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | 현재 캘리브레이션된 터치 위치를 가져옵니다. 화면이 눌려 있는 동안 true를 반환합니다. | if (TFT_display.getTouch(x, y)) { ... } |
| fillRect(x, y, w, h, color) | 버튼을 단색으로 채워진 사각형으로 렌더링합니다. | TFT_display.fillRect(10, 10, 120, 60, BLUE); |
워크숍 - 터치 캘리브레이션
이 워크숍 스테이션에서는 특정 패널에 맞게 XPT2046 터치 컨트롤러를 캘리브레이션합니다. 화면 모서리를 탭하라는 메시지가 표시될 때 각 모서리를 터치하고 시리얼 모니터에 출력되는 최소 및 최대 X, Y 값을 기록합니다. 그 네 숫자가 다른 모든 터치 스테이션에서 사용할 캘리브레이션 상수입니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Screen Calibration Example
---------------------------------
This example measures the raw touch coordinates at all four screen corners
and prints ready-to-use calibration values to the Serial Monitor.
It uses readTouchRaw() directly — it does NOT rely on getTouch() or any
existing calibration values, so it works even when touch is completely broken.
INSTRUCTIONS:
1. Upload this sketch to your board.
2. Open the Serial Monitor (Ctrl+Shift+M) and set baud rate to 9600.
3. The screen shows a blinking red dot in each corner, numbered 1-4:
1 = Top-left
2 = Top-right
3 = Bottom-right
4 = Bottom-left
4. Press and HOLD firmly on the blinking dot.
Keep holding until the Serial Monitor prints "Captured!" for that corner.
5. Release, then wait for the next dot to appear and repeat.
6. After all 4 corners, the Serial Monitor prints the calibration values and
a ready-to-use setTouchCalibration() call. Copy it into your sketch.
NOTE: While waiting, the Serial Monitor continuously prints the live raw
Z/X/Y readings so you can confirm that touch is being detected.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> D6 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// Minimum pressure to count as a valid touch.
#define TOUCH_Z_MIN 10
// How many consecutive valid samples required before a corner is accepted.
#define SAMPLES_NEEDED 10
// Delay between samples (ms).
#define SAMPLE_DELAY_MS 30
#define DOT_RADIUS 12
#define BLACK DIYables_TFT_SPI::colorRGB( 0, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
// Corner pixel positions - filled in setup() once display size is known.
// Order: 0=top-left, 1=top-right, 2=bottom-right, 3=bottom-left
int cx[4], cy[4];
// Captured averaged raw values per corner.
int cap_x[4], cap_y[4];
// -----------------------------------------------------------------------
void drawDot(int corner, bool on) {
uint16_t color = on ? RED : WHITE;
TFT_display.fillCircle(cx[corner], cy[corner], DOT_RADIUS, color);
TFT_display.setTextSize(2);
TFT_display.setTextColor(BLACK, color);
TFT_display.setCursor(cx[corner] - 6, cy[corner] - 8);
TFT_display.print(corner + 1);
}
void captureCorner(int corner) {
const char* names[] = { "Top-left", "Top-right", "Bottom-right", "Bottom-left" };
Serial.println();
Serial.print("Corner "); Serial.print(corner + 1);
Serial.print(" ("); Serial.print(names[corner]); Serial.println(")");
Serial.println(" Press and HOLD firmly on the blinking dot.");
Serial.println(" Keep holding until you see 'Captured!'");
unsigned long lastBlink = 0;
unsigned long lastPrint = 0;
bool dotOn = false;
int goodSamples = 0;
long sumX = 0, sumY = 0;
while (true) {
// Blink the dot
if (millis() - lastBlink > 400) {
lastBlink = millis();
dotOn = !dotOn;
drawDot(corner, dotOn);
}
int raw_x, raw_y, z;
TFT_display.readTouchRaw(raw_x, raw_y, z);
// Print live readings every 500 ms
if (millis() - lastPrint > 500) {
lastPrint = millis();
Serial.print(" Z="); Serial.print(z);
Serial.print(" X="); Serial.print(raw_x);
Serial.print(" Y="); Serial.println(raw_y);
}
if (z >= TOUCH_Z_MIN) {
sumX += raw_x;
sumY += raw_y;
goodSamples++;
if (goodSamples >= SAMPLES_NEEDED) {
cap_x[corner] = sumX / goodSamples;
cap_y[corner] = sumY / goodSamples;
Serial.print(" Captured! raw_x="); Serial.print(cap_x[corner]);
Serial.print(" raw_y="); Serial.println(cap_y[corner]);
drawDot(corner, false);
delay(500);
return;
}
} else {
goodSamples = 0;
sumX = 0;
sumY = 0;
}
delay(SAMPLE_DELAY_MS);
}
}
// -----------------------------------------------------------------------
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(0); // Always calibrate in rotation 0
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment the line below
// BEFORE calibrating (so the printed values match your panel):
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
int w = TFT_display.width();
int h = TFT_display.height();
int m = DOT_RADIUS + 4;
cx[0] = m; cy[0] = m;
cx[1] = w - m; cy[1] = m;
cx[2] = w - m; cy[2] = h - m;
cx[3] = m; cy[3] = h - m;
Serial.println("=== Touch Calibration ===");
for (int i = 0; i < 4; i++) {
captureCorner(i);
}
// Derive calibration values from the four corners
int min_x = (cap_x[0] + cap_x[3]) / 2; // left edge
int max_x = (cap_x[1] + cap_x[2]) / 2; // right edge
int min_y = (cap_y[0] + cap_y[1]) / 2; // top edge
int max_y = (cap_y[2] + cap_y[3]) / 2; // bottom edge
Serial.println();
Serial.println("=== Calibration Results ===");
Serial.print(" Left X (min_x): "); Serial.println(min_x);
Serial.print(" Right X (max_x): "); Serial.println(max_x);
Serial.print(" Top Y (min_y): "); Serial.println(min_y);
Serial.print(" Bot Y (max_y): "); Serial.println(max_y);
Serial.println();
Serial.println("Copy this line into your sketch:");
Serial.print(" TFT_display.setTouchCalibration(");
Serial.print(min_x); Serial.print(", ");
Serial.print(max_x); Serial.print(", ");
Serial.print(min_y); Serial.print(", ");
Serial.print(max_y); Serial.println(");");
TFT_display.fillScreen(WHITE);
TFT_display.setTextColor(BLACK);
TFT_display.setTextSize(2);
TFT_display.setCursor(10, 10);
TFT_display.println("Done! Check");
TFT_display.setCursor(10, 35);
TFT_display.println("Serial Monitor");
}
void loop() {}
실습
- 터치 좌표 읽기 스테이션에 설명된 대로 XPT2046을 Nano ESP32에 연결합니다.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 9600 보드에서 시리얼 모니터를 엽니다. 메시지에 따라 각 모서리를 터치합니다.
- 출력된 네 값을 기록하여 다른 모든 터치 스테이션의 setTouchCalibration()에서 사용합니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | XPT2046 컨트롤러를 초기화합니다. | TFT_display.initTouchSPI(7, 6); |
| readTouchRaw(x, y, z) | 캘리브레이션 범위를 측정하기 위해 원시 ADC 값을 읽습니다. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | getTouch()가 원시 값을 픽셀 좌표에 매핑하도록 캘리브레이션 상수를 저장합니다. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | X 또는 Y가 특정 패널이나 배치에서 미러링될 때 터치 축을 반전합니다. 저장된 값이 패널과 일치하도록 캘리브레이션 실행 전에 호출합니다. | TFT_display.setTouchInvertY(true); |
워크숍 - 커스텀 SPI
이 워크숍 스테이션에서는 디스플레이를 비기본 SPI 버스로 라우팅합니다. Nano ESP32는 여러 하드웨어 SPI 컨트롤러를 지원하는 ESP32-S3를 기반으로 합니다. 생성자에 커스텀 SPIClass 인스턴스를 전달하면 디스플레이를 사용 가능한 SPI 주변 장치에 할당할 수 있습니다 — 기본 버스가 다른 SPI 모드 설정이 필요한 센서와 공유되는 경우에 유용합니다.
/*
* 이 아두이노 나노 esp32 코드는 newbiely.kr 에서 개발되었습니다
* 이 아두이노 나노 esp32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
This example demonstrates how to use a custom (non-default) SPI bus
with the DIYables TFT SPI library. This is useful on boards that have
multiple SPI interfaces, such as:
- ESP32: HSPI / VSPI
- Arduino Giga / Portenta: SPI1
- Raspberry Pi Pico: SPI1
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32 - default SPI bus)
// ---------------------------------------------
// NOTE: The Arduino Nano ESP32 exposes one hardware SPI bus on the Nano
// header pins (D11=MOSI, D13=SCK, D12=MISO). MY_SPI must remain &SPI
// and the wiring uses the standard hardware SPI mapping below.
//
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Select SPI bus
// =============================================
// --- Default SPI (D11/D13/D12 on Nano ESP32) ---
#define MY_SPI &SPI
// =============================================
// Create display object with custom SPI bus
// (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI);
#define BLACK DIYables_TFT_SPI::colorRGB(0, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define GREEN DIYables_TFT_SPI::colorRGB(0, 255, 0)
#define BLUE DIYables_TFT_SPI::colorRGB(0, 0, 255)
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
TFT_display.fillScreen(BLACK);
uint16_t w = TFT_display.width();
uint16_t h = TFT_display.height();
// Draw a simple test pattern
TFT_display.fillRect(0, 0, w / 3, h, RED);
TFT_display.fillRect(w / 3, 0, w / 3, h, GREEN);
TFT_display.fillRect(w * 2 / 3, 0, w / 3, h, BLUE);
TFT_display.setTextColor(WHITE);
TFT_display.setTextSize(2);
TFT_display.setCursor(10, h / 2 - 10);
TFT_display.print("Custom SPI bus OK");
}
void loop() {
// Nothing to do
}
실습
- 사용하려는 SPI 버스와 일치하는 스케치의 SPIClass 생성자 주석을 해제하고 디스플레이를 해당 핀에 연결합니다.
- USB-C를 통해 Nano ESP32를 컴퓨터에 연결합니다.
- Arduino IDE에서 보드와 포트를 선택하고 코드를 붙여넣은 다음 Upload를 클릭합니다.
- 디스플레이가 선택된 SPI 버스에서 시작되고 성공을 확인하는 컬러 바 패턴을 렌더링합니다.
메서드 참조
| Method | Action | Syntax |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | 마지막 인수로 명시적 SPIClass 포인터를 받는 생성자. 생략하면 기본값은 &SPI입니다. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI); |
| begin() | 구성된 SPI 버스에서 디스플레이를 초기화합니다. | TFT_display.begin(); |
문제 해결
| Issue | Possible Cause | Resolution |
|---|---|---|
| 검은 화면 | VCC가 5V이거나 CS/DC가 연결되지 않음 | VCC에 3.3V 사용; CS와 DC 배선 확인 |
| 화면에 쓰레기 표시 | 잘못된 드라이버 생성자 활성화 | 하나의 생성자만 주석 해제 |
| 이미지가 이동하거나 없음 | 생성자의 너비 또는 높이가 잘못됨 | 패널의 물리적 크기에 맞게 값 조정 |
| 터치가 반응하지 않음 | 캘리브레이션 없음 | TouchCalibration 예제를 실행하고 출력 값 복사 |
| 업로드 실패 | 보드가 잘못된 모드에 있음 | RESET을 누르면서 BOOT을 누른 다음 업로드 재시도 |
플랫폼 지원
라이브러리는 Arduino 표준 API 위에 완전히 구축되어 있으며 모든 Arduino 호환 플랫폼(architectures=*)을 지원합니다.