SENSORS/ACTUATORS

INTERNET OF THING (IoT)

Arduino Nano 33 IoT - HTTP Request

Arduino Nano 33 IoT - TFT LCD Touch Display SPI

Discover how to use an SPI TFT display with the Arduino Nano 33 IoT and the DIYables_TFT_SPI library. The Nano 33 IoT runs a SAMD21 Cortex-M0+ at 48 MHz, includes Wi-Fi and Bluetooth Low Energy, and operates at 3.3V logic throughout. Because most SPI TFT modules also run at 3.3V, the two pair together without any level shifting.

Along the way, you will discover:

How to wire a 3.3V SPI TFT display to the Nano 33 IoT.
How to draw shapes and graphics primitives.
How to display text strings and numeric values.
How to draw bitmap images stored in 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.
How to create interactive touch buttons.
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.

Hardware Preparation

1	×	Arduino Nano 33 IoT
1	×	Micro USB Cable
1	×	SPI TFT display module
1	×	Jumper Wires
1	×	Recommended: Screw Terminal Expansion Board for Arduino Nano
1	×	Recommended: Breakout Expansion Board for Arduino Nano
1	×	Recommended: Power Splitter for Arduino Nano

Or you can buy the following kits:

DIYables Sensor Kit (18 sensors/displays)

Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .

Introducing the SPI TFT Display

SPI TFT modules combine a color LCD panel with a dedicated driver IC. The library supports three common drivers:

ILI9341 - 16-bit RGB565 color, up to 40 MHz SPI.
ILI9488 - 18-bit RGB666 color over SPI, up to 24 MHz.
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.

The library wraps Adafruit GFX, so shapes, text, fonts, and bitmaps are all available immediately.

Note: The Nano 33 IoT uses 3.3V logic on all pins. Connect VCC to the board's 3.3V pin only. Do NOT use 5V - it can damage the board.

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

Without Touch

Connect MOSI to D11, SCK to D13, MISO to D12 on the Nano 33 IoT. CS, DC, and RST can be any available GPIO — D10, D9, D8 are used in the examples.

Display:

TFT Pin	Arduino Nano 33 IoT Pin	Description
VCC	3.3V	Power supply (3.3V only)
GND	GND	Ground
CS	D10	Chip Select
DC / RS	D9	Data / Command select
RST	D8	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 Nano 33 IoT 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)

The wiring diagram between Arduino Nano and 33 IoT TFT SPI Display without touch

This image is created using Fritzing. Click to enlarge image

With Touch

Connect the XPT2046 touch controller to the Nano 33 IoT SPI bus, sharing D11, D13, and D12 with the display.

Display:

TFT Pin	Arduino Nano 33 IoT Pin	Description
VCC	3.3V	Power supply (3.3V only)
GND	GND	Ground
CS	D10	Chip Select
DC / RS	D9	Data / Command select
RST	D8	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 Nano 33 IoT 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)

The wiring diagram between Arduino Nano and 33 IoT TFT SPI Display with touch

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 Nano 33 IoT 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.

Preparing the Library

Connect the Arduino Nano 33 IoT to your computer using a Micro-B USB cable.
In Arduino IDE, choose Arduino NANO 33 IoT as the board and select the correct port.
Open the Libraries panel from the left sidebar.
Search for "DIYables_TFT_SPI" and locate the one published by DIYables.
Press Install to add it. Install all dependencies when prompted.

Search for DIYables TFT SPI created by DIYables.io and click the Install button.

Newbiely | Arduino IDE 2.3.8

──

☐

Library Manager

DIYables TFT SPI

All

DIYables TFT SPI by DIYables.io

Supports ILI9341 (240x320, 16-bit RGB565), ILI9488 (320x480, 18-bit RGB666), and ST7789 (240x320, 16-bit RGB565) TFT displays over SPI interface. Extends Adafruit GFX for full graphics support. Works with any Arduino-compatible board that has SPI. More info

1.0.0

INSTALL

Newbiely.ino

···

