Pular para o conteúdo principal

Trabalhar com o EEZ Studio

Este guia conduz você pelo processo de projetar uma interface de usuário profissional com a ferramenta de design visual EEZ Studio, gerar código LVGL e fazer o deploy em um produto ePaper da Seeed por meio da IDE do Arduino. O fluxo é o mesmo para todas as placas compatíveis — as únicas diferenças são a resolução do display e a constante de configuração do driver, que apresentamos em abas.

Hardware compatível​

reTerminal E1001 / E1002 / E1003 / E1004XIAO ePaper Display Board (ESP32-S3) – EE04
7,5" mono / 7,3" Spectra 6 / 10,3" mono / 13,3" Spectra 6Driver universal — combine com qualquer uma de nossas telas ePaper Seeed de 24 pinos ou 50 pinos
Adquira agora 🖱️
Adquira agora 🖱️

O que é o EEZ Studio?​

EEZ Studio é um ambiente moderno de programação visual e design de UI originalmente criado para instrumentos de teste e medição e dispositivos embarcados. Ele combina design de GUI por arrastar e soltar, scripts e ferramentas de integração de dispositivos, permitindo que desenvolvedores, engenheiros e makers criem rapidamente interfaces profissionais sem começar do zero.

Em resumo, o EEZ Studio atua como uma ponte entre hardware e software, permitindo que você projete, faça protótipos e faça o deploy de experiências de usuário com mais eficiência.

Por que usar o EEZ Studio?​

  • Design visual de interface — crie UIs complexas com um editor WYSIWYG.
  • Prototipagem rápida — teste e valide rapidamente ideias de design.
  • Multiplataforma — crie apps que rodam em vários sistemas operacionais e alvos embarcados.
  • Integração de hardware — conecte diretamente instrumentos de laboratório, dispositivos IoT e placas personalizadas.
  • Código aberto — conjunto de ferramentas orientado pela comunidade com suporte premium opcional.

EEZ Studio vs. SquareLine Studio​

Ambos são ferramentas de design de GUI, mas têm públicos-alvo ligeiramente diferentes:

AspectoEEZ StudioSquareLine Studio
Finalidade principalInstrumentos de teste e medição, sistemas embarcados, integração hardware/softwareGUIs embarcadas, especialmente com LVGL
Usuários-alvoEngenheiros, desenvolvedores de produto, makers, projetistas de instrumentos de teste/laboratórioDesenvolvedores de UI embarcada, hobbystas, projetistas de produtos IoT
Integração de hardwareIntegração direta com instrumentos, dispositivos de medição, automaçãoFocado na geração de UI, com menos integração com dispositivos externos
Código abertoOrientado pela comunidade, transparente, extensível (suporte premium disponível)Código fechado, produto comercial com licenciamento
Fluxo de trabalhoPrototipar, simular e controlar dispositivos reais a partir de um único ambientePrincipalmente gera código de UI para ser compilado em um projeto embarcado

Etapa 1: Instalar o EEZ Studio​

Baixe o EEZ Studio para o seu sistema operacional a partir do site oficial.


Etapa 2: Criar um projeto LVGL​

Na parte superior da interface do EEZ Studio, clique em CREATE. Selecione o template LVGL à esquerda:

  • Name — dê um nome ao seu projeto (usaremos EEZ_UI neste artigo).
  • LVGL Version — escolha 9.x na lista suspensa.
  • Location — escolha onde salvar os arquivos do projeto.

Configurações do projeto​

Clique no ícone ⚙️ na barra de ferramentas para abrir as configurações do projeto.

Em General → Build:

  • LVGL include: insira lvgl.h para que o código gerado faça referência ao LVGL corretamente durante a compilação.

Em General → Display, defina a resolução para o seu hardware:

  • Display width: 800
  • Display height: 480

(O display de 7,5" mono no E1001 e o de 7,3" Spectra 6 no E1002 compartilham a mesma resolução de 800×480.)

Etapa 3: Projetar a UI​

O design da UI determina diretamente a experiência do usuário. O EEZ Studio permite montar rapidamente interfaces arrastando e soltando componentes e usando Styles, Fonts, Bitmaps, Themes e Groups para controlar o resultado visual.

Recursos online recomendados:

A barra lateral direita:

  • Styles — atributos visuais para unificar e reutilizar elementos de interface.
  • Bitmaps — fundos, ícones, logotipos.
  • Fonts — renderização de texto e suporte multilíngue.
  • Themes — claro/escuro e outros estilos de alto nível.
  • Groups — auxiliares de layout.

Layout de exemplo (Hello World + Panel + Image + Line + Label)​

Neste tutorial vamos construir uma página inicial simples a partir de cinco componentes:

  • Panel
  • Label
  • Line
  • Checkbox
  • Image

Etapa 1. Altere a cor de fundo da tela — selecione a tela, marque Color e escolha um valor hexadecimal.

Etapa 2. Arraste um Panel para a tela, ajuste sua largura/altura e escolha uma cor.

Etapa 3. Adicione bitmaps pela aba Bitmaps à direita, dê nomes a eles e depois arraste o widget Image para a tela e vincule o seu bitmap.

Etapa 4. Adicione uma Line a partir do grupo Visualiser e configure seus Points.

Etapa 5. Adicione uma Label, escolha a cor e depois adicione fontes pela aba Fonts à direita.

Etapa 4: Gerar código​

Depois que o design estiver concluído:

  1. Save — clique no ícone de disquete ao lado de OPEN.
  2. Preview — clique em Run para iniciar o simulador e pré-visualizar a UI.
  3. Compile / Build — clique no ícone ✓ para verificar erros e depois na chave inglesa para gerar o código da UI, os dados de imagem e os dados de fonte.

Uma mensagem verde Build successful confirma a geração do código. A saída vai para a pasta src/ui do seu projeto (você pode renomeá-la para src/EEZ_UI se preferir).

Etapa 5: Configurar a IDE Arduino​

Para implantar a saída do EEZ Studio no seu dispositivo ePaper da Seeed, configure a IDE Arduino com suporte a ESP32.

dica

Se esta é a sua primeira vez usando Arduino, consulte primeiro Getting Started with Arduino.

  1. Instale a IDE Arduino.

    Download Arduino IDE

  2. Adicione o suporte à placa ESP32: em File → Preferences, adicione em Additional Boards Manager URLs:

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

  3. Instale o pacote ESP32: Tools → Board → Boards Manager, procure por esp32 e instale o pacote Espressif Systems.

  4. Selecione a placa para o seu hardware:

    Tools → Board → ESP32 Arduino → XIAO_ESP32S3

  5. Conecte o dispositivo via USB-C e selecione a porta serial correta em Tools → Port.

Etapa 6: Instalar a biblioteca Seeed_GFX​

Usamos a biblioteca Seeed_GFX, que fornece suporte abrangente para dispositivos de display da Seeed.

  1. Baixe do GitHub:

    Download the Library

  2. Sketch → Include Library → Add .ZIP Library e selecione o arquivo ZIP baixado.

    nota

    Se você instalou TFT_eSPI anteriormente, remova-o temporariamente ou renomeie-o na pasta de bibliotecas do Arduino para evitar conflitos — Seeed_GFX é um fork de TFT_eSPI com recursos adicionais para displays da Seeed.

  3. Abra o sketch de exemplo correto:

    • Para displays coloridos: File → Examples → Seeed_GFX → ePaper → Colorful → HelloWorld
    • Para displays monocromáticos: File → Examples → Seeed_GFX → ePaper → Basic → HelloWorld

  4. Crie um arquivo driver.h na mesma pasta do seu sketch (use a seta de nova aba na IDE Arduino).

  5. Vá para a Seeed GFX Configuration Tool, selecione seu hardware, copie a configuração gerada e cole em driver.h. O conteúdo exato varia conforme o hardware:

Para reTerminal E1001 (7,5" preto e branco, UC8179):

#define BOARD_SCREEN_COMBO 520 // reTerminal E1001 (UC8179)

Para reTerminal E1002 (7,3" totalmente colorido, UC8179C):

#define BOARD_SCREEN_COMBO 521 // reTerminal E1002 (UC8179C)

Etapa 7: Implantar o projeto EEZ Studio no Arduino​

Adicione a saída do EEZ Studio e os auxiliares do driver de plataforma à pasta do seu sketch e, em seguida, faça o upload.

Arquivos de driver necessários (todo o hardware)​

Baixe estes arquivos auxiliares e coloque-os ao lado do seu .ino:

Para o EE04 você também precisa de lv_conf.h e da biblioteca LVGL — veja a aba EE04 abaixo.

Copiar a saída EEZ_UI​

Copie a pasta EEZ_UI gerada (do src/ do seu projeto EEZ Studio) para a pasta de bibliotecas do Arduino (normalmente ~/Documents/Arduino/Libraries).

Sketch e upload​

Sketch de referência — três botões (KEY0/KEY1/KEY2) alternam entre três páginas: HOME, Workstation, Plant.

Código de referência completo: E1002-EEZStudioCode.zip

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

const int BUTTON_KEY0 = 3;
const int BUTTON_KEY1 = 4;
const int BUTTON_KEY2 = 5;

int32_t page_index;

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

e1002_driver_t e1002_driver;

void setup()
{
    String LVGL_Arduino = "Automotive Dashboard Demo - LVGL ";
    LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() +
                    "." + lv_version_patch();
    Serial.begin(115200);
    Serial.println(LVGL_Arduino);
    Serial.println("Initializing 6-color e-paper display...");
    e1002_display_init(&e1002_driver);

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

    lastKey0State = digitalRead(BUTTON_KEY0);
    lastKey1State = digitalRead(BUTTON_KEY1);
    lastKey2State = digitalRead(BUTTON_KEY2);

    ui_init();
    page_index = SCREEN_ID_HOME;
    loadScreen((ScreensEnum)page_index);
    Serial.println("Boot: Main Screen");
}

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

    bool currentKey0State = digitalRead(BUTTON_KEY0);
    bool currentKey1State = digitalRead(BUTTON_KEY1);
    bool currentKey2State = digitalRead(BUTTON_KEY2);

    if (lastKey0State == HIGH && currentKey0State == LOW) {
        page_index = SCREEN_ID_HOME;
        loadScreen((ScreensEnum)page_index);
        Serial.println("Switched to Main Screen");
        delay(50);
    }

    if (lastKey1State == HIGH && currentKey1State == LOW) {
        page_index = SCREEN_ID_WORKSTATION;
        loadScreen((ScreensEnum)page_index);
        Serial.println("Switched to Plant Screen");
        delay(50);
    }

    if (lastKey2State == HIGH && currentKey2State == LOW) {
        page_index = SCREEN_ID_PLANT;
        loadScreen((ScreensEnum)page_index);
        Serial.println("Switched to Setting Screen");
        delay(50);
    }

    lastKey0State = currentKey0State;
    lastKey1State = currentKey1State;
    lastKey2State = currentKey2State;

    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);
}

Notas:

  • e1002_display_init() inicializa o hardware do display e-ink.
  • pinMode(..., INPUT_PULLUP) configura os pinos dos botões com resistores de pull-up internos.
  • ui_init() e loadScreen() inicializam o LVGL e carregam uma tela específica.
  • lv_timer_handler() processa timers e animações do LVGL.
  • Os blocos if (lastKeyXState == HIGH && currentKeyXState == LOW) fazem o debounce de uma borda HIGH→LOW e atualizam a página.
  • e1002_display_should_refresh() / e1002_display_refresh() gerenciam a atualização do e-ink sob demanda.

Telas resultantes​

Página inicialPágina da estação de trabalhoPágina de fotos

Referências e recursos​

Suporte técnico e discussão sobre o produto​

Obrigado por escolher nossos produtos! Estamos aqui para oferecer 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...