Tutorial pantalla TFT táctil con Arduino

En este tutorial explicaremos el funcionamiento de la pantalla TFT 2.4’’, veremos algunos ejemplos y aplicaciones, visualizaremos en nuestra TFT el voltaje de un potenciómetro y probaremos con un ejemplo sencillo el Touch de nuestra pantalla táctil.

En este tutorial usaremos la pantalla táctil a TFT de 2.4’’  TJCTM24024, de 240x320 pixeles de resolución, el modulo tiene integrado un controlador ILI9341 para manejar el LCD y un controlador táctil XPT2046 para el Touch. El módulo dispone también de una ranura de conexión para una tarjeta SD, tanto el LCD, el Touch y la SD se controlan por SPI.

Los ejemplos también serán válidos para pantallas TFT sin Touch pero que trabajan con el controlador ILI9341, como la que se muestra en la siguiente imagen.

El voltaje de Operación es de 3.3V por lo que hay que tener cuidado y no alimentarlo con 5V, los niveles lógicos es necesario adaptarlos también a 3.3V, para esto podemos usar un módulo conversor de nivel lógico bidireccional de 5V a 3.3V como el de la siguiente imagen

Otra opción es usar una placa de Arduino que funcione con 3.3V, como el Arduino Pro Mini 328 - 3.3V/8MHz



En este tutorial utilizaremos un Arduino Pro mini de 3.3V, pero la programación será la misma si se usa un Arduino uno o cualquier otra placa basada en el ATmega328.

Conexión entre la pantalla TFT y Arduino

La pantalla TFT trabaja con niveles de 3.3V, si la placa Arduino trabaja con nivel TTL de 5V entonces es necesario usar conversores de nivel.

Conexión Con Arduino Mini  Pro de 3.3V

Conexión Arduino Uno Usando conversores lógicos de 5V a 3.3V

Probando el ejemplo graphictest  de la librería Adafruit ILI9341

Para probar y programar nuestra pantalla TFT es necesario descargar e importar las siguientes librerías a nuestro IDE de Arduino

Librería de Adafruit ILI9341.

Librería de gráficos Adafruit GFX

Para verificar si se ha hecho las conexiones correctamente y nuestra pantalla trabaja adecuadamente cargamos el ejemplo graphictest,  para abrirlo lo hacemos desde el IDE de Arduino, vamos a Archivo > Ejemplos> Adafruit_ILI9341> graphictest.

    

  

Sin hacer ninguna modificación compilamos y cargamos el ejemplo, debería empezar a mostrarse en el LCD distintos tipos de gráficas, algunas se muestran en las siguientes imágenes:

Si abrimos el monitor serial mostrará información de lo que se está mostrando en la TFT

 Después de comprobar que nuestro TFT funciona correctamente vamos a ver un ejemplo más simple y práctico:

Mostrar el valor de una entrada Analógica y otras variables en la pantalla TFT

Para esto necesitamos un potenciómetro que conectaremos a una entrada analógica.

A la conexión que ya tenemos solo hay que agregarle el potenciómetro en la entrada analógica AN0  y cargamos el siguiente sketch:

//Adafruit and SPI libraries
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
 
//Pins
#define TFT_DC 9
#define TFT_CS 10
//Create ILI9341 instance
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
 
void setup(){
  //TFT init
  tft.begin();
  tft.setRotation(1); //Horizontal
  tft.fillScreen(ILI9341_RED); 
  tft.setTextColor(ILI9341_WHITE);
  tft.setTextSize(4);
  //Escribimos el texto:
  tft.setCursor(60,30);
  tft.print("Voltage: ");
  tft.setTextSize(2);
  tft.setTextColor(ILI9341_WHITE);
  tft.setCursor(20,200);
  tft.print("naylampmechatronics.com");
  //Dejamos establecido a un tamaño de texto 8
  tft.setTextSize(8);
  tft.setTextColor(ILI9341_GREEN);
  tft.setCursor(250,100);
  tft.print("V");
  
}

