Pular para o conteúdo principal

Primeiros passos com o display de ePaper reTerminal E Série e EEZ Studio

Introdução​

Este guia irá conduzi-lo pelo processo de criação de uma interface de usuário profissional para o reTerminal E Série usando a ferramenta de design visual EEZ Studio. Você aprenderá como criar elementos de UI, gerar o código necessário e, por fim, fazer o deploy no dispositivo usando a IDE do Arduino. Esse processo permite construir interfaces personalizadas com excelente visibilidade e consumo de energia ultrabaixo, ideais para aplicações de IHM.

Materiais necessários​

Para concluir este tutorial, prepare um dos seguintes dispositivos reTerminal E Série:

reTerminal E1001reTerminal E1002
Adquira agora 🖱️
Adquira agora 🖱️

O que é o EEZ Studio?​

EEZ Studio é um ambiente moderno de programação visual e design de UI desenvolvido principalmente para construir interfaces de usuário para instrumentos de teste e medição, dispositivos embarcados e outras aplicações interativas. Ele combina design de GUI por arrastar e soltar, recursos de script e ferramentas de integração com 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 de forma mais eficiente.

Por que usar o EEZ Studio?​

  • Design de interface visual – Crie UIs complexas com um editor WYSIWYG, reduzindo a necessidade de codificação manual.
  • Protótipo rápido – Teste e valide rapidamente ideias de design, economizando tempo e custo de desenvolvimento.
  • Suporte multiplataforma – Crie aplicações que podem rodar em múltiplos sistemas operacionais e alvos embarcados.
  • Integração com hardware – Conecte e controle diretamente instrumentos de laboratório, dispositivos IoT e placas personalizadas.
  • Ecossistema open source – Beneficie-se de um conjunto de ferramentas orientado pela comunidade, com transparência e flexibilidade.

Com o EEZ Studio, você pode ir do conceito ao protótipo funcional em uma fração do tempo, garantindo que seus designs sejam profissionais e adaptáveis a requisitos futuros.

Diferença em relação ao SquareLine Studio​

Embora EEZ Studio e SquareLine Studio sejam ambos ferramentas de design de GUI, eles se concentram em objetivos e cenários de uso diferentes:

AspectoEEZ StudioSquareLine Studio
Finalidade principalProjetado para instrumentos de teste e medição, sistemas embarcados e integração hardware/softwareFocado na construção de GUIs para sistemas embarcados (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 com hardwareIntegração direta com instrumentos, dispositivos de medição e sistemas de automaçãoPrincipalmente focado em geração de display/UI, não em integração com dispositivos externos
Open SourceOrientado pela comunidade, transparente, extensível Suporte técnico Premium/pago está disponívelProduto comercial de código fechado, com licenciamento
Fluxo de trabalhoPermite prototipar, simular e controlar dispositivos reais em um único ambientePrincipalmente gera código de UI para ser compilado em um projeto embarcado

Primeiros passos com o EEZ Studio​

Instalação do EEZ Studio​

EEZ Studio Install Link Após acessar o link de download, selecione a versão do sistema compatível com o seu computador para fazer o download.


Criar projeto​

Iniciando um novo projeto LVGL​

Na parte superior da interface do EEZ Studio, clique no botão “CREATE”. Na lista de modelos de projeto à esquerda, localize e selecione o projeto “LVGL”.

  • Name: Dê um nome ao arquivo do projeto. Para facilitar a explicação do conteúdo subsequente em nossos artigos, iremos nos referir a ele aqui como EEZ_UI.
  • LVGL Version: Especifica a versão da biblioteca LVGL usada pelo projeto. Selecione 9.x no menu suspenso.
  • Location: Especifique o caminho de armazenamento dos arquivos do projeto no seu computador. O caminho padrão normalmente aponta para uma pasta de projetos padrão dentro do diretório de download ou instalação do EEZ Studio (por exemplo, C:\Users\SeuUsuario\Documents\EEZ Studio\Projects ou caminho semelhante). Se você precisar alterar o local de armazenamento, clique no ícone de pasta (ou reticências ...) à direita da caixa de texto Location.

Configuração das definições do projeto​

Ao criar seu projeto de UI LVGL para o reTerminal com E-paper, você precisa configurar corretamente as Project Settings do EEZ Studio para garantir que os arquivos de UI gerados sejam compatíveis com o seu ambiente Arduino ou embarcado.

Passo 1. Abra as Project Settings

Clique no ícone ⚙️ (Settings) na barra de ferramentas superior, como mostrado abaixo. Isso abrirá o painel de Project Settings no lado direito do espaço de trabalho.

Passo 2. Configure Build Output e LVGL Include

Em General → Build, localize os seguintes campos:

  • LVGL include: Insira lvgl.h para incluir o cabeçalho LVGL correto durante a compilação.

💡 Isso garante que o código de UI gerado possa referenciar corretamente a biblioteca LVGL durante o build.


Passo 3. Defina a resolução do display

Em seguida, ainda em Settings → General, configure a resolução do seu display:

  • Display width: 800
  • Display height: 480

🧩 Esses parâmetros definem a resolução alvo da tela de E-paper para o layout da UI e mapeamento de coordenadas. Certifique-se de que os valores correspondam ao seu modelo específico de E-paper (por exemplo, E-paper de 7,5 polegadas – 800×480).

Configurações de parâmetros do projeto e design da interface de UI​

Design da interface de UI​

O design de UI (Interface de Usuário) é crucial no desenvolvimento de produtos embarcados, pois determina diretamente a experiência do usuário. Uma interface esteticamente agradável, intuitiva e responsiva não só aumenta a usabilidade do produto, como também melhora seu apelo geral.

No EEZ Studio, você pode montar interfaces rapidamente arrastando e soltando componentes. Utilize ferramentas como Styles, Fonts, Bitmaps e Themes para controlar precisamente os efeitos visuais, criando uma experiência de usuário profissional e diferenciada.

Abaixo está uma introdução às ferramentas recomendadas：

Introdução ao componente mais à direita

  • Styles: Atributos visuais usados para unificar e reutilizar elementos de interface, garantindo consistência e manutenção eficiente.
  • Bitmap: Comumente usados para fundos, ícones, logotipos etc., para aprimorar a apresentação visual.
  • Fonts: Garantem leitura clara do texto enquanto suportam conteúdo multilíngue e estilo de marca.
  • Themes: Definem a estética geral da interface, permitindo alternâncias rápidas como modo claro/escuro.
  • Groups: Organizam múltiplos widgets em conjunto para gerenciamento e layout unificados.

Neste tutorial, vou guiá-lo pelo design da UI da página inicial de um site ou app. Depois que você dominar as técnicas centrais, poderá aplicá-las para criar com facilidade qualquer interface que desejar.

Esta página é composta por cinco componentes:

  • Panel
  • Label
  • Line
  • Checkbox
  • Image

Passo 1. Alterar a cor de fundo da tela

  • Selecione o canvas cujo a cor de fundo você precisa mudar.
  • Marque Color e selecione o código de cor hexadecimal de sua preferência.

Step 2 .Add Panel

  • Arraste o componente Panel da seção Basic para o canvas e ajuste sua Width e Height.

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

Step 3 .Add Bitmaps

  • Clique no ícone Bitmaps na barra lateral da extrema direita para adicionar uma imagem.
  • Nomeie as imagens que você selecionar; você precisará escolher imagens com base em sua convenção de nomenclatura mais tarde.
  • Arraste o componente Image do grupo Basic para o canvas, depois selecione sua imagem e defina o tamanho usando Scale.

Step 4 .Add Line

  • Arraste o componente Line do grupo Visualiser para o canvas. Defina os pontos inicial e final em Points para determinar o comprimento e a altura da linha.

Step 5 .Add Label

  • Arraste o componente Label do grupo Basic para o canvas, depois selecione a cor da fonte e as configurações de formato da fonte.
  • Clique na caixa Fonts na coluna da extrema direita para adicionar seus formatos de fonte.
  • Defina o nome e o tamanho da fonte

O que foi apresentado acima descreve o uso básico desses cinco componentes. Você pode organizá-los de acordo com o diagrama de referência ou com a interface de UI que você mesmo projetar.

Geração de Código e Deploy​

Após concluir o design da UI, você precisa salvar o projeto e visualizá-lo no simulador. Depois de verificar, execute a operação de build para gerar arquivos de código executáveis no hardware de destino.

Step 1 .Save Project

Clique no ícone Save (formato de disquete, localizado ao lado do botão “OPEN”) na parte superior da interface para salvar seu projeto.

Step 2 .Preview Design

Clique no ícone Run (botão de play) na barra de ferramentas para iniciar o simulador e visualizar interativamente os efeitos da UI.

Step 3 .Build Project

Clique no ícone Compile (botão de marca de seleção) para verificar se há erros de sintaxe ou lógica no projeto. Clique no ícone Build (botão de chave inglesa) para gerar arquivos como código de UI, dados de imagem e dados de fonte.

Step 4 .Confirming Successful Build

Ao finalizar, o EEZ Studio exibirá um aviso em verde informando “Build successful”, indicando que o código foi gerado com sucesso.

Preparação do Ambiente​

Para programar o reTerminal E Série ePaper Display com Arduino, você precisará configurar a Arduino IDE com suporte a ESP32.

dica

Se esta é a sua primeira vez usando Arduino, recomendamos fortemente que você consulte Getting Started with Arduino.

Configuração da Arduino IDE​

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

Download Arduino IDE

Step 2. Adicione o suporte à placa ESP32 na Arduino IDE.

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

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

Step 3. Instale o pacote da placa ESP32.

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

Step 4. Selecione a placa correta.

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

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

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

Programação do ePaper Display​

O reTerminal E1001 possui um ePaper display preto e branco de 7,5 polegadas, enquanto o reTerminal E1002 é equipado com um ePaper display full color de 7,3 polegadas. Ambos os displays fornecem excelente visibilidade em várias condições de iluminação com consumo de energia ultrabaixo, tornando-os ideais para aplicações industriais que exigem displays sempre ligados com consumo mínimo de energia.

Usando a Biblioteca Seeed_GFX​

Para controlar o ePaper display, usaremos a biblioteca Seeed_GFX, que fornece suporte abrangente para vários dispositivos de display da Seeed Studio.

Step 1. Baixe a biblioteca Seeed_GFX do GitHub:

Download the Library

Step 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.

nota

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

Programando reTerminal E1001 (ePaper preto e branco de 7,5 polegadas)​

Vamos explorar um exemplo simples que demonstra operações básicas de desenho no ePaper display preto e branco.

Step 1. Abra o sketch de exemplo da biblioteca Seeed_GFX: File > Examples > Seeed_GFX > ePaper > Basic > HelloWorld

Step 2. Crie um novo arquivo chamado driver.h na mesma pasta do seu sketch. Você pode fazer isso clicando no botão de seta na Arduino IDE e selecionando "New Tab", e então nomeando-o como driver.h.

Step 3. Vá para a Seeed GFX Configuration Tool e selecione reTerminal E1001 na lista de dispositivos.

Step 4. Copie o código de configuração gerado e cole-o no arquivo driver.h. O código deve se parecer com isto:

#define BOARD_SCREEN_COMBO 520 // reTerminal E1001 (UC8179)

Fazendo o Deploy do Projeto EEZ Studio para Arduino​

Primeiro, localize OPI PSRAM na barra de menu ‘Tools’ e abra-o.

Esses dois arquivos de driver subjacentes precisam ser adicionados ao diretório do nosso projeto.

Migre os seguintes arquivos de projeto (incluindo quatro arquivos) para a Biblioteca do Arduino para uso em projetos Arduino. O EEZ_UI file é gerado durante o processo de compilação no EEZStudio. Você precisa localizar o caminho onde ele foi salvo.


Aqui está o sketch principal do Arduino para executar a interface: Três botões correspondem a três telas diferentes, começando com a verde: HOME\Workstation\Plant em sequência.

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

  • e1002_display_init(): Inicializa o hardware do display de e-ink e define seus parâmetros de operação.

  • pinMode(..., INPUT_PULLUP): Configura o pino do botão como modo de entrada e habilita o resistor de pull-up interno. Isso garante que o pino permaneça em nível alto (HIGH) quando o botão não for pressionado e se conecte ao terra, tornando-se baixo (LOW), quando pressionado.

  • ui_init() e loadScreen(): Essas funções inicializam a biblioteca de interface de usuário LVGL e carregam a tela especificada

  • lv_timer_handler(): Esta é uma função essencial na biblioteca LVGL que lida com eventos de temporizador dentro do LVGL, como animações e atualizações de tela.

  • if (lastKey0State == HIGH && currentKey0State == LOW): Esta linha é o núcleo da detecção de eventos de tecla. Ela verifica se o estado de uma tecla mudou de não pressionada para pressionada.

  • Quando a condição é atendida, o programa atualiza page_index e chama a função loadScreen() para carregar uma nova página.

  • Atualização de estado: lastKey0State = currentKey0State; Esta linha é crucial. Ela salva o estado atual da tecla para uso na próxima iteração de loop(), permitindo a próxima comparação de estado.

  • Atualização do E-ink: e1002_display_should_refresh() e e1002_display_refresh() gerenciam a atualização da tela E-ink. Diferente das telas LCD, o E-ink não pode atualizar em tempo real. Normalmente, ele requer atualizações seletivas ou de tela inteira em intervalos específicos para economizar energia e prolongar a vida útil. Este código implementa esse mecanismo de atualização sob demanda.

  • delay(10): Esta é uma simples medida de debounce por software para evitar que o programa interprete erroneamente a oscilação física da tecla como múltiplos pressionamentos.

Diagrama da Exibição da Interface​

Página InicialPágina da Estação de TrabalhoPágina de Fotos

Suporte Técnico & Discussão de Produto​

Obrigado por escolher nossos produtos! Estamos aqui para lhe proporcionar diferentes formas 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...