Tutorial de Pantalla Táctil TFT LCD con Arduino: Guía Paso a Paso

En este tutorial de pantalla táctil con Arduino aprenderemos a usar una pantalla TFT LCD táctil con Arduino. Puedes ver el siguiente video o leer el tutorial escrito a continuación.

Resumen

Para este tutorial he preparado tres ejemplos. El primero es una medición de distancia usando un sensor ultrasónico. La salida del sensor, o la distancia, se imprime en la pantalla y usando la pantalla táctil podemos seleccionar las unidades, ya sea centímetros o pulgadas.

El siguiente ejemplo es el control de un LED RGB usando tres deslizadores RGB. Por ejemplo, si empezamos a deslizar el control azul, el LED se encenderá en azul y aumentará la intensidad a medida que nos acerquemos al valor máximo. Los deslizadores pueden moverse de 0 a 255 y con su combinación podemos establecer cualquier color en el LED RGB, pero ten en cuenta que el LED no puede representar los colores con mucha precisión.

El tercer ejemplo es un juego. En realidad es una réplica del popular juego Flappy Bird para smartphones. Podemos jugar usando el pulsador o incluso la propia pantalla táctil.

Ahora recorreremos cada uno de estos ejemplos y explicaremos paso a paso los códigos detrás de ellos.

Partes Necesarias para esta Pantalla Táctil Arduino

Como ejemplo estoy usando una pantalla táctil TFT de 3.2" en combinación con un shield TFT LCD para Arduino Mega. Necesitamos un shield porque la pantalla táctil TFT funciona a 3.3V y las salidas del Arduino Mega son de 5V. Para el primer ejemplo tengo el sensor ultrasónico HC-SR04, luego para el segundo ejemplo un LED RGB con tres resistencias y un pulsador para el ejemplo del juego. También tuve que hacer un header de pines personalizado, soldando headers y doblando uno de ellos para poder insertarlos entre la placa Arduino y el shield TFT.

Puedes conseguir estos componentes en cualquiera de los siguientes sitios:

• Pantalla Táctil TFT 3.2"………………..
• Shield Mega para Pantalla TFT………………
• Placa Arduino ……………………………
• Módulo Ultrasónico HC-SR04………..

Aquí está el esquema del circuito. Usaremos el pin GND, los pines digitales del 8 al 13, así como el pin 14. Como los pines de 5V ya están usados por la pantalla TFT, usaré el pin 13 como VCC, configurándolo en HIGH directamente en la sección setup del código.

Código de Pantalla Táctil Arduino

Como el código es un poco largo y para mejor comprensión publicaré el código fuente del programa en secciones con descripción para cada una. Al final del artículo publicaré el código fuente completo.

Usaré las librerías UTFT y URTouch creadas por Henning Karlsen. Aquí me gustaría agradecerle por el increíble trabajo que ha hecho. Las librerías permiten un uso muy fácil de las pantallas TFT, y funcionan con muchos tamaños, shields y controladores diferentes. Puedes descargar estas librerías de su sitio web, RinkyDinkElectronics.com, y también encontrar muchos ejemplos demo y documentación detallada de cómo usarlas.

Después de incluir las librerías necesitamos crear objetos UTFT y URTouch. Los parámetros de estos objetos dependen del modelo de la pantalla TFT y del shield, y estos detalles también se pueden encontrar en la documentación de las librerías.

A continuación, necesitamos definir las fuentes que vienen con las librerías y también definir algunas variables necesarias para el programa. En la sección setup necesitamos iniciar la pantalla y el tacto, definir los modos de pin para el sensor conectado, el LED y el botón, y llamar inicialmente a la función personalizada drawHomeScreen(), que dibujará la pantalla de inicio del programa.

