Haga clic para más productos.
No se encontraron productos.

Tutorial pantalla TFT táctil con Arduino

279128

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.

  

Pantalla tactil TFTPantalla TFT tactil reverso


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.

Pantalla TFTPantalla TFT reverso




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

Conversor de nivel logico

 

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

Arduini Mini PRO 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

  

MODULO TFT

ARDUINO UNO, NANO O PRO MINI

SDO (MISO)

Pin 12

LED

Pin 3.3V o fuente externa 3.3V

SCK

Pin 13

SDI (MOSI)

Pin 11

D/C

Pin 9

RESET

Pin 3.3V o fuente externa 3.3V

CS

Pin 10

GND

Pin GND

VCC

Pin 3.3V o fuente externa 3.3V

 

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

  

 Conexion pantalla TFT y Arduino Pro Mini 3,3V

   

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

  

Conexion pantalla TFT y Arduino Uno

   

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.

    

test  

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:

  

TFT rectangulosTFT triangulos

TFT texto

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

 

graphicstest Data Serial

  

 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:


TFT y arduino voltimetro

 
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.

TFT y arduino osciloscopio


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:

 

MODULO TFT

ARDUINO UNO, NANO O PRO MINI

T_IRQ 

Pin 7

T_DO

Pin 6

T_DIN

Pin 5

T_CS

Pin 4

T_CLK

Pin 3

SDO (MISO)

Pin 12

LED

Pin 3.3V o fuente externa 3.3V

SCK

Pin 13

SDI (MOSI)

Pin 11

D/C

Pin 9

RESET

Pin 3.3V o fuente externa 3.3V

CS

Pin 10

GND

Pin GND

VCC

Pin 3.3V o fuente externa 3.3V

 

Conexiones para el Arduino Pro Mini de 3.3V

  

Conexion pantalla tactil y arduino Pro Mini

  

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

     Conexion pantalla tft tactil y arduino UNO

   

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.

 TFT garabatoTFT naylamp

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

Productos relacionados
Artículos relacionados
17 Comentarios
  • hi*** **rv

    hi*** **rv 17/12/2020 Responder

    Thanks for the post
  • Ig***** ***as

    Ig***** ***as 28/04/2020 Responder

    Hi, when I use getX() and getY() it always return "-1"
    Any idea why?
  • Ad**

    Ad** 19/03/2020 Responder

    Hi.
    Everythink works when you use only touch and screen xor SD and screen, but it going to stop, when you connect 3 at once.
    And it starts ok, some photo is displayed, but in loop() when i use ts.read, no photo can be found. Sometimes when i use some variable which can stop loop with ts.read, the programm cannot work, display is white.
    Do you think, it can be that, the level of used memory is too low (about 80%)?
  • No***** ****sz

    No***** ****sz 11/12/2019 Responder

    Hi! Can you make a tutorial how can I use this screen on Arduino Mega + Ramps 1.4?
  • Da**** *******es

    Da**** *******es 28/08/2019 Responder

    Saludos amigo! En primer lugar, gracias por el excelente tutorial.
    No podía entender sobre el convertidor de nivel: en el lado HV de la placa, entrando con 5V, en el otro lado LV no debería salir 3.3V?
    Veo que en el dibujo, proviene de 5V y 3.3V de Arduino;
    ¿No debería Arduino venir 5V en el lado HV del tablero y salir 3.3V en el lado LV?
    ¡Perdón por mi pobre escritura porque soy brasileño!
    Gracias
  • Ri***** ****ro

    Ri***** ****ro 19/08/2019 Responder

    Hola, tengo ese TFT, funciona en Arduino Uno, pero no funciona en Arduino MEGA, por favor si es posible indicarme que debo hacer para que funciones.

    Gracias.
  • Da*** *********

    Da*** ********* 29/01/2019 Responder

    Se puede reparar un tft ? se quemo él transistores. Donde dice V2
    Gracias espero tu respuesta
  • Vi******

    Vi****** 29/11/2018 Responder

    me podes ayudar para que la pantalla tactil muestre los valores de un reloj hora dia mes año temeperatura
  • ma***

    ma*** 17/10/2018 Responder

    Hola, si quisiera conectar la SD Card integrada con la pantalla al arduino nano como seria?
  • Fe******

    Fe****** 31/07/2018 Responder

    #define TFT_DC 9
    #define TFT_CS 10
    #define TFT_RST 8
    #define TFT_MISO 12
    #define TFT_MOSI 11
    #define TFT_CLK 13

    Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);
  • Ce***

    Ce*** 26/05/2018 Responder

    Hola está muy buena tu información se agradece mucho, un gran aporte.
  • Ju**

    Ju** 22/03/2018 Responder

    Hola ¿Alguna actualizacion?
  • Ra**

    Ra** 11/02/2018 Responder

    ME seria útil que comentaras como usar la lectura del lector de tarjeta SD que trae incorporado.
    Compartiendo SPI con ss diferente? o usando otros pines?
  • Ra**

    Ra** 11/02/2018 Responder

    ME seria útil que comentaras como usar la lectura del lector de tarjeta SD que trae incorporado.
    Compartiendo SPI con ss diferente? o usando otros pines?
  • Ra**

    Ra** 11/02/2018 Responder

    ME seria útil que comentaras como usar la lectura del lector de tarjeta SD que trae incorporado.
    Compartiendo SPI con ss diferente? o usando otros pines?
  • Ra**

    Ra** 11/02/2018 Responder

    ME seria útil que comentaras como usar la lectura del lector de tarjeta SD que trae incorporado.
    Compartiendo SPI con ss diferente? o usando otros pines?
  • Ga***** *******no

    Ga***** *******no 13/11/2017 Responder

    Me ahorraste un montón de trabajo para averiguar los detalles. Te agradezco.
Dejar un comentario
Deja su comentario

Menú

Ajustes

Crear una cuenta gratuita para usar listas de deseos.

Registrarse