TFT LCD Touch 2.4” Shield para Arduino UNO

¡Tuto nuevo! Hoy os traigo un shield para Arduino UNO.

Siempre he dicho que todo proyecto por simple o complejo que sea, debería llevar una pantalla, y si esa pantalla es LCD TFT de 2.4”, táctil, con lector de tarjetas MicroSD y encima, en formato Shield para Arduino UNO,estamos ante un producto de infinitas posibilidades 🙂

Así es el siguiente módulo que nos han cedido desde nuestra tienda colaboradora Electrohobby.

TFTFrontBack-pComo hemos dicho, este shield para Arduino UNO, tiene 3 funciones principales:

Pantalla LCD para visualización de gráficos o texto
Panel táctil sobre la pantalla LCD
Lector de tarjetas MicroSD para datalogging o almacenamiento de imágenes.

Así que después del salto, veremos como conectar, enchufar y usar este fantástico modulo 🙂

Las características principales del shield son las siguientes:

  • Pantalla LCD TFT de 2,4”
  • Chip controlador LCD ILI9341 (Enlace para descargar el Datasheet ILI9341)
  • 320×240 pixeles de resolución y 262.000 colores
  • Panel táctil resistivo de 4 hilos
  • Compatible con tensión de 5V ya que dispone de regulador de tensión en placa
  • Conexión Shield para Arduino UNO
  • Tamaño: 71 x 52 x 7 mm (L x A x H)

Conociendo las características del módulo, podemos pasar a la acción.

Conexión del shield con nuestro Arduino UNO

Al tener formato Shield para Arduino UNO, tendrá todos los pines conectados a nuestro Arduino, por lo que ya nos preocuparemos en el código de los sketchs de configurar los pines que utiliza.
Solo hay una manera de pincharlo en el Arduino UNO, haciendo coincidir los pines macho del shield con los pines hembra del Arduino

Como se aprecia en la imagen, debemos tener cuidado al pinchar el módulo, ya que éste cubre la totalidad de la placa Arduino, por lo que es recomendable cubrir el conector USB del Arduino, con una cinta aislante, para evitar que se produzca algún cortocircuito al pinchar el shield a fondo.

Procedemos a colocar nuestro Shield + Arduino en la tabla de Arduino UNO R3 de Electrohobby para poder trabajar con mayor comodidad y enchufamos el conector USB al Arduino.

TablaTFT-p

Configuración del shield y librerías necesarias

Antes de empezar, aclarar que vamos a utilizar la versión del IDE de Arduino 1.0.

Para poder usar todas las funciones del shield, necesitamos varias librerías con algunas modificaciones de código que he tenido que hacerles para poder utilizar el shield, por lo que no disponen de los ejemplos oficiales que traen las librerías por defecto, sino unos ejemplos que he preparado para poder poner en funcionamiento el shield TFT:

  •  Librería Adafruit_TFTLCD: Esta es la librería Adafruit_TFTLCD original, que incluye drivers de varias pantallas con diferentes chips (ILI9325, ILI9341,HX8347G, HX8357) , por lo que debemos seleccionar el chip correcto en el código del sketch para poder visualizar texto, gráficos e imágenes en nuestra pantalla LCD.
  • Librería Adafruit_GFX: Esta librería de Adafruit es la que nos proporcionará el código necesario para la realización de gráficos en la pantalla (puntos, círculos, lineas, etc)
  • Librería TouchScreen: Librería que se encarga de traducir e interpretar las coordenadas, para poder trabajar con el panel táctil resistivo de 4 hilos que incluye nuestro shield.
  • Librería SD: Es la librería que incluye el entorno de Arduino por defecto para el acceso y comunicación con tarjetas SD, o en nuestro caso, MicroSD.
  • Librería SPI: Las tarjetas SD o MicroSD se comunican mediante el bus SPI con nuestro Arduino, por lo que es necesaria esta librería para poder acceder a la tarjeta.

Descarga las librerías desde aqui: LIBRERÍAS PARA TFT SD 2.4″ SHIELD 

Es muy importante descargar TODAS las librerías y colocarlas correctamente en la carpeta de librerías del IDE de Arduino (Arduino>Libraries), si no están todas las librerías y bien situadas, el shield TFT LCD no funcionará.

UbicacionLibrerias

En el caso de utilizar la última versión de Arduino, 1.6.3, podemos obviar la colocación de las librerías SPI y SD ya que el propio entorno de Arduino trae una versión más actualizada de estas, por lo que podemos utilizar la versión de Arduino 1.0 o la última versión.

Colocadas las librerías, abrimos el entorno de Arduino 1.0  y procedemos a ver los 3 ejemplos de las 3 funciones principales de este shield.

1. Visualización de gráficos y texto en LCD

Nos dirigimos a File > Examples > Adafruit_TFTLCD > Ejemplo_Grafico
Y obtenemos el siguiente código:

#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD 

// Pines de conexion del LCD
#define LCD_CS A3 // Chip Select - Pin analogico 3
#define LCD_CD A2 // Command/Data - Pin Analogico 2
#define LCD_WR A1 // LCD Write - Pin Analogico 1
#define LCD_RD A0 // LCD Read - Pin Analogico 0
#define LCD_RESET A4 // LCD Reset - Pin Analogico 4

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); // Instancia del LCD 

#define BLACK 0x0000 // Definimos los colores para poder referirnos a ellos con su nombre
#define RED 0xF800 // en lugar de usar el código hexadecimal de cada uno.
#define GREEN 0x07E0
#define WHITE 0xFFFF
#define BLUE 0x001F
#define CYAN 0x07FF
#define YELLOW 0xFFE0
#define MAGENTA 0xF81F

void setup(void)
{
 tft.begin(0x9341); // Iniciamos el LCD especificando el controlador de nuestro LC. En este caso el ILI9341.
 // Otros controladores: 0x9325, 0x9328,0x7575, 0x9341, 0x8357.

 tft.fillScreen(BLACK); // Colocamos el fondo del LCD en Negro
}

