Pantalla TFT LCD táctil con Arduino

En este proyecto, trabajaremos con una pantalla TFT LCD de 3.5 pulgadas, en donde probaremos su capacidad gráfica y táctil, así como posibles aplicaciones en diversos proyectos con Arduino.

Esta es una Shield táctil fabricada por la gente de MCUFRIEND, tiene una resolución de 480x320, utiliza el controlador ILI9481 y es muy versátil ya que se puede conectar tanto al Arduino Uno como al Mega de forma directa. Adicionalmente cuenta con un puerto para leer tarjetas Micro SD.

Para hacer funcionar la pantalla, necesitaremos las siguientes librerías:

• La librería MCUFRIEND, se puede descargar desde aquí: https://github.com/prenticedavid/MCUFRIEND_kbv
• La librería Adafruit GFX, se puede descargar desde aquí: https://github.com/adafruit/Adafruit-GFX-Library
• La librería TouchScreen library, se puede desargar desde aquí: https://github.com/adafruit/Touch-Screen-Library

Componentes utilizados:

• Shield TFT táctil de 3.5'' con controlador ILI9481 y resolución 480x320
• Servomotor TowerPro SG90
• LED
• Display 7 segmentos tipo cátodo común
• Resistencias de 220 ohms
• Protoboard o breadboard
• Cables
• Tarjeta Arduino

Luego de descargar la librería de Adafruit GFX, debemos descomprimir el archivo y renombrar la carpeta a "Adafruit_GFX". Lo mismo con la librería TouchScreen library, luego de descargarla, se descomprime el archivo y se renombra la carpeta a "TouchScreen". Finalmente, copiamos las 3 carpetas de las librerías en donde están instaladas las demás librerías de Arduino. Cerramos y volvemos a abrir el IDE de Arduino. Con esto ya tenemos para hacer funcionar nuestra Shield.

La librería de MCUFRIEND tiene algunos ejemplos que son bastantes útiles para familiarizarnos con el código y funcionamiento de la pantalla. Conectamos la pantalla directamente al Arduino, y en el IDE vamos donde dice: Archivo > Ejemplos > MCUFRIEND_kbv. Allí podemos ver los ejemplos disponibles para esta librería. Como nuestra Shield LCD es de 480x320, escogemos el ejemplo llamado "GLUE_DEMO_480x320" y le damos en subir. Veremos cómo la pantalla muestra diferentes animaciones, círculos, rectángulos, etc.

Detallando el código del ejemplo, podemos ver los comandos que nos permiten dibujar diferentes animaciones. La siguiente tabla muestra los más utilizados:

Comando	Parámetros	Descripción
InitLCD()	0 para orientación vertical 1 para orientación horizontal	Inicializa la pantalla en modo horizontal o vertical
clrScr()	No recibe	Limpia la pantalla. El color de fondo cambia a negro
fillScr(r,g,b)	Componentes rojo, verde y azul de un color RGB	Llena la pantalla con el color especificado en el parámetro
setColor(r,g,b)	Componentes rojo, verde y azul de un color RGB	Especifica el color para dibujar formas como círculos, rectángulos, líneas, etc.
drawLine(x1,y1,x2,y2)	x1 y y1 son el punto inicial, x2 y y2 son el punto final	Dibuja una línea entre dos puntos
drawRect(x1,y1,x2,y2)	x1 y y1 son el punto inicial (esquina superior izquierda), x2 y y2 son el punto final (esquina inferior derecha)	Dibuja un rectángulo entre dos puntos
drawRoundRect(x1,y1,x2,y2)	x1 y y1 son el punto inicial (esquina superior izquierda), x2 y y2 son el punto final (esquina inferior derecha)	Dibuja un rectángulo con las esquinas redondeadas, entre dos puntos
fillRect(x1,y1,x2,y2)	x1 y y1 son el punto inicial (esquina superior izquierda), x2 y y2 son el punto final (esquina inferior derecha)	Dibuja un rectángulo coloreado entre dos puntos
fillRoundRect(x1,y1,x2,y2)	x1 y y1 son el punto inicial (esquina superior izquierda), x2 y y2 son el punto final (esquina inferior derecha)	Dibuja un rectángulo coloreado entre dos puntos, con las esquinas redondeadas
drawCircle(x,y,radio)	Coordenadas X y Y del centro del círculo, radio es la longitud del radio del círculo	Dibuja un círculo con un centro y radio especificado
fillCircle(x,y,radio)	Coordenadas X y Y del centro del círculo, radio es la longitud del radio del círculo	Dibuja un círculo coloreado con un centro y radio especificado
print(texto,x,y) / print(texto,x,y,grados)	Texto a escribir, coordenadas X y Y para escribir el texto, ángulo de rotación (opcional)	Escribe un texto en las coordenadas especificadas. Opcionalmente se puede rotar el texto si se escriben los grados en el parámetro
drawPixel(x,y)	Coordenadas X y Y del pixel	Dibuja un pixel en las coordenadas especificadas

Aquí un archivo con todos los comandos que soporta este tipo de pantallas de MCUFRIEND: http://www.rinkydinkelectronics.com/resource/UTFT/UTFT.pdf

Usando los anteriores comandos, he realizado unas animaciones para probar la capacidad gráfica de la pantalla, las cuales se ven así

El código de este ejemplo se puede descargar desde aquí: https://drive.google.com/open?id=0Bxr9tDhyoU1ZV1F5N0thZWZVWDA

Ahora pasamos a probar la parte táctil de la pantalla. Usando los comandos descritos anteriormente, se puede crear una interfaz desde la cual se controla un servomotor, se modifica el brillo de un LED y también podemos escribir un dígito en un display 7 segmentos de tipo cátodo común. El funcionamiento de este programa se basa en detectar las coordenadas X y Y en donde el usuario presiona la pantalla para realizar una determinada acción. Los valores de las barras de progreso son convertidos en valores para el servo y el LED, según sea el caso.

El código de este ejemplo se puede descargar desde aquí: https://drive.google.com/open?id=0Bxr9tDhyoU1ZZDZiX0ZwUXdfMnM

Otro ejemplo es crear una interfaz parecida al famoso programa Paint, en donde podemos dibujar libremente en la pantalla y utilizando diversos colores. En este caso, también necesitamos una función para obtener las coordenadas X y Y donde el usuario toca la pantalla. Básicamente, el funcionamiento de este programa consiste en dibujar un pequeño círculo de un determinado color en el lugar donde se presiona la pantalla

El código de este ejemplo se puede descargar desde aquí: https://drive.google.com/open?id=0Bxr9tDhyoU1Zb25SWU90NkhucU0