Pular para o conteúdo principal

Trabalhar com 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 com PlatformIO. O fluxo é o mesmo para todas as placas compatíveis — as únicas diferenças são a resolução do display e o ambiente da placa, 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 das 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 aplicativos 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 laboratório/testeDesenvolvedores de UI embarcada, hobbistas, projetistas de produtos IoT
Integração de hardwareIntegração direta com instrumentos, dispositivos de medição, automaçãoFocado em 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.5.0 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 → Display, defina a resolução para o seu hardware:

  • Display width: 800
  • Display height: 480

(O painel mono de 7,5" no E1001 e o Spectra 6 de 7,3" 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 da 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 com cinco componentes:

  • Panel
  • Label
  • Line
  • Checkbox
  • Image

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

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

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

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

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

Etapa 4: Gerar código​

Depois que o design estiver concluído:

  1. Salvar — pressione Control + S para salvar. Se você estiver no macOS, pressione Command + S para salvar.
  2. Pré-visualizar — clique em Run para iniciar o simulador e pré-visualizar a UI.
  1. Compilar / Build — clique no ícone ✓ para verificar erros e, em seguida, no ícone de chave inglesa para gerar o código da interface, 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 o PlatformIO​

Faça o deploy da saída do EEZ Studio com o PlatformIO. O PlatformIO fornece a estrutura do projeto, o ambiente da placa, as dependências de biblioteca e as configurações de compilação necessárias para os produtos Seeed ePaper.

Se esta é a sua primeira vez usando o PlatformIO com produtos Seeed ePaper, siga o guia de configuração vinculado abaixo para configurar seu ambiente de desenvolvimento.

Guia do PlatformIO

dica

O guia de configuração do PlatformIO abrange definições de placa, dependências de biblioteca e configuração de compilação — depois de concluí-lo, volte aqui para continuar.

Etapa 6: Baixar o Template PlatformIO do EEZ Studio​

Abra o reTerminal E-Series Firmware Hub:

Abrir Firmware Hub

Na página do Firmware Hub:

  1. Em Official Platforms, encontre o card EEZ Studio e clique nele para expandir.
  1. Selecione seu dispositivo — E1001, E1002, E1003 ou E1004.
  1. A página exibe um guia de uso passo a passo para o template. Clique no botão Download project template para obter o arquivo ZIP do projeto PlatformIO.

Etapa 7: Fazer o deploy do projeto EEZ Studio​

Depois de baixar o template, substitua a interface do template pelos arquivos gerados pelo EEZ Studio.

  1. Descompacte o template baixado.
  2. Abra a pasta do projeto descompactado no VS Code com a extensão PlatformIO instalada.
  3. Navegue até o diretório src/ui dentro do projeto template.
  4. Substitua todos os arquivos em src/ui pelos arquivos exportados pelo EEZ Studio na Etapa 4.
  1. Na barra de ferramentas do PlatformIO, selecione o ambiente correto para sua placa.
  1. Clique em Build para compilar e, em seguida, em Upload para gravar o firmware no seu dispositivo.
dica

O template já inclui todos os drivers necessários e a configuração do LVGL para o seu dispositivo. Você só precisa substituir os arquivos de interface.

Telas resultantes​

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

Referência 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...