void loop(void)
{
 tft.setRotation(0); // Establecemos la posición de la pantalla Vertical u Horizontal

 tft.setCursor(40, 10); // Situamos el cursor en la posicion del LCD deseada,
 // (X, Y) siendo X el ancho (240 px max.) e Y el alto (320 px max.) 

 tft.setTextSize(5); // Definimos tamaño del texto. (Probado tamaños del 1 al 10)

 tft.setTextColor(CYAN); // Definimos el color del texto 

 tft.println("Texto"); // Escribimos nuestro texto en el LCD. Realizará un salto de linea
 // automatico si el texto es mayor que el tamaño del LCD

 tft.drawLine(20, 65, 200, 70, GREEN); // Dibujamos una linea (Punto inicio X, Punto inicio Y, Punto final X, Punto final Y, Color)

 int X = tft.width(); // Almacenamos en la variable entera X el ancho del LCD en pixeles mediante tft.width();
 int Y = tft.height(); // Almacenamos en la variable entera Y el alto del LCD en pixeles mediante tft.height();

 tft.setCursor(15, 90); // Situamos el cursor en una nueva posicion del LCD

 tft.setTextSize(3); // Definimos tamaño del texto.

 tft.setTextColor(RED); // Definimos el color del texto 

 tft.print("X="); tft.print(X, DEC); // Imprimimos por pantalla el valor de las variables en decimal
 tft.print(" Y="); tft.println(Y, DEC);

 tft.drawRect(20, 125, 200, 25, YELLOW); // Dibujamos un cuadrado/rectangulo sin color de relleno
 // (Punto inicial X, Punto inicial Y, Longitud X,Longitud Y, Color)

 tft.fillRect(20, 165, 60, 60, BLUE); // Dibujamos un cuadrado/rectangulo relleno de color
 //(Punto inicial X, Punto inicial Y, Longitud X,Longitud Y, Color)

 tft.drawCircle(120, 195, 30, WHITE); // Dibujamos un circulo sin color de relleno
 //(Punto inicial X, Punto inicial Y, Radio del circulo, Color)

 tft.fillCircle(120, 195, 20, WHITE); // Dibujamos un circulo relleno de color
 //(Punto inicial X, Punto inicial Y, Radio del circulo, Color) 

 tft.drawTriangle // Dibujamos un triangulo sin color de relleno
 (190, 163, // (Vertice superior X, Vertice superior Y,
 160, 225, // Vertice inferior izquierdo X, vertice inferior izquierdo Y,
 222, 225, CYAN); // Vertice inferior derecho X, Vertice inferior derecho Y, Color)

 tft.fillTriangle // Dibujamos un triangulo relleno de color
 (190, 240, // (Vertice superior X, Vertice superior Y,
 160, 302, // Vertice inferior izquierdo X, vertice inferior izquierdo Y,
 222, 302, MAGENTA); // Vertice inferior derecho X, Vertice inferior derecho Y, Color)

 tft.drawRoundRect(20, 245, 130, 60, 20, RED); // Dibujamos un cuadrado/rectangulo con los bordes redondeados sin color de relleno
 // (Punto inicial X, Punto inicial Y, Longitud X,Longitud Y, Radio de los vertices, Color)

 tft.fillRoundRect(35, 255, 100, 40, 15, YELLOW); // Dibujamos un cuadrado/rectangulo con los vertices redondeados relleno de color
 // (Punto inicial X, Punto inicial Y, Longitud X,Longitud Y, Radio de los vertices, Color)
 delay(10000);
}

Analizamos un poco el código por partes y vemos que tenemos las librerías necesarias para trabajar con el LCD y la librería para la realización de gráficos,  la declaración de los pines necesarios, y la instancia del LCD con los pines correspondientes. Utilizaremos para el LCD todos pines analógicos, del A0 al A4, puesto que es un shield no podemos modificarlos.

#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD

// Pines de conexion del LCD
#define LCD_CS A3  // Chip Select - Pin analogico 3
#define LCD_CD A2 // Command/Data - Pin Analogico 2
#define LCD_WR A1 // LCD Write - Pin Analogico 1
#define LCD_RD A0 // LCD Read - Pin Analogico 0
#define LCD_RESET A4 // LCD Reset - Pin Analogico 4

// Instancia del LCD
Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

Back

Posteriormente en el código tenemos la declaración de los colores que utilizaremos en el LCD para dar color a las formas, texto y fondo.

Entramos en el void setup(void) y vemos que la primera linea, es la llamada a la función tft.begin(0x9341);, que iniciará el LCD y le indicará que drivers y registros debe utilizar, por lo que debemos colocar en la variable de esta función, el driver correspondiente a nuestro LCD.

void setup(void)
{
  tft.begin(0x9341); // Especificamos el controlador de nuestro LCD.
                        En este caso el ILI9341.
// Otros controladores: 0x9325, 0x9328,0x7575, 0x9341, 0x8357.

 tft.fillScreen(BLACK); // Colocamos el fondo del LCD en Negro
}

La librería Adafruit_TFTLCD incluye drivers para los siguientes chips:
– ILI932X → 0x9325 / 0x9328
– HX8347G → 0x7575
– ILI9341 → 0x9341 (En nuestro caso este es el driver correcto)
– HX8357 → 0x8357

Y seguido vemos la linea de código que hace la llamada a la función que “pintará” el fondo de nuestro LCD, tft.fillScreen(COLOR);, del color que elijamos, en mi caso negro.
Esto se realiza en el void setup(void); para que solo lo realice una vez.

Vamos al void loop() y vemos todas las funciones que incluye la librería para la realización de gráficos, cuadrados, círculos, líneas, y la escritura de texto, con todos sus parámetros.
Vamos a analizar las primeras lineas y funciones:


void loop()
{
tft.setRotation(0); // Establecemos la pantalla Vertical u Horizontal
tft.setCursor(40, 10);  // Situamos el cursor
tft.setTextSize(5); // Definimos tamaño del texto.
tft.setTextColor(CYAN); // Definimos el color del texto
tft.println("Texto"); // Escribimos nuestro texto en el LCD
tft.drawLine(20, 65, 200, 70, GREEN); // Dibujamos una linea
int X = tft.width(); // Almacenamos en X el ancho del LCD en px
int Y = tft.height(); // Almacenamos en Y el alto del LCD en px
tft.print("X=");
tft.print(X, DEC);  // Imprimimos el valor de las variables en decimal
tft.print(" Y=");
tft.println(Y, DEC);
tft.drawRect(20, 125, 200, 25, YELLOW); // Dibujamos un cuadrado
tft.fillRect(20, 165, 60, 60, BLUE); // Dibujamos un cuadrado relleno
tft.drawCircle(120, 195, 30, WHITE); // Dibujamos un circulo
tft.fillCircle(120, 195, 20, WHITE); // Dibujamos un circulo relleno
}

Si cargamos el Ejemplo_Grafico nuestro Arduino + LCD veremos lo siguiente:

EjemploGrafico-p

En el archivo Ejemplo_Grafico.ino que cargamos en nuestro Arduino, al final del código están todas las funciones con las descripciones de los parámetros necesarios para la realización de gráficos y texto a modo de “chuleta”. Podremos dibujar a placer en nuestro LCD.

2. Utilizando el panel táctil del Shield TFT LCD 

Este shield incluye sobre la pantalla un panel táctil resistivo de 4 hilos que nos permitirá obtener las coordenadas X e Y donde pulsemos sobre la pantalla, y por tanto, poder realizar acciones que van desde pintar sobre nuestro LCD como si fuera un “lienzo digital” o dibujar botones en nuestro LCD que al pulsar sobre ellos realicen una determinada acción.

