 Llámanos ahora: 997646858 Contacte con nosotros Iniciar sesión

0
Buscar   S/. 0,00

INICIO ARDUINO COMUNICACIÓN SENSORES ACTUADORES BLOG TUTORIALES

 All Blog News Tutorial pantalla TFT táctil con Arduino

ARTÍCULOS POPULARES Tutorial pantalla TFT táctil con Arduino

Posted by  Tutoriales  13 Comments

Tutorial sensor de ujo de

agua abr 13, 2016

Con guración del módulo

bluetooth HC-05 usando
comandos AT ago 08,
2015

Tutorial trasmisor de celda

de carga HX711, Balanza
Digital ago 23, 2015

ARTÍCULOS RECIENTES

Arduino Day 2019 por

En este tutorial explicaremos el funcionamiento de la pantalla TFT 2.4’’, veremos algunos
Naylamp Mechatronics!
mar 08, 2019 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.
Usando ESP8266 con el IDE
de Arduino oct 21, 2016
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
Tutorial Sensor de controlador táctil XPT2046 para el Touch. El módulo dispone también de una ranura de
Distancia SHARP sep 28,
conexión para una tarjeta SD, tanto el LCD, el Touch y la SD se controlan por SPI.
2016

PROMOCIONES ESPECIALES

Módulo RF 315
MHz TX y RX
Controla tus
proyectos de...

S/. 8,00 S/.

9,00

Todas los promociones especiales 

ETIQUETAS

sensor Fuente hexagonal

allen screw V-Slot

lamento LED LCD

regulador

NOVEDADES

Celda de carga
1Kg
Esta celda de
1Kg para
cargas
pequeñas,
fabricado en
aluminio y
con...

S/. 18,00

Per l V-Slot
4040 x Los ejemplos también serán válidos para pantallas TFT sin Touch pero que trabajan con el
centímetro controlador ILI9341, como la que se muestra en la siguiente imagen.
Perfil de
aluminio
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 1,20

Per l C-beam
4080 x
centímetro
Perfil de
aluminio
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 1,70

Per l V-Slot
2080 x
centímetro
Perfil de
aluminio
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 1,24

El voltaje de Operación es de 3.3V por lo que hay que tener cuidado y no alimentarlo con 5V,
Per l V-Slot los niveles lógicos es necesario adaptarlos también a 3.3V, para esto podemos usar un módulo
2060 x conversor de nivel lógico bidireccional de 5V a 3.3V como el de la siguiente imagen
centímetro
Perfil de
aluminio
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 0,86

Per l V-Slot
2040 x
centímetro
Perfil de
aluminio
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 0,66

Per l V-Slot
2020 x
centímetro
Perfil de Otra opción es usar una placa de Arduino que funcione con 3.3V, como el Arduino Pro Mini 328 -
aluminio 3.3V/8MHz
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 0,40

Per l V-Slot
4040 L3.2m
Perfil de
aluminio
extruido para
empezar a
hacer
estructuras
mecánicas y...

S/. 290,00

Per l C-beam
4080 L3.2m
Perfil de
aluminio
extruido para
En este tutorial utilizaremos un Arduino Pro mini de 3.3V, pero la programación será la misma
empezar a
hacer si se usa un Arduino uno o cualquier otra placa basada en el ATmega328.
estructuras
mecánicas y... Conexión entre la pantalla TFT y Arduino
S/. 410,00

MODULO TFT ARDUINO UNO, NANO O PRO MINI

Per l V-Slot
2080 L3.2m
Perfil de
SDO (MISO) Pin 12
aluminio
extruido para
empezar a LED Pin 3.3V o fuente externa 3.3V
hacer
estructuras
mecánicas y... SCK Pin 13
S/. 300,00
SDI (MOSI) Pin 11
Per l V-Slot
2060 L3.2m D/C Pin 9
Perfil de
aluminio
extruido para RESET Pin 3.3V o fuente externa 3.3V
empezar a
hacer
estructuras CS Pin 10
mecánicas y...

S/. 205,00 GND Pin GND

Per l V-Slot VCC Pin 3.3V o fuente externa 3.3V

2040 L3.2m
Perfil de
aluminio
extruido para
empezar a
hacer La pantalla TFT trabaja con niveles de 3.3V, si la placa Arduino trabaja con nivel TTL de 5V
estructuras entonces es necesario usar conversores de nivel.
mecánicas y...
Conexión Con Arduino Mini Pro de 3.3V
S/. 160,00

Todas los nuevos productos 

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á cos 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:

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

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.

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

0 ?? 0 0 ?? Compartir

13 Comments

Gabriel Marturano
nov 13, 2017

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

Reply

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?

Reply

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?

Reply

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?

Reply

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?

Reply

Juan
mar 22, 2018

Hola ¿Alguna actualizacion?

Reply

Cesar
may 26, 2018

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

Reply

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);

Reply

maria
oct 17, 2018

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

Reply

Virginia
nov 29, 2018

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

Reply

David hernandez
ene 29, 2019

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

Reply

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.

Reply

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

Reply

Leave a Reply
* Name:

* E-mail:
(Not Published)

Website:
(Site url withhttp://)

* Comment:

Submit

Boletín Introduzca su dirección de correo electróni  Síganos   

Información Mi cuenta Información sobre la tienda

Contacte con nosotros Mis compras
 Naylamp Mechatronics SAC., Almacén:
Entrega Mis vales descuento
Mz. E Lote 31 Urb. Ingeniería, Trujillo - Perú ////
Condiciones de uso Mis direcciones
Horario de atención: Lun. a Vie: 10am-7pm. Sab:
Nosotros Mis datos personales
10am-6pm
Tutoriales y Proyectos con Mis vales
Arduino
 Llámanos ahora: 997646858
Mapa del sitio
 Email: naylamp.mechatronics@gmail.com