Lopaka

Español

English
Deutsch
Português
Polski

Español

English
Deutsch
Português
Polski

Apariencia

Panel de hogar inteligente con ESP32: tutorial completo de diseño de UI ​

Publicado en Lopaka.app: el constructor de GUI de LVGL gratuito y basado en la web para desarrolladores embebidos

Introducción ​

Los paneles de hogar inteligente son uno de los proyectos ESP32 más populares, y con razón. Combinan datos de sensores, controles del usuario y retroalimentación en tiempo real en una sola interfaz satisfactoria.

En este tutorial completo, diseñarás una interfaz de panel de hogar inteligente completa con Lopaka, el constructor gratuito de GUI de LVGL basado en la web, y luego la desplegarás en un ESP32 con una pantalla TFT de 3,5". El panel incluirá:

  • Visualización de temperatura y humedad con lecturas de sensores en vivo
  • Controles de iluminación con interruptores de encendido/apagado y controles deslizantes de brillo
  • Panel de estado de seguridad con indicadores de puertas y ventanas
  • Widget del tiempo que muestra las condiciones actuales
  • Navegación entre varias pantallas

Tiempo estimado de finalización: 45-60 minutos para el diseño de la interfaz, más el tiempo de configuración del hardware.

Nivel de dificultad: Intermedio

Requisitos de hardware ​

ComponenteRecomendadoAlternativa
MicrocontroladorESP32 DevKit V1ESP32-S3, ESP32-C3
PantallaTFT ILI9488 de 3,5" (480x320)ILI9341 de 2,8" (320x240)
Temperatura/HumedadDHT22 (AM2302)BME280, SHT30
Sensor de luzBH1750LDR + ADC
Módulo de relésRelé de 4 canales 5VMódulo MOSFET para tiras LED
AlimentaciónFuente USB 5V 2ALiPo 3,7V + convertidor elevador
CajaCaja impresa en 3DCaja de proyecto

Costo total estimado: 25-45 $ dependiendo de lo que ya tengas.

Requisitos de software ​

  • Lopaka: constructor de GUI gratuito basado en la web (lopaka.app)
  • Arduino IDE o PlatformIO: para la programación del ESP32
  • Biblioteca LVGL: v8.x o v9.x
  • Biblioteca de controlador de pantalla TFT: se recomienda TFT_eSPI
  • Bibliotecas de sensores: DHT, BH1750, etc.

Paso 1: Planifica el diseño de tu panel ​

Antes de abrir Lopaka, esboza el diseño de tu panel en papel. Un buen panel de hogar inteligente sigue estos principios:

  • La información más importante primero: la temperatura y la hora deben ser prominentes
  • Agrupación lógica: controles relacionados juntos (toda la iluminación en una zona)
  • Apto para el tacto: los botones y controles deslizantes deben tener al menos 40x40 píxeles
  • Espaciado coherente: usa un sistema de cuadrícula para la alineación
  • Código de colores: usa colores para indicar el estado (verde = encendido, rojo = alerta, gris = apagado)

Para una pantalla de 480x320, diseñaremos este diseño:

+-----------------------------------------------------+
| [=] 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     |                 |
|  +--------------+  +--------------+                 |
|                                                     |
+-----------------------------------------------------+

Paso 2: Crea el proyecto en Lopaka ​

  1. Abre lopaka.app en tu navegador
  2. Haz clic en «New Project»
  3. Selecciona ESP32 como plataforma de destino
  4. Ingresa la resolución de la pantalla: 480 x 320 (o las dimensiones de tu pantalla)
  5. Nombra tu proyecto: «Smart Home Dashboard»
  6. Haz clic en «Create»

Ahora tienes un lienzo en blanco con la resolución correcta.

Paso 3: Diseña la barra de encabezado ​

El encabezado ofrece contexto e información de acceso rápido.

  1. Rectángulo de fondo:

    • Arrastra un widget Rectangle a la parte superior
    • Posición: (0, 0), Tamaño: (480, 40)
    • Color de fondo: #1e293b (pizarra oscuro)

  2. Ícono de menú:

    • Arrastra un widget Button
    • Posición: (10, 8), Tamaño: (24, 24)
    • Color de fondo: transparente
    • Agrega una Label hija con el texto "=", tamaño de fuente 18, color #94a3b8

  3. Título:

    • Arrastra un widget Label
    • Posición: (44, 10), Tamaño: (250, 20)
    • Texto: "Smart Home Dashboard"
    • Fuente: LV_FONT_DEFAULT_16, color: #e2e8f0

  4. Widget del tiempo:

    • Arrastra un widget Label
    • Posición: (340, 10), Tamaño: (130, 20)
    • Texto: "72 deg F"
    • Fuente: LV_FONT_DEFAULT_14, color: #94a3b8
    • Alineado a la derecha

Paso 4: Crea las tarjetas de sensores ​