¿Qué significa que tiene un panel táctil resistivo? 

Pues bien, una pantalla táctil resistiva consiste principalmente en dos capas separadas de material plástico conductor con una determinada resistencia a la corriente eléctrica, que al pulsar en un punto determinado de la capa exterior, ésta hace contacto con la capa interior y midiendo la resistencia calcula el punto exacto donde se ha pulsado en un eje de coordenadas X e Y.

Algunos tipos de pantallas resistivas permiten también la medición de un eje Z, es decir, la presión que se está realizando sobre el punto en concreto de la pantalla.

Para poder utilizar el panel táctil de nuestro shield TFT,  nos dirigimos en el IDE de Arduino 1.0 a File > Examples > Adafruit_TFTLCD > Ejemplo_Tactil


#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD
#include <TouchScreen.h> // Libreria del panel tactil

 // Pines necesarios para los 4 pines del panel tactil
#define YP A1 // Pin analogico A1 para ADC
#define XM A2 // Pin analogico A2 para ADC
#define YM 7
#define XP 6 

// Definimos la presion máxima y minima que podemos realizar sobre el panel
#define MINPRESSURE 1
#define MAXPRESSURE 1000

// Para mejor precision de la presion realizada, es necesario
// medir la resistencia entre los pines X+ y X-.
// En Shield TFT 2.4" LCD se mide entre los pines A2 y 6
// Instancia del panel tactil (Pin XP, YP, XM, YM, Resistencia del panel)
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 364); 

short TS_MINX = 150; // Coordenadas del panel tactil para delimitar
short TS_MINY = 120; // el tamaño de la zona donde podemos presionar
short TS_MAXX = 850; // y que coincida con el tamaño del LCD
short TS_MAXY = 891; 

#define LCD_CS A3 // Definimos los pines del LCD
#define LCD_CD A2 // para poder visualizar elementos graficos
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

#define BLACK 0x0000 // Definimos los colores
#define BLUE 0x001F // que utilizaremos para
#define RED 0xF800 // el texto y los elementos graficos
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); // Instancia LCD 

int X; // Variables que almacenaran la coordenada
int Y; // X, Y donde presionemos y la variable Z
int Z; // almacenara la presion realizada

int a = 0; // variable "flag" para control rebotes

#define ledA 5 // Anodo del led conectado pin digital 5
#define ledK 3 // Catodo del led conectado pin digital 3

void setup(void)
{
 tft.begin(0x9341); // Iniciamos el LCD especificando el controlador ILI9341. 

 tft.fillScreen(CYAN); // Pintamos la pantalla de Rojo

 pinMode(13, OUTPUT);
 pinMode(ledA,OUTPUT);
 pinMode(ledK, OUTPUT);

 tft.drawRect(40, 20, 160, 60, RED); // Dibujamos un "boton"

 tft.setCursor(60,35); // Colocamos el cursor
 tft.setTextSize(4); // Especificamos el tamaño del texto
 tft.setTextColor(RED); // Definimos el color del texto
 tft.println("BOTON"); // Escribimos por pantalla
}

void loop()
{
 lecturaPanel(); // Realizamos lectura del panel para detectar presion y coordenadas

 // Si la pulsación del eje X se produce entre los puntos 40 y 160
 // Y la pulsacion del eje Y se produce entre los puntos 20 y 60
 // Y la presión realizada esta entre el margen determinado
 if((X > 40 && X < 200) && (Y > 20 && Y < 60) && (Z > MINPRESSURE && Z < MAXPRESSURE))
 {
 if (a == 0) // Si la variable flag esta en 0
 {
 tft.fillRect(40, 20, 160, 60, RED); // Dibujamos nuestro boton relleno de color

 tft.setCursor(70,25); // Colocamos el cursor
 tft.setTextSize(3); // Especificamos el tamaño del texto
 tft.setTextColor(WHITE); // Definimos el color del texto
 tft.println("BOTON"); // Escribimos por pantalla
 tft.setCursor(60,50); // Colocamos el cursor
 tft.println("PULSADO"); // Escribimos por pantalla 

 //AQUI REALIZAMOS LA ACCION QUE DESEEMOS: ENCENDER EL LED
 digitalWrite(ledA, HIGH);
 digitalWrite(ledK, LOW);

 a = 1; // Ponemos la variable flag en 1
 delay(150);
 }
 else if (a == 1) // Si la variable flag esta en 1
 {
 tft.fillRect(41, 21, 158, 58, CYAN); // Dibujamos el fondo de nuestro boton en cyan

 tft.setCursor(60,35); // Colocamos el cursor
 tft.setTextSize(4); // Especificamos el tamaño del texto
 tft.setTextColor(RED); // Definimos el color del texto
 tft.println("BOTON"); // Escribimos por pantalla

 //AQUI REALIZAMOS LA ACCION QUE DESEEMOS: APAGAR EL LED
 digitalWrite(ledA,LOW);
 digitalWrite(LedK, LOW);

 a = 0; // Ponemos la variable flag en 0 para evitar los rebotes
 delay(150);
 }
 }
}

void lecturaPanel()
{
 digitalWrite(13, HIGH);
 TSPoint p = ts.getPoint(); // Realizamos lectura de las coordenadas
 digitalWrite(13, LOW);

 pinMode(XM, OUTPUT); // La librería utiliza estos pines como entrada y salida
 pinMode(YP, OUTPUT); // por lo que es necesario declararlos como salida justo
 // despues de realizar una lectura de coordenadas. 

 // Mapeamos los valores analogicos leidos del panel tactil (0-1023)
 // y los convertimos en valor correspondiente a la medida del LCD 320x240
 X = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
 Y = map(p.y, TS_MAXY, TS_MINY, tft.height(), 0);
 Z = p.z;
}

Este sketch lo he preparado específicamente para poder ver todas las funciones de la pantalla táctil de un modo simple.

Analizamos el código por partes:


#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD
#include <TouchScreen.h> // Libreria del panel tactil

// Pines necesarios para los 4 pines del panel tactil
#define YP A1 // Pin analogico A1 para ADC
#define XM A2 // Pin analogico A2 para ADC
#define YM 7
#define XP 6

// Definimos la presion máxima y minima que podemos realizar 
#define MINPRESSURE 1
#define MAXPRESSURE 1000

// Para mejor precision de la presion realizada, es necesario
// medir la resistencia entre los pines X+ y X-.
// En Shield TFT 2.4" LCD se mide entre los pines A2 y 6
// Instancia del panel tactil (Pin XP, YP, XM, YM, Resistencia eje X)
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 364);

int X; // Variables que almacenaran la coordenada
int Y; // X, Y donde presionemos y la variable Z
int Z; // almacenara la presion realizada

