ARD19 – Tarjeta Esplora con TFT

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

La tarjeta Esplora está diseñada para acoplarle una pantalla TFT de pequeño tamaño. Existe un pantalla especialmente concebida para esta tarjeta, con los pines dispuestos para encjar directamente, estilo shield, en los pines hembra de la Esplora.

Podemos ver la pantallita en la figura 19.1 por delante, y en la figura 19.2, por detrás.

Figura 19.1. La TFT de Esplora por delante. En la parte superior se dictingue la leyenda SD CARD.

Figura 19.1. La TFT de Esplora por delante. En la parte superior se dictingue la leyenda SD CARD.

 
Figura 19.2. La TFT de Esplora vista por detrás. En la parte superior se ve el slot para tarjeta micro SD.

Figura 19.2. La TFT de Esplora vista por detrás. En la parte superior se ve el slot para tarjeta micro SD.

Aunque esta pantalla está diseñada para usar como shield con la tarjeta Esplora, se puede conectar, mediante una protoboard, y el cableado necesario, a otras tarjetas Arduino. En este artículo, no obstante, nos vamos a centrar en Esplora.

La pantalla tiene las siguientes características:

  • Tamaño: 1.8 pulgadas. No es muy grande, precisamente, pero, para Esplora, es muy cómoda de manejar.
  • Resolución: 160 píxeles de ancho por 128 de alto.
  • Profundidad de color: 16 bits. Los colores se definen sobre la base de dos palabras de 8 bits, cómo aprendimos a hacerlo en el artículo sobre TFT. Sin embargo, aquí fijaremos los valores de los colores básicos de 0 a 255. La pantalla los adaptará a su propia profundidad de color, de modo que ciertos colores parecidos podrían verse como iguales.

La pantalla se puede programar por hardware (esto es, definiendo cada pin) o por software via SPI, lo que resulta más rápido y fácil de programar, y con un mejor rendimiento. Para poder usar la pantalla con la tarjeta Esplora, debe de quedar insertada en los pines de esta, del modo que se aprecia en el gráfico de la figura 19.3.

Figura 19.3. La tarjeta Esplora con la TFT insertada.

Figura 19.3. La tarjeta Esplora con la TFT insertada.

A nivel de software, vamos a necesitar, aparte de la librería Esplora (por supuesto), las librerías TFT y SPI, que forman parte del núcleo de Arduino, por lo que no tienes que descargarlas.

EL PRIMER SKETCH

En este primer sketch sólo vamos a hacer que en la pantalla se dibujen unas formas simples, sin control alguno por nuestra parte, para introducir algunos conceptos básicos.

Veamos que hacemos. En primer lugar, incluimos las tres librerías que necesitamos, así:

#include <TFT.h>
#include <SPI.h>
#include <Esplora.h>

Es muy normal que en un sketch se necesite más de una librería adicional. Esto no supone ningún problema.

En la sección setup inicializamos la pantalla, así:

EsploraTFT.begin();

La clase EsploraTFT forma parte de la librería TFT. No necesitamos instanciarla en un objeto, sino que la usamos directamente. El método begin() inicializa la pantalla. Como estamos usando una pantalla que está diseñada, específicamente, para Esplora, no nos hace falta definir pines, ni nada más.

Ahora rellenamos la pantalla en un color negro uniforme.

EsploraTFT.background(0, 0, 0);

El método background() establece un color de fondo uniforme, borrando, por tanto, cualquier cosa que hubiera en la pantalla. Recibe tres valores, de 0 a 255, para indicar los niveles de azul, verde y rojo. Al poner 0 en los tres, el resultante es negro.

ATENCIÓN. Normalmente (en casi cualquier entorno de programación) cuando se establecen tres valores de rojo verde y azul, el primero corresponde a la intensidad de rojo, el segundo a la de verde y el tercero a la de azul. Por alguna razón que sólo los diseñadores de Arduino conocen, en los métodos de la librería TFT el orden de los colores se invierte. El primero corresponde a azul, el segundo a verde y el tercero a rojo. Ten esto presente y no tendrás problemas con los colores.

Dentro de la sección loop dibujamos tres formas, con una demora de un segundo entre una y otra. En primer lugar, establecemos un color de línea con el método stroke(). Cómo ves, según la descripción que hemos hecho de los argumentos relativos a colores, indicamos que va a ser azul, así:

EsploraTFT.stroke(255, 0, 0);

Esto establece un color de línea, pero no la dibuja. Eso lo hacemos con el método line(). Este método recibe cuatro argumentos. Los dos primeros son las coordenadas X e Y del punto de inicio de la línea. Los otros dos son las coordenadas X e Y del final de la línea. Cómo ves, para la coordenada X del final hemos usado el método width(), que devuelve la anchura de la pantalla en píxeles.

EsploraTFT.line(0, 10, EsploraTFT.width(), 10);

Para la segunda figura, lo primero que hacemos es indicar que NO va a tener línea. Lo hacemos con el método noStroke(), así:

EsploraTFT.noStroke();

Este método no necesita ningún argumento.

También le indicamos que va a tener un relleno de color sólido. El método fill() hace esto. Vemos que el color será verde puro, sin nada de azul ni rojo.

EsploraTFT.fill(0,255,0);

