Lopaka

Português

English
Español
Deutsch
Polski

Português

English
Español
Deutsch
Polski

Aparência

Painel de casa inteligente ESP32: tutorial completo de design de UI ​

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

Introdução ​

Painéis de casa inteligente são um dos projetos ESP32 mais populares — e por um bom motivo. Eles combinam dados de sensores, controles do usuário e feedback em tempo real em uma única interface gratificante.

Neste tutorial abrangente, você vai projetar uma UI completa de painel de casa inteligente usando o Lopaka — o construtor de GUI LVGL gratuito e baseado na web — e, depois, implantá-la em um ESP32 com um display TFT de 3,5". O painel incluirá:

  • Exibição de temperatura e umidade com leituras de sensores ao vivo
  • Controles de iluminação com interruptores liga/desliga e controles deslizantes de brilho
  • Painel de status de segurança com indicadores de porta/janela
  • Widget de clima mostrando as condições atuais
  • Navegação entre várias telas

Tempo estimado de conclusão: 45-60 minutos para o design da UI, mais o tempo de configuração do hardware.

Nível de dificuldade: Intermediário

Requisitos de hardware ​

ComponenteRecomendadoAlternativa
MicrocontroladorESP32 DevKit V1ESP32-S3, ESP32-C3
DisplayTFT ILI9488 de 3,5" (480x320)ILI9341 de 2,8" (320x240)
Temperatura/UmidadeDHT22 (AM2302)BME280, SHT30
Sensor de luzBH1750LDR + ADC
Módulo de reléRelé de 4 canais 5VMódulo MOSFET para fitas LED
AlimentaçãoFonte USB 5V 2ALiPo 3,7V + conversor boost
GabineteCaixa impressa em 3DCaixa de projeto

Custo total estimado: US$ 25-45, dependendo do que você já tem.

Requisitos de software ​

  • Lopaka — construtor de GUI gratuito e baseado na web (lopaka.app)
  • Arduino IDE ou PlatformIO — para programação do ESP32
  • Biblioteca LVGL — v8.x ou v9.x
  • Biblioteca de driver de display TFT — TFT_eSPI recomendada
  • Bibliotecas de sensores — DHT, BH1750 etc.

Passo 1: Planeje o layout do seu painel ​

Antes de abrir o Lopaka, esboce o layout do seu painel no papel. Um bom painel de casa inteligente segue estes princípios:

  • Informação mais importante primeiro — temperatura e hora devem estar em destaque
  • Agrupamento lógico — controles relacionados juntos (toda a iluminação em uma área)
  • Amigável ao toque — botões e controles deslizantes devem ter pelo menos 40x40 pixels
  • Espaçamento consistente — use um sistema de grade para alinhamento
  • Código por cores — use cores para indicar status (verde = ligado, vermelho = alerta, cinza = desligado)

Para um display de 480x320, vamos projetar este layout:

+-----------------------------------------------------+
| [=] Smart Home Dashboard              [72 deg F]    |  <- Header (40px)
+-----------------------------------------------------+
|                                                     |
|  +--------------+  +--------------+                 |
|  |  TEMP 72.5F  |  |  HUM 45% RH  |  <- Sensor cards
|  |   Living Room|  |   Living Room|                 |
|  +--------------+  +--------------+                 |
|                                                     |
|  +-------------------------------------------+      |
|  |  LIGHTING                                 |      |
|  |  Kitchen: [====|=====] 60% [ON]           |      |  <- Controls
|  |  Bedroom: [==|=======] 20% [OFF]          |      |
|  |  Porch:   [ON]                            |      |
|  +-------------------------------------------+      |
|                                                     |
|  +--------------+  +--------------+                 |
|  |  SECURITY     |  |  ENERGY      |  <- Status cards
|  |  All Clear    |  |  1.2 kWh     |                 |
|  +--------------+  +--------------+                 |
|                                                     |
+-----------------------------------------------------+

Passo 2: Crie o projeto no Lopaka ​

  1. Abra lopaka.app no seu navegador
  2. Clique em "New Project"
  3. Selecione ESP32 como plataforma de destino
  4. Insira a resolução do display: 480 x 320 (ou as dimensões do seu display)
  5. Dê um nome ao seu projeto: "Smart Home Dashboard"
  6. Clique em "Create"

Agora você tem uma tela de desenho em branco na resolução correta.

Passo 3: Projete a barra de cabeçalho ​

O cabeçalho oferece contexto e informações de acesso rápido.

  1. Retângulo de fundo:

    • Arraste um widget Rectangle para o topo
    • Posição: (0, 0), Tamanho: (480, 40)
    • Cor de fundo: #1e293b (ardósia escura)

  2. Ícone de menu:

    • Arraste um widget Button
    • Posição: (10, 8), Tamanho: (24, 24)
    • Cor de fundo: transparente
    • Adicione um Label filho com o texto "=", tamanho de fonte 18, cor #94a3b8

  3. Título:

    • Arraste um widget Label
    • Posição: (44, 10), Tamanho: (250, 20)
    • Texto: "Smart Home Dashboard"
    • Fonte: LV_FONT_DEFAULT_16, cor: #e2e8f0

  4. Widget de clima:

    • Arraste um widget Label
    • Posição: (340, 10), Tamanho: (130, 20)
    • Texto: "72 deg F"
    • Fonte: LV_FONT_DEFAULT_14, cor: #94a3b8
    • Alinhado à direita

Passo 4: Crie os cartões de sensores ​

Os cartões de sensores exibem dados ambientais em tempo real.

Cartão de temperatura ​

  1. Fundo do cartão:

    • Arraste um widget Rectangle
    • Posição: (20, 55), Tamanho: (210, 80)
    • Cor de fundo: #0f172a
    • Raio da borda: 12
    • Cor da borda: #334155, espessura: 1

  2. Ícone de temperatura:

    • Arraste um widget Label
    • Posição: (30, 65), Tamanho: (30, 30)
    • Texto: "T", tamanho de fonte 24

  3. Valor da temperatura:

    • Arraste um widget Label
    • Posição: (70, 65), Tamanho: (140, 36)
    • Texto: "72.5 deg F"
    • Fonte: grande (28px ou LV_FONT_DEFAULT_28), cor: #f97316 (laranja)

  4. Rótulo de local:

    • Arraste um widget Label
    • Posição: (70, 100), Tamanho: (140, 20)
    • Texto: "Living Room"
    • Fonte: LV_FONT_DEFAULT_12, cor: #64748b

Cartão de umidade ​

Duplique o cartão de temperatura e modifique:

  1. Copie o cartão de temperatura (selecione todos os widgets, copie, cole)
  2. Mova para a posição (250, 55)
  3. Altere o ícone para "H"
  4. Altere o valor para "45% RH", cor: #06b6d4 (ciano)
  5. Altere o local para "Living Room"

Passo 5: Crie o painel de controle de iluminação ​

Esta seção combina interruptores e controles deslizantes para o controle de luzes.

  1. Fundo do painel:

    • Arraste um widget Rectangle
    • Posição: (20, 150), Tamanho: (440, 100)
    • Cor de fundo: #0f172a
    • Raio da borda: 12
    • Cor da borda: #334155, espessura: 1

  2. Título do painel:

    • Arraste um widget Label
    • Posição: (35, 158), Tamanho: (200, 20)
    • Texto: "Lighting"
    • Fonte: LV_FONT_DEFAULT_16, cor: #e2e8f0

  3. Linha da luz da cozinha:

    • Rótulo: "Kitchen:" em (35, 185), cor: #94a3b8
    • Controle deslizante: Posição (120, 185), Tamanho: (200, 16)
      • Fundo: #334155, indicador: #fbbf24 (amarelo)
      • Defina o valor inicial como 60%
    • Interruptor: Posição (340, 182), Tamanho: (40, 22)
      • Fundo quando ligado: #22c55e
      • Defina para o estado LIGADO
    • Rótulo: "60%" em (390, 185), cor: #94a3b8

  4. Linha da luz do quarto:

    • Duplique a linha da cozinha, mova para a posição y 215
    • Altere o rótulo para "Bedroom:"
    • Defina o controle deslizante como 20%
    • Defina o interruptor como DESLIGADO
    • Altere o rótulo para "20%"

  5. Linha da luz da varanda:

    • Rótulo: "Porch:" em (35, 242), cor: #94a3b8
    • Apenas interruptor: Posição (120, 239), Tamanho: (40, 22)
    • Defina para o estado LIGADO
    • Rótulo: "ON" em (175, 242), cor: #22c55e

Passo 6: Crie os cartões de status ​

Dois cartões menores na parte inferior para segurança e monitoramento de energia.

Cartão de segurança ​

  1. Fundo do cartão:

    • Retângulo em (20, 265), Tamanho: (210, 50)
    • Fundo: #0f172a, raio da borda: 12, borda: #334155

  2. Ícone de segurança:

    • Rótulo: "LOCK", posição (30, 273), tamanho 30x30, fonte 20

  3. Texto de status:

    • Rótulo: "All Clear", posição (65, 275), tamanho 150x20
    • Fonte: LV_FONT_DEFAULT_14, cor: #22c55e (verde)

  4. Texto de detalhe:

    • Rótulo: "3 doors, 2 windows", posição (65, 293), tamanho 150x16
    • Fonte: LV_FONT_DEFAULT_10, cor: #64748b

Cartão de energia ​

  1. Fundo do cartão:

    • Retângulo em (250, 265), Tamanho: (210, 50)
    • Fundo: #0f172a, raio da borda: 12, borda: #334155

  2. Ícone de energia:

    • Rótulo: "PWR", posição (260, 273), tamanho 30x30, fonte 20

  3. Valor de uso:

    • Rótulo: "1.2 kWh", posição (295, 275), tamanho 150x20
    • Fonte: LV_FONT_DEFAULT_14, cor: #e2e8f0

  4. Texto de detalhe:

    • Rótulo: "Today - $0.18", posição (295, 293), tamanho 150x16
    • Fonte: LV_FONT_DEFAULT_10, cor: #64748b

Passo 7: Adicione uma segunda tela — Configurações ​

Um painel de casa inteligente precisa de uma tela de configurações.

  1. No Lopaka, clique em "Add Screen" no painel de telas
  2. Chame-a de "Settings"
  3. Projete a tela de configurações com:
    • Cabeçalho (mesmo estilo da tela principal)
    • Seção de configurações de WiFi com SSID e força do sinal
    • Campos de configuração MQTT
    • Opções de calibração de sensores
    • Controle deslizante de brilho do display
    • Seletor de tema (alternância entre modo escuro/claro)

Passo 8: Adicione a navegação entre telas ​

Conecte o botão de menu para navegar entre telas.

  1. Selecione o botão de menu na tela principal
  2. No painel Events, adicione um evento Click
  3. Ação: Navigate to screen -> "Settings"
  4. Na tela de configurações, adicione um botão de voltar que navega para a tela principal

Passo 9: Exporte o código ​

  1. Clique em Export na barra de ferramentas superior
  2. Selecione LVGL C code for ESP32
  3. Baixe os arquivos gerados

A exportação inclui:

  • dashboard_ui.c — código de criação da tela principal
  • settings_ui.c — código da tela de configurações
  • ui.h — declarações compartilhadas e referências de tela
  • ui_helpers.c — funções auxiliares para navegação e estilo

Passo 10: Conecte os dados dos sensores ​

A UI exportada é estática — agora conecte dados reais dos sensores.

cpp
#include <lvgl.h>
#include <DHT.h>
#include "ui.h"

#define DHTPIN 4
#define DHTTYPE DHT22

DHT dht(DHTPIN, DHTTYPE);

// Reference to UI labels (declared in ui.h)
extern lv_obj_t *ui_TempValue;
extern lv_obj_t *ui_HumidValue;

void update_sensor_data(lv_timer_t *timer) {
    float temp = dht.readTemperature();
    float humid = dht.readHumidity();

    if (!isnan(temp)) {
        char buf[16];
        snprintf(buf, sizeof(buf), "%.1f deg F", temp * 9.0/5.0 + 32);
        lv_label_set_text(ui_TempValue, buf);
    }

    if (!isnan(humid)) {
        char buf[16];
        snprintf(buf, sizeof(buf), "%.0f%% RH", humid);
        lv_label_set_text(ui_HumidValue, buf);
    }
}

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

    // Initialize LVGL and display
    lv_init();
    // ... display driver setup ...

    // Create the UI from Lopaka export
    ui_init();

    // Create a timer to update sensor data every 2 seconds
    lv_timer_create(update_sensor_data, 2000, NULL);
}

void loop() {
    lv_timer_handler();
    delay(5);
}

Passo 11: Adicione a entrada por toque ​

Conecte os eventos do controle deslizante e do interruptor para controlar relés.

cpp
// Event callback for kitchen light slider
void kitchen_slider_event(lv_event_t *e) {
    lv_obj_t *slider = lv_event_get_target(e);
    int value = lv_slider_get_value(slider);

    // Update PWM output for dimming
    ledcWrite(KITCHEN_PWM_CHANNEL, value * 255 / 100);

    // Update percentage label
    char buf[8];
    snprintf(buf, sizeof(buf), "%d%%", value);
    lv_label_set_text(ui_KitchenPercentLabel, buf);
}

// Event callback for toggle switch
void porch_toggle_event(lv_event_t *e) {
    lv_obj_t *toggle = lv_event_get_target(e);
    bool state = lv_obj_has_state(toggle, LV_STATE_CHECKED);

    digitalWrite(PORCH_RELAY_PIN, state ? HIGH : LOW);
    lv_label_set_text(ui_PorchStatusLabel, state ? "ON" : "OFF");
}

void setup() {
    // ... previous setup code ...

    // Register event callbacks
    lv_obj_add_event_cb(ui_KitchenSlider, kitchen_slider_event, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_event_cb(ui_PorchToggle, porch_toggle_event, LV_EVENT_VALUE_CHANGED, NULL);
}
PeçaPreço aprox.Onde comprar
ESP32 DevKit V1US$ 6-8Amazon, AliExpress, Adafruit
TFT ILI9488 de 3,5"US$ 10-15Amazon, AliExpress
Sensor DHT22US$ 4-6Amazon, Adafruit
Sensor de luz BH1750US$ 2-3Amazon, AliExpress
Relé de 4 canaisUS$ 4-6Amazon, AliExpress
Fios jumperUS$ 3-5Qualquer fornecedor de eletrônica
ProtoboardUS$ 3-5Qualquer fornecedor de eletrônica

Solução de problemas ​

O display não funciona ​

  • Verifique se o User_Setup.h do TFT_eSPI corresponde aos pinos do seu display
  • Confira as conexões SPI (MOSI, MISO, SCK, CS, DC, RST)
  • Garanta que a fonte de alimentação forneça corrente suficiente (displays TFT podem consumir 200-300mA)

O toque não responde ​

  • Verifique o tipo de controlador de toque (XPT2046 é comum em módulos ILI9488)
  • Calibre o toque usando o sketch de calibração de toque do TFT_eSPI
  • Confira se o pino CS do toque está definido corretamente

Problemas de memória do LVGL ​

  • Aumente LV_MEM_SIZE em lv_conf.h (tente 48KB ou 64KB)
  • Reduza o número de widgets simultâneos
  • Use LV_MEM_CUSTOM=1 para usar alocação em heap

Leituras de sensores não confiáveis ​

  • Adicione um resistor pull-up de 10K ao pino de dados do DHT22
  • Use cabo blindado para conexões de sensores com mais de 1 metro
  • Adicione filtragem por software (média móvel) para leituras mais suaves

Próximos passos ​

Agora que seu painel de casa inteligente está funcionando, considere estes aprimoramentos:

  • Integração MQTT — conecte ao Home Assistant ou OpenHAB
  • Atualizações OTA — habilite atualizações de firmware sem fio
  • Vários ambientes — adicione navegação por abas para ambientes diferentes
  • Gráficos e tabelas — exiba o histórico de temperatura ao longo do tempo
  • Controle por voz — integre com Alexa ou Google Home
  • Gabinete — imprima em 3D uma caixa personalizada para um acabamento refinado

Por que o Lopaka? ​

O Lopaka torna o design de UI embarcada acessível a todos. Em vez de passar horas posicionando widgets por tentativa e erro, você pode:

  • Projetar visualmente com arrastar e soltar no seu navegador
  • Ver mudanças instantaneamente sem compilar ou gravar
  • Exportar código LVGL limpo pronto para implantação no ESP32
  • Iterar rapidamente — experimente layouts diferentes em minutos, não em horas
  • Grátis para sempre — sem limitações, sem marcas d'água, sem cadastro

Comece a projetar seu painel de casa inteligente em lopaka.app — sem download.

Entre para a comunidade ​

Compartilhe seus projetos de painel de casa inteligente com a gente — adoramos ver o que a comunidade constrói!

Este tutorial foi escrito para o Lopaka.app — o construtor de GUI LVGL gratuito e baseado na web. Criado por desenvolvedores embarcados, para desenvolvedores embarcados.