#define ledA 5 // Pin digital 5 - Anodo del led
#define ledK 3 // Pin digital 3 - Catodo del led

Además de las librerías de los gráficos y del LCD que hemos visto anteriormente, debemos incorporar la librería TouchScreen.h para poder “leer” las pulsaciones que realizamos sobre el panel táctil.

Vemos que 2 de los pines del panel táctil coinciden con 2 pines del LCD, por lo que posteriormente veremos que debemos declarar esos pines como entrada o salida en medio del sketch en función de quien de los dos elementos los vaya a utilizar, pero para el panel táctil es necesario que estos dos pines estén conectados en dos pines de Arduino que dispongan de ADC  (conversor analógico-digital) para poder obtener las lecturas del panel.

Tenemos dos variables MINPRESSURE y MAXPRESSURE que podemos modificar al gusto para establecer la presión mínima o máxima que debemos hacer sobre la pantalla para detectar la pulsación, puesto que este panel táctil también es capaz de detectar “el eje Z”.

Seguido, la declaración de la instancia del panel táctil, donde apreciamos que debemos colocar los pines que utilizará el panel táctil previamente declarados y en último lugar, debemos colocar el valor de la resistencia a la corriente eléctrica que tiene el panel. Cuanto más preciso sea este valor respecto a la resistencia real que tiene nuestro panel, mejor respuesta dará a la hora de detectar las pulsaciones.


TouchScreen ts = TouchScreen(XP, YP, XM, YM, 364);

Bien, para medir la resistencia del eje X de nuestro panel, si miramos los pines del panel táctil, vemos que el pin XP = Digital 6 y pin XM = Analógico 2, por lo que procedemos a hacer la medición de la resistencia con un multímetro de la siguiente manera:

Resistencia-p

En mi caso, la resistencia es de 364 Ω y lo colocamos en la instancia del Touchscreen.

Si queremos visualizar elementos en la pantalla LCD, debemos declarar, igual que en el ejemplo gráfico, los pines de utilización del LCD, y su instancia, etc.

El código importante de este sketch es la siguiente parte, la función lecturaPanel();


void lecturaPanel()
{
 digitalWrite(13, HIGH);
 TSPoint p = ts.getPoint(); // Realizamos lectura de las coordenadas
 digitalWrite(13, LOW);

 // La librería utiliza estos pines como entrada y salida
 pinMode(XM, OUTPUT); // por lo que es necesario declararlos
 pinMode(YP, OUTPUT); // como salida justo despues de realizar una
                      //  lectura de coordenadas. 

 // Mapeamos los valores analogicos leidos del panel tactil (0-1023)
 // y los convertimos en valor correspondiente a la medida del LCD
 X = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
 Y = map(p.y, TS_MAXY, TS_MINY, tft.height(), 0);
 Z = p.z;
}

Como vemos, realizamos la lectura constantemente del panel, para poder detectar las pulsaciones en todo momento, por lo que debemos llamar a esta función desde el void loop().

La funcion ts.getPoint(); devuelve las coordenadas X e Y de la pulsación detectada, y utilizando estas coordenadas devueltas desde el ADC en un valor comprendido entre 0 y 1023
(8 bits), simplemente las mapeamos para convertir dicho valor en un valor comprendido entre 0 y 240 para el eje X, y un valor comprendido entre 0 y 320 para el eje Y, que corresponderían con el tamaño en pixeles de nuestra pantalla.

En el void loop(); simplemente dibujo un cuadrado con texto “Botón” que al pulsar en las coordenadas que se encuentran dentro de este cuadrado, cambie de color y muestre otro texto diferente y a su vez, encienda el led que tenemos conectado en el pin digital 5. Si volvemos a pulsar el botón, el led se apagará y el botón volverá a su “estado de reposo”.

Este código realizará lo siguiente:

El otro ejemplo que incluye la librería, Ejemplo_Pintar, es una modificación y traducción de comentarios al español que he hecho del ejemplo TFTPaint de la librería de Adafruit, y que nos permite pintar con diferentes colores sobre el LCD como si fuera un “lienzo digital”:

3. Visualizando imagenes BMP en el LCD

Por último pero no menos importante, vamos a visualizar en el LCD, imágenes en formato BMP de 24 bits almacenadas en la tarjeta MicroSD del shield.

Como podemos observar en la siguiente imagen, el shield incluye un lector de tarjetas MicroSD conectado a los pines correspondientes al bus SPI, ya que utilizan este bus para comunicarse.
(Clic aqui para conocer como se comunican las tarjeta SD y Arduino)

Los pines del bus SPI se corresponden con los siguientes:

– Pin digital 10 – CS / SS (En librería Arduino SD / Este pin es configurable vía software)
– Pin digital 11 – MOSI
– Pin digital 12 – MISO
– Pin digital 13 – CLKSD-p

A tener en cuenta que las imágenes que almacenemos en nuestra MicroSD, deben ser imágenes en formato BMP de 24 bits y de tamaño máximo 320 x 240 pixeles.
Otro tipo de formatos de imagen NO los reconocerá.

Almacenamos varias imágenes en nuestra MicroSD recordando los nombres exactos que les dimos para cargarlas desde el código del sketch, e introducimos la MicroSD en nuestro Shield. 

Procedemos a cargar el ejemplo: File > Examples > Adafruit_TFTLCD > Ejemplo_ImagenesSD

Y obtenemos el siguiente código:


#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD
#include <SD.h> // Libreria de tarjeta SD
#include <SPI.h> // Libreria bus SPI

#define LCD_CS A3 // Definimos los pines del LCD
#define LCD_CD A2 // para poder visualizar elementos graficos
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

// Los pines del puerto SPI vienen configurados por libreria, por lo que
// solamente debemos colocar el pin correspondiente al Chip Select del
// bus SPI correspondiente a la conexion con la tarjeta SD
#define SD_CS 10

// En la tarjeta SD debemos colocar imagenes en formato BMP de 24 Bits!
// Otro tipo de formato de imagen no se puede visualizar por pantalla.

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); // Instancia LCD

void setup()
{
 Serial.begin(9600); // Iniciamos el puerto serie para comprobar
 // la comunicacion con la tarjeta microSD
 tft.reset();

 tft.begin(0x9341); // Iniciamos el LCD especificando el controlador ILI9341.

Serial.print(F("Inicializando tarjeta SD..."));

 if (!SD.begin(SD_CS)) // Si se produce un error al intentar acceder
 { // a la tarjeta SD, lo mostramos por el Serial Monitor
 Serial.println(F("Error!"));
 return;
 }
 Serial.println(F("OK!"));

}

void loop()
{
 tft.setRotation(0); // Establecemos la posicion de la pantalla Vertical

 bmpDraw("1.bmp", 0, 0); // Mostramos una imagen en las coordenadas 0,0

 delay(1000);

 tft.setRotation(3); // Establecemos la posicion de la pantalla Horizontal

 bmpDraw("2.bmp",0,0); // // Mostramos otra imagen en las coordenadas 0,0

 delay(1000);
}

