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 mediante el IDE de Arduino. El flujo es el mismo para todas las placas compatibles: las únicas diferencias son la resolución de la pantalla y la constante de configuración del controlador, 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 por 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, prototipar 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 (con soporte premium disponible)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 en 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.x 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 → Build:

  • LVGL include: introduce lvgl.h para que el código generado haga referencia correctamente a LVGL durante la compilación.

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

  • Display width: 800
  • Display height: 480

(La pantalla de 7.5" mono 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: estilos de alto nivel como claro/oscuro.
  • Groups: ayudas para el diseño de la disposició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 una 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. Save: haz clic en el icono de disquete junto a OPEN.
  2. Preview: haz clic en Run para iniciar el simulador y previsualizar la interfaz.
  3. Compile / Build: haz clic en el icono ✓ para comprobar errores y luego en el icono de llave inglesa para generar el código de la UI, los datos de imagen y los datos de fuentes.

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

Paso 5: Configurar el IDE de Arduino​

Para desplegar la salida de EEZ Studio en tu dispositivo Seeed ePaper, configura el IDE de Arduino con soporte para ESP32.

tip

Si es la primera vez que usas Arduino, consulta primero Getting Started with Arduino.

  1. Instala el IDE de Arduino.

    Download Arduino IDE

  2. Añade el soporte para la placa ESP32: en File → Preferences, añade en Additional Boards Manager URLs:

    https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

  3. Instala el paquete ESP32: Tools → Board → Boards Manager, busca esp32 e instala el paquete de Espressif Systems.

  4. Selecciona la placa para tu hardware:

    Tools → Board → ESP32 Arduino → XIAO_ESP32S3

  5. Conecta el dispositivo mediante USB-C y selecciona el puerto serie correcto en Tools → Port.

Paso 6: Instalar la biblioteca Seeed_GFX​

Usamos la biblioteca Seeed_GFX, que proporciona soporte completo para los dispositivos de pantalla de Seeed.

  1. Descárgala desde GitHub:

    Download the Library

  2. Sketch → Include Library → Add .ZIP Library y selecciona el ZIP descargado.

    nota

    Si instalaste previamente TFT_eSPI, elimínala temporalmente o cámbiale el nombre en la carpeta de bibliotecas de Arduino para evitar conflictos — Seeed_GFX es un fork de TFT_eSPI con funciones adicionales para pantallas Seeed.

  3. Abre el ejemplo de sketch correcto:

    • Para pantallas en color: File → Examples → Seeed_GFX → ePaper → Colorful → HelloWorld
    • Para pantallas monocromas: File → Examples → Seeed_GFX → ePaper → Basic → HelloWorld

  4. Crea un archivo driver.h en la misma carpeta que tu sketch (usa la flecha de nueva pestaña en el IDE de Arduino).

  5. Ve a la Seeed GFX Configuration Tool, selecciona tu hardware, copia la configuración generada y pégala en driver.h. El contenido exacto varía según el hardware:

Para reTerminal E1001 (7.5" blanco y negro, UC8179):

#define BOARD_SCREEN_COMBO 520 // reTerminal E1001 (UC8179)

Para reTerminal E1002 (7.3" color completo, UC8179C):

#define BOARD_SCREEN_COMBO 521 // reTerminal E1002 (UC8179C)

Paso 7: Desplegar el proyecto de EEZ Studio en Arduino​

Añade la salida de EEZ Studio y los helpers del controlador de la plataforma a la carpeta de tu sketch y luego súbelo.

Archivos de controlador necesarios (todo el hardware)​

Descarga estos archivos auxiliares y colócalos junto a tu .ino:

Para EE04 también necesitas lv_conf.h y la biblioteca LVGL — consulta la pestaña EE04 más abajo.

Copiar la salida de EEZ_UI​

Copia la carpeta EEZ_UI generada (desde el src/ de tu proyecto de EEZ Studio) en la carpeta de bibliotecas de Arduino (normalmente ~/Documents/Arduino/Libraries).

Sketch y subida​

Sketch de referencia — tres botones (KEY0/KEY1/KEY2) recorren tres páginas: HOME, Workstation, Plant.

Código de referencia completo: E1002-EEZStudioCode.zip

#include <TFT_eSPI.h>
#include <lvgl.h>
#include <ui.h>
#include "e1002_display.h"

const int BUTTON_KEY0 = 3;
const int BUTTON_KEY1 = 4;
const int BUTTON_KEY2 = 5;

int32_t page_index;

bool lastKey0State = HIGH;
bool lastKey1State = HIGH;
bool lastKey2State = HIGH;

e1002_driver_t e1002_driver;

void setup()
{
    String LVGL_Arduino = "Automotive Dashboard Demo - LVGL ";
    LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() +
                    "." + lv_version_patch();
    Serial.begin(115200);
    Serial.println(LVGL_Arduino);
    Serial.println("Initializing 6-color e-paper display...");
    e1002_display_init(&e1002_driver);

    pinMode(BUTTON_KEY0, INPUT_PULLUP);
    pinMode(BUTTON_KEY1, INPUT_PULLUP);
    pinMode(BUTTON_KEY2, INPUT_PULLUP);

    lastKey0State = digitalRead(BUTTON_KEY0);
    lastKey1State = digitalRead(BUTTON_KEY1);
    lastKey2State = digitalRead(BUTTON_KEY2);

    ui_init();
    page_index = SCREEN_ID_HOME;
    loadScreen((ScreensEnum)page_index);
    Serial.println("Boot: Main Screen");
}

void loop()
{
    lv_timer_handler();
    ui_tick();
    delay(50);

    bool currentKey0State = digitalRead(BUTTON_KEY0);
    bool currentKey1State = digitalRead(BUTTON_KEY1);
    bool currentKey2State = digitalRead(BUTTON_KEY2);

    if (lastKey0State == HIGH && currentKey0State == LOW) {
        page_index = SCREEN_ID_HOME;
        loadScreen((ScreensEnum)page_index);
        Serial.println("Switched to Main Screen");
        delay(50);
    }

    if (lastKey1State == HIGH && currentKey1State == LOW) {
        page_index = SCREEN_ID_WORKSTATION;
        loadScreen((ScreensEnum)page_index);
        Serial.println("Switched to Plant Screen");
        delay(50);
    }

    if (lastKey2State == HIGH && currentKey2State == LOW) {
        page_index = SCREEN_ID_PLANT;
        loadScreen((ScreensEnum)page_index);
        Serial.println("Switched to Setting Screen");
        delay(50);
    }

    lastKey0State = currentKey0State;
    lastKey1State = currentKey1State;
    lastKey2State = currentKey2State;

    if (e1002_display_should_refresh(&e1002_driver))
    {
        Serial.println("Refreshing e-paper display...");
        e1002_display_refresh(&e1002_driver);
        Serial.println("Display refresh complete");
    }

    delay(10);
}

Notas:

  • e1002_display_init() inicializa el hardware de la pantalla de tinta electrónica.
  • pinMode(..., INPUT_PULLUP) configura los pines de los botones con resistencias pull-up internas.
  • ui_init() y loadScreen() inicializan LVGL y cargan una pantalla específica.
  • lv_timer_handler() procesa los temporizadores y animaciones de LVGL.
  • Los bloques if (lastKeyXState == HIGH && currentKeyXState == LOW) eliminan rebotes en un flanco HIGH→LOW y actualizan la página.
  • e1002_display_should_refresh() / e1002_display_refresh() gestionan la actualización de la pantalla de tinta electrónica bajo demanda.

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 diferentes preferencias y necesidades.

Loading Comments...