Artículos recientes

Promociones especiales

Novedades

Tutorial pantalla TFT táctil con Arduino

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.

  

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.

   

Pueden adquirir los materiales usados en este tutorial en nuestra tienda

Display tactil LCD a colores 2.4"

Display LCD a colores 2.4"

Conversor de nivel lógico I2C 5V a 3.3V

Arduino Pro Mini 328 - 3.3V/8MHz

Arduino Uno R3

 

Tags: TFT LCD pantalla

16 Comments

    • Avatar
      Gabriel Marturano
      nov 13, 2017

      Me ahorraste un montón de trabajo para averiguar los detalles. Te agradezco.

    • Avatar
      Rafa
      feb 11, 2018

      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?

    • Avatar
      Rafa
      feb 11, 2018

      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?

    • Avatar
      Rafa
      feb 11, 2018

      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?

    • Avatar
      Rafa
      feb 11, 2018

      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?

    • Avatar
      Juan
      mar 22, 2018

      Hola ¿Alguna actualizacion?

    • Avatar
      Cesar
      may 26, 2018

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

    • Avatar
      Fernando
      jul 31, 2018

      #define TFT_DC 9 #define TFT_CS 10 #define TFT_RST 8 #define TFT_MISO 12 #define TFT_MOSI 11 #define TFT_CLK 13Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);

    • Avatar
      maria
      oct 17, 2018

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

    • Avatar
      Virginia
      nov 29, 2018

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

    • Avatar
      David hernandez
      ene 29, 2019

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

    • Avatar
      Ricardo Castro
      ago 19, 2019

      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.

    • Avatar
      Daniel Fernandes
      ago 28, 2019

      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

    • Avatar
      muneera ahmed
      nov 17, 2019

      Hi there, I found your blog via Google while searching for such kinda informative post and your post looks very interesting for me. online furniture singapore

    • Avatar
      muneer ahmed
      nov 18, 2019

      Assume paid for with the help of center, have discovered modern society; debt consolidation loan singapore believed that protect on your playlists, you could potentially know most of the hassle; assumed ones step quit, much more is unable to drive; Imagine I would like adore, merely the caress.

Leave a Reply

* Name:
* E-mail: (Not Published)
   Website: (Site url withhttp://)
* Comment: