En este tutorial aprenderemos a utilizar la Pantalla Adafruit TFT Shield a color de 1.8” con Joystick y microSD, usando Arduino UNO explicaremos cómo escribir líneas de textos, dibujar figuras y desarrollaremos un pequeño juego utilizando el Joystick.
La pantalla TFT diagonal de 1.8” viene en forma de Shield para Arduino Uno, tiene un módulo microSD para almacenar archivos e imágenes y además cuenta con un pequeño Joystick de 5 vías para desplazarse en la pantalla.
La pantalla cuenta con 128 x 160 pixeles de color. ¡Esta pantalla es un verdadero TFT!, el controlador TFT (ST7735R) puede mostrar a todo color 18 bits (262.144 tonos).
Cómo iniciar con la Pantalla Adafruit TFT Shield.
[nextpage title = «Montaje del Shield»]
1. El Shield viene con todos los componentes de montaje superficial ya soldados, lo único que tenemos que soldar son los pines con cabezales en los costados, se necesitan 2 secciones de 6 pines y 2 secciones de 8 pines.
2. Insertar los pines con cabezales en el Arduino Uno, los pines largos van hacia abajo. Tenga en cuenta que quedan dos pines extras sin utilizar en cada extremo en el lado más cercano a los conectares USB y alimentación.
3.Añadir el Shield sobre las tiras de pines, los pines cortos se deben insertar en los agujeros del Shield quedando de esta forma.
4.Ahora, lo único que debemos de hacer es soldar los pines…
[nextpage title = «Descargar las librerías y probar el Shield»]
Para utilizar el Shield se necesitan descargar dos librerías, descarga estas librerías desde github.
• Librería Adafruit GFX
• Librería Adafruit ST7735
1. Descomprimir las carpetas y cambiarle el nombre a Adafruit_GFX y Adafruit_ST7735.
2. Colocarlos dentro de la carpeta libraries. Reiniciar el IDE de Arduino y cargar un sketch de ejemplo.
Para eso nos vamos a la siguiente dirección : Archivos>Ejemplos>Adafruit_ST7735>graphicstest.
3. Conectar nuestro Arduino con el Shield Montado, compilar el programa y subir el firmware. Visualizaremos unos gráficos de ejemplos, también podemos cargar el sketch de ejemplos shieldtest para probar el joystick.
[nextpage title = «¿Como funciona la pantalla TFT?»]
• Sistema de coordenadas
Las pantallas están compuestas por pixeles, estos son los elementos que componen una imagen, en el sistema de coordenadas, el origen (0,0) se sitúa en la esquina superior izquierda, con X aumentará hacia la derecha y con Y aumentará hacia abajo.
Esto es al revés con relación al sistema de coordenadas estándar de las matemáticas.
También a diferencia de las coordenadas cartesianas de la matemática, los puntos aquí tienen una dimensión que son siempre un pixel entero.
Las coordenadas siempre se expresan en unidades de pixel, NO existe una escala como milímetros o pulgadas.
[nextpage title = «Dibujar un Pixel»]
Empezaremos desde lo más básico que es dibujar un pixel (un punto). La sintaxis para dibujar un pixel es la siguiente:
// Color de relleno para pantalla de inicio será NEGRO. tft.fillScreen(ST7735_BLACK); // El pixel se va a colocar en las siguientes coordenadas X = 50 y Y = 80, su color será VERDE. tft.drawPixel(50, 80, ST7735_GREEN);
• La primera línea es para definir el color de relleno para la pantalla de inicio.
• La segunda línea es para definir las coordenadas donde se va a colocar el pixel y que color que va a tener. El primer valor es para definir la coordenada en X, el segundo es para definir las coordenadas en Y y la última expresión es el color que va a tener el pixel.
Hacemos una pequeña prueba, para eso utilizaremos el siguiente código, el código se compones de dos partes la primera parte que es la definición de librerías y configuraciones previas (copiar y pegar), la segunda parte es la instrucción para el dibujo del pixel la cual es la que nos interesa. Copiamos el código en un sketch nuevo y lo subimos a nuestro Arduino, Vamos a ver que nuestro pixel (un punto) se coloca en las coordenadas que indicamos.
// ----DEFINICIÓN DE LIBRERÍAS Y CONFIGURACIONES PREVIAS---- /////
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#if defined(__SAM3X8E__)
#undef __FlashStringHelper::F(string_literal)
#define F(string_literal) string_literal
#endif
#define TFT_CS 10 // Chip select line for TFT display
#define TFT_DC 8 // Data/command line for TFT
#define TFT_RST -1 // Reset line for TFT (or connect to +5V)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
void setup(void) {
Serial.begin(9600);
tft.initR(INITR_BLACKTAB);
Serial.println("OK");
// ----FIN DE DEFINICÍON DE LIBRERÍAS Y CONFIGURACIONES PREVIAS----- //
//------------- DIBUJO DE PIXEL --------------------///
tft.fillScreen(ST7735_BLACK);// Color de relleno para pantalla de inicio será NEGRO.
tft.drawPixel(50, 80, ST7735_GREEN); // El pixel se va a colocar en las siguientes coordenadas X = 50 y Y = 80, su color será VERDE
//---------- FIN DE DIBUJO DE PIXEL---------------///
}
void loop(){
}
Si deseamos modificar el programa solo hacemos modificaciones en la parte del dibujo del pixel, ya que si modificamos las configuraciones previas podríamos ocasionar algunos errores. ¡Claro que si usted cuenta con el conocimiento sobre la primera parte del código puede modificarlo sin ningún problema!
[nextpage title = «Imprimir Texto»]
En la pantalla TFT de 1.8” podemos imprimir diferentes tipos de letras, en diferentes tamaños y colores.
La sintaxis para imprimir Textos en la pantalla es la siguiente:
//------------- IMPRESIÓN DE TEXTO --------------------///
tft.fillScreen(ST7735_WHITE); // Color de relleno para pantalla de inicio "BLANCO"
tft.setTextSize(2); // Tamaño de texto es 2
tft.setTextColor(ST7735_BLUE); // Color de texto "AZUL"
tft.setCursor(5, 60); // Coordenas donde se empezará a escribir X = 5 y Y = 60
tft.print("Hola Mundo"); // Texto a imprimir es Hola Mundo.
//---------- FIN DE IMPRESIÓN DE TEXTO ---------------///
En la primera línea definimos el color de relleno para la pantalla, la segunda línea es para definir el tamaño del texto, la tercera línea es para definir el color del texto, la cuarta línea es para definir coordenadas de inicio del texto (primer valor X y segundo valor Y) Y la última línea es para escribir la línea de caracteres que deseamos mostrar en la pantalla.
Hacemos una pequeña prueba para imprimir o mostrar el texto “Hola Mundo” en nuestro Shield Pantalla TFT.
Copiamos el código en un sketch nuevo, compilamos y cargamos el programa a nuestro Arduino, Una vez cargado el firmware al Arduino vamos a poder visualizar el texto «Hola Mundo».
// ----DEFINICIÓN DE LIBRERÍAS Y CONFIGURACIONES PREVIAS---- /////
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#if defined(__SAM3X8E__)
#undef __FlashStringHelper::F(string_literal)
#define F(string_literal) string_literal
#endif
#define TFT_CS 10 // Chip select line for TFT display
#define TFT_DC 8 // Data/command line for TFT
#define TFT_RST -1 // Reset line for TFT (or connect to +5V)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
void setup(void) {
Serial.begin(9600);
tft.initR(INITR_BLACKTAB);
Serial.println("OK");
// ----FIN DE DEFINICÍON DE LIBRERÍAS Y CONFIGURACIONES PREVIAS----- //
//------------- IMPRESIÓN DE TEXTO --------------------///
tft.fillScreen(ST7735_WHITE); // Color de relleno para pantalla de inicio "BLANCO"
tft.setTextSize(2); // Tamaño de texto es 2
tft.setTextColor(ST7735_BLUE); // Color de texto "AZUL"
tft.setCursor(5, 60); // Coordenas donde se empezará a escribir X = 5 y Y = 60
tft.print("Hola Mundo"); // Texto a imprimir es Hola Mundo.
//---------- FIN DE IMPRESIÓN DE TEXTO ---------------///
}
void loop(){
}
Otro ejemplo de impresión de texto.
En este ejemplo vamos a imprimir el logotipo de TeslaBem, el ejemplo muestra cómo imprimir dos líneas de textos con diferentes tamaños y colores. Copie el código en un sketch nuevo y visualice lo que se muestra en la pantalla TFT.
// ----DEFINICIÓN DE LIBRERÍAS Y CONFIGURACIONES PREVIAS---- /////
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#if defined(__SAM3X8E__)
#undef __FlashStringHelper::F(string_literal)
#define F(string_literal) string_literal
#endif
#define TFT_CS 10 // Chip select line for TFT display
#define TFT_DC 8 // Data/command line for TFT
#define TFT_RST -1 // Reset line for TFT (or connect to +5V)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
void setup(void) {
Serial.begin(9600);
tft.initR(INITR_BLACKTAB);
Serial.println("OK");
// ----FIN DE DEFINICÍON DE LIBRERÍAS Y CONFIGURACIONES PREVIAS----- //
//------------- IMPRESIÓN DE TEXTO --------------------///
tft.fillScreen(ST7735_WHITE); // Color de relleno para pantalla de inicio "BLANCO"
tft.setTextSize(8);// Tamaño de texto es 8
tft.setTextColor(ST7735_BLUE);// Color de texto "AZUL"
tft.setCursor(15, 40); // Coordenas donde se empezará a escribir X = 15 y Y = 40
tft.print("TB ");// Texto a imprimir es TB.
tft.setTextSize(2); // Otra linea de texto
tft.setTextColor(ST7735_BLACK); // Color de texto negro
tft.setCursor(15, 100); // Coordenas donde se empezará a escribir X = 15 y Y = 100
tft.print("TESLABEM "); //Texto a imprimir TESLABEM.
//---------- FIN DE IMPRESION DE TEXTO---------------///
}
void loop(){
}
[nextpage title = «Dibujar cuadrados o rectangulos»]
• Impresión de un cuadrado o rectángulo
La sintaxis para dibujar un rectángulo con relleno es la siguiente:
tft.fillScreen(ST7735_WHITE); // Color de relleno en pantalla es Blanco tft.fillRect(30, 40, 50, 50, ST7735_RED); //Coordenadas para esquina del cuadrado X = 30 y Y = 40, alto y ancho 50 pixeles. Color del cuadrado es rojo.
La sintaxis para dibujar un rectángulo sin relleno es la siguiente:
tft.fillScreen(ST7735_WHITE); // Color de relleno en pantalla es Blanco tft.drawRect(30, 40, 50, 50, ST7735_RED); //Coordenadas para esquina del cuadrado X = 30 y Y = 40, alto y ancho 50 pixeles. Color del cuadrado es rojo.
La primera línea es para definir el color de relleno de la pantalla y la segunda línea es para definir la ubicación y las dimensiones del rectángulo o cuadrado, los primeros valores de la segunda línea son para definir la esquina superior izquierda del cuadrado, los dos valores que siguen son para definir el ancho y el alto de la figura. y por último se define el color de la figura.
Ejemplo:
// ----DEFINICIÓN DE LIBRERÍAS Y CONFIGURACIONES PREVIAS---- /////
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#if defined(__SAM3X8E__)
#undef __FlashStringHelper::F(string_literal)
#define F(string_literal) string_literal
#endif
#define TFT_CS 10 // Chip select line for TFT display
#define TFT_DC 8 // Data/command line for TFT
#define TFT_RST -1 // Reset line for TFT (or connect to +5V)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
void setup(void) {
Serial.begin(9600);
tft.initR(INITR_BLACKTAB);
Serial.println("OK");
// ----FIN DE DEFINICÍON DE LIBRERÍAS Y CONFIGURACIONES PREVIAS----- //
//------------- IMPRESIÓN DE RECTANGULO --------------------///
tft.fillScreen(ST7735_WHITE); // Color de relleno en pantalla es Blanco
tft.fillRect(30, 40, 50, 50, ST7735_RED); //Coordenadas para esquina del cuadrado X = 30 y Y = 40, alto y ancho 50 pixeles. Color del cuadrado es rojo.
//---------- FIN DE IMPRESIÓN DE RECTANGULO ---------------///
}
void loop(){
}
[nextpage title = «Dibujar un círculo»]
La sintaxis para dibujar un circulo con relleno es la siguiente:
tft.fillScreen(ST7735_WHITE); // Color de fondo de pantalla es blanco. tft.fillCircle(60, 50, 40, ST7735_BLUE); //Dibujar un circulo con centro en las sig: coordenadas X = 60 y Y = 50. Radio = 40 y color AZUL.
La sintaxis para dibujar un circulo sin relleno es la siguiente:
tft.fillScreen(ST7735_WHITE); // Color de fondo de pantalla es blanco. tft.drawCircle(60, 50, 40, ST7735_BLUE); //Dibujar un circulo con centro en las sig: coordenadas X = 60 y Y = 50. Radio = 40 y color AZUL.
La primera línea es para definir el color de pantalla, la segunda línea es para dibujar el circulo. Los dos primeros valores de la segunda línea son para definir el centro del circulo que se definen por coordenadas X y Y, el valor que sigue es el radio que va a tener el circulo y por último se define su color.
Ejemplo:
En este ejemplo realizaremos un pequeño programa que muestre un cuadrado por 3 segundos y después un circulo por tres segundos y así sucesivamente.
// ----DEFINICIÓN DE LIBRERÍAS Y CONFIGURACIONES PREVIAS---- /////
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#if defined(__SAM3X8E__)
#undef __FlashStringHelper::F(string_literal)
#define F(string_literal) string_literal
#endif
#define TFT_CS 10 // Chip select line for TFT display
#define TFT_DC 8 // Data/command line for TFT
#define TFT_RST -1 // Reset line for TFT (or connect to +5V)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
void setup(void) {
Serial.begin(9600);
tft.initR(INITR_BLACKTAB);
Serial.println("OK");
// ----FIN DE DEFINICÍON DE LIBRERÍAS Y CONFIGURACIONES PREVIAS----- //
}
void loop(){
//------------- IMPRESIÓN CIRCULO --------------------///
tft.fillScreen(ST7735_WHITE); // Color de fondo de pantalla es blanco.
tft.fillCircle(60, 50, 40, ST7735_BLUE); //Dibujar un circulo con centro en las sig: coordenadas X = 60 y Y = 50. Radio = 40 y color AZUL.
delay (3000);
//---------- FIN DE IMPRESION DE CIRCULO ---------------///
//------------- IMPRESIÓN DE CUADRADO --------------------///
tft.fillScreen(ST7735_WHITE); // Color de relleno en pantalla es Blanco
tft.fillRect(30, 40, 50, 50, ST7735_RED); //Coordenadas para esquina del cuadrado X = 30 y Y = 40, alto y ancho 50 pixeles. Color del cuadrado es rojo.
delay (3000);
//---------- FIN DE IMPRESIÓN DE CUADRADO ---------------///
}
[nextpage title = «Hacer un Juego Retro»]
Ya que hemos aprendido mucho sobre la pantalla TFT, ahora vamos a desarrollar un pequeño juego retro como el que se muestra en el video, el juego funciona de la siguiente manera:
Se inicia con un texto en este caso «TB TESLABEM», para empezar a jugar se tiene que presionar el joystick a la posicion central, el juego básicamente se trata de tener control sobre la barra de color blanco y esquivar el mayor numero de cuadros de color amarillo, tener cuidado de no chocar con las paredes porque también se termina el juego.
¡Cargue el siguiente código a su Arduino y disfrute del juego! todo el código está comentado para que se pueda modificar con facilidad. Cabe aclarar que este no es un tutorial sobre diseño de videojuegos, solo se trata de ver algunas de las cosas que se pueden hacer con la pantalla TFT.
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#if defined(__SAM3X8E__)
#undef __FlashStringHelper::F(string_literal)
#define F(string_literal) string_literal
#endif
#define TFT_CS 10 // Chip select line for TFT display
#define TFT_DC 8 // Data/command line for TFT
#define TFT_RST -1 // Reset line for TFT (or connect to +5V)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
#define BUTTON_NONE 0
#define BUTTON_DOWN 1
#define BUTTON_RIGHT 2
#define BUTTON_SELECT 3
#define BUTTON_UP 4
#define BUTTON_LEFT 5
void setup(void) {
Serial.begin(9600);
// Initialize 1.8" TFT
tft.initR(INITR_BLACKTAB); // initialize a ST7735S chip, black tab
Serial.println("OK!");
// COLOR DE INICIACION
tft.fillScreen(ST7735_WHITE);
tft.setTextSize(8);
tft.setTextColor(ST7735_BLUE);
tft.setCursor(15, 40);
tft.print("TB ");
tft.setTextSize(2);
tft.setTextColor(ST7735_BLACK);
tft.setCursor(15, 100);
tft.print("TESLABEM ");
}
uint8_t readButton(void) {
float a = analogRead(3);
a *= 5.0;
a /= 1024.0;
Serial.print("Button read analog = ");
Serial.println(a);
if (a < 0.2) return BUTTON_DOWN;
if (a < 1.0) return BUTTON_RIGHT;
if (a < 1.5) return BUTTON_SELECT;
if (a < 2.0) return BUTTON_UP;
if (a < 3.2) return BUTTON_LEFT; else return BUTTON_NONE; } int estado = 0; int x = 0; int y = 0; int barrax = 0; int barray = 0; int x1 = 0; int y1 = 0; int x2 = 0; int y2 = 0; int x3 = 0; int y3 = 0; void loop() { barray = 100; x1 = 60; x2 = 108; x3 = 10; uint8_t b = readButton(); if (b == BUTTON_LEFT){ barrax--; } if (b == BUTTON_RIGHT) { barrax++; } // inicia el programa si se aprieta el boton central del Joystik if (b == BUTTON_SELECT or estado == 1) { tft.fillScreen(ST7735_BLACK); // Fondo negro tft.fillRect(x, y, 20, 20, ST7735_YELLOW); // Dibujar cuadrado 1 tft.fillRect(x1, y1-40, 20, 20, ST7735_YELLOW); // Dibujar cuadrado 2 tft.fillRect(x2, y2-80, 20, 20, ST7735_YELLOW); // Dibujar cuadrado 3 tft.fillRect(x3, y3-80, 20, 20, ST7735_YELLOW); // Dibujar cuadrado 4 tft.fillRect(barrax, barray, 30, 10, ST7735_WHITE); // Dibujar la barra que se va a mover. y++; // incrementar las coordenadas en "y" (hacia abajo) del primer cuadradp y1++; // incrementar las coordenadas en "y1" (hacia abajo) del segundo cuadrado y2++; // incrementar las coordenadas en "y1" (hacia abajo) del tercer cuadrado y3++; // // incrementar las coordenadas en "y1" (hacia abajo) del cuarto cuadrado estado = 1; // el valor del la variables "estado" cambia a 1. } // Cuando la coordenada "y" del cuadrado 1 es mayor a 110, "y" se vuelve 0 y "x" toma un valor random. if (y>110){
y = 0;
x = random(108);
}
// Cuando la coordenada "y" del cuadrado 2 es mayor a 150, "y" se vuelve 0+40 y "x" toma un valor random.
if (y1>150){
y1 = 0+40;
x1 = random(108);
}
// Cuando la coordenada "y" del cuadrado 3 es mayor a 190, "y" se vuelve 0+80 y "x" toma un valor random.
if (y2>190){
y2 = 0+80;
x2 = random(108);
}
// Cuando la coordenada "y" del cuadrado 4 es mayor a 150, "y" se vuelve 0+40 y "x" toma un valor random.
if (y3>190){
y3 = 0+80;
x3 = random(108);
}
//Condicion para perder cuando se choca con el cuadrado 1
if (x > barrax and x < barrax + 30 and y > 80 or x+20 > barrax and x+20 < barrax + 30 and y > 80){
estado = 0;
tft.fillScreen(ST7735_BLACK);
tft.setTextColor(ST7735_RED);
tft.setCursor(10, 70);
tft.print("Game Over");
}
//Condicion para perder cuando se choca con el cuadrado 2
if (x1 > barrax and x1 < barrax + 30 and y1-40 > 80 or x1+20 > barrax and x1+20 < barrax + 30 and y1-40 > 80){
estado = 0;
tft.fillScreen(ST7735_BLACK);
tft.setTextColor(ST7735_RED);
tft.setCursor(10, 70);
tft.print("Game Over");
}
//Condición para perder cuando se choca con el cuadrado 3
if (x2 > barrax and x2 < barrax + 30 and y2-80 > 80 or x2+20 > barrax and x2+20 < barrax + 30 and y2-80 > 80){
estado = 0;
tft.fillScreen(ST7735_BLACK);
tft.setTextColor(ST7735_RED);
tft.setCursor(10, 70);
tft.print("Game Over");
}
//Condicion para perder cuando se choca con el cuadrado 4
if (x3 > barrax and x3 < barrax + 30 and y3-80 > 80 or x3+20 > barrax and x3+20 < barrax + 30 and y3-80 > 80){
estado = 0;
tft.fillScreen(ST7735_BLACK);
tft.setTextColor(ST7735_RED);
tft.setCursor(10, 70);
tft.print("Game Over");
}
//Condicion para perder cuando se choca con las paredes
if (barrax < 0 or barrax+20 >118){
estado = 0;
tft.fillScreen(ST7735_BLACK);
tft.setTextColor(ST7735_RED);
tft.setCursor(10, 70);
tft.print("Game Over");
}
}