1 void setup() {

Output

Serial Monitor

Ln 1, Col 1

Arduino Nano 33 IoT on COM15

Note: If the board does not appear in the IDE, install the Arduino SAMD Boards core via the Boards Manager.

Core Sketch

The core structure that every DIYables_TFT_SPI sketch builds on:

#include <DIYables_TFT_SPI.h> #define TFT_CS_PIN 10 #define TFT_DC_PIN 9 #define TFT_RST_PIN 8 // 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 }

Discover - Draw Shapes

The DrawShapes example uses Adafruit GFX primitives to draw circles, rectangles, triangles, and lines in various colors across the screen.

Give It a Try

Wire the TFT module to the Nano 33 IoT as shown, using the 3.3V pin for VCC.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select the board and port, paste the code, and press Upload.
The screen fills with colored shapes that cycle continuously.

API Essentials

Method	Role	Usage Example
begin()	Start the display controller.	TFT_display.begin();
setRotation(r)	Set orientation 0-3.	TFT_display.setRotation(1);
fillScreen(color)	Clear screen to one color.	TFT_display.fillScreen(BLACK);
colorRGB(r,g,b)	Create a 16-bit color.	colorRGB(255,165,0)
drawCircle(x,y,r,color)	Circle outline.	TFT_display.drawCircle(80,80,40,RED);
fillRect(x,y,w,h,color)	Filled rectangle.	TFT_display.fillRect(0,0,100,60,BLUE);
drawLine(x0,y0,x1,y1,color)	Straight line.	TFT_display.drawLine(0,0,240,160,WHITE);

Discover - Show Text and Number

The ShowTextAndNumber example prints text strings and numeric values using the built-in GFX text renderer.

Give It a Try

Wire and upload as above.
The screen shows lines of text in different colors and sizes.

API Essentials

Method	Role	Usage Example
setTextColor(color)	Sets the text foreground color.	TFT_display.setTextColor(WHITE);
setTextSize(size)	Scales text. Size 1 = 6×8 px, size 2 = 12×16 px.	TFT_display.setTextSize(2);
setCursor(x, y)	Places the text cursor at pixel (x, y).	TFT_display.setCursor(10, 20);
print(value)	Prints a string or number at the cursor.	TFT_display.print("Nano 33!");
println(value)	Prints and advances the cursor to the next line.	TFT_display.println(42);

Discover - Draw Image

The DrawImage example brings a full-color RGB565 bitmap to life on the display. The image is stored in program flash inside bitmap.h as a PROGMEM const uint16_t array. Because the Nano 33 IoT's SAMD21 core reads PROGMEM data the same way as regular memory, the image is displayed without any special buffering in SRAM.

Copy bitmap.h into the sketch folder before you compile.

Give It a Try

Drop bitmap.h into the same folder as the sketch.
Wire the TFT module to the Nano 33 IoT. Remember to use the 3.3V pin for VCC.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select the board and port, paste the code, and press Upload.
The screen shows the bitmap image loaded from program flash.

API Essentials

Method	Role	Usage Example
drawRGBBitmap(x,y,bitmap,w,h)	Draws an RGB565 PROGMEM bitmap with its top-left at (x, y).	TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320);
fillScreen(color)	Clears the screen to a solid color before the bitmap is drawn.	TFT_display.fillScreen(BLACK);

Discover - Draw Image SD Card

The DrawImageSDcard example discovers how to stream a large image file from an SD card directly to the display without loading the whole thing into RAM. A small chunk buffer handles the data transfer. On the Nano 33 IoT the SD module shares the 3.3V SPI bus with the display.

Wire the SD module to the same SPI pins (D11/D13/D12) as the display. Connect its CS to the pin defined as SD_CS_PIN in the sketch.

