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.1-TFTFrontBack

Como 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.

 

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 Arduino2-EncajeTFT-R3

 

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.3-TablaTFT

 

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á.4-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:

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.

 

5-BackPosteriormente 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.

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:

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

 

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? 7-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

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:

 

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.

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:8-Resistencia

 

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

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.

Los pines del bus SPI se corresponden con los siguientes:

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

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. 

Cargamos el ejemplo: File > Examples > Adafruit_TFTLCD > Ejemplo_ImagenesSD

Y obtenemos el siguiente código:

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>

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. 

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

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.

En el siguiente tutorial, veremos como conectar este mismo shield en un Arduino MEGA para poder actuar con muchos más pines y realizar cualquier tipo de proyecto!

¡Agradecer a Electrohobby por el módulo shield!


 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:10-Pixeles
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.