Pular para o conteúdo principal

Placa de Display ePaper EE04 (ESP32-S3) com EEZ Studio

Este tutorial usa a XIAO ePaper Display Board(ESP32-S3) - EE04, baseada em EEZ Studio e com compilação e upload do programa usando a Arduino IDE.

EEZ Studio​

O EEZ Studio representa uma solução única quando é necessário tanto o desenvolvimento rápido de uma GUI atraente quanto o controle remoto de dispositivos para automação de teste e medição (T&M).

Criado por uma equipe com experiência direta no design de dispositivos embarcados complexos com recursos limitados, o EEZ Studio permite projetar desktops responsivos e GUIs embarcadas usando programação visual de arrastar & soltar e fluxogramas. Uma série de Widgets e Ações desenvolvidos internamente, bem como suporte a LVGL (tanto 8.x quanto 9.x) e modelos e exemplos de projetos prontos para uso permitem prototipagem rápida, bem como o desenvolvimento de aplicações finais.

Hardware​

Antes de começar a ler este tutorial, certifique-se de que você tem todos os itens necessários listados abaixo preparados.

XIAO ePaper Display Board(ESP32-S3) - EE04ePaper monocromático de 5,83 polegadas
Adquira Agora 🖱️
Adquira Agora 🖱️

Criar projeto​

Na parte superior, selecione Create, depois clique em LVGL e, na seção adjacente PROJECT SETTING, defina os parâmetros necessários.

  • Name: Nome do projeto
  • LVGL version： Selecione a versão 9.x
  • Location: O local para armazenar os arquivos de engenharia pode ser deixado como o caminho padrão ou personalizado de acordo com as necessidades reais.
  • Project file path: O caminho dos arquivos de engenharia. Este caminho será usado posteriormente (este caminho é o caminho padrão no computador; você também pode personalizar o caminho)

Introdução à Página de Engenharia​

Abaixo estão algumas configurações básicas e controles para desenho de UI baseado em LVGL no EEZ Studio, bem como a construção dos arquivos do projeto.

  • Na parte superior (da esquerda para a direita):

    • Save: Salvar o projeto

    • Check: Verificar o projeto

    • Build: Compilar o projeto e gerar arquivos

    • Settings: Modificar as configurações de parâmetros

    • Edit: Editar e desenhar na página principal

    • Run: Visualizar o efeito do desenho do design criado

    • Debug: Depurar a interface desenhada

  • Pages: Gerenciar páginas. clique em + para adicionar uma nova página

  • Widgets Structure: Gerenciamento de widgets, que permite gerenciar e selecionar seus widgets de forma intuitiva

  • Variables: O mecanismo central de gerenciamento de dados que conecta widgets da UI, lógica de Fluxo e Action Script

  • Properties: Usado para definir e visualizar os parâmetros de propriedade de objetos ou componentes

  • Components Palette: Fornece uma lista de componentes opcionais, que podem ser arrastados e soltos na interface de design para uso

  • Styles: Definir e aplicar regras de estilo para fontes unificadas, a fim de manter a consistência

  • Fonts: Gerenciar os recursos de fontes usados no projeto e suas configurações de tamanho

  • Bitmaps: Importar e gerenciar arquivos de recursos bitmap, como imagens e ícones

  • Themes: Criar e aplicar temas de cores unificados e conjuntos de estilo visual

  • Groups: Combinar e gerenciar múltiplos componentes para permitir operação simultânea e controle em lote

Compilando Arquivos do Projeto​

Este projeto é projetado para um display eInk monocromático de 5,83" com resolução de 648*480. Portanto, alguns parâmetros-chave precisam ser modificados.

Passo 1. Selecione Settings e, em seguida, na aba General, altere Display width e Display height para 648 e 480, respectivamente.

Passo 2. Modificar os arquivos gerados

  • Renomeie o caminho da pasta src/ui para src/EEZ_UI; todos os arquivos de código gerados pelo EEZ Studio serão armazenados nesta pasta.

  • Na aba Build, altere LVGL include para lvgl.h.

Passo 3. Compilar o projeto

  • Volte para a interface Main e arraste Hello World para o centro da tela.
  • Na aba STYLE, ajuste o tamanho ou a cor da fonte.
  • Selecione a opção para compilar o projeto. Se nenhum erro for exibido no painel OUTPUT, o projeto foi compilado com sucesso.