/* * This Arduino Nano 33 IoT code was developed by newbiely.com * * This Arduino Nano 33 IoT code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-iot/arduino-nano-33-iot-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 -> 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 10 #define TFT_DC_PIN 9 #define TFT_RST_PIN 8 // 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() { }

Give It a Try

Wire the SD module to the Nano 33 IoT. Share the SPI bus (D11/D13/D12) with the display. Connect SD CS to your chosen pin.
Copy a raw RGB565 binary image file to the root of the SD card. Dimensions must match the panel resolution.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
The display shows the image streamed from the SD card.

API Essentials

Method	Role	Usage Example
startWrite()	Opens a raw SPI write transaction, asserting the display CS.	TFT_display.startWrite();
setAddrWindow(x0,y0,x1,y1)	Defines the rectangular write region on the panel.	TFT_display.setAddrWindow(0, 0, 239, 319);
pushColors(buf, len)	Sends a buffer of RGB565 pixel values to the display.	TFT_display.pushColors(buf, 512);
endWrite()	Closes the SPI transaction and releases the display CS.	TFT_display.endWrite();

Discover - Use External Font

The UseExternalFont example discovers how much sharper text looks with a GFX-compatible custom font. The font is selected by calling setFont() with a pointer to the font descriptor. The 3.3V SAMD21 core handles font rendering identically to other Arduino platforms, so the same font headers work without modification.

Give It a Try

Wire the TFT module to the Nano 33 IoT as shown in the wiring diagram. Use 3.3V for VCC.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
The display renders text in the custom font. Notice the improved clarity compared to the built-in font.

API Essentials

Method	Role	Usage Example
setFont(&FontName)	Activates a custom GFX-compatible font. Pass NULL to restore the built-in 5×7 font.	TFT_display.setFont(&FreeSans12pt7b);
setCursor(x, y)	Positions the text cursor at the given pixel coordinate.	TFT_display.setCursor(10, 40);
setTextColor(color)	Sets the text foreground color.	TFT_display.setTextColor(WHITE);
print(text)	Prints a string at the cursor using the active font.	TFT_display.print("IoT Display");

Discover - Touch Get Point

The TouchGetPoint example lets you discover the raw output of the XPT2046 touch controller. Press various spots on the screen and observe the ADC X, Y, and pressure Z values printed to the Serial Monitor. Those values map the analog range of your particular panel — you will need them to calibrate the touch coordinates.

Wiring: share the 3.3V SPI bus (D11/D13/D12) between the XPT2046 and the display. T_CS→D7, T_IRQ→D6.

Give It a Try

Wire the XPT2046 to the Nano 33 IoT. Share the SPI bus with the display. T_CS→D7, T_IRQ→D6.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
Open the Serial Monitor at 9600 baud. Touch the screen to see raw X, Y, and Z values printed.

API Essentials

Method	Role	Usage Example
initTouchSPI(cs, irq)	Initializes the XPT2046 on the shared 3.3V SPI bus. Pass -1 for irq if the interrupt pin is not connected.	TFT_display.initTouchSPI(7, 6);
readTouchRaw(x, y, z)	Returns raw ADC values without any calibration. Returns true when the screen is pressed.	TFT_display.readTouchRaw(x, y, z);

Discover - Touch Draw

The TouchDraw example discovers how responsive the XPT2046 touch controller feels by letting you paint directly on the display. Each touch point produces a small colored circle. Drag your finger to draw a continuous stroke across the glass.

Give It a Try

Wire the XPT2046 to the Nano 33 IoT as described in the Touch Get Point section above.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
Drag a finger across the screen to paint on it.

API Essentials

Method	Role	Usage Example
initTouchSPI(cs, irq)	Starts the XPT2046 on the shared SPI bus.	TFT_display.initTouchSPI(7, 6);
setTouchCalibration(minX,maxX,minY,maxY)	Maps raw ADC values to screen pixel coordinates. Obtain these four values from the TouchCalibration example.	TFT_display.setTouchCalibration(200, 3800, 300, 3700);
getTouch(x, y)	Returns calibrated pixel-space touch coordinates. Returns true while the screen is being touched.	if (TFT_display.getTouch(x, y)) { ... }
fillCircle(x, y, r, color)	Draws a dot at the touch position to build up the stroke.	TFT_display.fillCircle(x, y, 3, RED);

Discover - Touch Button

The TouchButton example explores interactive UI: on-screen rectangular buttons are drawn and tested against each touch point. When the finger lands inside a button region the button highlights and triggers an action. This pattern scales to any number of buttons or layout.

T_IRQ does not need to be wired. Passing -1 as the irq argument switches to polling mode.

Give It a Try

Connect T_CS to D7. Leave T_IRQ unconnected and set irq to -1 in the sketch.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
Tap each button on the screen. It should highlight and perform its action.

API Essentials

Method	Role	Usage Example
initTouchSPI(cs, irq)	Initializes the XPT2046. Passing -1 for irq disables interrupt-driven detection.	TFT_display.initTouchSPI(7, -1);
setTouchCalibration(minX,maxX,minY,maxY)	Applies calibration so getTouch() returns display-pixel coordinates.	TFT_display.setTouchCalibration(200, 3800, 300, 3700);
getTouch(x, y)	Returns calibrated touch position. Returns true while the screen is pressed.	if (TFT_display.getTouch(x, y)) { ... }
fillRect(x, y, w, h, color)	Draws the button as a solid colored rectangle.	TFT_display.fillRect(10, 10, 120, 60, BLUE);

Discover - Touch Calibration

The TouchCalibration example walks you through finding the raw ADC range specific to your XPT2046 panel. Touch each corner of the screen when prompted and read the minimum and maximum X and Y values from the Serial Monitor. Those four numbers are the calibration constants for all your other touch sketches.

/* * This Arduino Nano 33 IoT code was developed by newbiely.com * * This Arduino Nano 33 IoT code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-iot/arduino-nano-33-iot-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 -> 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 / ADS7843 SPI touch controller // (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ) // Touch pin Arduino Uno / Nano // ------------ --------------------------------- // T_CS -> D7 (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 9 #define TFT_RST_PIN 8 // Panel resolution in native (portrait) orientation - change to match your module #define TFT_WIDTH 240 #define TFT_HEIGHT 320 // ============================================= // Touch pin definitions (XPT2046 SPI touch controller) // ============================================= #define TOUCH_CS_PIN 7 // T_CS (any GPIO) #define TOUCH_IRQ_PIN 2 // 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); 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() {}

Give It a Try

Wire the XPT2046 to the Nano 33 IoT as described in the Touch Get Point section.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
Open the Serial Monitor at 9600 baud. Follow the prompts and touch each corner of the display.
Copy the four printed values into setTouchCalibration() in all your other touch sketches.

API Essentials

Method	Role	Usage Example
initTouchSPI(cs, irq)	Initializes the XPT2046 touch controller.	TFT_display.initTouchSPI(7, 6);
readTouchRaw(x, y, z)	Reads raw ADC values used to measure the calibration range.	TFT_display.readTouchRaw(x, y, z);
setTouchCalibration(minX,maxX,minY,maxY)	Stores the four calibration values so getTouch() maps raw readings to pixel coordinates.	TFT_display.setTouchCalibration(200, 3800, 300, 3700);

Discover - Custom SPI

The CustomSPI example discovers how to route the display to an explicit SPI bus instance. On the Nano 33 IoT there is one hardware SPI bus on D11/D13/D12. Passing &SPI explicitly to the constructor gives you direct control over the SPI settings and makes the bus assignment visible in the code rather than implicit.

Give It a Try

Wire the TFT display to the Nano 33 IoT as shown in the wiring diagram. Use 3.3V for VCC.
Connect the Nano 33 IoT to your computer with a Micro-B USB cable.
In Arduino IDE, select board and port, paste the code, and press Upload.
The display initializes on the explicitly configured SPI bus and shows a color-bar test pattern.

API Essentials

Method	Role	Usage Example
DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi)	Constructor variant that accepts a pointer to any SPIClass instance. Omitting the last argument defaults to &SPI.	DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI);
begin()	Initializes the display on the configured SPI bus.	TFT_display.begin();

Troubleshoot

Black screen -- Confirm VCC is 3.3V and that CS (D10), DC (D9), MOSI (D11), SCK (D13) are all connected.
Display powers on but shows garbage -- Only one driver constructor should be active. Comment out the others.
Image is shifted -- The width and height in the constructor must exactly match your physical panel.
Touch not working -- Run the TouchCalibration example first, then paste the calibration values into your sketch.
Board not recognized -- Make sure the Arduino SAMD Boards core is installed via the Boards Manager.

Platform Support

Built on Arduino standard APIs - runs on every Arduino-compatible platform (architectures=*).

Learn More

※ OUR MESSAGES

As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!