float voltage=0;
float voltageAnt=0;
void loop(){
  //Leemos el valor del volteje
  voltage = analogRead(A0) * (5.0 / 1023.0);
  if(voltage-voltageAnt>0.01||voltage-voltageAnt<-0.01)
  {
      tft.setTextColor(ILI9341_RED);
      tft.setCursor(30,100);
      tft.print(voltageAnt);
      
      tft.setTextColor(ILI9341_GREEN);
      tft.setCursor(30,100);
      tft.print(voltage);
      voltageAnt=voltage;
      
  }
  delay(100);
}

Ahora expliquemos las funciones del código anterior, las correspondientes a la TFT:

Crear la instancia de la TFT

#define TFT_DC 9
#define TFT_CS 10
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

Como se observa solo es necesario especificar los pines DC y CS, lo demás pines trabajan con el SPI del Arduino.

Inicializar la TFT

tft.begin();

Orientación de la pantalla

tft.setRotation(1); //Horizontal

Como dato se le ingresa un valor entre 0-3, donde 0 es la posición original, 1 rotado 90 grados, 2 rotado 180° y 3 rotado 270°

Color de fondo y color del texto.

tft.fillScreen(background);
tft.setTextColor(txtColor);

FillScreen() llena toda la pantalla del color especificado y setTextColor() establece el color del texto que posteriormente se escribirá. Los colores que podemos usar son: ILI9341_BLACK, ILI9341_NAVY, ILI9341_DARKGREEN, ILI9341_DARKCYAN, ILI9341_MAROON, ILI9341_PURPLE, ILI9341_OLIVE, ILI9341_LIGHTGREY, ILI9341_DARKGREY, ILI9341_BLUE, ILI9341_GREEN, ILI9341_CYAN, LI9341_RED, ILI9341_MAGENTA, ILI9341_YELLOW, ILI9341_WHITE, ILI9341_ORANGE, ILI9341_GREENYELLOW, ILI9341_PINK.

Tamaño del texto y ubicamos el cursor

tft.setTextSize(5);
tft.setCursor(x,y);

El tamaño del texto indica el grosor del texto en pixeles. La posición del cursor se especifica en (x,y) donde (0,0) es la posición de la esquina superior izquierda.

Imprimir Texto:

tft.print("Voltage: ");

Esta función hereda todas las características de la función printf(), por lo que se trabaja y muestran variables como si se estuviera usando un Serial.printf()

Notar en el código, que no existe una función para borrar el texto, para esto hay que escribir el mismo texto pero del color de fondo de pantalla.

Después de cargar el sketch deben tener los siguientes resultados:

 
Construyendo un OSCILOSCPIO con Arduino y la pantalla TFT

Este ejemplo es similar al anterior con la diferencia que en lugar de mostrar el voltaje como texto, lo mostramos gráficamente.

El Sketch o programa para hacer esto se muestra a continuación.

//Adafruit and SPI libraries
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
 
//Pins
#define TFT_DC 9
#define TFT_CS 10
//Create ILI9341 instance
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
 
//Variable para la coordenada  X.
int xPos = 0;
 
void setup(){
  //Start TFT
  tft.begin();
  tft.setRotation(1); //Horizontal
  limpiar();  //función  para limpiar La pantalla
}

void loop(){
  //Leemos el valor del voltaje
  int voltage = analogRead(A0);
  int voltageEscalado = map(voltage, 0, 1023, 0, tft.height());
  //Dibujamos un rectángulo  de 3x3 pixeles
  tft.fillRect(xPos, tft.height()-voltageEscalado-1, 3, 3, ILI9341_GREEN);
  //Verificamos si ya llegamos al borde de la TFT
  if(xPos >= tft.width()-1){
    xPos = 0;
    limpiar();
  }
  else{
    xPos++;
  }
  delay(5); //Tiempo de muestreo
}

void limpiar()
{
  tft.fillScreen(ILI9341_RED);
  tft.setTextSize(2);
  tft.setTextColor(ILI9341_WHITE);
  tft.setCursor(80,5);
  tft.print("OSCILOSCOPIO");
  
  tft.setTextColor(ILI9341_WHITE);
  tft.setCursor(20,220);
  tft.print("naylampmechatronics.com");
}

