Publicado por el 16 abril, 2016 3 comentarios
Dificultad bajaComplejidad baja
CC BY-SA 4.0

Como estoy seguro que has aterrizado en este artículo por que quieres saber más sobre como hacer el menú interactivo en una TFT, pues te lo voy a contar, pero antes te aconsejo que veas está  guia sobre TFT en Arduino, sobre los primeros pasos con una TFT, en el que podrás aprender a dibujar los elementos más básicos y a escribir texto en la pantalla. Una vez que tengas esto empezamos con el menú interactivo. Crear un menú interactivo con TFT es bastante fácil, solo debemos conocer algunos trucos.



Para interactuar vamos a usar un rectángulo azul que moverá para indicar que opción del menú estamos seleccionando.

¿Cómo crear un Menú interactivo con TFT?

La verdad es que lo más complicado que nos podemos encontrar en este tutorial es entender como colocamos el rectángulo que nos dará la interacción. El rectángulo siempre lo definimos con 5 parámetros, la posición en los ejes X e Y del vértice superior izquierdo, las dimensiones en ambos lados (ancho y alto) y por último el color del rectángulo.

En nuestro caso el rectángulo siempre tiene la misma posición en el eje X y también mantiene sus dimensiones y color. Por tanto para cambiar entre las 3 posiciones distintas en las que el rectángulo puede estar, solo cambiaremos el valor de la posición en Y.

Almacenaremos las tres posiciones en un vector, de esta manera cuando queramos marcar la posición del rectángulo nos referiremos al vector e identificaremos la posición exacta mediante el índice del vector. Quedará algo como esto:

int posicion[4] = {0, 18, 43, 68};
tft.fillRect(10, posicion[seleccion], 100, 25, BLUE);

El índice del vector lo cambiaremos cuando pulsemos un botón conectado al pin 5 de Arduino. Recuerda usar una resistencia PullDown para que cuando no estemos pulsado el botón el pin digital no quede flotando. Para cambiarlo usaremos el siguiente código. Cuando pulsamos, aumenta el valor de la variable en una unidad, comprueba si nos salimos del rango máximo y luego refresca la pantalla con el código de la función menu();

if(digitalRead(5) == HIGH){
	opcion++;
	if(opcion == 4)	opcion = 1;
	menu(opcion);
	delay(200);
}

Echa un vistazo al vídeo para entender un poco más el código y ver como funciona




A continuación tienes el código completo con el cual puedes crear el tan ansiado menú interactivo con TFT para que el usuario se lleve una buena impresión. Todavía se puede refinar mucho, entre otras muchas cosas, se pueden trabajar los refrescos de la pantalla para que sean más adecuados y no llamen tanto la atención. La comunicación entre Arduino y la pantalla es relativamente lenta y por eso, si no se tiene cuidado, se producen este tipo de fallos de experiencia de usuario.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <TFT_ILI9163C.h>
 
#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0  
#define WHITE   0xFFFF
 
#define __CS 10
#define __DC 9
#define __RS 8

int opcion = 1;
 
TFT_ILI9163C tft = TFT_ILI9163C(__CS, __RS,__DC);
 
void setup() {
  tft.begin(); 
  menu(1);
  delay(200);
}
 
void loop(){
	if(digitalRead(5) == HIGH){
		opcion++;
		if(opcion == 4)	opcion = 1;
		menu(opcion);
		delay(200);
	}
}

void menu(int seleccion){
	tft.clearScreen();	//Limpiar pantalla
	//Cabecera
	tft.setCursor(16, 0);
	tft.setTextColor(BLUE);  
	tft.setTextSize(1);
	tft.println("RinconIngenieril");
	tft.drawLine(0, 10, 128, 10, BLUE);	
	//Rectangulo y su posición
	int posicion[4] = {0, 18, 43, 68};
	tft.fillRect(10, posicion[seleccion], 100, 25, BLUE);
	//Opciones del menu
	tft.setTextColor(WHITE);	
	tft.setCursor(16, 25);
	tft.println("Hora");
	tft.setCursor(16, 50);
	tft.println("Temperatura");
	tft.setCursor(16, 75);
	tft.println("Info");
}
Sobre el autor
Enrique Gómez
Amante de la ingeniería electrónica, de la comunicación audiovisual y de la divulgación ingenieril y científica. Friki de Star Wars desde el principio. Puedes saber más sobre mi y sobre mis trabajos en enrique.rinconingenieril.es
Artículos relacionados
Deja un comentario