Las tarjetas de sensores muestran datos ambientales en tiempo real.

Tarjeta de temperatura ​

  1. Fondo de la tarjeta:

    • Arrastra un widget Rectangle
    • Posición: (20, 55), Tamaño: (210, 80)
    • Color de fondo: #0f172a
    • Radio del borde: 12
    • Color del borde: #334155, ancho: 1

  2. Ícono de temperatura:

    • Arrastra un widget Label
    • Posición: (30, 65), Tamaño: (30, 30)
    • Texto: "T", tamaño de fuente 24

  3. Valor de temperatura:

    • Arrastra un widget Label
    • Posición: (70, 65), Tamaño: (140, 36)
    • Texto: "72.5 deg F"
    • Fuente: grande (28px o LV_FONT_DEFAULT_28), color: #f97316 (naranja)

  4. Etiqueta de ubicación:

    • Arrastra un widget Label
    • Posición: (70, 100), Tamaño: (140, 20)
    • Texto: "Living Room"
    • Fuente: LV_FONT_DEFAULT_12, color: #64748b

Tarjeta de humedad ​

Duplica la tarjeta de temperatura y modifícala:

  1. Copia la tarjeta de temperatura (selecciona todos los widgets, copia, pega)
  2. Muévela a la posición (250, 55)
  3. Cambia el ícono a "H"
  4. Cambia el valor a "45% RH", color: #06b6d4 (cian)
  5. Cambia la ubicación a "Living Room"

Paso 5: Crea el panel de control de iluminación ​

Esta sección combina interruptores y controles deslizantes para el control de la luz.

  1. Fondo del panel:

    • Arrastra un widget Rectangle
    • Posición: (20, 150), Tamaño: (440, 100)
    • Color de fondo: #0f172a
    • Radio del borde: 12
    • Color del borde: #334155, ancho: 1

  2. Título del panel:

    • Arrastra un widget Label
    • Posición: (35, 158), Tamaño: (200, 20)
    • Texto: "Lighting"
    • Fuente: LV_FONT_DEFAULT_16, color: #e2e8f0

  3. Fila de luz de la cocina:

    • Etiqueta: "Kitchen:" en (35, 185), color: #94a3b8
    • Control deslizante: Posición (120, 185), Tamaño: (200, 16)
      • Fondo: #334155, indicador: #fbbf24 (amarillo)
      • Establece el valor inicial en 60%
    • Interruptor: Posición (340, 182), Tamaño: (40, 22)
      • Fondo cuando está encendido: #22c55e
      • Establecer en estado ON
    • Etiqueta: "60%" en (390, 185), color: #94a3b8

  4. Fila de luz del dormitorio:

    • Duplica la fila de la cocina, muévela a la posición y 215
    • Cambia la etiqueta a "Bedroom:"
    • Establece el control deslizante en 20%
    • Establece el interruptor en estado OFF
    • Cambia la etiqueta a "20%"

  5. Fila de luz del porche:

    • Etiqueta: "Porch:" en (35, 242), color: #94a3b8
    • Solo interruptor: Posición (120, 239), Tamaño: (40, 22)
    • Establecer en estado ON
    • Etiqueta: "ON" en (175, 242), color: #22c55e

Paso 6: Crea las tarjetas de estado ​

Dos tarjetas más pequeñas en la parte inferior para la supervisión de seguridad y energía.

Tarjeta de seguridad ​

  1. Fondo de la tarjeta:

    • Rectángulo en (20, 265), Tamaño: (210, 50)
    • Fondo: #0f172a, radio del borde: 12, borde: #334155

  2. Ícono de seguridad:

    • Etiqueta: "LOCK", posición (30, 273), tamaño 30x30, fuente 20

  3. Texto de estado:

    • Etiqueta: "All Clear", posición (65, 275), tamaño 150x20
    • Fuente: LV_FONT_DEFAULT_14, color: #22c55e (verde)

  4. Texto de detalle:

    • Etiqueta: "3 doors, 2 windows", posición (65, 293), tamaño 150x16
    • Fuente: LV_FONT_DEFAULT_10, color: #64748b

Tarjeta de energía ​

  1. Fondo de la tarjeta:

    • Rectángulo en (250, 265), Tamaño: (210, 50)
    • Fondo: #0f172a, radio del borde: 12, borde: #334155

  2. Ícono de energía:

    • Etiqueta: "PWR", posición (260, 273), tamaño 30x30, fuente 20

  3. Valor de consumo:

    • Etiqueta: "1.2 kWh", posición (295, 275), tamaño 150x20
    • Fuente: LV_FONT_DEFAULT_14, color: #e2e8f0

  4. Texto de detalle:

    • Etiqueta: "Today - $0.18", posición (295, 293), tamaño 150x16
    • Fuente: LV_FONT_DEFAULT_10, color: #64748b

Paso 7: Agrega una segunda pantalla: Ajustes ​