#include <UTFT.h>
#include <URTouch.h>
//==== Creando Objetos
UTFT myGLCD(SSD1289,38,39,40,41); //Los parámetros deben ajustarse a tu modelo de Display/Shield
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Definiendo Variables
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
//Sensor Ultrasónico
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// LEDs RGB
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38;
int xG=38;
int xB=38;
// Floppy Bird
int xP = 319;
int yP = 100;
int yB = 30;
int fallRateInt = 0;
float fallRate =0;
int score=0;
const int button = 14;
int buttonState = 0;
void setup() {
  // Configuración inicial
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);
  // Definiendo Modos de Pin
  pinMode(VCC, OUTPUT); // VCC
  pinMode(trigPin, OUTPUT); // Configura trigPin como Salida
  pinMode(echoPin, INPUT); // Configura echoPin como Entrada
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH); // +5V - Pin 13 como VCC
  drawHomeScreen(); // Dibuja la Pantalla de Inicio
  currentPage = '0'; // Indica que estamos en la Pantalla de Inicio
  selectedUnit = '0'; // Indica la unidad seleccionada para el primer ejemplo, cm o pulgadas
}Lenguaje: Arduino (arduino)

Ahora explicaré cómo hacer la pantalla de inicio del programa. Con la función setBackColor() necesitamos establecer el color de fondo del texto, negro en nuestro caso. Luego establecemos el color a blanco, la fuente grande y usando la función print(), imprimiremos la cadena "Arduino TFT Tutorial" en el centro de la pantalla y 10 píxeles abajo en el eje Y. Luego estableceremos el color a rojo y dibujaremos la línea roja debajo del texto. Después, establecemos el color de nuevo a blanco, e imprimimos las otras dos cadenas, "by HowToMechatronics.com" usando la fuente pequeña y "Select Example" usando la fuente grande.

Luego está el botón del sensor de distancia. Primero establecemos el color y usando la función fillRoundRect() dibujamos el rectángulo redondeado relleno. Luego establecemos el color de nuevo a blanco y usando drawRoundRect() dibujamos otro rectángulo redondeado encima del anterior, pero este sin relleno, por lo que la apariencia general del botón parece que tiene un marco. Encima del botón imprimiremos el texto usando la fuente grande y el mismo color de fondo que el relleno del botón. El mismo procedimiento se aplica para los otros dos botones.

// drawHomeScreen - Función Personalizada
void drawHomeScreen() {
  // Título
  myGLCD.setBackColor(0,0,0); // Establece el color de fondo del área donde se imprimirá el texto a negro
  myGLCD.setColor(255, 255, 255); // Establece color a blanco
  myGLCD.setFont(BigFont); // Establece fuente a grande
  myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // Imprime la cadena en la pantalla
  myGLCD.setColor(255, 0, 0); // Establece color a rojo
  myGLCD.drawLine(0,32,319,32); // Dibuja la línea roja
  myGLCD.setColor(255, 255, 255); // Establece color a blanco
  myGLCD.setFont(SmallFont); // Establece la fuente a pequeña
  myGLCD.print("by HowToMechatronics.com", CENTER, 41); // Imprime la cadena
  myGLCD.setFont(BigFont);
  myGLCD.print("Select Example", CENTER, 64);
  // Botón - Sensor de Distancia
  myGLCD.setColor(16, 167, 103); // Establece color verde
  myGLCD.fillRoundRect (35, 90, 285, 130); // Dibuja rectángulo redondeado relleno
  myGLCD.setColor(255, 255, 255); // Establece color a blanco
  myGLCD.drawRoundRect (35, 90, 285, 130); // Dibuja rectángulo redondeado sin relleno, para que parezca un marco
  myGLCD.setFont(BigFont); // Establece la fuente a grande
  myGLCD.setBackColor(16, 167, 103); // Establece el color de fondo del área donde se imprimirá el texto a verde, igual que el botón
  myGLCD.print("DISTANCE SENSOR", CENTER, 102); // Imprime la cadena
  // Botón - Control LED RGB
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 140, 285, 180);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 140, 285, 180);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("RGB LED CONTROL", CENTER, 152);
  // Botón - Birduino
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 190, 285, 230);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 190, 285, 230);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("BIRDUINO GAME", CENTER, 202);
}Lenguaje: Arduino (arduino)

Ahora necesitamos hacer los botones funcionales para que al presionarlos nos envíen al ejemplo apropiado. En la sección setup establecimos el carácter '0' en la variable currentPage, que indicará que estamos en la pantalla de inicio. Así que si eso es cierto, y si presionamos la pantalla, esta sentencia if se volverá verdadera y usando estas líneas obtendremos las coordenadas X e Y donde se ha presionado la pantalla. Si esa es el área que cubre el primer botón, llamaremos a la función personalizada drawDistanceSensor() que activará el ejemplo del sensor de distancia. También estableceremos el carácter '1' en la variable currentPage que indicará que estamos en el primer ejemplo. La función personalizada drawFrame() se usa para resaltar el botón cuando se presiona. El mismo procedimiento se aplica para los otros dos botones.

