Arduino ILI9341 TFT Colour Display: Wiring, Code and Simulator

To build this Arduino ILI9341 TFT Colour Display project you need an Arduino Uno and an ILI9341 2.8" TFT display. Adafruit_ILI9341 fills the 240×320 screen, draws colour bars, a circle and a triangle, and counts — every pixel through the controller’s RAM. Make the 9 connections in the wiring table, upload the Arduino C++ code, and add tft.setRotation(1) after begin() to draw in landscape, or tft.invertDisplay(true) to invert the colours.

Open this circuit in the free Arduino Uno simulator

Parts list

Qty	Part	What it does
1	Arduino Uno	the microcontroller board
1	ILI9341 2.8" TFT display	2.8" 240×320 colour TFT on SPI: VCC, GND, CS and DC to any pins, RESET to a pin (or 3.3 V), MOSI/SCK (and MISO) to the board’s SPI pins, LED to 3.3 V for the backlight. Works with Adafruit_ILI9341 and Adafruit GFX, in all four rotations.

Wiring

#	From	To
1	Arduino Uno 3.3V	ILI9341 2.8" TFT display VCC
2	Arduino Uno 3.3V	ILI9341 2.8" TFT display LED
3	Arduino Uno GND	ILI9341 2.8" TFT display GND
4	Arduino Uno pin 10	ILI9341 2.8" TFT display CS
5	Arduino Uno pin 9	ILI9341 2.8" TFT display DC
6	Arduino Uno pin 8	ILI9341 2.8" TFT display RESET
7	Arduino Uno pin 13	ILI9341 2.8" TFT display SCK
8	Arduino Uno pin 11	ILI9341 2.8" TFT display MOSI
9	Arduino Uno pin 12	ILI9341 2.8" TFT display MISO

Step by step

Open the simulator. Open the BitForBytes Embedded Lab in your browser and start from the Arduino Uno. No install or account is needed.
Add the parts. Add an ILI9341 2.8" TFT display from the parts palette.
Wire 1. Connect Arduino Uno 3.3V to ILI9341 2.8" TFT display VCC.
Wire 2. Connect Arduino Uno 3.3V to ILI9341 2.8" TFT display LED.
Wire 3. Connect Arduino Uno GND to ILI9341 2.8" TFT display GND.
Wire 4. Connect Arduino Uno pin 10 to ILI9341 2.8" TFT display CS.
Wire 5. Connect Arduino Uno pin 9 to ILI9341 2.8" TFT display DC.
Wire 6. Connect Arduino Uno pin 8 to ILI9341 2.8" TFT display RESET.
Wire 7. Connect Arduino Uno pin 13 to ILI9341 2.8" TFT display SCK.
Wire 8. Connect Arduino Uno pin 11 to ILI9341 2.8" TFT display MOSI.
Wire 9. Connect Arduino Uno pin 12 to ILI9341 2.8" TFT display MISO.
Paste the Arduino C++ code. Paste the Arduino C++ code below into the code editor.
Run it. Press Run. Add tft.setRotation(1) after begin() to draw in landscape, or tft.invertDisplay(true) to invert the colours.

Arduino C++ code

// 2.8" ILI9341 TFT with Adafruit_ILI9341 on hardware SPI.
// CS -> 10, DC -> 9, RESET -> 8, MOSI -> 11, SCK -> 13, MISO -> 12, LED and VCC -> 3.3V, GND.
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

Adafruit_ILI9341 tft(10, 9, 8);  // CS, DC, RESET

void setup() {
  Serial.begin(9600);
  tft.begin();
  Serial.print("Display ID / power mode: 0x");
  Serial.println(tft.readcommand8(ILI9341_RDMODE), HEX);

  tft.fillScreen(ILI9341_BLACK);
  tft.fillRect(0, 0, 240, 40, ILI9341_NAVY);
  tft.setTextColor(ILI9341_WHITE);
  tft.setTextSize(2);
  tft.setCursor(12, 12);
  tft.print("BitForBytes TFT");

  // Colour bars.
  const uint16_t colours[] = { ILI9341_RED, ILI9341_ORANGE, ILI9341_YELLOW, ILI9341_GREEN, ILI9341_CYAN, ILI9341_BLUE, ILI9341_MAGENTA };
  for (int i = 0; i < 7; i++) tft.fillRect(10 + i * 31, 52, 28, 60, colours[i]);

  tft.drawCircle(120, 190, 50, ILI9341_WHITE);
  tft.fillTriangle(120, 150, 80, 220, 160, 220, ILI9341_GREEN);
  Serial.println("Drawn");
}

void loop() {
  static unsigned long n = 0;
  tft.fillRect(0, 260, 240, 40, ILI9341_BLACK);
  tft.setCursor(20, 270);
  tft.setTextColor(ILI9341_YELLOW);
  tft.setTextSize(3);
  tft.print("t = ");
  tft.print(n++);
  delay(1000);
}

What to try

Add tft.setRotation(1) after begin() to draw in landscape, or tft.invertDisplay(true) to invert the colours.

Frequently asked questions

How do I wire the ILI9341 TFT Colour Display project on an Arduino Uno?

Make 9 connections: Arduino Uno 3.3V to ILI9341 2.8" TFT display VCC; Arduino Uno 3.3V to ILI9341 2.8" TFT display LED; Arduino Uno GND to ILI9341 2.8" TFT display GND; Arduino Uno pin 10 to ILI9341 2.8" TFT display CS; Arduino Uno pin 9 to ILI9341 2.8" TFT display DC; Arduino Uno pin 8 to ILI9341 2.8" TFT display RESET; Arduino Uno pin 13 to ILI9341 2.8" TFT display SCK; Arduino Uno pin 11 to ILI9341 2.8" TFT display MOSI; Arduino Uno pin 12 to ILI9341 2.8" TFT display MISO.

What parts do I need for this Arduino project?

An Arduino Uno and an ILI9341 2.8" TFT display.

Can I simulate this Arduino project online for free?

Yes. The BitForBytes Embedded Lab runs this exact circuit and Arduino C++ code in your browser for free, with no install and no hardware. The sketch is compiled with the real Arduino toolchain and runs on an emulated ATmega328P.

What does the code do?

Adafruit_ILI9341 fills the 240×320 screen, draws colour bars, a circle and a triangle, and counts — every pixel through the controller’s RAM.

Why is my ILI9341 screen white?

A white screen means the backlight is on but the controller was never initialised: check CS, DC and RESET and the SPI wiring (MOSI to 11, SCK to 13 on an Uno). The simulator shows the same white glass until tft.begin() runs.

How do I rotate an ILI9341 display?

Call tft.setRotation(0–3). It changes the controller’s memory access control (MADCTL) register, which swaps and mirrors the rows and columns.