En el siguiente tutorial aprenderás a conectar la Placa de Expansión Air101-LCD de 160×80 pixeles, 0.96 pulgadas y Joystick incluido a la Tarjeta de Desarrollo LuatOS ESP32 C3 , la cual está basada en los famosos microchips ESP32 que son útiles para proyectos de IoT ya que cuentan con conexión Wifi y Bluetooth. También aprenderás a programar de forma sencilla en el entorno de Arduino IDE un minijuego que te permitirá conocer algunos comandos básicos de las librerías para controlar pantallas TFT.

Materiales

Para esta práctica necesitaremos:

• Placa de Expansión Air101-LCD
• Tarjeta de Desarrollo LuatOS ESP32 C3
• Cable USB – USB_C

Conexiones

La placa de expansión Air101—LCD es un excelente complemento para la tarjeta LuatOS ya que la puedes colocar sobre la tarjeta de desarrollo de forma sencilla, sin necesidad de usar cables o protoboards. Como se muestra en la siguiente imagen:

Sin embargo, recordemos que la Pantalla TFT es compatible con cualquier tarjeta de desarrollo que tenga comunicación SPI, por lo que te compartimos las conexiones físicas por si quieres usarlas de referencia para conectar a otra tarjeta con comunicación SPI.

Software

Para esta práctica utilizaremos las siguientes librerías:

• Adafruit_GFX
• Adafruit_ST7735

Estas librerías se adecuaron para ser compatibles con la pantalla Air101-LCD, si requieres las librerías de Adafruit puedes obtenerlas en el gestor de Bibliotecas de Arduino IDE.

También será necesaria la instalación de el driver CH343 para que tu computadora pueda reconocer la tarjeta LuatOS ESP32 C3.

Por último, ya que trabajaremos en el Entorno de Arduino IDE es necesario agregar las tarjetas ESP32, para ello utilizaremos el gestor de Placas que es el segundo icono en el lateral derecho dentro del entorno de Arduino.

En el buscador escribe ESP32 e instala esp32 de Espressif Systems

Código

Una vez que hayas instalado las librerías, placas y drivers necesarios es momento de conectar nuestra placa LuatOS a nuestra PC con ayuda de nuestro cable USB – USB_C.

Ahora hay que revisar que puerto COM está asignado a tu tarjeta LuatOS ESP32 C3. Para ello abre el administrador de dispositivos y despliega Puertos (COM y LPT), deberías visualizar algo así:

En nuestro caso la tarjeta LuatOS esta asignada al puerto COM14 de nuestra PC.

Una vez que sepamos que puerto COM está asignado a nuestra tarjeta LuatOS abriremos Arduino IDE y realizaremos el siguiente código:

/*
  UNIT electronics BLOG
  Este código sirve para hacer un minijuego tipo snake en el cual el punto azul debe desplazarse 
  hasta el recuadro naranja, para mover el punto a través de la pantalla solo debes mover el 
  Joystick hacia la dirección que quieras que se desplace el punto.
  Cada vez que se alcance el recuadro esté cambiara de posición en la pantalla.
  Cuando se presione el Joystick se reiniciará la pantalla.
*/

//Librerías
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>

//Pines de comunicación SPI
#define TFT_SCLK 2   //Pin_SCK
#define TFT_MOSI 3   //Pin_SDA
#define TFT_RST 10   //Pin_Res
#define TFT_DC 6     //Pin_DC
#define TFT_CS 7     //Pin_CS

//Definicion de medidas de la pantalla
#define SCREEN_WIDTH 100
#define SCREEN_HEIGHT 160

//Definición de los pines del Joystick
#define BUTTON_LEFT 8     //Izquierda
#define BUTTON_UP 9       //Arriba
#define BUTTON_CENTER 4   //Centro
#define BUTTON_DOWN 5     //Abajo
#define BUTTON_RIGHT 13   //Derecha

//Objeto Pantalla TFT
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);