//========== La sección loop ========
void loop() {
  // Pantalla de Inicio
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX(); // Coordenada X donde se ha presionado la pantalla
      y=myTouch.getY(); // Coordenada Y donde se ha presionado la pantalla
      // Si presionamos el Botón Sensor de Distancia
      if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
        drawFrame(35, 90, 285, 130); // Función Personalizada - Resalta el botón cuando se presiona
        currentPage = '1'; // Indica que estamos en el primer ejemplo
        myGLCD.clrScr(); // Limpia la pantalla
        drawDistanceSensor(); // Se llama solo una vez, porque en la siguiente iteración del loop, el if anterior será falso y esta función no se llamará. Esta función dibujará los gráficos del primer ejemplo.
      }
      // Si presionamos el Botón Control LED RGB
      if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }
      // Si presionamos el Botón Juego Birduino
      if ((x>=35) && (x<=285) && (y>=190) && (y<=230)) {
        drawFrame(35, 190, 285, 230);
        currentPage = '3';
        myGLCD.clrScr();
        myGLCD.setColor(114, 198, 206);
        myGLCD.fillRect(0,0,319,239);
        drawGround();
        drawPilars(xP,yP);
        drawBird(30);
        delay(1000);
      }
    }
  }
  // Ejemplo Sensor de Distancia
  if (currentPage == '1') {
    getDistance(); // Obtiene la distancia del sensor y esta función se llama repetidamente mientras estamos en el primer ejemplo para imprimir los últimos resultados del sensor de distancia
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      // Si presionamos el Botón Centímetros
      if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) {
        selectedUnit = '0';
      }
      // Si presionamos el Botón Pulgadas
      if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) {
        selectedUnit = '1';
      }
      // Si presionamos el Botón Atrás
      if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0'; // Indica que estamos en la pantalla de inicio
        myGLCD.clrScr();
        drawHomeScreen(); // Dibuja la pantalla de inicio
      }
    }
  }
  // Control LED RGB
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      //Botón Atrás
      if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
        // Apaga el LED
        analogWrite(redLed, 0);
        analogWrite(greenLed, 0);
        analogWrite(blueLed, 0);
      }
    }
  }
  //==== Esta sección del código, para el ejemplo del juego, se explica en mi próximo tutorial
  // Juego Birduino
  if (currentPage == '3') {
    //delay(1);
    xP=xP-3;
    drawPilars(xP, yP);
    yB+=fallRateInt;
    fallRate=fallRate+0.4;
    fallRateInt= int(fallRate);
    if (yB>=220) {
      yB=220;
    }
    if(yB>=180 || yB<=0){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB<=yP-2)){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB>=yP+60)){
      restartGame();
    }
    drawBird(yB);
    if (xP<=-51){
      xP=319;
      yP = rand() % 100+20;
      score++;
    }
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      if ((x>=0) && (x<=319) &&(y>=50) && (y<=239)) {
        fallRate=-5;
      }
    }
    buttonState = digitalRead(button);
    if (buttonState == HIGH) {
      fallRate=-5;
    }
  }
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();
    if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
      drawFrame(10, 10, 60, 36);
      currentPage = '0';
      myGLCD.clrScr();
      drawHomeScreen();
      analogWrite(redLed, 0);
      analogWrite(greenLed, 0);
      analogWrite(blueLed, 0);
    }
  }
}Lenguaje: Arduino (arduino)

Así que la función personalizada drawDistanceSensor() necesita ser llamada solo una vez cuando se presiona el botón para dibujar todos los gráficos de este ejemplo de manera similar a como describimos para la pantalla de inicio. Sin embargo, la función personalizada getDistance() necesita ser llamada repetidamente para imprimir los últimos resultados de la distancia medida por el sensor.

Aquí está esa función que usa el sensor ultrasónico para calcular la distancia e imprimir los valores con la fuente SevenSegNum en color verde, ya sea en centímetros o pulgadas. Si necesitas más detalles sobre cómo funciona el sensor ultrasónico, puedes consultar mi tutorial particular para eso. De vuelta en la sección loop podemos ver qué sucede cuando presionamos los botones de selección de unidad así como el botón atrás.

