Este tutorial vai mostrar como começar a usar o CrowPanel Advance 7“ HMI Display (Versão 1.0) da Elecrow. O CrowPanel Advance 7“ HMI Display é um ecrã tátil HMI com um display IPS de resolução 800*480. Utiliza o ESP32-S3 como processador principal, com 512KB SRAM, 8M PSRAM e 16M Flash.
Além do grande ecrã IPS, as principais características são módulos wireless opcionais para Thread, Zigbee, Matter, WiFi 6 ou rádio 2.4 GHz, uma interface para microfone e altifalante. Isto torna o display adequado para AI assistant aplicações e a Elecrow fornece exemplos code e instruções videos para o mesmo.
No entanto, neste tutorial começamos com um exemplo muito simples que apenas escreve texto no ecrã e reage a toques. Isto deve facilitar o início com este display. Note que estou a usar a Versão 1.0 e o código pode não funcionar noutras versões do display!
Peças Necessárias
Vai precisar do CrowPanel Advance 7“ HMI Display da ELECROW e do Arduino IDE. Eu tenho a Versão 1.0, mas existe uma versão mais recente 1.2 disponível.
CrowPanel Advance 7“
Note que pode obter o display com ou sem caixa acrílica. Esta última é útil se quiser montar o display numa parede, por exemplo, e não quiser construir a sua própria caixa. Apenas tenha cuidado com os botões de reset/boot na parte de trás. Eles sobressaem bastante e se montar o display muito perto, serão pressionados.
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 do CrowPanel Advance 7“ Display
O display CrowPanel Advance ESP32 de 7 polegadas é um ecrã tátil capacitivo IPS com resolução 800*480 e um ângulo de visão amplo de 178°. A imagem abaixo mostra a frente do display com as suas dimensões:
O display usa o chip ESP32-S3 como processador principal. Este chip está equipado com um processador dual-core Xtensa 32-bit LX7 com frequência principal até 240MHz, com 512KB SRAM, 8M PSRAM e 16M Flash.
Periféricos
Quanto aos periféricos, o módulo de display tem um Relógio de Tempo Real (RTC) com bateria integrada, uma porta de carregamento de bateria, saída para altifalante, microfone digital, buzzer, slot para cartão micro SD, porta I2C, porta GPIO com dois GPIOs e duas saídas UART. A foto abaixo mostra a parte de trás da PCB, onde pode ver a maioria destes componentes:
A tabela seguinte fornece uma visão geral das várias portas, pinos GPIO associados e características elétricas:
| Porta | Pinos | Características Elétricas |
|---|---|---|
| UART0-OUT | RX(IO44); TX(IO43) RX; | Tensão de saída: 3.3V Corrente de saída: 1A máx. Uso: Saída de alimentação e comunicação. |
| UART1-OUT | RX(IO19); TX(IO20) RX; | Tensão de saída: 3.3V Corrente de saída: 1A máx. Uso: Saída de alimentação e comunicação. |
| UART0-IN | RX(IO44); TX(IO43) RX; | Tensão de entrada: 5V ± 5%. 5.5V máx. Corrente de entrada: 2A máx. Propósito: Entrada de alimentação e comunicação. |
| I2C | SDA(IO15); SCL(IO16) ; | Tensão de saída: 3.3V Corrente de saída: 1A máx. Uso: Saída de alimentação e comunicação. |
| SPK | I2S_LRCLK(IO6);I2S_BCLK(IO5);I2S_SDIN(IO4); | Corrente máxima de saída: 20mA Tipo de sinal: nível lógico 3.3V, sinal digital de controlo |
| Slot para Cartão SD | MOSI(IO6); MISO(IO4); CLK(IO5); CS(GND) | Corrente máxima de saída: 20mA Tipo de sinal: nível lógico 3.3V, sinal digital de controlo |
| Retroiluminação do LCD | P3.5（STC8H1K28） | Corrente máxima de saída: 20mA Tipo de sinal: nível lógico 3.3V, sinal digital de controlo |
| Ajuste da Retroiluminação | P1.1（STC8H1K28） | |
| I2S MIC | MIC_SD(IO20);MIC_WS(IO2);MIC_CLK(IO19) | Corrente máxima de saída: 20mA Tipo de sinal: nível lógico 3.3V, sinal digital de controlo |
| BUZZER | P2.7（STC8H1K28） | Corrente máxima de saída: 20mA Tipo de sinal: nível lógico 3.3V, sinal digital de controlo |
| TP_RST | P1.7（STC8H1K28） | |
| mudo do amplificador de potência | P3.7（STC8H1K28） | |
| desligar do amplificador de potência | P3.6（STC8H1K28） |
Seleção de Função
Alguns periféricos como o microfone (MIC), o altifalante (SPK), o módulo wireless (WM) e o cartão SD (TF Card) competem pelos GPIO e só podem ser usados em combinações específicas. Na parte de trás do display encontra uma tabela e dois DIP-switches que permitem selecionar uma determinada combinação:
Comunicação Wireless
Além da função integrada de Wi-Fi 2.4GHz e BLE com antena RF incorporada, o display tem um slot separado para um Módulo Wireless. Existem quatro módulos wireless para escolher: Module-ESP32-H2, Module-ESP32-C6, Module-nRF2401 e o Module-Meshtastic, que permitem comunicar via Zigbee, LoRa, nRF2401, Matter, Thread e Wi-Fi 6. A imagem abaixo mostra onde estes módulos de comunicação são inseridos:
Para mais informações técnicas consulte o Description page for the CrowPanel Advance 7“ Display.
Outras Variantes de Display
O display CrowPanel Advance ESP32 de 7 polegadas é uma atualização do display padrão CrowPanel ESP32 de 7 polegadas. Estes displays vêm em vários tamanhos e resoluções, com diferentes drivers e capacidades. A tabela seguinte fornece uma visão geral das diferentes opções de display:
Configurar o CrowPanel Advance 7“ Display
Programar o CrowPanel Advance 7“ Display é um pouco complicado, pois é necessário instalar versões específicas das bibliotecas e do core ESP32. Outras versões de bibliotecas ou core podem funcionar, mas não testei.
Instalar Bibliotecas
Primeiro, vamos instalar as bibliotecas necessárias. Vá para a pasta CrowPanel-Advance-HMI-lib que está localizada no Google Drive. A partir daí, faça o download do ficheiro librariesAdvance7.0.rar clicando no ícone de download como mostrado abaixo:
librariesAdvance7.0.rar é um ficheiro comprimido e precisa de o descompactar primeiro. Basta clicar no ficheiro no seu Explorador (no Windows) e copiar o conteúdo para outra pasta. No meu caso, copiei o conteúdo para a seguinte pasta:
c:\Maet\Temp\librariesAdvance7.0\libraries
A captura de ecrã abaixo mostra parte do conteúdo dessa pasta e o seu conteúdo deve ser semelhante:
librariesPode escolher qualquer outro caminho que desejar, mas deve terminar com \libraries, pois vamos usá-lo nas definições de caminho do Arduino IDE.
O Arduino IDE armazena as bibliotecas instaladas na pasta \libraries dentro da localização do Sketchbook. Poderia substituir todas as bibliotecas nessa localização pelas bibliotecas descarregadas, mas isso significaria perder todas as bibliotecas instaladas anteriormente.
Em vez disso, vamos alterar (temporariamente) o caminho da localização do Sketchbook, o que é mais rápido e fácil de reverter. Abra o diálogo File -> Preferences e insira o caminho c:\Maet\Temp\librariesAdvance7.0 no campo da localização do Sketchbook, como mostrado abaixo:
Certifique-se de NÃO adicionar a pasta \libraries no final do caminho. O Arduino IDE procura essa pasta automaticamente. Em outras palavras, as bibliotecas descarregadas estão localizadas dentro de c:\Maet\Temp\librariesAdvance7.0\libraries mas deve inserir o caminho c:\Maet\Temp\librariesAdvance7.0.
Quando terminar de programar o CrowPanel Advance 7“ Display, pode voltar a definir o caminho da localização do Sketchbook para o caminho original e recuperar as suas bibliotecas originais. No Windows, este caminho é tipicamente c:\Users\<username>\OneDrive\Documents\Arduino.
Instalar core ESP32 versão 3.0.2
De seguida, precisamos de instalar uma versão específica do core ESP32. Abra o BOARDS MANAGER, escreva “esp32” no campo de pesquisa e verá as placas “esp32 by Espressif Systems” como mostrado abaixo:
Se ainda não instalou as placas ESP32, verá um botão INSTALL. Se já instalou as placas mas não a versão mais recente (como acima), verá um botão UPDATE em vez disso.
Em qualquer caso, clique na lista suspensa e selecione a versão 3.0.2 como mostrado abaixo, e depois pressione INSTALL.
Na captura de ecrã pode ver que já instalei a versão 3.0.2 e por isso o botão UPDATE é mostrado. Deve ver o mesmo, assim que instalar o ESP32 Core 3.0.2. Se precisar de mais ajuda, consulte o nosso How to Program ESP32 with Arduino IDE tutorial.
Selecionar Placa
De seguida, precisamos de selecionar uma placa ESP32 adequada. No caso do CrowPanel Advance 7“, escolhemos o “ESP32S3 Dev Module”. Para isso, primeiro ligue o display ao computador via cabo USB. Depois clique no menu suspenso e em “Select other board and port…”:
Isto abrirá um diálogo onde pode escrever “esp32s3 dev” na barra de pesquisa. Verá a placa “ESP32S3 Dev Module” em Boards. Clique nela e na porta COM para ativá-la e depois clique OK:
Só poderá selecionar a porta COM se o display estiver ligado ao computador via USB.
Configurações da Placa
Finalmente, precisamos de definir os parâmetros corretos para a placa. Vá ao menu Tools como mostrado abaixo:
Isto abrirá um grande menu suspenso com as opções de configuração no final. Certifique-se de definir os seguintes parâmetros:
Especificamente, o Flash Size deve estar definido para 16MB, o Partition Scheme para Huge APP e o PSRAM para OPI PSRAM. Pode encontrar informações adicionais na página Product Introduction para o CrowPanel Advance 7“ Display.
Desenhar no CrowPanel Advance 7“ Display
Com a configuração concluída, podemos agora começar a programar o display. O CrowPanel Advance 7“ Display vem com code exemplos e vídeo tutorials, no entanto, todos usam SquareLine Studio and LVGL para mostrar algo no ecrã.
Isto é ótimo para interfaces de utilizador mais complexas, mas um pouco difícil se quiser começar a usar o display, pois o código correspondente é bastante grande e complexo.
O exemplo seguinte é muito mais simples e mostra como imprimir texto no ecrã e reagir a toques usando a biblioteca LovyanGFX. Se seguiu o procedimento de configuração descrito anteriormente, já terá instalado a biblioteca LovyanGFX.
Estrutura do Projeto
Primeiro, criamos a pasta necessária para o projeto. Crie uma pasta com o nome “advance7“, com dois ficheiros dentro, chamados “advance7.ino” e “lgfx_conf.h“:
Depois abra o ficheiro advance7.ino na sua Arduino IDE. Deve ver separadores para os dois ficheiros do projeto:
Configuração LovyanGFX
No ficheiro lgfx_conf.h copie o seguinte código, que cria a classe LGFX com a configuração dos pinos para o display.
// 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);
}
};
É a configuração para o display conforme necessário pela biblioteca LovyanGFX e é essencialmente uma cópia do ficheiro LovyanGFX_Driver.h do exemplo de código lesson-03. Indica à biblioteca quais os pinos do display e da interface tátil que estão ligados a quais pinos GPIO do ESP32.
Este ficheiro de configuração mantém-se igual para todos os projetos e pode copiá-lo e colá-lo em projetos diferentes, se necessário.
Código para desenhar
Finalmente, copie o seguinte código para o ficheiro advance7.ino. É um teste simples que escreve algum texto no display e reage a toques:
#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);
}
Mais especificamente, este código preenche o fundo do display com azul, escreve o texto “Makerguides-4” e reage a toques desenhando um círculo amarelo no local onde o ecrã é tocado. A imagem abaixo mostra como o ecrã fica após alguns toques:
Nas próximas secções vamos analisar o código mais detalhadamente e perceber como funciona.
Includes
O código começa por incluir o ficheiro de configuração do display, a biblioteca Wire para comunicação I2C, a biblioteca Adafruit_GFX para desenho e a biblioteca TCA9534 para o expansor de IO que faz parte do CrowPanel Advance 7“ display:
#include "lgfx_conf.h" #include <Wire.h> #include <Adafruit_GFX.h> #include <TCA9534.h>
Objetos
De seguida criamos objetos para o display e para o expansor de IO:
LGFX gfx; TCA9534 ioex;
Função initIOEX
A função initIOEX inicializa o expansor de IO TCA9534. Isto é necessário para encaminhar a comunicação entre o display e o ESP32 através do número limitado de canais 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
}
Importante também é a última linha que liga a retroiluminação do display. Sem a retroiluminação ligada, não verá nada.
Função initGT911
A função initGT911 inicializa o controlador do ecrã tátil (GT911) para o display. Isto permite que o ESP32 reaja a toques.
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);
}
Função setup
Na função setup inicializamos o expansor de IO, o GT911 e o display. Depois preenchemos o ecrã com azul e escrevemos o texto “Makerguides-4” aproximadamente no centro, na posição (250, 200) a branco.
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);
}
Função loop
Na função loop chamamos repetidamente a função gfx.getTouch() para verificar toques. Se houver um toque, obtemos a localização do toque nas variáveis touch_x e touch_y, e desenhamos um círculo preenchido amarelo com raio de 10 pixels na localização do 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);
}
Se compilar e carregar o código, vai notar que o Arduino IDE alerta que há atualizações para as suas placas e bibliotecas disponíveis.
Não instale estas atualizações, pois substituiriam as versões específicas das bibliotecas e placas que acabámos de instalar durante a configuração.
Versão do display 1.0 vs 1.2
Existe um problema com a versão anterior V1.0 do CrowPanel Advance 7“ display que deve conhecer. Pode encontrar a versão do seu display na parte de trás da PCB. Veja a foto abaixo. Se o seu display vier com a caixa acrílica, terá de remover a placa traseira para ver o número da versão.
Os módulos H2 e C6 para comunicação wireless que vêm com o lote V1.0 do display não têm firmware pré-instalado. Infelizmente, não pode ligar diretamente um programador serial para gravar o firmware necessário, pois faltam os pinos do header. Terá de soldar pinos, gravar o firmware e depois removê-los.
Para mais detalhes veja https://github.com/Elecrow-RD/CrowPanel-Advance-5.0-HMI-ESP32-AI-Display-800×480/tree/master/example/example_code5.0/lesson-09.
Note que também existem diferenças nos esquemas para Version 1.0 e o atual Version 1.2, o que pode ser importante para algumas aplicações.
Conclusões
Espero que este tutorial o tenha ajudado a começar com o CrowPanel Advance 7“ HMI Display. Fornecemos um exemplo simples de código para escrever texto no display e reagir a toques. Para muitas aplicações, este deve ser um bom ponto de partida.
Se quiser construir interfaces de utilizador mais avançadas, SquareLine Studio and LVGL são o caminho a seguir, mas são também mais difíceis de usar e o código é muito mais complexo.
A Elecrow também fornece vários code exemplos e vídeo tutorials que mostram como usar o altifalante, a interface do cartão SD, as várias opções wireless e como construir aplicações de IA, como um Chat Bot.
Se precisar de um CrowPanel Display mais pequeno e simples, veja o nosso CrowPanel 2.8″ ESP32 Display : Easy Setup Guide. Também temos alguns tutoriais sobre aplicações com CrowPanel Displays, como Digital Clock with CrowPanel 3.5″ ESP32 Display, Digital Timer Switch with CrowPanel ESP32 Display, ou o Parking sensor with CrowPanel ESP32 Display, que podem ser do seu interesse.
Se tiver alguma dúvida, sinta-se à vontade para deixar nos comentários.
Boas experiências de construção ; )
Links
Abaixo alguns links para o CrowPanel Advance 7“ HMI Display que achei úteis ao escrever este tutorial:
- Wiki
- Specification
- Setup Instructions
- Code Examples
- Code for Wireless Modules
- Video Tutorials
- Schematics Version 1.0
- Schematics Version 1.2