Em seguida, implante os arquivos de projeto compilados na Arduino IDE e depois faça o upload deles para o dispositivo de hardware correspondente para exibição.

Configuração da Arduino IDE​

dica

Se esta é a sua primeira vez usando Arduino, recomendamos fortemente que você consulte Primeiros Passos com Arduino.

Passo 1. Baixe e instale a Arduino IDE e inicie o aplicativo Arduino.

Baixar Arduino IDE

Passo 2. Adicione o suporte à placa ESP32 à Arduino IDE.

Na Arduino IDE, vá em File > Preferences e adicione a seguinte URL ao campo Additional Boards Manager URLs:

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

Passo 3. Instale o pacote da placa ESP32.

Navegue até Tools > Board > Boards Manager, procure por esp32 e instale o pacote ESP32 da Espressif Systems.

Passo 4. Selecione a placa correta.

Vá em Tools > Board > ESP32 Arduino e selecione XIAO_ESP32S3_PLUS.

Passo 5. Conecte o seu reTerminal E Série ePaper Display ao computador usando um cabo USB-C.

Passo 6. Selecione a porta correta em Tools > Port.

Importar a biblioteca Seeed_GFX​

Usaremos a biblioteca Seeed_GFX, que fornece suporte abrangente para vários dispositivos de display da Seeed Studio.

Passo 1. Baixe a biblioteca Seeed_GFX do GitHub:

Baixar a Biblioteca

Passo 2. Instale a biblioteca adicionando o arquivo ZIP na Arduino IDE. Vá em Sketch > Include Library > Add .ZIP Library e selecione o arquivo ZIP baixado.

dica

Se você já tiver instalado anteriormente a biblioteca TFT_eSPI, talvez seja necessário removê-la temporariamente ou renomeá-la na pasta de bibliotecas da Arduino para evitar conflitos, pois a Seeed_GFX é um fork da TFT_eSPI com recursos adicionais para displays da Seeed Studio.

Passo 3. Abra o sketch de exemplo de cores da biblioteca Seeed_GFX: File > Examples > Seeed_GFX > ePaper > Colorful > HelloWorld

Passo 4. Crie um novo arquivo driver.h

Seeed GFX Configuration Tool

  • Insira as especificações do display que você está usando na página da ferramenta. Aqui, o display selecionado é a tela ePaper monocromática de 5,83 polegadas（UC8179）, e a placa controladora é a XIAO ePaper Display Board(ESP32-S3) - EE04.
  • Copie o programa e salve-o em driver.h.
#define BOARD_SCREEN_COMBO 503 // 5.83 inch monochrome ePaper Screen （UC8179）
#define USE_XIAO_EPAPER_DISPLAY_BOARD_EE04
dica

Se você fizer a escolha errada, a tela não exibirá nada. Portanto, certifique-se do tipo de seus dispositivos ou componentes.

Fazer deploy para o Arduino​

Passo 1. Adicione os arquivos e1002_display.c , e1002_display.h lv_conf.h e a biblioteca lvgl. A placa deve ser selecionada como XIAO_ESP32S3.

Passo 2. Adicione os arquivos de código EEZ_UI gerados à pasta de bibliotecas (O caminho de armazenamento padrão para bibliotecas do Arduino IDE é C:\Users\Users_name\Documents\Arduino\Libraries).

Passo 3. Envie o programa para o dispositivo.

EEZ_UI_EE04.ino
#include <TFT_eSPI.h>
#include <lvgl.h>
#include <ui.h>
#include "e1002_display.h"

int32_t page_index;

e1002_driver_t e1002_driver;

void setup()
{
  Serial.begin(115200);

  String LVGL_Arduino = "UI Dashboard - LVGL ";
  LVGL_Arduino += String('V') + lv_version_major() + "." +
                  lv_version_minor() + "." + lv_version_patch();
  Serial.println(LVGL_Arduino);

  Serial.println("Initializing e-paper display...");
  e1002_display_init(&e1002_driver);

  ui_init();
  page_index = SCREEN_ID_MAIN;
  loadScreen((ScreensEnum)page_index);
  e1002_display_refresh(&e1002_driver);

}