// Esta funcion abre un archivo Windows bitmap (BMP) y lo muestra por
// pantalla en las coordenadas especificadas. Se puede acelerar el
// proceso de muestreo leyendo muchos pixeles a la vez en lugar de
// leer pixel a pixel, incrementando el tamaño de la siguiente variable
// BUFFPIXEL, utilizaremos mas memoria RAM del Arduino pero se realizará
// la carga de la imagen mas rapido.
// Un buffer de 20 pixeles es un valor equilibrado.

#define BUFFPIXEL 20

void bmpDraw(char *filename, int x, int y) {

File bmpFile;
 int bmpWidth, bmpHeight; // W+H in pixels
 uint8_t bmpDepth; // Bit depth (currently must be 24)
 uint32_t bmpImageoffset; // Start of image data in file
 uint32_t rowSize; // Not always = bmpWidth; may have padding
 uint8_t sdbuffer[3*BUFFPIXEL]; // pixel in buffer (R+G+B per pixel)
 uint16_t lcdbuffer[BUFFPIXEL]; // pixel out buffer (16-bit per pixel)
 uint8_t buffidx = sizeof(sdbuffer); // Current position in sdbuffer
 boolean goodBmp = false; // Set to true on valid header parse
 boolean flip = true; // BMP is stored bottom-to-top
 int w, h, row, col;
 uint8_t r, g, b;
 uint32_t pos = 0, startTime = millis();
 uint8_t lcdidx = 0;
 boolean first = true;

if((x >= tft.width()) || (y >= tft.height())) return;

Serial.println();
 Serial.print(F("Loading image '"));
 Serial.print(filename);
 Serial.println('\'');
 // Open requested file on SD card
 if ((bmpFile = SD.open(filename)) == NULL) {
 Serial.println(F("File not found"));
 return;
 }

// Parse BMP header
 if(read16(bmpFile) == 0x4D42) { // BMP signature
 Serial.println(F("File size: ")); Serial.println(read32(bmpFile));
 (void)read32(bmpFile); // Read & ignore creator bytes
 bmpImageoffset = read32(bmpFile); // Start of image data
 Serial.print(F("Image Offset: ")); Serial.println(bmpImageoffset, DEC);
 // Read DIB header
 Serial.print(F("Header size: ")); Serial.println(read32(bmpFile));
 bmpWidth = read32(bmpFile);
 bmpHeight = read32(bmpFile);
 if(read16(bmpFile) == 1) { // # planes -- must be '1'
 bmpDepth = read16(bmpFile); // bits per pixel
 Serial.print(F("Bit Depth: ")); Serial.println(bmpDepth);
 if((bmpDepth == 24) && (read32(bmpFile) == 0)) { // 0 = uncompressed

goodBmp = true; // Supported BMP format -- proceed!
 Serial.print(F("Image size: "));
 Serial.print(bmpWidth);
 Serial.print('x');
 Serial.println(bmpHeight);

// BMP rows are padded (if needed) to 4-byte boundary
 rowSize = (bmpWidth * 3 + 3) & ~3;

// If bmpHeight is negative, image is in top-down order.
 // This is not canon but has been observed in the wild.
 if(bmpHeight < 0) {
 bmpHeight = -bmpHeight;
 flip = false;
 }

// Crop area to be loaded
 w = bmpWidth;
 h = bmpHeight;
 if((x+w-1) >= tft.width()) w = tft.width() - x;
 if((y+h-1) >= tft.height()) h = tft.height() - y;

// Set TFT address window to clipped image bounds
 tft.setAddrWindow(x, y, x+w-1, y+h-1);

for (row=0; row<h; row++) { // For each scanline...
 // Seek to start of scan line. It might seem labor-
 // intensive to be doing this on every line, but this
 // method covers a lot of gritty details like cropping
 // and scanline padding. Also, the seek only takes
 // place if the file position actually needs to change
 // (avoids a lot of cluster math in SD library).
 if(flip) // Bitmap is stored bottom-to-top order (normal BMP)
 pos = bmpImageoffset + (bmpHeight - 1 - row) * rowSize;
 else // Bitmap is stored top-to-bottom
 pos = bmpImageoffset + row * rowSize;
 if(bmpFile.position() != pos) { // Need seek?
 bmpFile.seek(pos);
 buffidx = sizeof(sdbuffer); // Force buffer reload
 }

for (col=0; col<w; col++) { // For each column...
 // Time to read more pixel data?
 if (buffidx >= sizeof(sdbuffer)) { // Indeed
 // Push LCD buffer to the display first
 if(lcdidx > 0) {
 tft.pushColors(lcdbuffer, lcdidx, first);
 lcdidx = 0;
 first = false;
 }
 bmpFile.read(sdbuffer, sizeof(sdbuffer));
 buffidx = 0; // Set index to beginning
 }

// Convert pixel from BMP to TFT format
 b = sdbuffer[buffidx++];
 g = sdbuffer[buffidx++];
 r = sdbuffer[buffidx++];
 lcdbuffer[lcdidx++] = tft.color565(r,g,b);
 } // end pixel
 } // end scanline
 // Write any remaining data to LCD
 if(lcdidx > 0) {
 tft.pushColors(lcdbuffer, lcdidx, first);
 }
 Serial.print(F("Loaded in "));
 Serial.print(millis() - startTime);
 Serial.println(" ms");
 } // end goodBmp
 }
 }

bmpFile.close();
 if(!goodBmp) Serial.println(F("BMP format not recognized."));
}

// These read 16- and 32-bit types from the SD card file.
// BMP data is stored little-endian, Arduino is little-endian too.
// May need to reverse subscript order if porting elsewhere.

uint16_t read16(File f) {
 uint16_t result;
 ((uint8_t *)&result)[0] = f.read(); // LSB
 ((uint8_t *)&result)[1] = f.read(); // MSB
 return result;
}

uint32_t read32(File f) {
 uint32_t result;
 ((uint8_t *)&result)[0] = f.read(); // LSB
 ((uint8_t *)&result)[1] = f.read();
 ((uint8_t *)&result)[2] = f.read();
 ((uint8_t *)&result)[3] = f.read(); // MSB
 return result;
}

Vemos y analizamos por partes el código hasta el void loop()

En este caso, debemos añadir además de las librerías ya utilizadas para realización de gráficos y utilización del LCD, las librerías correspondientes a la tarjeta, <SD.h> y al bus SPI, <SPI.h>


#include <Adafruit_GFX.h> // Libreria de graficos
#include <Adafruit_TFTLCD.h> // Libreria de LCD
#include <SD.h> // Libreria de tarjeta SD
#include <SPI.h> // Libreria bus SPI

