Crear un Menú interactivo con TFT LCD

Estoy seguro que has aterrizado en este artículo por que quieres saber más sobre cómo hacer un menú interactivo en una TFT. Pero quizá, antes de comenzar te interese leer está  guia sobre TFT en Arduino. En ella tienes los primeros pasos a seguir con una TFT. Podrás aprender a dibujar los elementos más básicos y a escribir texto en la pantalla. Una vez 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 se 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).
• 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.

Echa un vistazo al vídeo para entender las referencias que hago y ver como funciona

Almacenaremos las tres posibles posiciones en un vector. De esta manera cuando queramos marcar la posición del rectángulo usaremos 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.

¡Ojo! – Cuidado con las PullDowns

Recuerda usar una resistencia PullDown para que cuando no estemos pulsado el botón el pin digital no quede flotando.

Cuando presionamos el pulsador, 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(); Para controlar el índice usamos el siguiente código.

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

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 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");
}