Today, TFT displays with the ILI9341 controller are one of the most popular choices for Arduino prototyping projects due to their versatility and graphical capabilities. If you've been looking for ways to take advantage of these displays in your projects, you've come to the right place. Here we'll explain everything you need to know to connect, configure, and use the ILI9341 TFT display, plus we'll walk through some very useful code examples.
Working with this display may seem complicated at first due to the number of pins and connections required, but once you understand the process, it becomes much easier. In this article we will go through step by step how to connect, test and program it.
Materials needed to use the ILI9341 display with Arduino
- Arduino UNO or 3.3V Arduino Pro Mini: If you use a Arduino UNO, you will need logic level adapters to avoid damaging the display, since it works with 3.3V. If you use a 3.3V Arduino Pro Mini, you can connect directly.
- ILI9341 TFT display: 2.4 or 2.8 inch screen with 240×320 pixel resolution.
- Logic level converter (if you use Arduino UNO): to adapt levels from 5V to 3.3V.
- Protoboard y cables of connection.
Step 1: Connect the ILI9341 display to the Arduino
The ILI9341 TFT display uses the SPI interface to communicate with the Arduino, so it will be important to make the correct connections between the SPI pins on the Arduino and the display. The following table explains in detail how to make the basic connections:
| Pin the screen | Arduino pin |
|---|---|
| SDO (MISO) | pins 12 |
| SCK pins can be used | pins 13 |
| SDI (MOSI) | pins 11 |
| D / C | pins 9 |
| CS | pins 10 |
| GND | GND pin |
| VCC | 3.3V battery |
| LED | 3.3V battery |
Remember that if you are using a Arduino UNO, it will be necessary to use the logic level adapters to convert the 5V from the Arduino pins to 3.3V. If you are using a 3.3V Arduino Pro Mini, this precaution is not necessary.
Step 2: Install the necessary libraries
To interact with the ILI9341 display, we need to install some libraries in the Arduino IDE. We need to make sure that we have the following libraries:
- Adafruit_ILI9341: This is the main library to drive ILI9341 displays with Arduino.
- Adafruit_GFX: This library facilitates the creation of basic graphics such as lines, circles, rectangles, etc.
To install these libraries, open the Arduino IDE and go to Program > Include Library > Manage Libraries and search ILI9341 to install the corresponding library. Also, search for the library Adafruit GFX and make sure you install the correct one.
Step 3: Test the TFT display with a basic example
Once the libraries are installed, it is time to test the display to make sure everything is properly connected and working. The Arduino IDE includes a very complete example that will be of great help to us. Let's load the graphictest:
- Open the Arduino IDE.
- Go to File > Examples > Adafruit_ILI9341 > graphictest.
- Compile and upload the example to your Arduino.
If all went well, you should see a series of graphs on the screen displaying different types of lines, shapes and colors.
Step 4: Create a practical project: Display analog values ​​on the ILI9341 screen
One of the first projects we can do with this display is to display the value of an analog input, such as the voltage of a potentiometer. To do this, we will use the display pins that we have already connected, as well as a potentiometer connected to the Arduino's analog input A0.
The following code shows how we can read the analog value from the potentiometer and display it on the screen:
#include
#include
#include
#define TFT_DC 9
#define TFT_CS 10
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
void setup() {
tft.begin();
tft.setRotation(1);
tft.fillScreen(ILI9341_BLACK);
tft.setTextColor(ILI9341_WHITE);
tft.setTextSize(2);
}
void loop() {
int val = analogRead(A0);
float voltage = val * (5.0 / 1023.0);
tft.setCursor(60, 30);
tft.print("Voltaje: ");
tft.print(voltage);
delay(500);
}
This program continuously reads the voltage and displays it on the screen in text format. If you turn the potentiometer knob you should see the change reflected on the screen almost immediately.
Adding a button on the ILI9341 touch screen
In addition to displaying information, the ILI9341 display also has touch capability when equipped with the XPT2046 controller. Let's create a simple example that shows how to detect touches on the screen.
First, we need to make the connections for the touch controller of the screen. The main pins for the touch controller are:
- TOUCH_CS: Pin 10.
- TOUCH_IRQ: Pin 2.
After making these connections, we will use the library XPT2046_Touchscreen to detect touches. Below is a code that displays a button on the screen, which changes color each time it is pressed.
#include
#include
#include
#include
#define TFT_DC 9
#define TFT_CS 10
#define TOUCH_CS 10
#define TOUCH_IRQ 2
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
XPT2046_Touchscreen ts(TOUCH_CS, TOUCH_IRQ);
void setup() {
tft.begin();
ts.begin();
tft.setRotation(1);
tft.fillScreen(ILI9341_BLACK);
tft.fillRect(50, 160, 100, 50, ILI9341_RED);
tft.setCursor(75, 175);
tft.setTextColor(ILI9341_WHITE);
tft.setTextSize(2);
tft.println("BOTON");
}
void loop() {
if (ts.touched()) {
TS_Point p = ts.getPoint();
if (p.x >= 50 && p.x <= 150 && p.y >= 160 && p.y <= 210) {
tft.fillRect(50, 160, 100, 50, ILI9341_GREEN);
tft.setCursor(75, 175);
tft.println("PULSADO");
}
}
}The code detects if the button has been pressed and changes its color from red to green. You can also customize the position and size of the button to suit your needs.
It is essential to ensure that the screen is correctly calibrated so that touches correspond properly to the screen coordinates. If you notice that the touch response is not accurate, it may be necessary to perform a calibration related to the screen resolution.