void loop()
{
  lv_timer_handler();
  ui_tick();


  if (e1002_display_should_refresh(&e1002_driver))
  {
    Serial.println("Refreshing e-paper display...");
    e1002_display_refresh(&e1002_driver);
    Serial.println("Display refresh complete");
  }

  delay(10);
}

Explicação do Código

  1. Inclusão de Arquivos de Cabeçalho: Inclui a biblioteca de display TFT, a biblioteca gráfica LVGL, o arquivo de definição da interface de UI (ui.h) e o driver do display de e-paper (e1002_display.h).

  2. Variáveis Globais:

    • page_index: Usada para registrar o índice da página exibida atualmente.
    • e1002_driver: Objeto driver para o display de e-paper.

  3. Função setup() (Inicialização):

    • Inicializa a comunicação serial (baud rate: 115200) para impressão de informações de depuração.
    • Imprime as informações de versão da biblioteca LVGL (por exemplo, "Smart Home Dashboard - LVGL Vx.x.x").
    • Inicializa o display de e-paper (e1002_display_init).
    • Inicializa a interface de UI (ui_init).
    • Define a página inicial como "Main Screen" (SCREEN_ID_MAIN) e a carrega.
    • Atualiza o display de e-paper para mostrar a interface inicial.

  4. Função loop() (Loop Principal):

    • Processa timers e eventos do LVGL (lv_timer_handler).
    • Processa tarefas agendadas para a interface de UI (ui_tick).
    • Verifica se o display de e-paper precisa ser atualizado (e1002_display_should_refresh); se sim, executa a atualização e imprime um log.
    • Faz o loop a cada 10 milissegundos para garantir a responsividade do sistema.

Demonstração do efeito:

Design de UI​

Em seguida, demonstraremos um exemplo de UI criado com o EEZ Studio, para ilustrar ainda mais suas capacidades em design de interface.

Ao projetar interfaces LVGL com o EEZ Studio, você pode achar as seguintes ferramentas particularmente úteis:

  • Um gerador de paleta de cores online para criar, ajustar e exportar esquemas de cores rapidamente: Color
  • Uma ferramenta de paleta de cores online para encontrar e combinar esquemas de cores para web: Color Chart
  • Uma grande plataforma de biblioteca de ícones vetoriais para baixar e gerenciar ícones: Icon
  • Um site de recursos de fontes gratuitas para navegar e baixar fontes utilizáveis comercialmente: Font

Introdução ao Desenho da UI​

  • Imagem do efeito:

Esta UI é composta por quatro componentes:

  • Label
  • Linha
  • Checkbox
  • Imagem

Passo 1. Alterar a cor de fundo da tela

A cor de fundo padrão é branca; você pode alterá-la de acordo com suas preferências.

  • Selecione a tela para a qual você deseja alterar a cor de fundo.

  • Marque a opção Color e selecione o código de cor hexadecimal de sua preferência.

Passo 2. Adicionar um Label

  • Arraste o componente Label para a tela e selecione o tamanho e a cor da fonte desejados.

Passo 3. Adicionar uma linha

  • Arraste o componente Line para a tela e defina os pontos inicial e final na seção Points para determinar o comprimento e a posição da linha. Pontos de referência: 0,0 0,0 0,0 0,0,648,0

Passo 4. Adicionar bitmaps

  • Clique na opção Bitmaps na barra lateral direita e adicione as imagens necessárias.
  • Nomeie as imagens conforme necessário.
  • Arraste e solte o componente Image na tela e use a opção Scale para definir seu tamanho.

Passo 5. Adicionar um Checkbox

  • Arraste o componente Checkbox para a tela, insira o conteúdo e ajuste o tamanho e a cor da fonte.

Deploy e Demonstração​

  • Deploy
    • Adicione os arquivos de cabeçalho: driver.h, e1002_display.c, e1002_display.h e lv_conf.h.
    • Adicione os arquivos EEZ_UI à pasta de bibliotecas do Arduino IDE.

Código de referência completo: EEZ_UI.zip

EEZ_UI_EE04.ino
#include <TFT_eSPI.h>
#include <lvgl.h>
#include <ui.h>
#include "e1002_display.h"