#define LCD_CS A3 // Definimos los pines del LCD
#define LCD_CD A2 // para poder visualizar elementos graficos
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

// Los pines del puerto SPI vienen configurados por libreria, 
// debemos colocar el pin correspondiente al Chip Select del
// bus SPI correspondiente a la conexion con la tarjeta SD
#define SD_CS 10

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

Declaramos los pines del LCD del mismo modo que en el ejemplo gráfico y el TouchScreen.

Dado que los pines del zócalo de la tarjeta MicroSD del shield, están conectados a los pines del bus SPI de Arduino, no es necesario declararlos puesto que vienen declarados en la librería SPI de Arduino, solamente debemos declarar el pin CS que será el que determine la comunicación entre el maestro (Arduino) y el esclavo (MicroSD).
Por tanto, comprobamos y el shield tiene el pin CS en el correspondiente al pin Digital 10. 

void setup()
{
 Serial.begin(9600); // Iniciamos el puerto serie para comprobar 
                     // la comunicacion con la tarjeta microSD 

 tft.begin(0x9341); // Iniciamos el LCD controlador ILI9341.

 Serial.print(F("Inicializando tarjeta SD..."));

 if (!SD.begin(SD_CS)) // Si se produce un error al intentar acceder
 {                     // a tarjeta SD, mostramos por Serial Monitor
    Serial.println(F("Error!"));
    return;
 }
   Serial.println(F("OK!"));
}

Iniciamos el Serial Monitor para poder obtener resultados del proceso de comunicación con la tarjeta SD y comprobar que todo ha sido correcto.
Inicializamos el LCD con el driver correcto e intentamos acceder a la tarjeta SD mediante la funcion SD.begin(SD_CS); Si todo va bien, veremos un “OK!” en el Serial Monitor y podremos acceder a nuestro SD para visualizar nuestras imágenes.

Y por último, vemos el void loop()


void loop()
{
  tft.setRotation(0); // Establecemos posicion del LCD Vertical
  bmpDraw("1.bmp", 0, 0); // Mostramos imagen en las coordenadas 0,0
  delay(1000); // Tiempo de espera para mostrar la imagen
  tft.setRotation(3); // Establecemos posicion del LCD Horizontal
  bmpDraw("2.bmp",0,0); // Mostramos imagen en las coordenadas 0,0
  delay(1000); // Tiempo de espera para mostrar la imagen
}

En este caso, establecemos la rotación de la pantalla, en vertical u horizontal mediante la función tft.setRotation(0); en función de las imágenes que vayamos a mostrar por el LCD.

Y para visualizar las imágenes, llamamos a la función bmpDraw(“NombreImagen.bmp”, X, Y);, pasando como parámetros el nombre EXACTO que tiene nuestra imagen almacenada en la MicroSD y las coordenadas X e Y de donde queremos mostrarla en la pantalla.
Esta función viene incluida en el sketch tftbmp de la librería de Adafruit y funciona muy bien.

Y así podemos visualizar imágenes almacenadas en la tarjeta microSD:

Resumiendo, es un fantástico módulo shield que podremos utilizar en muchos proyectos diferentes añadiendo un elemento actual y moderno como son las pantallas táctiles, visualizando gráficos a todo color ya sean imágenes, botones o texto y pudiendo leer y escribir datos o imágenes desde la tarjeta MicroSD. 

Agradecer a Electrohobby por el módulo shield y nos vemos en el siguiente tuto!

😀


 Resolución de problemas

Si teniendo todas las librerías descargadas y correctamente colocadas, al iniciar cualquiera de los sketchs propuestos en este tutorial, lo que vemos es la pantalla llena de pixeles de colores:

Pixeles-p
Es posible que el chip de nuestro LCD sea diferente al que estamos configurando, por lo que debemos probar con los diferentes drivers que incluye esta librería de Adafruit para poder inicializar correctamente el LCD.

Modificando la siguiente linea de código de nuestro sketch, cambiamos el valor entre paréntesis por alguno de los otros controladores disponibles y vamos probando para comprobar cuál es el driver que necesita nuestro LCD.


tft.begin(0x9341); // Iniciamos el LCD especificando el controlador

// Controladores disponibles:  0x9325, 0x9328, 0x7575, 0x9341, 0x8357


 

Anuncios