void setup() {
  //Declaración de los pines y activación de las resistencias PullUp
  pinMode(BUTTON_LEFT, INPUT_PULLUP);
  pinMode(BUTTON_UP, INPUT_PULLUP);
  pinMode(BUTTON_CENTER, INPUT_PULLUP);
  pinMode(BUTTON_DOWN, INPUT_PULLUP);
  pinMode(BUTTON_RIGHT, INPUT_PULLUP);
  
  //Se inicia la pantalla
  tft.initR(INITR_BLACKTAB);
}

//Definición de variables
int x = 50;
int y = 80;
int step=1;
int w=15;
int h=13;
int goal[]={60,100};

//Definición de la función snake
void snake(){
  //Definición de variables de control del Joystick
  int leftValue = digitalRead(BUTTON_LEFT);
  int upValue = digitalRead(BUTTON_UP);
  int centerValue = digitalRead(BUTTON_CENTER);
  int downValue = digitalRead(BUTTON_DOWN);
  int rightValue = digitalRead(BUTTON_RIGHT);

  if(leftValue == LOW){
    x = x - step;
  }
  if(rightValue == LOW){
    x = x + step;
  }
  if(upValue == LOW){
    y = y - step;
  }
  if(downValue == LOW){
    y = y + step;
  }
  if(centerValue == LOW){
    tft.fillScreen(ST7735_BLACK);
    tft.fillRect(goal[0],goal[1], w, h, ST7735_ORANGE);
  }
  if(x < 0){
    x = SCREEN_WIDTH-1;
  }
  if(x > SCREEN_WIDTH-1){
    x = 0;
  }
  if(y < 0){
    y = SCREEN_HEIGHT-1;
  }
  if(y > SCREEN_HEIGHT-1){
    y = 0;
  }
  if (x >= goal[0] && x <= (goal[0] + w) && y >= goal[1] && y <= (goal[1] + h)) {
    tft.fillScreen(ST7735_BLACK);
    goal[0] = random(20,80);
    goal[1] = random(20,150);
    tft.fillRect(goal[0],goal[1], w, h, ST7735_ORANGE);
  }
  tft.fillCircle(x,y,4,ST7735_BLUE);
  delay(50);
}
void loop() {
  //Se llama a la función snake
  snake();
}

Para hacer la carga del programa, da clic en Herramientas y sigue la siguiente ruta: Placa >> esp32 >>ESP32C3 Dev Module

Ahora debes seleccionar el Puerto COM al que esta asignada tu placa, para ello nuevamente da clic en Herramientas y selecciona Puerto, posteriormente el puerto COM de tu placa.

Ahora asegúrate que el Flash Mode este configurado como DIO. Para ello da clic en Herramientas, selecciona FlashMode y luego DIO.

Finalmente asegúrate que la configuración de tu entorno sea la siguiente:

Ahora puedes cargar el código a tu tarjeta como lo harías normalmente con una tarjeta Arduino.

Conclusiones

En esta práctica pudimos comprobar el buen equipo que hacen la tarjeta LuatOS ESP32 C3 y la pantalla Air101-LCD ya que su conexión se muy sencilla y no se requiere de ningún otro componente para llevar a cabo este minijuego.

Sin embargo, no todo es miel sobre hojuelas, pues al conectar este shield a la tarjeta LuatOS se limitan sus funciones.

A pesar de que la pantalla puede funcionar con solo 17 pines, el shield ocupa los 32 pines de la tarjeta LuatOS sin permitirnos conectar más componentes útiles y minimizando su implementación para proyectos más elaborados. Por ejemplo, un teclado matricial que podría servir para hacer una interfaz gráfica para selección de conexiones Wifi o Bluetooth o bien para la conexión de sensores que nos permitan visualizar el monitoreo constante de alguna variable.

Esperamos que este artículo te haya servido para poder conocer el funcionamiento y los alcances de la tarjeta LuatOS y la pantalla Air101-LCD ya sea que trabajes con este gran duo o por separado.

Te invitamos a visualizar el funcionamiento de esta práctica en nuestro canal de TikTok.