const int BUTTON_KEY1 = 2;
const int BUTTON_KEY2 = 3;
const int BUTTON_KEY3 = 5;

int32_t page_index;

bool lastKey0State = HIGH;
bool lastKey1State = HIGH;
bool lastKey2State = HIGH;

unsigned long lastDebounceTime0 = 0;
unsigned long lastDebounceTime1 = 0;
unsigned long lastDebounceTime2 = 0;
const unsigned long debounceDelay = 120;

e1002_driver_t e1002_driver;

unsigned long lastFullRefreshTime = 0;
const unsigned long fullRefreshCooldown = 1500;

bool buttonPressed(int pin, bool &lastState, unsigned long &lastDebounceTime)
{
  bool currentState = digitalRead(pin);

  if (lastState == HIGH && currentState == LOW &&
      (millis() - lastDebounceTime) > debounceDelay)
  {
    lastDebounceTime = millis();
    lastState = currentState;
    return true;
  }

  lastState = currentState;
  return false;
}

void switchPage(ScreensEnum targetScreen, const char *pageName)
{

  if (millis() - lastFullRefreshTime < fullRefreshCooldown)
  {
    Serial.println("[Skip] Refresh cooling down...");
    return;
  }

  Serial.printf("Switching to %s ...\n", pageName);

  e1002_driver.epd->fillScreen(TFT_WHITE);
  e1002_driver.epd->update();

  loadScreen(targetScreen);

  e1002_display_refresh(&e1002_driver);

  lastFullRefreshTime = millis();
  Serial.printf("[OK] %s refreshed.\n", pageName);
}

void setup()
{
  Serial.begin(115200);

  String LVGL_Arduino = "Smart Home Dashboard - LVGL ";
  LVGL_Arduino += String('V') + lv_version_major() + "." +
                  lv_version_minor() + "." + lv_version_patch();
  Serial.println(LVGL_Arduino);

  Serial.println("Initializing e-paper display...");
  e1002_display_init(&e1002_driver);

  pinMode(BUTTON_KEY1, INPUT_PULLUP);
  pinMode(BUTTON_KEY2, INPUT_PULLUP);
  pinMode(BUTTON_KEY3, INPUT_PULLUP);

  ui_init();
  page_index = SCREEN_ID_SMART;
  loadScreen((ScreensEnum)page_index);
  e1002_display_refresh(&e1002_driver);

  Serial.println("Boot: Main Screen");
}

void loop()
{0
  lv_timer_handler();
  ui_tick();

  if (buttonPressed(BUTTON_KEY1, lastKey0State, lastDebounceTime0))
  {
    page_index = SCREEN_ID_SMART;
    switchPage((ScreensEnum)page_index, "Main Screen");
  }

  if (buttonPressed(BUTTON_KEY2, lastKey1State, lastDebounceTime1))
  {
    page_index = SCREEN_ID_INDUSTRY;
    switchPage((ScreensEnum)page_index, "Plant Screen");
  }

  if (buttonPressed(BUTTON_KEY3, lastKey2State, lastDebounceTime2))
  {
    page_index = SCREEN_ID_GAME;
    switchPage((ScreensEnum)page_index, "Workstation Screen");
  }

  if (e1002_display_should_refresh(&e1002_driver))
  {
    Serial.println("Refreshing e-paper display...");
    e1002_display_refresh(&e1002_driver);
    Serial.println("Display refresh complete");
  }

  delay(10);
}
  • Demonstração do efeito:
    Três diferentes telas de UI são exibidas aqui, e a XIAO ePaper Display Board (ESP32-S3) – EE04 utiliza seus três botões integrados para alternar entre essas telas. A tela correspondente para cada botão é:
    KEY1: Inteligente
    KEY2: Indústria
    KEY3: Jogo
InteligenteIndústriaJogo

Referência e Recursos​

Suporte Técnico e Discussão de Produto​

Obrigado por escolher nossos produtos! Estamos aqui para fornecer diferentes tipos de suporte para garantir que sua experiência com nossos produtos seja a mais tranquila possível. Oferecemos vários canais de comunicação para atender a diferentes preferências e necessidades.

Loading Comments...