Establecido el que no habrá línea, y que habrá un relleno sólido verde, dibujamos un rectángulo, así:

EsploraTFT.rect(0,20,EsploraTFT.width(),20);

El método rect() recibe cuatro argumentos: los dos primeros son las coordenadas X e Y de la esquina superior izquierda. Los otros dos son la anchura y altura del rectángulo a dibujar. Una vez más, en este caso para determinar la anchura, recurrimos al método width() para recuperar el ancho de la pantalla.

Al final dibujamos un rectángulo con línea de borde y relleno de color, así:

EsploraTFT.stroke(255,255,255); // Establecemos que se usará línea blanca.
EsploraTFT.fill(0,0,255); // El color de relleno será rojo.
EsploraTFT.rect(0,45,EsploraTFT.width(),50); // Dibujamos un rectángulo.

Por último, se borra la pantalla, como ya sabemos, y vuelta a empezar.

ILUSIÓN DE MOVIMIENTO

Con los medios de que disponemos no podemos crear un movimiento “real”, cómo se hace con otros lenguajes de programación, que están diseñados para ello. En efecto, en ciertos entornos, principalmente de desarrollo de juegos, se pueden diseñar objetos gráficos (bien de tipoo sprites, u otros más elaborados) y desplazarlos por la pantalla, o cambiar sus propiedades de tamaño, color, etc.

Arduino Esplora y las librerías que usamos son un poco más limitadas que eso pero, aún así, intentaremos simular un movimiento.

La técnica más rudimentaria consiste en dibujar una forma en unas coordenadas de la pantalla, borrar la pantalla entera y dibujar la forma en otras coordenadas, desplazadas ligeramente respecto de las anteriores. Sin embargo, cómo el borrado de pantalla es una operación lenta, perfectamente visible al ojo humano, el efecto que se logra con esto es, a falta de una palabra mejor, rotundamente patético y, en la práctica, inutilizable.

Una solución mejor consiste en dibujar una forma en unas coordenadas de la pantalla y, a continuación, dibujar la misma forma, en el mismo lugar, pero con el color de fondo de la pantalla. Inmediatamente, dibujaremos la misma forma en unas coordenadas ligeramente desplazadas respecto de las anteriores. Así se logra una ilusión de movimiento, algo tosca, pero útil en muchos casos. Bien es cierto que si el color de la forma y el del fondo contrastan mucho (p.e. blanco y negro) y la forma es de un tamaño medio o grande, se aprecia un parpadeo, porque el redibujado no es lo bastante rápido, pero ajustando colores y tamaños se puede lograr un efecto aceptable.

En el siguiente sketch veremos una pelotita rebotando por la pantalla.

Prueba este sketch y verás como funciona según la técnica que hemos descrito. En realidad, lo único nuevo que hay aquí es el método circle(), que dibuja un círculo, y que recibe tres argumentos, que son las coordenadas X e Y del centro, y su radio en píxeles.

El resto del sketch es fácil de seguir, con los comentarios incluidos.

MOVIMIENTOS CONTROLADOS

Bueno. Y ya que sabemos como controlar los mandos de la Esplora (que lo aprendimos en este artículo y en este otro), y sabemos dibujar algo en pantalla que se mueve sólo, ahora vamos a dibujar algo que se mueva según nuestros deseos. El próximo sketch dibuja un pequeño rectángulo cerca de la base inferior de la pantalla, y lo desplaza según desplacemos nosotros el mando deslizante.

Como ves, no hemos aplicado nada que no conozcamos ya. Si lo deseas, puedes aumentar las funcionalidades de este sketch, haciendo, por ejemplo, que el rectángulo cambie de color, según se pulsen los botones, o se mueva el JoyStick. Todo es echarle imaginación y experimentar.

ESCRIBIENDO EN PANTALLA

Para escribir en pantalla debemos definir el color de línea con el método stroke(), que ya conocemos. Arduino lo usará cómo color de texto.

El método setTextSize() recibe un argumento, de 1 a 5, que determina el tamaño de la fuente, Cada número se multiplica por 10 para obtener el tamaño en píxeles. Así, cuando se establece el argumento 2, por ejemplo, la letra será de 20 píxeles.

Más delicado es el método text(). Recibe tres argumentos: el primero es el texto que deseamos mostrar, y los otros dos son las coordenadas X e Y, donde empezar a escribir. La cuestión es el texto. Si se va a teclear directamente, no hay problema. Así pues, la siguiente línea funciona perfectamente:

EsploraTFT.text("Hola", 10, 10);

Si se va a usar una expresión, tiene que ser un elemento de una matriz de cadenas de caracteres, declarada con char*, como puedes ver en el siguiente sketch. Es un poco chocante, ya que estamos acostumbrados a pensar en datos de tipo char como caracteres individuales. Sólo ten en cuenta el ejemplo y todo irá bien.

Pruébalo y verás que, cuando pulses uno de los cuatro botones de la derecha, te aparecerá su nombre en pantalla.

La primera línea de la sección loop es un bucle vacío tal que, si no hay ningún botón pulsado, se queda “bloqueado” esperando a que se pulse uno.

 

     

Un comentario:

  1. Pingback: LA LIBRERÍA TFT » eldesvandejose.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *