Primeiros passos com o Lopaka: crie sua primeira GUI Arduino em 10 minutos

Publicado em Lopaka.app — O construtor de GUI LVGL gratuito e baseado na web para desenvolvedores embarcados

Introdução

Se você já tentou criar uma interface gráfica para um display TFT Arduino, conhece a dor: posicionar cada pixel à mão, chutar coordenadas, gravar no hardware, ver que está errado, ajustar, gravar de novo e repetir o ciclo até querer jogar sua protoboard do outro lado da sala.

Existe um jeito melhor.

Neste tutorial, você vai criar sua primeira GUI Arduino em menos de 10 minutos usando o Lopaka — uma ferramenta gratuita e baseada na web que permite projetar interfaces LVGL com arrastar e soltar e, depois, exporta código C limpo, pronto para o seu projeto Arduino.

Sem downloads. Sem instalações. Sem configuração de ambiente. Basta abrir o navegador e começar a criar.

O que você vai criar

Um display de sensor simples, mas funcional, que mostra:

• Leitura de temperatura com um grande valor numérico
• Indicador de status (OK / Aviso / Erro)
• Um botão para alternar entre Celsius e Fahrenheit
• Uma barra de progresso mostrando o nível da bateria

É o tipo de interface que você encontra em um dispositivosensor portátil, estação meteorológica ou monitor de bateria.

Pré-requisitos

• Um navegador web (Chrome, Firefox, Safari ou Edge)
• Uma placa Arduino com um display TFT (vamos usar Arduino Uno + ILI9341 2.8" como exemplo)
• Familiaridade básica com o Arduino IDE
• Só isso.

Passo 1: Crie seu projeto

1. Abra lopaka.app no seu navegador
2. Clique em "New Project"
3. Selecione sua plataforma: Arduino
4. Escolha seu display: ILI9341 (320x240)
5. Dê um nome ao seu projeto: "Sensor Display"
6. Clique em "Create"

Você verá uma tela de desenho em branco, com um painel de widgets à esquerda e um painel de propriedades à direita. Se for sua primeira vez, o tour de boas-vindas vai guiar você pela interface — reserve 60 segundos para acompanhá-lo ou pule se preferir explorar por conta própria.

Passo 2: Adicione um rótulo de título

1. No painel de widgets, arraste um Label para a tela de desenho
2. Posicione-o perto do topo, no centro
3. No painel de propriedades:
   • Text: Sensor Monitor
   • Font: LV_FONT_DEFAULT_24 (ou a maior disponível)
   • Alignment: Center
   • Color: White (ou a cor de texto que você preferir)

Você deve ver um título grande no topo da pré-visualização do display.

Passo 3: Adicione a exibição de temperatura

1. Arraste outro Label para a tela de desenho
2. Posicione-o na área superior-média
3. Propriedades:
   • Text: 25.6°C
   • Font: LV_FONT_DEFAULT_36 (extragrande)
   • Alignment: Center
   • Color: Verde ou ciano vibrante (algo que se destaque)

Essa será sua leitura principal do sensor. No código de produção, você vai atualizar esse valor a partir do seu sensor real.

Passo 4: Adicione um indicador de status

1. Arraste um Label abaixo da temperatura
2. Propriedades:
   • Text: STATUS: OK
   • Font: LV_FONT_DEFAULT_16
   • Color: Green

Para um indicador mais visual, você também pode adicionar um widget LED (se ele estiver disponível na sua versão do LVGL) ao lado do texto de status.

Passo 5: Adicione o botão de alternância de unidade

1. Arraste um Button para a tela de desenho
2. Posicione-o abaixo do indicador de status
3. Propriedades:
   • Button text: Switch to °F
   • Width: 160px
   • Height: 40px
   • Style: Cantos arredondados, cor contrastante

Esse botão permitirá que os usuários alternem entre unidades de temperatura. No seu código Arduino, você conectará o manipulador de eventos do botão para converter e exibir o valor.

Passo 6: Adicione uma barra de progresso da bateria

1. Arraste um widget Bar (barra de progresso) para a tela de desenho
2. Posicione-o perto da parte inferior
3. Propriedades:
   • Width: 280px
   • Height: 20px
   • Value: 75 (em 100)
   • Color: Verde (ou amarelo/laranja para valores mais baixos)
4. Adicione um pequeno Label acima dele: Battery: 75%

Passo 7: Estilo e refinamento

Agora deixe com aparência profissional:

1. Fundo: Defina o fundo da tela com uma cor escura (cinza-escuro ou azul-marinho) para melhor contraste
2. Espaçamento: Garanta margens consistentes entre os elementos (espaços de 10-15px)
3. Alinhamento: Centralize todos os elementos de texto
4. Cores: Use um esquema de cores consistente — verde para status OK, vermelho para avisos, branco para rótulos

Sua interface deve ficar parecida com isto:

┌─────────────────────────────┐
│                             │
│       Sensor Monitor        │
│                             │
│         25.6°C              │
│                             │
│       STATUS: OK            │
│                             │
│    [  Switch to °F  ]       │
│                             │
│   Battery: 75%              │
│   ██████████████░░░░        │
│                             │
└─────────────────────────────┘

Passo 8: Exporte o código

1. Clique no botão "Export" na barra de ferramentas superior
2. Selecione Arduino como plataforma de destino
3. Escolha o formato de saída (arquivo .c único ou projeto completo)
4. Clique em "Download"

Você receberá um código C LVGL limpo e legível, que pode inserir diretamente no seu sketch Arduino.

Passo 9: Integre com seu código Arduino

Veja como usar o código exportado:

#include <TFT_eSPI.h>
#include <lvgl.h>
#include "ui_SensorDisplay.h"  // Your exported file

TFT_eSPI tft = TFT_eSPI();

void setup() {
  // Initialize display
  tft.begin();
  tft.setRotation(1);

  // Initialize LVGL
  lv_init();
  lv_tft_init();

  // Create the UI from Lopaka
  ui_SensorDisplay_init();

  // Initialize your sensor
  dht.begin();
}

void loop() {
  // Read sensor
  float temp = dht.readTemperature();

  // Update the label (use the variable name from exported code)
  lv_label_set_text_fmt(ui_TempLabel, "%.1f°C", temp);

  // Update battery bar (example value)
  lv_bar_set_value(ui_BatteryBar, 75, LV_ANIM_ON);

  // Handle button events (auto-wired from Lopaka)
  lv_timer_handler();
  delay(5);
}

Passo 10: Teste no hardware

1. Faça upload do sketch para o seu Arduino
2. Verifique se o display mostra sua interface corretamente
3. Teste a interação com o botão
4. Confirme se as leituras do sensor são atualizadas em tempo real

O que vem a seguir?

Você criou sua primeira GUI em menos de 10 minutos. Agora tente:

• Adicionar mais telas: Crie uma página de configurações ou uma visualização de dados históricos
• Widgets personalizados: Adicione medidores, gráficos ou elementos desenhados de forma personalizada
• Compartilhe seu design: Use os links compartilháveis do Lopaka para mostrar seu trabalho a outras pessoas
• Explorar recursos avançados: Animações, estilos e callbacks de eventos

Por que o Lopaka?

• Sem configuração: Roda inteiramente no seu navegador — sem downloads, sem instalações
• Design visual: Veja sua UI enquanto a constrói, sem chutar coordenadas
• Exportação de código limpo: Código C LVGL pronto para produção, não um runtime de caixa-preta
• Compartilhável: Envie seus designs para colegas de equipe ou para a comunidade com um link
• Grátis para começar: Não exige cartão de crédito

Recursos

• Lopaka.app — Comece a criar agora
• Documentação do LVGL — Saiba mais sobre os widgets LVGL
• Bibliotecas TFT Arduino — Configuração do driver de display
• Lopaka no Discord — Entre para a comunidade

Tem dúvidas? Deixe-as nos comentários abaixo ou fale com a gente no Discord. Boas criações!