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.
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.
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
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
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:
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.
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:
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
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.
0 comentarios:
Publicar un comentario