Primeros pasos con Lopaka: crea tu primera GUI de Arduino en 10 minutos

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

Introducción

Si alguna vez intentaste crear una interfaz gráfica de usuario para una pantalla TFT de Arduino, conoces el dolor: colocar cada píxel a mano, adivinar coordenadas, flashear el hardware, ver que está mal, ajustar, volver a flashear y repetir el ciclo hasta que quieres lanzar tu protoboard al otro lado de la habitación.

Hay una forma mejor.

En este tutorial, crearás tu primera GUI de Arduino en menos de 10 minutos con Lopaka, una herramienta gratuita basada en la web que te permite diseñar interfaces LVGL arrastrando y soltando, y luego exporta código C limpio listo para tu proyecto de Arduino.

Sin descargas. Sin instalaciones. Sin configurar el entorno. Solo abre tu navegador y empieza a crear.

Qué vas a crear

Una pantalla de sensor sencilla pero funcional que muestra:

• Lectura de temperatura con una pantalla numérica grande
• Indicador de estado (OK / Advertencia / Error)
• Un botón para alternar entre Celsius y Fahrenheit
• Una barra de progreso que muestra el nivel de batería

Este es el tipo de interfaz que encontrarías en un dispositivo sensor portátil, una estación meteorológica o un monitor de batería.

Requisitos previos

• Un navegador web (Chrome, Firefox, Safari o Edge)
• Una placa Arduino con pantalla TFT (usaremos Arduino Uno + ILI9341 de 2,8" como ejemplo)
• Familiaridad básica con Arduino IDE
• Eso es todo.

Paso 1: Crea tu proyecto

1. Abre lopaka.app en tu navegador
2. Haz clic en «New Project»
3. Selecciona tu plataforma: Arduino
4. Elige tu pantalla: ILI9341 (320x240)
5. Dale un nombre a tu proyecto: «Sensor Display»
6. Haz clic en «Create»

Verás un lienzo en blanco con un panel de widgets a la izquierda y un panel de propiedades a la derecha. Si es tu primera vez, el recorrido de bienvenida te guiará por la interfaz: tómate 60 segundos para seguirlo, u omítelo si prefieres explorar por tu cuenta.

Paso 2: Agrega una etiqueta de título

1. Desde el panel de widgets, arrastra una Label al lienzo
2. Colócala cerca de la parte superior central
3. En el panel de propiedades:
   • Text: Sensor Monitor
   • Font: LV_FONT_DEFAULT_24 (o la más grande disponible)
   • Alignment: Center
   • Color: White (o el color de texto que prefieras)

Deberías ver un título grande en la parte superior de la vista previa de tu pantalla.

Paso 3: Agrega la pantalla de temperatura

1. Arrastra otra Label al lienzo
2. Colócala en la zona superior-media
3. Propiedades:
   • Text: 25.6°C
   • Font: LV_FONT_DEFAULT_36 (extragrande)
   • Alignment: Center
   • Color: Verde brillante o cian (algo que destaque)

Esta será la lectura principal de tu sensor. En el código de producción, actualizarás este valor desde tu sensor real.

Paso 4: Agrega un indicador de estado

1. Arrastra una Label debajo de la temperatura
2. Propiedades:
   • Text: STATUS: OK
   • Font: LV_FONT_DEFAULT_16
   • Color: Green

Para un indicador más visual, también puedes agregar un widget LED (si está disponible en tu versión de LVGL) junto al texto de estado.

Paso 5: Agrega el botón para cambiar la unidad

1. Arrastra un Button al lienzo
2. Colócalo debajo del indicador de estado
3. Propiedades:
   • Button text: Switch to °F
   • Width: 160px
   • Height: 40px
   • Style: Esquinas redondeadas, color contrastante

Este botón permitirá a los usuarios alternar entre unidades de temperatura. En tu código de Arduino, conectarás el controlador de eventos del botón para convertir y mostrar el valor.

Paso 6: Agrega una barra de progreso de la batería

1. Arrastra un widget Bar (barra de progreso) al lienzo
2. Colócalo cerca de la parte inferior
3. Propiedades:
   • Width: 280px
   • Height: 20px
   • Value: 75 (sobre 100)
   • Color: Green (o amarillo/naranja para valores más bajos)
4. Agrega una Label pequeña encima: Battery: 75%

Paso 7: Estilo y retoques

Ahora haz que se vea profesional:

1. Fondo: Establece el fondo de la pantalla en un color oscuro (gris oscuro o azul marino) para un mejor contraste
2. Espaciado: Asegura márgenes coherentes entre los elementos (espacios de 10-15px)
3. Alineación: Centra todos los elementos de texto
4. Colores: Usa un esquema de colores coherente: verde para el estado OK, rojo para las advertencias, blanco para las etiquetas

Tu interfaz debería verse más o menos así:

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

Paso 8: Exporta el código

1. Haz clic en el botón «Export» de la barra de herramientas superior
2. Selecciona Arduino como plataforma de destino
3. Elige el formato de salida (un solo archivo .c o el proyecto completo)
4. Haz clic en «Download»

Obtendrás código C de LVGL limpio y legible que puedes soltar directamente en tu sketch de Arduino.

Paso 9: Intégralo con tu código de Arduino

Así se usa el 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);
}

Paso 10: Prueba en el hardware

1. Sube el sketch a tu Arduino
2. Verifica que la pantalla muestra tu interfaz correctamente
3. Prueba la interacción del botón
4. Confirma que las lecturas del sensor se actualizan en tiempo real

¿Qué sigue?

Creaste tu primera GUI en menos de 10 minutos. Ahora prueba:

• Agregar más pantallas: Crea una página de ajustes o una vista de datos históricos
• Widgets personalizados: Agrega indicadores, gráficos o elementos dibujados a medida
• Compartir tu diseño: Usa los enlaces para compartir de Lopaka para mostrar tu trabajo a otros
• Explorar funciones avanzadas: Animaciones, estilos y devoluciones de llamada de eventos

¿Por qué Lopaka?

• Sin configuración: Se ejecuta por completo en tu navegador, sin descargas ni instalaciones
• Diseño visual: Ve tu interfaz mientras la creas, sin adivinar coordenadas
• Exportación de código limpio: Código C de LVGL listo para producción, no un tiempo de ejecución de caja negra
• Compartible: Envía tus diseños a compañeros de equipo o a la comunidad con un enlace
• Gratis para empezar: No se requiere tarjeta de crédito

Recursos

• Lopaka.app: empieza a crear ahora
• Documentación de LVGL: aprende más sobre los widgets de LVGL
• Bibliotecas TFT de Arduino: configuración del controlador de pantalla
• Discord de Lopaka: únete a la comunidad

¿Tienes preguntas? Déjalas en los comentarios de abajo o únete a nosotros en Discord. ¡Feliz creación!