79 comentarios en “TFT LCD Touch 2.4” Shield para Arduino UNO

  1. hola primero que todo felicitarte eres el primero al cual veo que le resulta todo..
    pero tengo una duda. Cuando cargo a mi arduino los ejemplos me sale el touch al contrario y segundo el color diferente. en los problemas que dejaste tu solo dejaste lo del controlador yo ocupe el 0x9325 para que los colores fuesen los que dicen en el código pero incluso así el touch sale al revés
    por ejemplo, en el botón sale roja la pantalla en vez de cyan y el accionamiento del botón sale como si la pantalla fuese horizontal y el texto aparece vertical con la mirada hacia los botones que trae la pantalla.
    eso es jaaja por fa si sabes como resolver esos temas te lo agradecería.

    • Cames, gracias antes que nada.

      El problema que tienes es por la forma en la que están mapeados los valores de las coordenadas donde presionas.
      Busca la linea de código:

      p.x = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
      p.y = map(p.y, TS_MAXY, TS_MINY, tft.height(), 0);

      Y cambiala por ésta:

      p.x = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
      p.y = map(p.y, TS_MINY, TS_MAXY, tft.height(), 0);

      A ver si así se resuelve el problema. Lo que hemos hecho es simplemente intercambiar el valor de mapeo minimo del eje Y (TS_MINY) por el valor de mapeo maximo del eje Y (TS_MAXY).
      Así lo resolví yo en un primer momento, por lo que debería funcionarte. En caso de que el eje que te vaya “al reves” sea el eje X, realiza el cambio en los valores de la primera linea del código,
      los que se refieren al punto p.x.

      Sobre los colores, revisa que tengas bien los códigos de los colores:

      #define BLACK 0x0000 // Definimos los colores
      #define BLUE 0x001F // que utilizaremos para
      #define RED 0xF800 // el texto y los elementos graficos
      #define GREEN 0x07E0
      #define CYAN 0x07FF
      #define MAGENTA 0xF81F
      #define YELLOW 0xFFE0
      #define WHITE 0xFFFF

      Saludos

      • Hola si gracias probaré el mapeo, y lo otro a mi en los colores tuve que intercambiar los datos por ejemplo el BLACK me da como 0xFFFF y asi con los demás los tuve que arreglar con simples ejemplos.

        y una pregunta mas yo realizo ahora un proyecto y necesito que me muestre la temperatura de mi LM 35 y el problema que me ocurre es que en la pantalla me lo valores pero no se refresca el dato al final queda por encima en dato y asi se convierte en un cuadrado de números sobrepuestos como puedo arreglar eso ??? Ojo que la conversión ya la tengo dolo me falta mostrar el dato y que refresque.
        por favor si tienes algún dato te lo agradecería muchísimo.

        • Cames,

          Al dibujar un numero, para volver a dibujar un numero en la misma posición, habría que “borrar” la pantalla.
          Como no hay una función especifica para borrar lo que ya está dibujado antes de dibujar algo nuevo, lo que hago yo,
          es pintar nuevamente el fondo de la pantalla del color que lo tenia, me explico, si estas usando fondo negro y texto en blanco,
          cuando haces la lectura del sensor, lo muestras por pantalla, y justo antes de realizar una lectura del sensor nuevamente,
          pinto el fondo negro de la pantalla de nuevo ( tft.fillScreen(BLACK); ) y asi se “borra” lo que había, y no se superpone con el
          nuevo valor leído del sensor.

          Siempre puedes limitar la zona en la que pintas, en lugar de pintar toda la pantalla, dibujar un cuadro negro solamente donde estás
          mostrando el valor del sensor, así no tienes que “reescribir” toda la pantalla de nuevo si tienes otros elementos dibujados.

          Saludos!

        • pero por ejemplo quiero conservar el botón y lo que me causa es una alteración, ya que como el programa esta en el loop al presionar el botón tengo un desorden con el dato del lm35.
          como puedo separar el proceso del boton o del dato del lm35 para que no queden en el loop por ejemplo hacer como lo que hiciste en el panel control?? ayudaaa

      • Tengo el mismo problema con los colores, es como si todo estuviese negado, voy a revisar el codigo, si tengo alguna novedad aviso.
        Saludos

        • Para los que trabajan con tft.begin(0x9341);

          les dejo los colores

          #define BLACK 0xFFFF // Definimos los colores
          #define BLUE 0xFFE0 // que utilizaremos para
          #define RED 0x07FF // el texto y los elementos graficos
          #define GREEN 0xF81F
          #define CYAN 0xF800
          #define MAGENTA 0x07E0
          #define YELLOW 0x001F
          #define WHITE 0x0000
          #define DARK 0x7BEF
          #define NARANJO 0x1358
          #define CELESTE 0x79E0
          #define COLOR 0x7B00
          #define VERDE 0X9999
          #define ROJOOSCURO 0X7575

        • tendrias que hacer un cuadrado como un boton y mostrar los datos en este cuadrado y borrar cada vez que muestres nuevos datos, seria algo asi

          tft.setTextSize(7);
          tft.print(temp);
          //tft.print(millis()/1000);
          tft.setTextSize(4);
          tft.setCursor(190, 140);
          tft.println(“Bar”);
          delay(200);
          tft.fillRect(ladodato, 120, 170, 65,BLACK);// Mejora refrescar pantalla
          //tft.fillScreen(BLACK); //Asi se veria muy lento y no siempre es necesario borrar toda la pantalla

  2. Oye disculpa una duda, tengo un problema con mi TFT no se si sea parte de los drivers, sea de fabrica, pero la pantalla aparece en modo espejo

    • Andrés Robles,

      Prueba a escribir esta linea de código: tft.setRotation(0); // Establecemos la posición de la pantalla Vertical u Horizontal
      antes de las lineas de código que dibujan los elementos en la pantalla. Puedes añadirla en al principio del void loop por ejemplo.

      Saludos

      • En mi caso tuve que invertir las entradas analógicas, así.

        #define YP A2 // Pin analogico A2 para ADC
        #define XM A1 // Pin analogico A1 para ADC
        #define YM 6
        #define XP 7

        • Fabiomdiaz, con este cambio lograste que la pantalla no te saliera como espejo, si es así donde agregaste estas lineas, de ante mano muchas gracias.-

    • Estimados, agradezco la publicación de este ejemplo. También tuve el problema espejo con el Driver para el ILI9335 y lo resolví en mi caso modificando las siguientes líneas del archivo Adafruit_TFTLCD.cpp en las siguientes líneas:
      //**********************************************Set Gram aera
      ILI932X_HOR_START_AD , 0x0000,
      ILI932X_HOR_END_AD , 0x00EF,
      ILI932X_VER_START_AD , 0x0000,
      ILI932X_VER_END_AD , 0x013F,
      ILI932X_GATE_SCAN_CTRL1 , 0x2700, // Driver Output Control (R60h)
      ILI932X_GATE_SCAN_CTRL2 , 0x0001, // Driver Output Control (R61h)
      ILI932X_GATE_SCAN_CTRL3 , 0x0000, // Driver Output Control (R62h)
      //*********************************************Paratial display
      ILI932X_PANEL_IF_CTRL1 , 0x0010, // Panel Interface Control 1 (R90h)
      ILI932X_PANEL_IF_CTRL2 , 0x0000,
      ILI932X_PANEL_IF_CTRL3 , 0x0003,
      ILI932X_PANEL_IF_CTRL4 , 0x0101,
      ILI932X_PANEL_IF_CTRL5 , 0x0000,
      ILI932X_PANEL_IF_CTRL6 , 0x0000,
      Había que darle varias vueltas al asunto, pero salió al fin.

  3. Hola, Tengo una similar pero de 3.6 pulgadas ya pude corregir lo del dimensionamiento de la LCD pero aun Aparecen los Textos e Imagenes en Espejo, Como podrias reparar eso_?

    • EriQuintana,

      Prueba a escribir esta linea de código: tft.setRotation(0); // Establecemos la posición de la pantalla Vertical u Horizontal
      antes de las lineas de código que dibujan los elementos en la pantalla. Puedes añadirla en al principio del void loop por ejemplo.

      Saludos

  4. Hola, muy bueno tu tutorial la verdad despues de tanto probar, es el unico que me funciono! Pero tengo problemas con el touch. De que manera puedo calibrar la pantalla ? Probe el ejemplo del Paint pero no puedo seleccionar los colores, o al tocar uno se selecciona otro (el touch esta disparatado). Ademas, al mover el lapiz por la pantalla, solo se marcan puntitos y no un trazo continuo, y, tambien, en cualquier parte. Alguna idea ? Uso el driver 9325, la resistencia entre los pines me marca 1400 ohms, y cambie el mapeo de las coordenadas del codigo original por este:
    p.x = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
    p.y = map(p.y, TS_MINY, TS_MAXY, tft.height(), 0);

    Saludos!!

  5. Hola, antes que nada, muchas gracias por el aporte y por dedicar tiempo a personas como yo que no se dan manía para solucionar algunas cosas. Quisiera bajar las librerías pero está caído el link, podrás volver a subirlas? Muchas gracias, fabio.

  6. Hola amigos, quiero agradecer a todos por la infomacion que postean, es de gran ayuda para los que vamos empezando a realizar proyectos con las TFT lcd, en lo personal yo cuento con una parecida a la que esta publicada aqui, la cual supuestamente trabaja con el driver ILI9325, ya he conseguido que funcione con el touch y me he dado a la tarea de realizar un teclado matricial que va del cero al nueve pero tengo un problema que cuando presiono algun numero solo he logrado que aparezca en una zona en especifico de la pantalla, alguno de ustedes sabe como poder programar el touch tal forma que el numero aparezca pero de forma consecutiva? Saludos a todos

    Lo que hago es dibujar un recuadro que ya tiene impreso en numero y luego si alguien da click sobre ese mismo recuadro mando a que imprima el numero en cierta posicion del touch pero el detalle es que siempre aparece en el mismo lugar, y requiero que siga un consecutivo.
    pen_down();
    if(TFT_TP.flag&&TFT_TP.y_val&&TFT_TP.x_val)
    if(10<TFT_TP.x&&TFT_TP.x<70&&30<TFT_TP.y&&TFT_TP.y<70)
    {
    draw_edge(10,30,70,70,1,0xffff);
    for(;TFT_TP.flag;)
    pen_down();
    draw_edge(10,30,70,70,1,0×0000);

    set_txt(10,270,10,280,0x00f0); ////2
    set_fontcolor(0xffff);
    lcd_string("1");

    Saludos a todos…

  7. HOLA A TODOS, GRACIAS Y FELICIDADES POR LA INFORMACIÓN ES DE GRAN AYUDA, YO INTENTO GRAFICAR UNA LINEA CON LA CONSTANTE DE TIEMPO EN (X) e (Y) LA DIFERENCIA DE VOLTAJE*** MEJOR DICHO UNA SEÑAL ANALOGICA ESPERO ALGUIEN ME PUEDA AUXILIAR

  8. HOLA A TODOS, GRACIAS Y FELICIDADES POR LA INFORMACIÓN ES DE GRAN AYUDA, YO INTENTO GRAFICAR UNA LINEA CON LA CONSTANTE DE TIEMPO EN (X) e (Y) LA DIFERENCIA DE VOLTAJE*** MEJOR DICHO UNA SEÑAL ANALOGICA ESPERO ALGUIEN ME PUEDA AUXILIAR

  9. Gracias por tu tutorial, me a funcionado muy bien, el problema que tengo es que igual que a muchos me sale la imagen tipo espejo osea al revés el cambio en la linea tft.setRotation(0); // Establecemos la posición de la pantalla Vertical u Horizontal.
    solo cambia la rotación de la pantalla pero igual se ve como espejo, alguien a solucionado este detalle

  10. Hola en primer medida queria felicitarte por tu aporte me ha sido de gran ayuda.. te comento pude cargar el programa cambiando el driver por el 0x9325 pero en mi pantalla aparecen lineas de diferentes colores sobre la pantalla que programaste… a que se debera ese problema

  11. Hola,
    Encontré su excelente tutorial .
    Me gustaría crear un proyecto que muestra la fecha y la hora en la pantalla. mi problema es el siguiente como el RTC – 1307 ocupa el pin A4 y A5 para SCL y SDA . pero estos son utilizados por la pantalla. ¿Hay una manera de hacer el proyecto ? Si te gusta que debo conectar el módulo RTC- 1307 y en la pantalla ?
    Pido disculpas por la falta de conocimiento de la lengua .
    Gracias por cualquier sugerencia.

  12. Hola, muy bueno el tutorial, he aprendido mucho. Quisiera preguntarte los puertos que tengo para conectar algo externo, como un lee. Es decir a través de la pantalla poder activar tres leds independientes. No se que cantidad de puertos me quedan libres o si puedo liberar algunos.
    Muchas gracias

  13. Hola a todos,

    En primer lugar, agradecer el aporte, ya que sin el mismo no me hubiera iniciado.

    Quisiera aprovechar para añadir un pequeño aporte sobre los colores con la placa ILI9325 adquirida recientemente en electrohobby, en la que veía que los colores no coincidían con los definidos. Con lo que me puse a estudiar el código hex de cada color y de la transformación a RGB, tras lo cual, consultando el Adafruit GFX Graphics Library – Adafruit Learning System, observé lo siguiente:
    El RGB está compuesto por los siguiente bits: 5 para R, 6 para G, 5 para B
    Con lo que me puse a estudiar combinaciones, llegando a la conclusión que no se debía utilizar el sexto bit más significativo para el G, con lo que el WHITE pasó de ser 0xFFFF a ser 0xFBFF, o lo que es lo mismo en binario 1111101111111111 y no todo unos.

    Siguiendo así, he redefinido los colores tal como sigue (algunos siguen siendo los mismos del ejemplo):
    #define RED 0xF800
    #define GREEN 0x03E0
    #define WHITE 0xFBFF
    #define BLUE 0x001F
    #define CYAN 0x07FF
    #define ORANGE 0xFFE0
    #define YELLOW 0xFBE0
    #define MAGENTA 0xF81F
    #define GREY 0xC318
    #define LIGHTGREY 0xE39C
    #define PINK 0xFB19
    #define NAVY 0x000F

  14. Otro aporte interesante, sería la de configurarse automáticamente al tipo de placa TFT que utilizamos:

    uint16_t identifier = tft.readID(); // detectamos el tipo de placa

    tft.begin(identifier); // Iniciamos el LCD especificando el controlador automáticamente.

  15. Hola, descargue las librerias y el touch no me detecta como debe, tiene invertidos los ejes X y Y, cuales son las coordenadas

    • Más arriba hablan de este problema.

      Busca la linea de código:
      p.x = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
      p.y = map(p.y, TS_MAXY, TS_MINY, tft.height(), 0);

      Y cambiala por ésta:
      p.x = map(p.x, TS_MAXX, TS_MINX, tft.width(), 0);
      p.y = map(p.y, TS_MINY, TS_MAXY, tft.height(), 0);

  16. HOLA TENGO UN PROOBLEMA CON TU CODIGO YA QUE ME MARCA LO SIGUIENTE y no funciona la TouchScreen
    sketch_oct22a.ino: In function ‘void lecturaPanel()’:
    sketch_oct22a:125: error: ‘TSPoint’ was not declared in this scope
    sketch_oct22a:125: error: expected `;’ before ‘p’
    sketch_oct22a:133: error: ‘p’ was not declared in this scope
    ya instale las librerias

  17. Muchísimas gracias, de por sí es difícil encontrar tutoriales buenos para las TFT, y más aun en español. Todo muy bien explicado y detallado. Felicidades.

  18. hola.
    lo primero agradecer la publicacion. Yo tengo un problema con el driver. Mi tft tiene el driver ILI9340 y no me funciona. cual debo usar? Gracias

Deja un comentario!

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s