Este tutorial te mostrará cómo empezar con la pantalla HMI CrowPanel Advance 7“ (Versión 1.0) de Elecrow. La pantalla HMI CrowPanel Advance 7“ es una pantalla táctil HMI con una resolución IPS de 800*480. Utiliza el ESP32-S3 como procesador principal, con 512KB de SRAM, 8M de PSRAM y 16M de Flash.
Además de la gran pantalla IPS, las principales características son módulos inalámbricos opcionales para Thread, Zigbee, Matter, WiFi 6 o radio de 2.4 GHz, una interfaz para micrófono y altavoz. Esto hace que la pantalla sea adecuada para AI assistant aplicaciones y Elecrow proporciona ejemplos code e instrucciones videos para ello.
Sin embargo, en este tutorial comenzamos con un ejemplo muy simple que solo escribe texto en la pantalla y reacciona a las entradas táctiles. Esto debería facilitarte el inicio con esta pantalla. Ten en cuenta que estoy usando la Versión 1.0 y el código puede no funcionar con otras versiones de la pantalla.
Partes necesarias
Necesitarás la pantalla HMI CrowPanel Advance 7“ de ELECROW y el Arduino IDE. Yo tengo la Versión 1.0, pero hay una versión más reciente 1.2 disponible.
CrowPanel Advance 7“
Ten en cuenta que puedes conseguir la pantalla con o sin carcasa acrílica. Esta última es útil si quieres montar la pantalla en una pared, por ejemplo, y no quieres construir tu propia carcasa. Solo ten cuidado con los botones de reset/boot en la parte trasera. Sobresalen bastante y si montas la pantalla muy cerca, se presionarán.
Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.
Características de la pantalla CrowPanel Advance 7“
La pantalla CrowPanel Advance ESP32 de 7 pulgadas es una pantalla táctil capacitiva IPS con una resolución de 800*480 y un ángulo de visión amplio de 178°. La imagen a continuación muestra el frente de la pantalla con sus dimensiones:
La pantalla utiliza el chip ESP32-S3 como procesador principal. Este chip está equipado con un procesador dual-core Xtensa 32-bit LX7 con una frecuencia principal de hasta 240MHz, con 512KB de SRAM, 8M de PSRAM y 16M de Flash.
Periféricos
En cuanto a periféricos, el módulo de pantalla tiene un reloj en tiempo real (RTC) con batería integrada, un puerto de carga de batería, salida para altavoz, micrófono digital, zumbador, ranura para tarjeta micro SD, puerto I2C, puerto GPIO con dos GPIOs y dos salidas UART. La foto a continuación muestra la parte trasera del PCB, donde puedes ver la mayoría de estos componentes:
La siguiente tabla ofrece una visión general de los distintos puertos, pines GPIO asociados y características eléctricas:
| Puerto | Pines | Características eléctricas |
|---|---|---|
| UART0-OUT | RX(IO44); TX(IO43) RX; | Voltaje de salida: 3.3V Corriente máxima de salida: 1A Uso: salida de alimentación y comunicación. |
| UART1-OUT | RX(IO19); TX(IO20) RX; | Voltaje de salida: 3.3V Corriente máxima de salida: 1A Uso: salida de alimentación y comunicación. |
| UART0-IN | RX(IO44); TX(IO43) RX; | Voltaje de entrada: 5V ± 5%. Máximo 5.5V. Corriente máxima de entrada: 2A Propósito: entrada de alimentación y comunicación. |
| I2C | SDA(IO15); SCL(IO16); | Voltaje de salida: 3.3V Corriente máxima de salida: 1A Uso: salida de alimentación y comunicación. |
| SPK | I2S_LRCLK(IO6); I2S_BCLK(IO5); I2S_SDIN(IO4); | Corriente máxima de salida: 20mA Tipo de señal: nivel lógico 3.3V, señal digital de control |
| Ranura para tarjeta SD | MOSI(IO6); MISO(IO4); CLK(IO5); CS(GND) | Corriente máxima de salida: 20mA Tipo de señal: nivel lógico 3.3V, señal digital de control |
| Retroiluminación LCD | P3.5 (STC8H1K28) | Corriente máxima de salida: 20mA Tipo de señal: nivel lógico 3.3V, señal digital de control |
| Ajuste de retroiluminación | P1.1 (STC8H1K28) | |
| Micrófono I2S | MIC_SD(IO20); MIC_WS(IO2); MIC_CLK(IO19) | Corriente máxima de salida: 20mA Tipo de señal: nivel lógico 3.3V, señal digital de control |
| Zumbador | P2.7 (STC8H1K28) | Corriente máxima de salida: 20mA Tipo de señal: nivel lógico 3.3V, señal digital de control |
| TP_RST | P1.7 (STC8H1K28) | |
| Silenciamiento del amplificador de potencia | P3.7 (STC8H1K28) | |
| Apagado del amplificador de potencia | P3.6 (STC8H1K28) |
Selección de función
Algunos periféricos como el micrófono (MIC), el altavoz (SPK), el módulo inalámbrico (WM) y la tarjeta SD (TF Card) compiten por los GPIO y solo pueden usarse en combinaciones específicas. En la parte trasera de la pantalla encontrarás una tabla y dos interruptores DIP que te permiten seleccionar una combinación determinada:
Comunicación inalámbrica
Además de la función integrada de Wi-Fi 2.4GHz y BLE con antena RF incorporada, la pantalla tiene una ranura separada para un módulo inalámbrico. Hay cuatro módulos inalámbricos para elegir: Module-ESP32-H2, Module-ESP32-C6, Module-nRF2401 y Module-Meshtastic, que permiten comunicarse vía Zigbee, LoRa, nRF2401, Matter, Thread y Wi-Fi 6. La imagen a continuación muestra dónde se insertan estos módulos de comunicación:
Para más información técnica, consulta el Description page for the CrowPanel Advance 7“ Display.
Otras variantes de pantalla
La pantalla CrowPanel Advance ESP32 de 7 pulgadas es una mejora de la pantalla estándar CrowPanel ESP32 de 7 pulgadas. Estas pantallas vienen en varios tamaños y resoluciones, con diferentes controladores y capacidades. La siguiente tabla ofrece una visión general de las distintas opciones de pantalla:
Configuración de la pantalla CrowPanel Advance 7“
Programar la pantalla CrowPanel Advance 7“ es un poco complicado, ya que necesitas instalar versiones específicas de las librerías y del core ESP32. Otras versiones de librerías o core pueden funcionar, pero no las he probado.
Instalar librerías
Primero, instalemos las librerías necesarias. Ve a la carpeta CrowPanel-Advance-HMI-lib que está en Google Drive. Desde allí descarga el archivo librariesAdvance7.0.rar haciendo clic en el icono de descarga como se muestra a continuación:
librariesAdvance7.0.rar es un archivo comprimido y necesitas descomprimirlo primero. Solo haz clic en el archivo en tu explorador (en Windows) y copia el contenido a otra carpeta. En mi caso, copié el contenido a la siguiente carpeta:
c:\Maet\Temp\librariesAdvance7.0\libraries
La captura de pantalla a continuación muestra parte del contenido de esa carpeta y tu contenido debería verse igual:
librariesPuedes elegir cualquier otra ruta que prefieras, pero debe terminar en \libraries, ya que la usaremos en la configuración de rutas del Arduino IDE.
El Arduino IDE guarda las librerías instaladas en la carpeta \libraries dentro de la ubicación del Sketchbook. Podrías reemplazar todas las librerías en esa ubicación con las descargadas, pero eso significaría perder todas tus librerías instaladas previamente.
En cambio, vamos a cambiar (temporalmente) la ruta de la ubicación del Sketchbook, lo cual es más rápido y fácil de revertir. Abre el diálogo Archivo -> Preferencias y escribe la ruta c:\Maet\Temp\librariesAdvance7.0 en el campo para la ubicación del Sketchbook como se muestra a continuación:
Asegúrate de NO añadir la carpeta \libraries al final de la ruta. El Arduino IDE buscará esa carpeta automáticamente. En otras palabras, las librerías descargadas están dentro de c:\Maet\Temp\librariesAdvance7.0\libraries pero debes ingresar la ruta c:\Maet\Temp\librariesAdvance7.0.
Cuando termines de programar la pantalla CrowPanel Advance 7“, puedes volver a poner la ruta original para la ubicación del Sketchbook y recuperar tus librerías originales. En Windows, esta suele ser c:\Users\<username>\OneDrive\Documents\Arduino.
Instalar core ESP32 versión 3.0.2
Luego necesitamos instalar una versión específica del core ESP32. Abre el BOARDS MANAGER, escribe «esp32» en el campo de búsqueda y verás las placas «esp32 by Espressif Systems» como se muestra a continuación:
Si no has instalado las placas ESP32, verás un botón INSTALL. Si ya las tienes instaladas pero no la última versión (como en la imagen), verás un botón UPDATE en su lugar.
En cualquier caso, haz clic en la lista desplegable y selecciona la versión 3.0.2 como se muestra a continuación, y luego presiona INSTALL.
En la captura puedes ver que ya tengo instalada la versión 3.0.2 y por eso aparece el botón UPDATE. Deberías ver lo mismo una vez que hayas instalado el Core ESP32 3.0.2. Si necesitas más ayuda, consulta nuestro How to Program ESP32 with Arduino IDE tutorial.
Seleccionar placa
Luego necesitamos seleccionar una placa ESP32 adecuada. En el caso del CrowPanel Advance 7“, elegimos el “ESP32S3 Dev Module”. Para ello, primero conecta la pantalla al ordenador mediante el cable USB. Luego haz clic en el menú desplegable y después en “Select other board and port…”:
Esto abrirá un diálogo donde puedes escribir “esp32s3 dev» en la barra de búsqueda. Verás la placa “ESP32S3 Dev Module” bajo Boards. Haz clic en ella y en el puerto COM para activarlo y luego haz clic en OK:
Solo podrás seleccionar el puerto COM si la pantalla está conectada al ordenador vía USB.
Configuración de la placa
Finalmente, necesitamos configurar los parámetros correctos para la placa. Ve al menú Tools como se muestra a continuación:
Esto abrirá un menú desplegable grande con las opciones de configuración al final. Asegúrate de establecer los siguientes parámetros:
Específicamente, el tamaño de Flash debe estar en 16MB, el esquema de partición en Huge APP y la PSRAM en OPI PSRAM. Puedes encontrar información adicional en la página Product Introduction para la pantalla CrowPanel Advance 7“.
Dibujando en la pantalla CrowPanel Advance 7“
Con la configuración lista, ahora podemos empezar a programar la pantalla. La CrowPanel Advance 7“ viene con code ejemplos y videos tutorials, sin embargo, todos usan SquareLine Studio and LVGL para mostrar algo en la pantalla.
Esto es genial para interfaces de usuario más complejas, pero un poco difícil si quieres empezar con la pantalla, ya que el código correspondiente es bastante grande y complejo.
El siguiente ejemplo es mucho más simple y te muestra cómo imprimir texto en la pantalla y reaccionar a las entradas táctiles usando la librería LovyanGFX. Si has seguido el procedimiento de configuración descrito antes, ya habrás instalado la librería LovyanGFX.
Estructura del proyecto
Primero, creamos la carpeta necesaria para el proyecto. Crea una carpeta con el nombre «advance7«, con dos archivos dentro, llamados «advance7.ino» y «lgfx_conf.h«:
Luego abre el archivo advance7.ino en tu Arduino IDE. Deberías ver pestañas para los dos archivos del proyecto:
Configuración de LovyanGFX
En el archivo lgfx_conf.h copia el siguiente código, que crea la clase LGFX con la configuración de pines para la pantalla.
// lgfx_conf.h
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <lgfx/v1/platforms/esp32s3/Panel_RGB.hpp>
#include <lgfx/v1/platforms/esp32s3/Bus_RGB.hpp>
#include <driver/i2c.h>
class LGFX : public lgfx::LGFX_Device {
public:
lgfx::Bus_RGB _bus_instance;
lgfx::Panel_RGB _panel_instance;
lgfx::Touch_GT911 _touch_instance;
LGFX(void) {
{
auto cfg = _panel_instance.config();
cfg.memory_width = 800;
cfg.memory_height = 480;
cfg.panel_width = 800;
cfg.panel_height = 480;
cfg.offset_x = 0;
cfg.offset_y = 0;
_panel_instance.config(cfg);
}
{
auto cfg = _panel_instance.config_detail();
cfg.use_psram = 1;
_panel_instance.config_detail(cfg);
}
{
auto cfg = _bus_instance.config();
cfg.panel = &_panel_instance;
cfg.pin_d0 = GPIO_NUM_21; // B0
cfg.pin_d1 = GPIO_NUM_47; // B1
cfg.pin_d2 = GPIO_NUM_48; // B2
cfg.pin_d3 = GPIO_NUM_45; // B3
cfg.pin_d4 = GPIO_NUM_38; // B4
cfg.pin_d5 = GPIO_NUM_9; // G0
cfg.pin_d6 = GPIO_NUM_10; // G1
cfg.pin_d7 = GPIO_NUM_11; // G2
cfg.pin_d8 = GPIO_NUM_12; // G3
cfg.pin_d9 = GPIO_NUM_13; // G4
cfg.pin_d10 = GPIO_NUM_14; // G5
cfg.pin_d11 = GPIO_NUM_7; // R0
cfg.pin_d12 = GPIO_NUM_17; // R1
cfg.pin_d13 = GPIO_NUM_18; // R2
cfg.pin_d14 = GPIO_NUM_3; // R3
cfg.pin_d15 = GPIO_NUM_46; // R4
cfg.pin_henable = GPIO_NUM_42;
cfg.pin_vsync = GPIO_NUM_41;
cfg.pin_hsync = GPIO_NUM_40;
cfg.pin_pclk = GPIO_NUM_39;
cfg.freq_write = 21000000;
cfg.hsync_polarity = 0;
cfg.hsync_front_porch = 8;
cfg.hsync_pulse_width = 4;
cfg.hsync_back_porch = 8;
cfg.vsync_polarity = 0;
cfg.vsync_front_porch = 8;
cfg.vsync_pulse_width = 4;
cfg.vsync_back_porch = 8;
cfg.pclk_idle_high = 1;
_bus_instance.config(cfg);
}
_panel_instance.setBus(&_bus_instance);
{
auto cfg = _touch_instance.config();
cfg.x_min = 0;
cfg.x_max = 800;
cfg.y_min = 0;
cfg.y_max = 480;
cfg.pin_int = -1;
cfg.bus_shared = false;
cfg.offset_rotation = 0;
cfg.i2c_port = I2C_NUM_0;
cfg.pin_sda = GPIO_NUM_15;
cfg.pin_scl = GPIO_NUM_16;
cfg.pin_rst = -1;
cfg.freq = 400000;
cfg.i2c_addr = 0x5D; // 0x5D , 0x14
_touch_instance.config(cfg);
_panel_instance.setTouch(&_touch_instance);
}
setPanel(&_panel_instance);
}
};
Es la configuración para la pantalla según lo que necesita la librería LovyanGFX y es esencialmente una copia del archivo LovyanGFX_Driver.h del ejemplo de código lesson-03. Indica a la librería qué pines de la pantalla y la interfaz táctil están conectados a qué pines GPIO del ESP32.
Este archivo de configuración permanece igual para todos los proyectos y puedes copiarlo y pegarlo en diferentes proyectos si es necesario.
Código para dibujar
Finalmente, copia el siguiente código en el archivo advance7.ino. Es una prueba simple que escribe texto en la pantalla y reacciona a las entradas táctiles:
#include "lgfx_conf.h"
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <TCA9534.h>
LGFX gfx;
TCA9534 ioex;
void initIOEX() {
Wire.begin(15, 16);
delay(50);
ioex.attach(Wire);
ioex.setDeviceAddress(0x18);
ioex.config(1, TCA9534::Config::OUT);
ioex.config(2, TCA9534::Config::OUT);
ioex.config(3, TCA9534::Config::OUT);
ioex.config(4, TCA9534::Config::OUT);
ioex.output(1, TCA9534::Level::H); // backlight
}
void initGT911() {
pinMode(1, OUTPUT);
digitalWrite(1, LOW);
ioex.output(2, TCA9534::Level::L);
delay(20);
ioex.output(2, TCA9534::Level::H);
delay(100);
pinMode(1, INPUT);
}
void setup() {
initIOEX();
initGT911();
gfx.init();
gfx.fillScreen(TFT_BLUE);
gfx.setTextColor(TFT_WHITE, TFT_BLUE);
gfx.setTextSize(4);
gfx.drawString("Makerguides-4", 250, 200);
}
void loop() {
uint16_t touch_x, touch_y;
if (gfx.getTouch(&touch_x, &touch_y)) {
gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
}
delay(100);
}
Más específicamente, este código llena el fondo de la pantalla de azul, escribe el texto «Makerguides-4» y reacciona a los toques dibujando un círculo amarillo en la ubicación donde se toca la pantalla. La imagen a continuación muestra cómo se ve la pantalla tras algunos toques:
En las siguientes secciones analizaremos el código con más detalle y veremos cómo funciona.
Includes
El código comienza incluyendo el archivo de configuración de la pantalla, la librería Wire para comunicación I2C, la librería Adafruit_GFX para dibujo y la librería TCA9534 para el expansor de IO que forma parte de la pantalla CrowPanel Advance 7“:
#include "lgfx_conf.h" #include <Wire.h> #include <Adafruit_GFX.h> #include <TCA9534.h>
Objetos
Luego creamos objetos para la pantalla y el expansor de IO:
LGFX gfx; TCA9534 ioex;
Función initIOEX
La función initIOEX inicializa el expansor de IO TCA9534. Esto es necesario para enrutar la comunicación entre la pantalla y el ESP32 a través del limitado número de canales GPIO.
void initIOEX() {
Wire.begin(15, 16);
delay(50);
ioex.attach(Wire);
ioex.setDeviceAddress(0x18);
ioex.config(1, TCA9534::Config::OUT);
ioex.config(2, TCA9534::Config::OUT);
ioex.config(3, TCA9534::Config::OUT);
ioex.config(4, TCA9534::Config::OUT);
ioex.output(1, TCA9534::Level::H); // backlight
}
También es importante la última línea que enciende la retroiluminación de la pantalla. Sin la retroiluminación encendida, no verás nada.
Función initGT911
La función initGT911 inicializa el controlador de pantalla táctil (GT911) para la pantalla. Esto permite que el ESP32 reaccione a las entradas táctiles.
void initGT911() {
pinMode(1, OUTPUT);
digitalWrite(1, LOW);
ioex.output(2, TCA9534::Level::L);
delay(20);
ioex.output(2, TCA9534::Level::H);
delay(100);
pinMode(1, INPUT);
}
Función setup
En la función setup inicializamos el expansor de IO, el GT911 y la pantalla. Luego llenamos la pantalla de azul y escribimos el texto «Makerguides-4» aproximadamente en el centro, en la posición (250, 200) en blanco.
void setup() {
initIOEX();
initGT911();
gfx.init();
gfx.fillScreen(TFT_BLUE);
gfx.setTextColor(TFT_WHITE, TFT_BLUE);
gfx.setTextSize(4);
gfx.drawString("Makerguides-4", 250, 200);
}
Función loop
En la función loop llamamos repetidamente a la función gfx.getTouch() para comprobar las entradas táctiles. Si hay una entrada táctil, obtenemos la ubicación del toque de las variables touch_x y touch_y, y dibujamos un círculo relleno amarillo con un radio de 10 píxeles en la ubicación del toque.
void loop() {
uint16_t touch_x, touch_y;
if (gfx.getTouch(&touch_x, &touch_y)) {
gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
}
delay(100);
}
Si compilas y subes el código, notarás que el Arduino IDE te avisa que hay actualizaciones disponibles para tus placas y librerías.
No instales estas actualizaciones, ya que reemplazarían las versiones específicas de librerías y placas que acabamos de instalar durante la configuración.
Versión de pantalla 1.0 vs 1.2
Hay un problema con la versión anterior V1.0 de la pantalla CrowPanel Advance 7“ que debes conocer. Puedes encontrar la versión de tu pantalla en la parte trasera del PCB. Mira la foto a continuación. Si tu pantalla viene con la carcasa acrílica, tendrás que quitar la placa trasera para ver el número de versión.
Los módulos H2 y C6 para comunicación inalámbrica que vienen con el lote V1.0 de la pantalla no tienen firmware preinstalado. Desafortunadamente, no puedes conectar directamente un programador serial para flashear el firmware necesario, ya que faltan los pines del header. Tendrás que soldar pines, flashear el firmware y luego retirarlos.
Para más detalles, consulta https://github.com/Elecrow-RD/CrowPanel-Advance-5.0-HMI-ESP32-AI-Display-800×480/tree/master/example/example_code5.0/lesson-09.
Ten en cuenta que también hay diferencias en los esquemas para Version 1.0 y el actual Version 1.2, lo que podría ser importante para algunas aplicaciones.
Conclusiones
Espero que este tutorial te haya ayudado a empezar con la pantalla HMI CrowPanel Advance 7“. Hemos proporcionado un ejemplo de código simple para escribir texto en la pantalla y reaccionar a las entradas táctiles. Para muchas aplicaciones, esto debería ser un buen punto de partida.
Si quieres construir interfaces de usuario más avanzadas, SquareLine Studio and LVGL son el camino a seguir, pero también son más difíciles de usar y el código es mucho más complejo.
Elecrow también ofrece varios code ejemplos y videos tutorials que te muestran cómo usar el altavoz, la interfaz de tarjeta SD, las diversas opciones inalámbricas y cómo construir aplicaciones de IA, como un Chat Bot.
Si necesitas una pantalla CrowPanel más pequeña y sencilla, echa un vistazo a nuestro CrowPanel 2.8″ ESP32 Display : Easy Setup Guide. También tenemos algunos tutoriales sobre aplicaciones con pantallas CrowPanel como Digital Clock with CrowPanel 3.5″ ESP32 Display, Digital Timer Switch with CrowPanel ESP32 Display o el Parking sensor with CrowPanel ESP32 Display, que podrían interesarte.
Si tienes alguna pregunta, no dudes en dejarla en la sección de comentarios.
¡Feliz bricolaje ; )
Enlaces
A continuación algunos enlaces para la pantalla HMI CrowPanel Advance 7“ que encontré útiles al escribir este tutorial:
- Wiki
- Specification
- Setup Instructions
- Code Examples
- Code for Wireless Modules
- Video Tutorials
- Schematics Version 1.0
- Schematics Version 1.2