//===== getDistance() - Función Personalizada
void getDistance() {
  // Limpia el trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Configura el trigPin en estado HIGH por 10 microsegundos
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Lee el echoPin, devuelve el tiempo de viaje de la onda sonora en microsegundos
  duration = pulseIn(echoPin, HIGH);
  // Calculando la distancia
  distanceCm= duration*0.034/2;
  distanceInch= distanceCm/2.53;
  // Imprime la distancia en centímetros
  if (selectedUnit == '0' && distanceCm <=400) {
    myGLCD.setFont(SevenSegNumFont);
    myGLCD.setColor(0, 255, 0);
    myGLCD.setBackColor(0, 0, 0);
    myGLCD.printNumI(distanceCm,130, 145, 3,'0');
    myGLCD.setFont(BigFont);
    myGLCD.print("cm ", 235, 178);
  }
  // Imprime la distancia en pulgadas
  if (selectedUnit == '1' && distanceCm <=160) {
    myGLCD.setFont(SevenSegNumFont);
    myGLCD.setColor(0, 255, 0);
    myGLCD.setBackColor(0, 0, 0);
    myGLCD.printNumI(distanceInch,130, 145, 3,'0');
    myGLCD.setFont(BigFont);
    myGLCD.print("inch", 235, 178);
  }
  delay(10);
}Lenguaje: Arduino (arduino)

Bien, siguiente es el ejemplo de Control LED RGB. Si presionamos el segundo botón, la función personalizada drawLedControl() será llamada solo una vez para dibujar los gráficos de ese ejemplo y la función personalizada setLedColor() será llamada repetidamente. En esta función usamos la pantalla táctil para establecer los valores de los 3 deslizadores de 0 a 255. Con las sentencias if confinamos el área de cada deslizador y obtenemos el valor X del deslizador. Así que los valores de la coordenada X de cada deslizador son de 38 a 310 píxeles y necesitamos mapear estos valores a valores de 0 a 255 que se usarán como señal PWM para encender el LED. Si necesitas más detalles sobre cómo funciona el LED RGB con Arduino, puedes consultar mi tutorial particular. El resto del código en esta función personalizada es para dibujar los deslizadores. De vuelta en la sección loop solo tenemos el botón atrás que también apaga el LED cuando se presiona.

//============= setLedColor() - Función Personalizada
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();
    // Área del deslizador de color Rojo
    if( (y>=130) && (y<=156)) {
      xR=x; // Almacena el valor X donde se ha presionado la pantalla en la variable xR
      if (xR<=38) { // Confina el área del deslizador a partir de 38 píxeles
        xR=38;
      }
      if (xR>=303){ /// Confina el área del deslizador a menos de 310 píxeles
        xR=303;
      }
    }
    // Área del deslizador de color Verde
    if( (y>=170) && (y<=196)) {
      xG=x;
      if (xG<=38) {
        xG=38;
      }
      if (xG>=303){
        xG=303;
      }
    }
    // Área del deslizador de color Azul
    if( (y>=210) && (y<=236)) {
      xB=x;
      if (xB<=38) {
        xB=38;
      }
      if (xB>=303){
        xB=303;
      }
    }
  }
  // Mapea los valores del eje X de 38 a 0 y 310 a 255, porque necesitamos valores de 0 a 255 para encender el LED
  int xRC = map(xR,38,310,0,255);
  int xGC = map(xG,38,310,0,255);
  int xBC = map(xB,38,310,0,255);
  // Envía señal PWM a los pines del LED
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);
  // Dibuja un rectángulo con la última combinación de color
  myGLCD.setColor(xRC, xGC, xBC);
  myGLCD.fillRoundRect(175, 87, 310, 119);
  // Dibuja los posicionadores
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xR,139,(xR+4),147); // Posicionador
  myGLCD.setColor(xRC, 0, 0);
  myGLCD.fillRect(31, 139, (xR-1), 147);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xR+5), 139, 309, 147);
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xG,179,(xG+4),187);
  myGLCD.setColor(0, xGC, 0);
  myGLCD.fillRect(31, 179, (xG-1), 187);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xG+5), 179, 309, 187);
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xB,219,(xB+4),227);
  myGLCD.setColor(0, 0, xBC);
  myGLCD.fillRect(31, 219, (xB-1), 227);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xB+5), 219, 309, 227);
}Lenguaje: Arduino (arduino)

