Arduino - TFT LCD Touch Display SPI
This tutorial instructs you how to use an SPI TFT display with Arduino. In detail, we will learn:
- How to wire an SPI TFT display module to an Arduino.
- How to draw shapes, lines, and fill areas with color.
- How to display text and numeric values on screen.
- How to draw bitmap images from program memory (PROGMEM).
- How to draw bitmap images loaded from an SD card.
- How to render text with a custom external font.
- How to read raw touch coordinates from an XPT2046 controller.
- How to draw on screen by dragging a finger across the display.
- How to create interactive touch buttons on screen.
- How to calibrate the touch screen.
- How to use a secondary or custom SPI bus for the display.
This tutorial covers both touch and non-touch SPI TFT LCD displays. It works with 1.3, 1.54, 2.2, 2.4, 2.8, 3.2, and 3.5 inch panels driven by ILI9341, ILI9488, or ST7789 controller chips.
Tip — simpler and faster alternative: If you are using an Arduino Uno, consider the TFT Touch Shield instead. It plugs directly onto the Uno header — no jumper wires required. It uses an 8-bit parallel interface, which transfers pixel data significantly faster than SPI.
Hardware Required
Or you can buy the following kits:
| 1 | × | DIYables STEM V3 Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some links in this section are Amazon affiliate links. If you make a purchase through these links, we may earn a commission at no extra cost to you.
Additionally, some links direct to products from our own brand, DIYables .
Additionally, some links direct to products from our own brand, DIYables .
About the SPI TFT Display
An SPI TFT display is a full-color LCD panel controlled over the Serial Peripheral Interface (SPI) bus. It uses a dedicated driver chip - most commonly the ILI9341, ILI9488, or ST7789 - to receive drawing commands and manage the pixel data.
Key facts:
- ILI9341 - 16-bit RGB565 color, up to 40 MHz SPI.
- ILI9488 - 18-bit RGB666 color over SPI, up to 24 MHz SPI.
- ST7789 - 16-bit RGB565 color, up to 40 MHz SPI.
Recommendation: If you have not yet purchased a display, we recommend the ST7789 driver. It is widely available, runs at full 40 MHz SPI speed, and is the most straightforward choice for new projects.
Pinout
Most SPI TFT LCD displays have the following pins:
Display pins:
| Pin | Function |
|---|---|
| VCC | Power supply |
| GND | Ground |
| CS | Chip Select — pulled low to select the display on the SPI bus |
| DC / RS | Data / Command select — high for pixel data, low for commands |
| RST | Hardware reset — optional; tie to 3.3V if unused |
| MOSI / SDI / SDA | SPI data in (MCU → display) |
| SCK / CLK | SPI clock |
| MISO / SDO | SPI data out (display → MCU) — optional for display-only use |
| LED / BL / BLK | Backlight power — connect to 3.3V or a PWM pin for dimming |
SD card pins (if your application needs to access the SD card):
| Pin | Function |
|---|---|
| SD_CS / TF_CS | SD card Chip Select |
| MOSI / SDI | MOSI — data from MCU to SD card |
| SCK / CLK | SCK — SPI clock |
| MISO / SDO | MISO — data from SD card to MCU |
For TFT displays that support touch, there are additional touch pins (if your application uses the touch function and the display supports it):
| Pin | Function |
|---|---|
| T_CS | Touch controller Chip Select |
| T_CLK | SCK — SPI clock |
| T_DIN | MOSI — data from MCU to touch controller |
| T_DO | MISO — data from touch controller to MCU |
| T_IRQ | Touch interrupt — optional; signals when the screen is being touched |
Note: Some non-touch display modules also expose T_CS, T_CLK, T_DIN, T_DO, and T_IRQ pins. These are non-functional on those boards — the touch controller IC is not populated. They appear because the PCB reuses the same layout as the touch-enabled version to reduce manufacturing variants.
Wiring Diagram
Note — level converter optional: These SPI TFT display modules include on-board level shifting on their signal lines, so the 5V logic from the Arduino Uno can drive MOSI, SCK, CS, DC, RST, and T_CS (if using touch) directly — this wiring is tested and works. For a permanent build, adding a 5V to 3.3V Level Converter on the MCU-driven signal lines is still the safer choice for long-term reliability. The MISO line (display → MCU) never needs one.
Note — SDO (MISO) is optional: The SDO (MISO) line only carries data from the display back to the board. None of the example code in this tutorial reads from the display, so this pin can be left unconnected. On modules where the touch controller shares the same SPI bus, a connected SDO line can interfere with communication, so leaving it unconnected is recommended.
Without Touch
Connect MOSI to D11, SCK to D13, MISO to D12 on the Arduino Uno. CS, DC, and RST can be any available GPIO — D10, D8, D9 are used in the examples.
Display:
| TFT Pin | Arduino Uno Pin | Description |
|---|---|---|
| VCC | 3.3V | Power supply (3.3V only — the display runs at 3.3V) |
| GND | GND | Ground |
| CS | D10 | Chip Select |
| DC / RS | D8 | Data / Command select |
| RST | D9 | Reset (optional) |
| MOSI / SDI | D11 | Hardware SPI MOSI |
| SCK | D13 | Hardware SPI clock |
| MISO / SDO | D12 | Hardware SPI MISO (optional) |
| LED / BL | 3.3V | Backlight power |
SD card (if your application needs to access the SD card):
| SD Pin | Arduino Uno Pin | Description |
|---|---|---|
| SD_CS / TF_CS | any free GPIO | SD card Chip Select |
| MOSI / SDI | D11 | Shared with display MOSI (D11) |
| SCK / CLK | D13 | Shared with display SCK (D13) |
| MISO / SDO | D12 | Shared with display MISO (D12) |
This image is created using Fritzing. Click to enlarge image
With Touch
Connect the XPT2046 touch controller to the Arduino Uno SPI bus, sharing D11, D13, and D12 with the display.
Display:
| TFT Pin | Arduino Uno Pin | Description |
|---|---|---|
| VCC | 3.3V | Power supply (3.3V only — the display runs at 3.3V) |
| GND | GND | Ground |
| CS | D10 | Chip Select |
| DC / RS | D8 | Data / Command select |
| RST | D9 | Reset (optional) |
| MOSI / SDI | D11 | Hardware SPI MOSI |
| SCK | D13 | Hardware SPI clock |
| MISO / SDO | D12 | Hardware SPI MISO (optional) |
| LED / BL | 3.3V | Backlight power |
Touch controller (if your application uses the touch function and the display supports it):
| Touch Pin | Arduino Uno Pin | Description |
|---|---|---|
| T_CS | any free GPIO | Touch Chip Select |
| T_IRQ | any free GPIO | Touch interrupt (optional) |
| T_DIN | D11 | Shared with display MOSI (D11) |
| T_CLK | D13 | Shared with display SCK (D13) |
| T_DO | D12 | Shared with display MISO (D12) |
This image is created using Fritzing. Click to enlarge image
If your MCU has two or more hardware SPI interfaces, you can assign each peripheral (display, SD card, touch controller) to its own dedicated SPI bus. If your MCU has only one hardware SPI interface, all three peripherals share the same three data lines (MOSI, SCK, MISO) — on the Uno these are D11, D13, and D12. Each peripheral has its own CS pin, so only one is active at a time. The DIYables_TFT_SPI library manages both the display and the XPT2046 touch controller through a single API — no separate SPI library is needed for the touch side.
Library Installation
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port.
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search "DIYables_TFT_SPI", then find the DIYables_TFT_SPI library by DIYables.
- Click Install button to install the latest version of the library.
- When prompted to install dependencies, click Install All to also install the Adafruit GFX Library.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
1
void setup() {
Basic Structure
Every sketch using the DIYables_TFT_SPI library follows this basic structure:
#include <DIYables_TFT_SPI.h>
#define TFT_CS_PIN 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// Create a display object - choose 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); // 0=portrait, 1=landscape, 2=portrait flipped, 3=landscape flipped
}
void loop() {
// drawing code here
}
The width and height passed to the constructor must match the physical resolution printed on your module's datasheet. Modules using the same driver chip are sold in different sizes - for example, ST7789 modules come in 240x320, 240x240, 135x240, and other variants.
Arduino Code - Draw Shapes
The DrawShapes example shows how to draw circles, triangles, rectangles, rounded rectangles, and lines using the built-in Adafruit GFX drawing functions.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// ---------------------------------------------
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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);
}
Quick Steps
- Wire the TFT display to the Arduino following the wiring diagram above.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port.
- Copy the above code and paste it to the editor of Arduino IDE.
- Change the constructor line to match your display driver and resolution.
- Click Upload button on Arduino IDE to upload code to Arduino.
- The display shows a pattern of colored shapes that fills and redraws every few seconds.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.begin() | Initialize the display. Call once in setup(). | TFT_display.begin(); |
| TFT_display.setRotation(r) | Set screen orientation. 0=portrait, 1=landscape. | TFT_display.setRotation(1); |
| TFT_display.fillScreen(color) | Fill entire screen with one color. | TFT_display.fillScreen(BLACK); |
| DIYables_TFT_SPI::colorRGB(r,g,b) | Convert RGB values to a 16-bit color. | colorRGB(255, 0, 0) |
| TFT_display.drawCircle(x,y,r,color) | Draw a circle outline. | TFT_display.drawCircle(60, 60, 30, RED); |
| TFT_display.fillCircle(x,y,r,color) | Draw a filled circle. | TFT_display.fillCircle(60, 60, 30, RED); |
| TFT_display.drawRect(x,y,w,h,color) | Draw a rectangle outline. | TFT_display.drawRect(10, 10, 80, 40, BLUE); |
| TFT_display.fillRect(x,y,w,h,color) | Draw a filled rectangle. | TFT_display.fillRect(10, 10, 80, 40, BLUE); |
| TFT_display.drawLine(x0,y0,x1,y1,color) | Draw a line. | TFT_display.drawLine(0, 0, 100, 100, GREEN); |
Arduino Code - Show Text and Number
The ShowTextAndNumber example demonstrates how to print text strings and numeric values on the display at different sizes and positions.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// ---------------------------------------------
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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() {
}
Quick Steps
- Wire the display and upload the code as described above.
- The display prints several lines of text with different colors and sizes.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.setTextColor(color) | Set the text foreground color. | TFT_display.setTextColor(WHITE); |
| TFT_display.setTextSize(size) | Set text scale (1=6x8 px, 2=12x16 px, ...). | TFT_display.setTextSize(2); |
| TFT_display.setCursor(x, y) | Move the text cursor to a position. | TFT_display.setCursor(10, 20); |
| TFT_display.print(value) | Print a string or number at the cursor. | TFT_display.print("Hello!"); |
| TFT_display.println(value) | Print and move cursor to next line. | TFT_display.println(42); |
Arduino Code - Draw Image
The DrawImage example displays a full-color RGB565 bitmap stored in program memory (PROGMEM). The pixel data lives in a companion bitmap.h header file as a const uint16_t array and is never copied into SRAM, making it suitable for memory-constrained boards. Add bitmap.h to the same folder as the sketch before compiling.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// ---------------------------------------------
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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);
}
Quick Steps
- Wire the TFT display to the Arduino following the wiring diagram above.
- Place bitmap.h in the same folder as the sketch.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- The display shows the bitmap image stored in program memory.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.drawRGBBitmap(x,y,bitmap,w,h) | Draw an RGB565 bitmap from PROGMEM at position (x, y). The array must be declared PROGMEM. | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| TFT_display.fillScreen(color) | Clear the screen to a solid color before drawing the bitmap. | TFT_display.fillScreen(BLACK); |
Arduino Code - Draw Image SD Card
The DrawImageSDcard example reads a raw RGB565 binary image file directly from a micro SD card and streams pixel data to the display in chunks, avoiding the need to load the full image into RAM. Connect an SD card module to the same SPI bus as the display and define its CS pin as SD_CS_PIN in the sketch.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// ---------------------------------------------
// TFT + SD module Arduino Uno / Nano
// ----------------------- ---------------------------------
// VCC -> 5V
// GND -> GND
// TFT CS -> D10 (TFT_CS_PIN)
// TFT RESET -> D9 (TFT_RST_PIN)
// TFT DC / RS -> D8 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
#define SD_CS 4 // 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() {
}
Quick Steps
- Wire the SD card module to the Arduino. Share the MOSI (D11), SCK (D13), and MISO (D12) lines with the display. Connect the SD module CS to the pin defined as SD_CS_PIN.
- Copy a raw RGB565 binary image to the root of the SD card. The file dimensions must match the panel's width and height.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- The display shows the image streamed from the SD card.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.startWrite() | Begin a direct SPI transaction. Keeps CS asserted for the duration. | TFT_display.startWrite(); |
| TFT_display.setAddrWindow(x0,y0,x1,y1) | Set the rectangular region of pixels to write. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| TFT_display.pushColors(buf, len) | Stream a buffer of RGB565 pixel words to the display. | TFT_display.pushColors(buf, 512); |
| TFT_display.endWrite() | End the SPI transaction and release CS. | TFT_display.endWrite(); |
Arduino Code - Use External Font
The UseExternalFont example renders text using an Adafruit GFX-compatible custom font for sharper, higher-quality glyphs. The font is included as a header file and activated by calling setFont(). Pass NULL to revert to the built-in 5×7 pixel font at any time.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// ---------------------------------------------
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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() {
}
Quick Steps
- Wire the TFT display to the Arduino following the wiring diagram above.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- The display renders text in the custom font. Compare it to the built-in font to see the improvement in sharpness.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.setFont(&FontName) | Switch to a custom GFX-compatible font. Pass NULL to restore the built-in 5×7 font. | TFT_display.setFont(&FreeSans12pt7b); |
| TFT_display.setCursor(x, y) | Position the text cursor before calling print(). | TFT_display.setCursor(10, 40); |
| TFT_display.setTextColor(color) | Set the text foreground color. | TFT_display.setTextColor(WHITE); |
| TFT_display.print(text) | Print a string using the active font. | TFT_display.print("Hello!"); |
Arduino Code - Touch Get Point
The TouchGetPoint example initializes the XPT2046 touch controller and reads raw ADC coordinates whenever the screen is touched. Raw values are printed to the Serial Monitor. Run this example first to understand the numeric range of your panel before applying calibration.
Wiring: connect T_CLK, T_DIN, and T_DO to the same SPI pins as the display (D13, D11, D12). Connect T_CS to pin 7 and T_IRQ to pin 6. The XPT2046 shares the SPI bus with the display.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// =============================================
// TFT pins (always required)
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 Uno / Nano
// ------------ ---------------------------------
// T_CS -> D2 (TOUCH_CS_PIN)
// T_IRQ -> D2 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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 2 // 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);
}
}
Quick Steps
- Wire the XPT2046 touch controller to the Arduino. T_CLK→D13, T_DIN→D11, T_DO→D12 (shared with display). T_CS→D7, T_IRQ→D6.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- Open the Serial Monitor at 9600 baud. Touch the screen to see raw X, Y, and pressure Z values printed.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.initTouchSPI(cs, irq) | Initialize the XPT2046 on the shared SPI bus. Pass -1 for irq if the pin is not connected. | TFT_display.initTouchSPI(7, 6); |
| TFT_display.readTouchRaw(x, y, z) | Read raw ADC values from the touch controller. Returns true when the screen is being touched. | TFT_display.readTouchRaw(x, y, z); |
Arduino Code - Touch Draw
The TouchDraw example turns the display into a finger-painting canvas. As you drag a finger across the screen, colored dots are placed at each touch coordinate using calibrated positions, creating a continuous drawn line.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// =============================================
// TFT pins (always required)
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 Uno / Nano
// ------------ ---------------------------------
// T_CS -> D2 (TOUCH_CS_PIN)
// T_IRQ -> D2 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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 2 // 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);
}
}
Quick Steps
- Wire the XPT2046 touch controller to the Arduino as described in the Touch Get Point section above.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- Drag a finger across the display to draw on screen. Lift and drag again to start a new stroke.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.initTouchSPI(cs, irq) | Initialize the XPT2046 on the shared SPI bus. | TFT_display.initTouchSPI(7, 6); |
| TFT_display.setTouchCalibration(minX,maxX,minY,maxY) | Map raw ADC values to screen pixel coordinates. Obtain the four values from the TouchCalibration example. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| TFT_display.setTouchInvertX(invert) / TFT_display.setTouchInvertY(invert) | Flips the touch axis when X or Y is mirrored on your specific panel or batch. Call BEFORE setTouchCalibration(). | TFT_display.setTouchInvertY(true); |
| TFT_display.getTouch(x, y) | Get calibrated touch position in screen pixels. Returns true when the screen is being touched. | if (TFT_display.getTouch(x, y)) { ... } |
| TFT_display.fillCircle(x, y, r, color) | Draw a filled dot at the touch position. | TFT_display.fillCircle(x, y, 3, RED); |
Arduino Code - Touch Calibration
The TouchCalibration example walks you through finding the correct calibration values for your specific XPT2046 panel. Touch the corners of the screen when prompted and read the min/max X and Y values from the Serial Monitor. Copy those four numbers into setTouchCalibration() in all other touch examples.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano)
// =============================================
// TFT pins (always required)
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 Uno / Nano
// ------------ ---------------------------------
// T_CS -> D2 (TOUCH_CS_PIN)
// T_IRQ -> D2 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// 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 2 // 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() {}
Quick Steps
- Wire the XPT2046 touch controller to the Arduino as described in the Touch Get Point section.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- Open the Serial Monitor at 9600 baud. Touch each corner of the screen as instructed.
- Note the four printed values (minX, maxX, minY, maxY) and paste them into setTouchCalibration() in your other touch sketches.
API Summary
| Method | Description | Example |
|---|---|---|
| TFT_display.initTouchSPI(cs, irq) | Initialize the XPT2046 touch controller. | TFT_display.initTouchSPI(7, 6); |
| TFT_display.readTouchRaw(x, y, z) | Read raw ADC values used to determine the calibration range. | TFT_display.readTouchRaw(x, y, z); |
| TFT_display.setTouchCalibration(minX,maxX,minY,maxY) | Store calibration constants so getTouch() maps raw values to pixel coordinates. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| TFT_display.setTouchInvertX(invert) / TFT_display.setTouchInvertY(invert) | Flips the touch axis when X or Y is mirrored on your specific panel or batch. Call BEFORE running calibration so the stored values match your panel. | TFT_display.setTouchInvertY(true); |
Arduino Code - Custom SPI
The CustomSPI example demonstrates how to pass an explicit SPIClass pointer to the display constructor. This matters when another peripheral already occupies the default SPI bus or when you need to limit the SPI clock speed for long or noisy cables.
The Arduino Uno has one hardware SPI bus on D11 (MOSI), D13 (SCK), and D12 (MISO). The example shows how to pass &SPI explicitly and how to configure a lower maximum SPI speed.
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-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 Uno / Nano - default SPI bus)
// ---------------------------------------------
// NOTE: Uno / Nano have only ONE hardware SPI bus, so this example is
// most useful on boards with multiple buses (ESP32, Giga, RP2040...).
// On Uno / Nano, MY_SPI must remain &SPI and the wiring is the standard
// hardware SPI mapping below.
//
// TFT module Arduino Uno / Nano
// ------------ ---------------------------------
// VCC -> 5V
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D9 (TFT_RST_PIN)
// DC / RS -> D8 (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 10
#define TFT_DC_PIN 8
#define TFT_RST_PIN 9
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Select alternate SPI bus (uncomment for your board)
// =============================================
// --- ESP32: use HSPI ---
// SPIClass hspi(HSPI);
// #define MY_SPI &hspi
// --- Arduino Giga / Portenta / RP2040: use SPI1 ---
// #define MY_SPI &SPI1
// --- Default SPI (fallback) ---
#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);
// For ESP32 HSPI: optionally remap pins before begin()
// hspi.begin(14, 12, 13, -1); // SCK, MISO, MOSI, SS
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
}
Quick Steps
- Wire the TFT display to the Arduino as shown in the wiring diagram.
- Connect the Arduino board to your computer with a USB cable.
- Open Arduino IDE, select the right board and port, paste the code, and click Upload.
- The display initializes on the explicit SPI bus and shows a color-bar test pattern.
API Summary
| Method | Description | Example |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Constructor accepting an explicit SPIClass pointer as the last argument. Omit it to default to &SPI. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI); |
| TFT_display.begin() | Initialize the display on the configured SPI bus. | TFT_display.begin(); |
Troubleshoot
If the code is not working, there are some common issues you can troubleshoot:
- Black screen: Check that VCC, GND, CS, DC, MOSI, and SCK are all wired correctly. A missing CS or DC wire is the most common cause.
- Wrong driver: Make sure you uncommented the constructor line that matches your module's driver chip (ILI9341, ILI9488, or ST7789). A mismatched driver will show a blank or all-white screen.
- Wrong resolution: The width and height passed to the constructor must match your panel. An incorrect size causes the image to be shifted or clipped.
- Garbage on screen: Verify MOSI and SCK are on the hardware SPI pins (D11 and D13 on Uno). Swapping them is a common mistake.
- Touch not responding: Run the TouchCalibration example to find the correct calibration values for your panel.
Platform Support
The DIYables_TFT_SPI library uses standard Arduino SPI APIs and supports all Arduino-compatible platforms (architectures=*). The Adafruit GFX Library dependency is also cross-platform.