Saltar al contenido principal

Trabajar con EEZ Studio

Esta guía te acompaña en el diseño de una interfaz de usuario profesional con la herramienta de diseño visual EEZ Studio, la generación de código LVGL y su despliegue en un producto ePaper de Seeed con PlatformIO. El flujo es el mismo para todas las placas compatibles: las únicas diferencias son la resolución de la pantalla y el entorno de la placa, que mostramos en pestañas.

Hardware compatible​

reTerminal E1001 / E1002 / E1003 / E1004XIAO ePaper Display Board (ESP32-S3) – EE04
7.5" mono / 7.3" Spectra 6 / 10.3" mono / 13.3" Spectra 6Controlador universal: combínalo con cualquiera de nuestras pantallas ePaper Seeed de 24 pines o 50 pines
Consigue uno ahora 🖱️
Consigue uno ahora 🖱️

¿Qué es EEZ Studio?​

EEZ Studio es un entorno moderno de programación visual y diseño de interfaces de usuario creado originalmente para instrumentos de prueba y medida y dispositivos embebidos. Combina diseño de GUI mediante arrastrar y soltar, scripting y herramientas de integración de dispositivos, lo que permite a desarrolladores, ingenieros y makers crear rápidamente interfaces profesionales sin empezar desde cero.

En resumen, EEZ Studio actúa como un puente entre hardware y software, permitiéndote diseñar, crear prototipos y desplegar experiencias de usuario de forma más eficiente.

¿Por qué usar EEZ Studio?​

  • Diseño visual de interfaces: crea interfaces complejas con un editor WYSIWYG.
  • Prototipado rápido: prueba y valida ideas de diseño rápidamente.
  • Multiplataforma: crea aplicaciones que se ejecutan en varios sistemas operativos y destinos embebidos.
  • Integración de hardware: conecta directamente instrumentos de laboratorio, dispositivos IoT y placas personalizadas.
  • Código abierto: conjunto de herramientas impulsado por la comunidad con soporte premium opcional.

EEZ Studio vs. SquareLine Studio​

Ambas son herramientas de diseño de GUI, pero se dirigen a públicos ligeramente diferentes:

AspectoEEZ StudioSquareLine Studio
Propósito principalInstrumentos de prueba y medida, sistemas embebidos, integración hardware/softwareGUIs embebidas, especialmente con LVGL
Usuarios objetivoIngenieros, desarrolladores de producto, makers, diseñadores de instrumentos de laboratorio/pruebaDesarrolladores de UI embebida, aficionados, diseñadores de productos IoT
Integración de hardwareIntegración directa con instrumentos, dispositivos de medida, automatizaciónEnfoque en la generación de UI, menor integración con dispositivos externos
Código abiertoImpulsado por la comunidad, transparente, extensible (disponible soporte premium)Código cerrado, producto comercial con licencias
Flujo de trabajoPrototipa, simula y controla dispositivos reales desde un único entornoPrincipalmente genera código de UI que se compila dentro de un proyecto embebido

Paso 1: Instalar EEZ Studio​

Descarga EEZ Studio para tu sistema operativo desde el sitio oficial.

Paso 2: Crear un proyecto LVGL​

En la parte superior de la interfaz de EEZ Studio, haz clic en CREATE. Selecciona la plantilla LVGL en la parte izquierda:

  • Name: ponle un nombre a tu proyecto (usaremos EEZ_UI en este artículo).
  • LVGL Version: elige 9.5.0 en la lista desplegable.
  • Location: elige dónde guardar los archivos del proyecto.

Configuración del proyecto​

Haz clic en el icono ⚙️ de la barra de herramientas para abrir la configuración del proyecto.

En General → Display, establece la resolución para tu hardware:

  • Display width: 800
  • Display height: 480

(La pantalla mono de 7.5" del E1001 y la Spectra 6 de 7.3" del E1002 comparten la misma resolución de 800×480).

Paso 3: Diseñar la interfaz de usuario​

El diseño de la interfaz de usuario determina directamente la experiencia del usuario. EEZ Studio te permite ensamblar rápidamente interfaces arrastrando y soltando componentes y usando Styles, Fonts, Bitmaps, Themes y Groups para controlar el resultado visual.

Recursos en línea recomendados:

La barra lateral derecha:

  • Styles: atributos visuales para unificar y reutilizar elementos de la interfaz.
  • Bitmaps: fondos, iconos, logotipos.
  • Fonts: renderizado de texto y compatibilidad multilingüe.
  • Themes: modos claro/oscuro y otros estilos de alto nivel.
  • Groups: ayudas para el diseño de la distribución.

Diseño de ejemplo (Hello World + Panel + Image + Line + Label)​

En este tutorial crearemos una página de inicio sencilla a partir de cinco componentes:

  • Panel
  • Label
  • Line
  • Checkbox
  • Image

Paso 1. Cambia el color de fondo del lienzo: selecciona el lienzo, marca Color y elige un valor hexadecimal.

Paso 2. Arrastra un Panel al lienzo, ajusta su ancho/alto y elige un color.

Paso 3. Añade bitmaps mediante el panel derecho Bitmaps, ponles nombre y luego arrastra el widget Image al lienzo y vincula tu bitmap.

Paso 4. Añade una Line desde el grupo Visualiser y configura sus Points.

Paso 5. Añade un Label, elige el color y luego añade fuentes mediante el panel derecho Fonts.

Paso 4: Generar código​

Cuando el diseño esté completo:

  1. Guardar: pulsa Control + S para guardar. Si usas macOS, pulsa Command + S para guardar.
  2. Previsualizar: haz clic en Run para iniciar el simulador y previsualizar la interfaz de usuario.
  1. Compilar / Construir: haz clic en el icono ✓ para comprobar si hay errores y luego en el icono de llave inglesa para generar el código de la interfaz de usuario, los datos de imagen y los datos de fuente.

Un mensaje en verde Build successful confirma la generación del código. La salida se guarda en la carpeta src/ui de tu proyecto (puedes renombrarla a src/EEZ_UI si lo prefieres).

Paso 5: Configurar PlatformIO​

Despliega la salida de EEZ Studio con PlatformIO. PlatformIO proporciona la estructura del proyecto, el entorno de la placa, las dependencias de librerías y los ajustes de compilación necesarios para los productos Seeed ePaper.

Si es la primera vez que usas PlatformIO con productos Seeed ePaper, sigue la guía de configuración enlazada a continuación para configurar tu entorno de desarrollo.

Guía de PlatformIO

tip

La guía de configuración de PlatformIO cubre las definiciones de placas, las dependencias de librerías y la configuración de compilación; una vez completada, vuelve aquí para continuar.

Paso 6: Descargar la plantilla de PlatformIO para EEZ Studio​

Abre el Firmware Hub de reTerminal E Serie:

Abrir Firmware Hub

En la página de Firmware Hub:

  1. En Official Platforms, busca la tarjeta EEZ Studio y haz clic en ella para expandirla.
  1. Selecciona tu dispositivo: E1001, E1002, E1003 o E1004.
  1. La página muestra una guía de uso paso a paso para la plantilla. Haz clic en el botón Download project template para obtener el archivo ZIP del proyecto PlatformIO.

Paso 7: Desplegar el proyecto de EEZ Studio​

Después de descargar la plantilla, sustituye la interfaz de usuario de la plantilla por los archivos generados por EEZ Studio.

  1. Descomprime la plantilla descargada.
  2. Abre la carpeta del proyecto descomprimido en VS Code con la extensión PlatformIO instalada.
  3. Ve al directorio src/ui dentro del proyecto de la plantilla.
  4. Sustituye todos los archivos en src/ui por los archivos exportados por EEZ Studio en el Paso 4.
  1. En la barra de herramientas de PlatformIO, selecciona el entorno correcto para tu placa.
  1. Haz clic en Build para compilar y luego en Upload para flashear el firmware en tu dispositivo.
tip

La plantilla ya incluye todos los controladores necesarios y la configuración de LVGL para tu dispositivo. Solo necesitas sustituir los archivos de la interfaz de usuario.

Pantallas resultantes​

Página de inicioPágina de estación de trabajoPágina de fotos

Referencias y recursos​

Soporte técnico y debate sobre el producto​

Gracias por elegir nuestros productos. Estamos aquí para ofrecerte diferentes tipos de soporte y garantizar que tu experiencia con nuestros productos sea lo más fluida posible. Ofrecemos varios canales de comunicación para adaptarnos a distintas preferencias y necesidades.

Loading Comments...