El siguiente es el ejemplo de Juego Arduino pero lo dejaré para mi próximo tutorial para que podamos entenderlo mejor ya que es un poco más complejo.

Código Fuente Completo del Programa

Para que el código funcione y compile, tendrás que incluir un archivo adicional ".c" en el mismo directorio con el sketch de Arduino. Este archivo es para el tercer ejemplo del juego y es un bitmap del pájaro. Para más detalles sobre cómo funciona esta parte del código, puedes consultar mi tutorial particular. Aquí puedes descargar ese archivo:

Archivos del Tutorial Arduino TFT

Aquí está el código fuente completo del programa:

/* Tutorial Arduino TFT
 * Programa hecho por Dejan Nedelkovski,
 * www.HowToMechatronics.com */
 /* Este programa usa las librerías UTFT y URTouch
 * hechas por Henning Karlsen.
 * Puedes encontrarlas y descargarlas en:
 * www.RinkyDinkElectronics.com */
#include <UTFT.h>
#include <URTouch.h>
//==== Creando Objetos
UTFT myGLCD(SSD1289,38,39,40,41); //Los parámetros deben ajustarse a tu modelo de Display/Shield
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Definiendo Variables
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
//Sensor Ultrasónico
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// LEDs RGB
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38;
int xG=38;
int xB=38;
// Floppy Bird
int xP = 319;
int yP = 100;
int yB = 30;
int fallRateInt = 0;
float fallRate =0;
int score=0;
const int button = 14;
int buttonState = 0;
void setup() {
  // Configuración inicial
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);
  // Definiendo Modos de Pin
  pinMode(VCC, OUTPUT); // VCC
  pinMode(trigPin, OUTPUT); // Configura trigPin como Salida
  pinMode(echoPin, INPUT); // Configura echoPin como Entrada
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH); // +5V - Pin 13 como VCC
  drawHomeScreen(); // Dibuja la Pantalla de Inicio
  currentPage = '0'; // Indica que estamos en la Pantalla de Inicio
  selectedUnit = '0'; // Indica la unidad seleccionada para el primer ejemplo, cm o pulgadas
}
void loop() {
  // Pantalla de Inicio
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX(); // Coordenada X donde se ha presionado la pantalla
      y=myTouch.getY(); // Coordenada Y donde se ha presionado la pantalla
      // Si presionamos el Botón Sensor de Distancia
      if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
        drawFrame(35, 90, 285, 130); // Función Personalizada - Resalta el botón cuando se presiona
        currentPage = '1'; // Indica que estamos en el primer ejemplo
        myGLCD.clrScr(); // Limpia la pantalla
        drawDistanceSensor(); // Se llama solo una vez, porque en la siguiente iteración del loop, el if anterior será falso y esta función no se llamará. Esta función dibujará los gráficos del primer ejemplo.
      }
      // Si presionamos el Botón Control LED RGB
      if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }
      // Si presionamos el Botón Juego Birduino
      if ((x>=35) && (x<=285) && (y>=190) && (y<=230)) {
        drawFrame(35, 190, 285, 230);
        currentPage = '3';
        myGLCD.clrScr();
        myGLCD.setColor(114, 198, 206);
        myGLCD.fillRect(0,0,319,239);
        drawGround();
        drawPilars(xP,yP);
        drawBird(30);
        delay(1000);
      }
    }
  }
  // Ejemplo Sensor de Distancia
  if (currentPage == '1') {
    getDistance(); // Obtiene la distancia del sensor y esta función se llama repetidamente mientras estamos en el primer ejemplo para imprimir los últimos resultados del sensor de distancia
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      // Si presionamos el Botón Centímetros
      if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) {
        selectedUnit = '0';
      }
      // Si presionamos el Botón Pulgadas
      if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) {
        selectedUnit = '1';
      }
      // Si presionamos el Botón Atrás
      if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0'; // Indica que estamos en la pantalla de inicio
        myGLCD.clrScr();
        drawHomeScreen(); // Dibuja la pantalla de inicio
      }
    }
  }
  // Control LED RGB
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      //Botón Atrás
      if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
        // Apaga el LED
        analogWrite(redLed, 0);
        analogWrite(greenLed, 0);
        analogWrite(blueLed, 0);
      }
    }
  }
  //==== Esta sección del código, para el ejemplo del juego, se explica en mi próximo tutorial
  // Juego Birduino
  if (currentPage == '3') {
    //delay(1);
    xP=xP-3;
    drawPilars(xP, yP);
    yB+=fallRateInt;
    fallRate=fallRate+0.4;
    fallRateInt= int(fallRate);
    if (yB>=220) {
      yB=220;
    }
    if(yB>=180 || yB<=0){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB<=yP-2)){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB>=yP+60)){
      restartGame();
    }
    drawBird(yB);
    if (xP<=-51){
      xP=319;
      yP = rand() % 100+20;
      score++;
    }
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      if ((x>=0) && (x<=319) &&(y>=50) && (y<=239)) {
        fallRate=-5;
      }
    }
    buttonState = digitalRead(button);
    if (buttonState == HIGH) {
      fallRate=-5;
    }
  }
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();
    if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
      drawFrame(10, 10, 60, 36);
      currentPage = '0';
      myGLCD.clrScr();
      drawHomeScreen();
      analogWrite(redLed, 0);
      analogWrite(greenLed, 0);
      analogWrite(blueLed, 0);
    }
  }
}
// ====== Funciones Personalizadas ======
// drawHomeScreen - Función Personalizada
void drawHomeScreen() {
  // Título
  myGLCD.setBackColor(0,0,0); // Establece el color de fondo del área donde se imprimirá el texto a negro
  myGLCD.setColor(255, 255, 255); // Establece color a blanco
  myGLCD.setFont(BigFont); // Establece fuente a grande
  myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // Imprime la cadena en la pantalla
  myGLCD.setColor(255, 0, 0); // Establece color a rojo
  myGLCD.drawLine(0,32,319,32); // Dibuja la línea roja
  myGLCD.setColor(255, 255, 255); // Establece color a blanco
  myGLCD.setFont(SmallFont); // Establece la fuente a pequeña
  myGLCD.print("by HowToMechatronics.com", CENTER, 41); // Imprime la cadena
  myGLCD.setFont(BigFont);
  myGLCD.print("Select Example", CENTER, 64);
  // Botón - Sensor de Distancia
  myGLCD.setColor(16, 167, 103); // Establece color verde
  myGLCD.fillRoundRect (35, 90, 285, 130); // Dibuja rectángulo redondeado relleno
  myGLCD.setColor(255, 255, 255); // Establece color a blanco
  myGLCD.drawRoundRect (35, 90, 285, 130); // Dibuja rectángulo redondeado sin relleno, para que parezca un marco
  myGLCD.setFont(BigFont); // Establece la fuente a grande
  myGLCD.setBackColor(16, 167, 103); // Establece el color de fondo del área donde se imprimirá el texto a verde, igual que el botón
  myGLCD.print("DISTANCE SENSOR", CENTER, 102); // Imprime la cadena
  // Botón - Control LED RGB
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 140, 285, 180);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 140, 285, 180);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("RGB LED CONTROL", CENTER, 152);
  // Botón - Birduino
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 190, 285, 230);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 190, 285, 230);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("BIRDUINO GAME", CENTER, 202);
}
// Resalta el botón cuando se presiona
void drawFrame(int x1, int y1, int x2, int y2) {
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawRoundRect (x1, y1, x2, y2);
  while (myTouch.dataAvailable())
    myTouch.read();
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (x1, y1, x2, y2);
}
//====================================================
void drawDistanceSensor() {
  myGLCD.setColor(100, 155, 203);
  myGLCD.fillRoundRect (10, 10, 60, 36);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (10, 10, 60, 36);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(100, 155, 203);
  myGLCD.print("<-", 18, 15);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Back to Main Menu", 70, 18);
  myGLCD.setFont(BigFont);
  myGLCD.print("Ultrasonic Sensor", CENTER, 50);
  myGLCD.print("HC-SR04", CENTER, 76);
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawLine(0,100,319,100);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setColor(255, 255, 255);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Select Unit", 10, 114);
  myGLCD.setFont(BigFont);
  myGLCD.print("Distance:", 130, 120);
  myGLCD.setColor(223, 77, 55);
  myGLCD.fillRoundRect (10, 135, 90, 163);
  myGLCD.setColor(225, 255, 255);
  myGLCD.drawRoundRect (10, 135, 90, 163);
  myGLCD.setBackColor(223, 77, 55);
  myGLCD.setColor(255, 255, 255);
  myGLCD.print("cm", 33, 140);
  myGLCD.setColor(223, 77, 55);
  myGLCD.fillRoundRect (10, 173, 90, 201);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (10, 173, 90, 201);
  myGLCD.setBackColor(223, 77, 55);
  myGLCD.setColor(255, 255, 255);
  myGLCD.print("inch", 17, 180);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Source code at: HowToMechatronics.com", CENTER, 220);
}
//====================================================
//===== getDistance - Función Personalizada
void getDistance() {
  // Limpia el trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Configura el trigPin en estado HIGH por 10 microsegundos
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Lee el echoPin, devuelve el tiempo de viaje de la onda sonora en microsegundos
  duration = pulseIn(echoPin, HIGH);
  // Calculando la distancia
  distanceCm= duration*0.034/2;
  distanceInch= distanceCm/2.53;
  // Imprime la distancia en centímetros
  if (selectedUnit == '0' && distanceCm <=400) {
    myGLCD.setFont(SevenSegNumFont);
    myGLCD.setColor(0, 255, 0);
    myGLCD.setBackColor(0, 0, 0);
    myGLCD.printNumI(distanceCm,130, 145, 3,'0');
    myGLCD.setFont(BigFont);
    myGLCD.print("cm ", 235, 178);
  }
  // Imprime la distancia en pulgadas
  if (selectedUnit == '1' && distanceCm <=160) {
    myGLCD.setFont(SevenSegNumFont);
    myGLCD.setColor(0, 255, 0);
    myGLCD.setBackColor(0, 0, 0);
    myGLCD.printNumI(distanceInch,130, 145, 3,'0');
    myGLCD.setFont(BigFont);
    myGLCD.print("inch", 235, 178);
  }
  delay(10);
}
//====================================================
void drawLedControl() {
  myGLCD.setColor(100, 155, 203);
  myGLCD.fillRoundRect (10, 10, 60, 36);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (10, 10, 60, 36);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(100, 155, 203);
  myGLCD.print("<-", 18, 15);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Back to Main Menu", 70, 18);
  myGLCD.setFont(BigFont);
  myGLCD.print("RGB LED Control", CENTER, 50);
  myGLCD.print("LED Color:", 10, 95);
  myGLCD.print("R", 10, 135);
  myGLCD.print("G", 10, 175);
  myGLCD.print("B", 10, 215);
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawLine(0,75,319,75);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRect(30, 138, 310, 148); // R - Deslizador
  myGLCD.drawRect(30, 178, 310, 188);
  myGLCD.drawRect(30, 218, 310, 228);
}
//====================================================
//============= setLedColor() - Función Personalizada
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();
    // Área del deslizador de color Rojo
    if( (y>=130) && (y<=156)) {
      xR=x; // Almacena el valor X donde se ha presionado la pantalla en la variable xR
      if (xR<=38) { // Confina el área del deslizador a partir de 38 píxeles
        xR=38;
      }
      if (xR>=303){ /// Confina el área del deslizador a menos de 310 píxeles
        xR=303;
      }
    }
    // Área del deslizador de color Verde
    if( (y>=170) && (y<=196)) {
      xG=x;
      if (xG<=38) {
        xG=38;
      }
      if (xG>=303){
        xG=303;
      }
    }
    // Área del deslizador de color Azul
    if( (y>=210) && (y<=236)) {
      xB=x;
      if (xB<=38) {
        xB=38;
      }
      if (xB>=303){
        xB=303;
      }
    }
  }
  // Mapea los valores del eje X de 38 a 0 y 310 a 255, porque necesitamos valores de 0 a 255 para encender el LED
  int xRC = map(xR,38,310,0,255);
  int xGC = map(xG,38,310,0,255);
  int xBC = map(xB,38,310,0,255);
  // Envía señal PWM a los pines del LED
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);
  // Dibuja un rectángulo con la última combinación de color
  myGLCD.setColor(xRC, xGC, xBC);
  myGLCD.fillRoundRect(175, 87, 310, 119);
  // Dibuja los posicionadores
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xR,139,(xR+4),147); // Posicionador
  myGLCD.setColor(xRC, 0, 0);
  myGLCD.fillRect(31, 139, (xR-1), 147);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xR+5), 139, 309, 147);
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xG,179,(xG+4),187);
  myGLCD.setColor(0, xGC, 0);
  myGLCD.fillRect(31, 179, (xG-1), 187);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xG+5), 179, 309, 187);
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xB,219,(xB+4),227);
  myGLCD.setColor(0, 0, xBC);
  myGLCD.fillRect(31, 219, (xB-1), 227);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xB+5), 219, 309, 227);
}
//====================================================
void drawGround() {
  myGLCD.setColor(221,216,148);
  myGLCD.fillRect(0, 215, 319, 239);
  myGLCD.setColor(47,175,68);
  myGLCD.fillRect(0, 205, 319, 214);
  myGLCD.setColor(0, 0, 0);
  myGLCD.setBackColor(221, 216, 148);
  myGLCD.setFont(BigFont);
  myGLCD.print("Score:",5,220);
  myGLCD.setFont(SmallFont);
  myGLCD.print("HowToMechatronics.com", 140, 220);
}
void drawPilars(int x, int y) {
  if (x>=270){
    myGLCD.setColor(0, 200, 20);
    myGLCD.fillRect(318, 0, x, y-1);
    myGLCD.setColor(0, 0, 0);
    myGLCD.drawRect(319, 0, x-1, y);
    myGLCD.setColor(0, 200, 20);
    myGLCD.fillRect(318, y+81, x, 203);
    myGLCD.setColor(0, 0, 0);
    myGLCD.drawRect(319, y+80, x-1, 204);
  } else if( x<=268) {
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x+51, 0, x+53, y);
    myGLCD.setColor(0, 200, 20);
    myGLCD.fillRect(x+49, 1, x+1, y-1);
    myGLCD.setColor(0, 0, 0);
    myGLCD.drawRect(x+50, 0, x, y);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x-1, 0, x-3, y);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x+51, y+80, x+53, 204);
    myGLCD.setColor(0, 200, 20);
    myGLCD.fillRect(x+49, y+81, x+1, 203);
    myGLCD.setColor(0, 0, 0);
    myGLCD.drawRect(x+50, y+80, x, 204);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x-1, y+80, x-3, 204);
  }
  myGLCD.setColor(0, 0, 0);
  myGLCD.setBackColor(221, 216, 148);
  myGLCD.setFont(BigFont);
  myGLCD.printNumI(score, 100, 220);
}
//====================================================
void drawBird(int y) {
  if(y<=219) {
    myGLCD.drawBitmap (50, y, 35, 30, bird01);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRoundRect(50,y,85,y-6);
    myGLCD.fillRoundRect(50,y+30,85,y+36);
  } else if(y>=200) {
    myGLCD.drawBitmap (50, 200, 35, 30, bird01);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRoundRect(50,200,85,200-6);
    myGLCD.fillRoundRect(50,200+30,85,200+36);
  }
}
void gameOver() {
  myGLCD.clrScr();
  myGLCD.setColor(255, 255, 255);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(BigFont);
  myGLCD.print("GAME OVER", CENTER, 40);
  myGLCD.print("Score:", 100, 80);
  myGLCD.printNumI(score,200, 80);
  myGLCD.print("Restarting...", CENTER, 120);
  myGLCD.setFont(SevenSegNumFont);
  myGLCD.printNumI(2,CENTER, 150);
  delay(1000);
  myGLCD.printNumI(1,CENTER, 150);
  delay(1000);
  myGLCD.setColor(114, 198, 206);
  myGLCD.fillRect(0,0,319,239);
  drawBird(30);
  drawGround();
  delay(1000);
}
//====================================================
void restartGame() {
  delay(1000);
  gameOver();
  xP=319;
  yB=30;
  fallRate=0;
  score=0;
}
Lenguaje: Arduino (arduino)