Un panel de hogar inteligente necesita una pantalla de ajustes para la configuración.

  1. En Lopaka, haz clic en «Add Screen» en el panel de pantallas
  2. Nómbrala "Settings"
  3. Diseña la pantalla de ajustes con:
    • Encabezado (el mismo estilo que la pantalla principal)
    • Sección de ajustes WiFi con SSID e intensidad de la señal
    • Campos de configuración MQTT
    • Opciones de calibración de sensores
    • Control deslizante de brillo de la pantalla
    • Selector de tema (interruptor de modo oscuro/claro)

Paso 8: Agrega la navegación entre pantallas ​

Conecta el botón de menú para navegar entre pantallas.

  1. Selecciona el botón de menú en la pantalla principal
  2. En el panel Events, agrega un evento Click
  3. Acción: Navigate to screen -> "Settings"
  4. En la pantalla de ajustes, agrega un botón de retroceso que navegue a la pantalla principal

Paso 9: Exporta el código ​

  1. Haz clic en Export en la barra de herramientas superior
  2. Selecciona LVGL C code for ESP32
  3. Descarga los archivos generados

La exportación incluye:

  • dashboard_ui.c: código de creación de la pantalla principal
  • settings_ui.c: código de la pantalla de ajustes
  • ui.h: declaraciones compartidas y referencias a las pantallas
  • ui_helpers.c: funciones auxiliares para la navegación y los estilos

Paso 10: Conecta los datos de los sensores ​

La interfaz exportada es estática: ahora conecta los datos reales de los 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);
}

Paso 11: Agrega la entrada táctil ​

Conecta los eventos del control deslizante y del interruptor para controlar los 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);
}
PiezaPrecio aprox.Dónde comprar
ESP32 DevKit V1$6-8Amazon, AliExpress, Adafruit
TFT ILI9488 de 3,5"$10-15Amazon, AliExpress
Sensor DHT22$4-6Amazon, Adafruit
Sensor de luz BH1750$2-3Amazon, AliExpress
Relé de 4 canales$4-6Amazon, AliExpress
Cables de conexión$3-5Cualquier proveedor de electrónica
Protoboard$3-5Cualquier proveedor de electrónica

Solución de problemas ​

La pantalla no funciona ​

  • Verifica que User_Setup.h de TFT_eSPI coincida con los pines de tu pantalla
  • Comprueba las conexiones SPI (MOSI, MISO, SCK, CS, DC, RST)
  • Asegúrate de que la fuente de alimentación pueda entregar suficiente corriente (las pantallas TFT pueden consumir 200-300mA)

El tacto no responde ​

  • Verifica el tipo de controlador táctil (XPT2046 es común en los módulos ILI9488)
  • Calibra el tacto con el sketch de calibración táctil de TFT_eSPI
  • Comprueba que el pin CS táctil esté definido correctamente

Problemas de memoria de LVGL ​

  • Aumenta LV_MEM_SIZE en lv_conf.h (prueba 48KB o 64KB)
  • Reduce el número de widgets simultáneos
  • Usa LV_MEM_CUSTOM=1 para usar la asignación dinámica

Lecturas de sensores poco fiables ​

  • Agrega una resistencia pull-up de 10K al pin de datos del DHT22
  • Usa cable blindado para las conexiones de sensores de más de 1 metro
  • Agrega filtrado por software (media móvil) para lecturas más suaves

Próximos pasos ​

Ahora que tu panel de hogar inteligente funciona, considera estas mejoras:

  • Integración MQTT: conecta con Home Assistant u OpenHAB
  • Actualizaciones OTA: habilita las actualizaciones de firmware inalámbricas
  • Varias habitaciones: agrega navegación por pestañas para distintas habitaciones
  • Gráficos y diagramas: muestra el historial de temperatura a lo largo del tiempo
  • Control por voz: integra con Alexa o Google Home
  • Caja: imprime en 3D una caja personalizada para un aspecto pulido

¿Por qué Lopaka? ​

Lopaka hace que el diseño de interfaces embebidas sea accesible para todos. En lugar de pasar horas colocando widgets por ensayo y error, puedes:

  • Diseñar visualmente arrastrando y soltando en tu navegador
  • Ver los cambios al instante sin compilar ni flashear
  • Exportar código LVGL limpio listo para el despliegue en ESP32
  • Iterar rápidamente: prueba distintos diseños en minutos, no en horas
  • Gratis para siempre: sin limitaciones, sin marcas de agua, sin registro

Empieza a diseñar tu panel de hogar inteligente en lopaka.app: no se requiere descarga.

Únete a la comunidad ​

Comparte tus proyectos de panel de hogar inteligente con nosotros: ¡nos encanta ver lo que crea la comunidad!

Este tutorial fue escrito para Lopaka.app, el constructor gratuito de GUI de LVGL basado en la web. Creado por desarrolladores embebidos, para desarrolladores embebidos.