Como se observa simplemente se escala la lectura analógica a valores entre 0 y la altura de la pantalla. Y se dibuja un punto mientras se va incrementando la posición en x. cuando llegamos al extremo simplemente borramos la pantalla y empezamos a dibujar desde la posición x=0.

A continuación se muestra una foto cunado se mueve el potenciómetro de forma seguida en sentido horario y anti horario.

Testeando el Touch de nuestra TFT.

Este ejemplo es válido para las pantallas táctiles con el controlador táctil XPT2046

Empecemos haciendo las conexiones:

Conexiones para el Arduino Pro Mini de 3.3V

De igual manera pero a través de convertidores se conecta al Arduino UNO o placas que trabajen con niveles lógicos de 5V

Como se observa solo se agregó la conexión para los pines de la TFT, los demás siguen igual que en el ejemplo anterior

Para poder trabajar con el Touch es necesario descargar la siguiente librería:

 Librería UTouch

Cargamos el siguiente sketch:

#include <SPI.h>
#include <UTouch.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
 
//Pines TFT
#define TFT_DC 9
#define TFT_CS 10

//Pines Touch
#define t_SCK  3
#define t_CS   4
#define t_MOSI 5
#define t_MISO 6
#define t_IRQ  7
 
//Instanciamos la TFT
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
 
//Instancimos el Touch
UTouch ts(t_SCK, t_CS, t_MOSI, t_MISO, t_IRQ);
 
void setup(){
  //Confguracion de la TFT
  tft.begin();
  tft.setRotation(1);  //Must be 1 or else touchscreen gets lost
  tft.fillScreen(ILI9341_YELLOW); //Fondo Amarillo
  
  //Configuracion del Touch
  ts.InitTouch();
  ts.setPrecision(PREC_MEDIUM);
  tft.setTextColor(ILI9341_BLUE);
  tft.setTextSize(3);
  tft.setCursor(80,5);
  tft.print("Test Touch ");
  tft.setTextColor(ILI9341_RED);
  tft.setTextSize(2);
  tft.setCursor(20,220);
  tft.print("naylampmechatronics.com");
}
 
void loop()
{
  long x, y;
  
  while(ts.dataAvailable())
  {
    ts.read();
    x = ts.getX()+15;
    y = ts.getY()+5;
    if((x!=-1) && (y!=-1))
    {
      int radius = 3;
      tft.fillCircle(x, y, radius, ILI9341_BLACK);
    }
  }
}

Expliquemos las funciones de la librería Utouch del sketch anterior:

Instanciar el Touch.

#define t_SCK  3
#define t_CS   4
#define t_MOSI 5
#define t_MISO 6
#define t_IRQ  7
UTouch ts(t_SCK, t_CS, t_MOSI, t_MISO, t_IRQ);

Como se puede observar, la librería puede trabajar con cualquier pin y no es necesario utilizar los pines SPI del Arduino.

Inicializar y configurar la pantalla táctil:

ts.InitTouch();
ts.setPrecision(PREC_MEDIUM);

Después de inicializar la pantalla táctil usando InitTouch(), es necesario configurar a precisión de nuestra pantalla usando la función setPrecision(), la precisiones disponibles son: PREC_LOW, PREC_MEDIUM, PREC_HI y PREC_EXTREME

Verificar si se ha presionado la pantalla.

ts.dataAvailable()

La función dataAvailable() nos devuelve un valor lógico verdadero si se ha presionado la pantalla, y un valor falso en caso contrario.

Obtener la posición presionada en la pantalla táctil

x = ts.getX()+15;
y = ts.getY()+5;

Para leer las coordenadas usamos getX() y getY(), pero no confundir las coordenadas del Touch con las coordenadas de la pantalla TFT, que generalmente no coinciden, por lo que es necesario sumar o restar a estas coordenadas para que coincidan, que es lo que estamos haciendo en nuestro ejemplo.

Al cargar el sketch anterior, debe mostrar en la TFT un fondo Amarillo y al presionar la pantalla se dibujara un punto en la posición, si mantenemos presionado y desplazamos se debe dibujar el trazo.

Para Limpiar la pantalla simplemente presionamos el botón Reset del Arduino.