Skip to main content

Comenzando con la Pantalla ePaper de reTerminal E Series y EEZStudio

Introducción​

Esta guía te llevará a través del diseño de una interfaz de usuario profesional para la serie reTerminal E usando la herramienta de diseño visual EEZStudio. Aprenderás cómo crear elementos de UI, generar el código necesario y finalmente desplegarlo en el dispositivo usando el IDE de Arduino. Este proceso te permite construir interfaces personalizadas con excelente visibilidad y consumo de energía ultra bajo, ideal para aplicaciones HMI.

Materiales Requeridos​

Para completar este tutorial, por favor prepara uno de los siguientes dispositivos de la serie reTerminal E:

reTerminal E1001reTerminal E1002
Obtener Uno Ahora 🖱️
Obtener Uno Ahora 🖱️

¿Qué es EEZ Studio?​

EEZ Studio es un entorno moderno de programación visual y diseño de UI desarrollado principalmente para construir interfaces de usuario para instrumentos de prueba y medición, dispositivos embebidos y otras aplicaciones interactivas. Combina diseño GUI de arrastrar y soltar, capacidades de scripting y herramientas de integración de dispositivos, permitiendo 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 manera más eficiente.

¿Por qué usar EEZ Studio?​

  • Diseño de Interfaz Visual – Crea UIs complejas con un editor WYSIWYG, reduciendo la necesidad de codificación manual.
  • Prototipado Rápido – Prueba y valida rápidamente ideas de diseño, ahorrando tiempo y costo de desarrollo.
  • Soporte Multiplataforma – Construye aplicaciones que pueden ejecutarse en múltiples sistemas operativos y objetivos embebidos.
  • Integración con Hardware – Conecta y controla directamente instrumentos de laboratorio, dispositivos IoT y placas personalizadas.
  • Extensible con Scripting – Usa scripting Lua para agregar lógica, automatización y funcionalidad avanzada.
  • Ecosistema de Código Abierto – Benefíciate de un conjunto de herramientas impulsado por la comunidad con transparencia y flexibilidad.

Con EEZ Studio, puedes pasar del concepto al prototipo funcional en una fracción del tiempo, mientras aseguras que tus diseños sean tanto profesionales como adaptables a futuros requerimientos.

Diferencia con SquareLine Studio​

Aunque EEZ Studio y SquareLine Studio son ambas herramientas de diseño GUI, se enfocan en diferentes objetivos y escenarios de usuario:

AspectoEEZ StudioSquareLine Studio
Propósito PrincipalDiseñado para instrumentos de prueba y medición, sistemas embebidos e integración hardware/softwareEnfocado en construir GUIs para sistemas embebidos (especialmente con LVGL)
Usuarios ObjetivoIngenieros, desarrolladores de productos, makers, diseñadores de instrumentos de laboratorio/pruebaDesarrolladores de UI embebida, aficionados, diseñadores de productos IoT
ExtensibilidadSoporta scripting Lua para lógica, automatización y control de dispositivosScripting limitado (principalmente depende de código C después de la exportación)
Integración de HardwareIntegración directa con instrumentos, dispositivos de medición y sistemas de automatizaciónPrincipalmente enfocado en generación de pantalla/UI, no integración de dispositivos externos
Código AbiertoImpulsado por la comunidad, transparente, extensibleProducto comercial de código cerrado con licenciamiento
Flujo de TrabajoPuede prototipar, simular y controlar dispositivos reales desde un entornoPrincipalmente genera código UI para ser compilado en un proyecto embebido

Comenzando con EEZ Studio​

Instalación de EEZ Studio​

Enlace de Instalación de EEZ Studio Después de acceder al enlace de descarga, selecciona la versión del sistema compatible con tu computadora para descargar.


Crear Proyecto​

En la parte superior de la interfaz de EEZ Studio, haz clic en el botón "CREATE". En la lista de plantillas de proyecto a la izquierda, localiza y selecciona el proyecto "LVGL".

  • Name: Nombra tu archivo de proyecto. Para conveniencia al explicar el contenido posterior en nuestros artículos, lo llamaremos aquí EEZ_UI.
  • LVGL Version: Especifica la versión de la biblioteca LVGL utilizada por el proyecto. Selecciona 9.x del menú desplegable.
  • Location: Especifica la ruta de almacenamiento para los archivos del proyecto en tu computadora. La ruta predeterminada típicamente apunta a una carpeta de proyecto predeterminada dentro de tu directorio de descarga o instalación de EEZ Studio (ej., C:\Users\TuUsuario\Documents\EEZ Studio\Projects o una ruta similar). Si necesitas cambiar la ubicación de almacenamiento, haz clic en el ícono de carpeta (o puntos suspensivos ...) a la derecha del cuadro de texto Location.

Configuración de Parámetros del Proyecto y Diseño de Interfaz UI​

Diseño de Interfaz UI​

El diseño de UI (Interfaz de Usuario) es crucial en el desarrollo de productos embebidos, ya que determina directamente la experiencia del usuario. Una interfaz estéticamente agradable, intuitiva y responsiva no solo mejora la usabilidad del producto sino que también aumenta su atractivo general.

En EEZ Studio, puedes ensamblar rápidamente interfaces arrastrando y soltando componentes. Utiliza herramientas como Styles, Fonts, Bitmaps y Themes para controlar precisamente los efectos visuales, creando una experiencia de usuario profesional y distintiva.

A continuación se presenta una introducción a las herramientas recomendadas:

Introducción al Componente del Extremo Derecho

  • Styles: Atributos visuales utilizados para unificar y reutilizar elementos de interfaz, asegurando consistencia y mantenimiento eficiente.
  • Bitmap: Comúnmente utilizado para fondos, íconos, logos, etc., para mejorar la presentación visual.
  • Fonts: Aseguran la legibilidad clara del texto mientras soportan contenido multilingüe y estilo de marca.
  • Themes: Definen la estética general de la interfaz, permitiendo cambios rápidos como modo claro/oscuro.
  • Groups: Organizan múltiples widgets juntos para gestión y diseño unificados.

En este tutorial, te guiaré a través del diseño de la UI para la página de inicio de un sitio web o aplicación. Una vez que domines las técnicas principales, podrás aplicarlas para crear cualquier interfaz que desees con facilidad.

Esta página está compuesta por cinco componentes:

  • Panel
  • Label
  • Line
  • Checkbox
  • Image

Paso 1. Cambiar el color de fondo del lienzo

  • Selecciona el lienzo cuyo color de fondo necesitas cambiar.
  • Marca Color, luego selecciona tu código de color hexadecimal preferido.

Paso 2. Agregar Panel

  • Arrastra el componente Panel de la sección Basic al lienzo y ajusta su Width y Height.

  • Marca Color, luego selecciona tu código de color hexadecimal preferido.

Paso 3. Agregar Bitmaps

  • Haz clic en el ícono Bitmaps en la barra lateral del extremo derecho para agregar una imagen.
  • Nombra las imágenes que selecciones; necesitarás elegir imágenes basándote en tu convención de nomenclatura más tarde.
  • Arrastra el componente Image del grupo Basic al lienzo, luego selecciona tu imagen y establece el tamaño usando Scale.

Paso 4. Agregar Línea

  • Arrastra el componente Line del grupo Visualiser al lienzo. Establece los puntos de inicio y fin de los Points para determinar la longitud y altura de la línea.

Paso 5. Agregar Etiqueta

  • Arrastra el componente Label del grupo Basic al lienzo, luego selecciona el color de fuente y la configuración del formato de fuente.
  • Haz clic en la caja Fonts en la columna más a la derecha para agregar tus formatos de fuente.
  • Establece el nombre y tamaño de la fuente

Lo anterior describe el uso básico de estos cinco componentes. Puedes organizarlos según el diagrama de referencia o tu propia interfaz de usuario diseñada.

Generación de Código y Despliegue​

Después de completar el diseño de la interfaz de usuario, necesitas guardar el proyecto y previsualizarlo en el simulador. Una vez verificado, ejecuta la operación de construcción para generar archivos de código ejecutables en el hardware objetivo.

Paso 1. Guardar Proyecto

Haz clic en el icono Guardar (forma de disquete, ubicado junto al botón "OPEN") en la parte superior de la interfaz para guardar tu proyecto.

Paso 2. Previsualizar Diseño

Haz clic en el icono Ejecutar (botón de reproducir) en la barra de herramientas para lanzar el simulador y previsualizar interactivamente los efectos de la interfaz de usuario.

Paso 3. Construir Proyecto

Haz clic en el icono Compilar (botón de marca de verificación) para verificar errores de sintaxis o lógica en el proyecto. Haz clic en el icono Construir (botón de llave inglesa) para generar archivos como código de interfaz de usuario, datos de imagen y datos de fuente.

Paso 4. Confirmar Construcción Exitosa

Al completarse, EEZ Studio muestra un mensaje verde que dice "Build successful", indicando que el código se ha generado exitosamente.

Preparación del Entorno​

Para programar la Pantalla ePaper de reTerminal E Series con Arduino, necesitarás configurar el IDE de Arduino con soporte para ESP32.

tip

Si esta es tu primera vez usando Arduino, te recomendamos encarecidamente que consultes Comenzando con Arduino.

Configuración del IDE de Arduino​

Paso 1. Descarga e instala el IDE de Arduino y lanza la aplicación Arduino.

Descargar IDE de Arduino

Paso 2. Agregar soporte para placas ESP32 al IDE de Arduino.

En el IDE de Arduino, ve a Archivo > Preferencias y agrega la siguiente URL al campo "URLs adicionales de gestor de placas":

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

Paso 3. Instalar el paquete de placas ESP32.

Navega a Herramientas > Placa > Gestor de placas, busca "esp32" e instala el paquete ESP32 de Espressif Systems.

Paso 4. Seleccionar la placa correcta.

Ve a Herramientas > Placa > ESP32 Arduino y selecciona XIAO_ESP32S3.

Paso 5. Conecta tu Pantalla ePaper de reTerminal E Series a tu computadora usando un cable USB-C.

Paso 6. Selecciona el puerto correcto desde Herramientas > Puerto.

Programación de la Pantalla ePaper​

El reTerminal E1001 cuenta con una pantalla ePaper de 7.5 pulgadas en blanco y negro, mientras que el reTerminal E1002 está equipado con una pantalla ePaper a todo color de 7.3 pulgadas. Ambas pantallas proporcionan excelente visibilidad en varias condiciones de iluminación con consumo de energía ultra bajo, haciéndolas ideales para aplicaciones industriales que requieren pantallas siempre encendidas con uso mínimo de energía.

Usando la Librería Seeed_GFX​

Para controlar la pantalla ePaper, usaremos la librería Seeed_GFX, que proporciona soporte integral para varios dispositivos de pantalla de Seeed Studio.

Paso 1. Descarga la librería Seeed_GFX desde GitHub:

Descargar la Librería

Paso 2. Instala la librería agregando el archivo ZIP en el IDE de Arduino. Ve a Programa > Incluir Librería > Agregar librería .ZIP y selecciona el archivo ZIP descargado.

note

Si has instalado previamente la librería TFT_eSPI, es posible que necesites removerla temporalmente o renombrarla desde tu carpeta de librerías de Arduino para evitar conflictos, ya que Seeed_GFX es un fork de TFT_eSPI con características adicionales para pantallas de Seeed Studio.

Programando reTerminal E1001 (ePaper de 7.5 pulgadas en Blanco y Negro)​

Exploremos un ejemplo simple que demuestra operaciones básicas de dibujo en la pantalla ePaper en blanco y negro.

Paso 1. Abre el sketch de ejemplo de la librería Seeed_GFX: Archivo > Ejemplos > Seeed_GFX > ePaper > Basic > HelloWorld

Paso 2. Crea un nuevo archivo llamado driver.h en la misma carpeta que tu sketch. Puedes hacer esto haciendo clic en el botón de flecha en el IDE de Arduino y seleccionando "Nueva Pestaña", luego nombrándola driver.h.

Paso 3. Ve a la Herramienta de Configuración Seeed GFX y selecciona reTerminal E1001 de la lista de dispositivos.

Paso 4. Copia el código de configuración generado y pégalo en el archivo driver.h. El código debería verse así:

#define BOARD_SCREEN_COMBO 520 // reTerminal E1001 (UC8179)

Desplegando el Proyecto EEZ Studio en Arduino​

Porta los siguientes archivos del proyecto (incluyendo cuatro archivos) a la Librería de Arduino para usar en proyectos de Arduino. El archivo EEZ_UI se genera durante el proceso de construcción en EEZStudio. Necesitas localizar la ruta donde lo guardaste.


Aquí está el sketch principal de Arduino para ejecutar la interfaz de usuario: Tres botones corresponden a tres pantallas diferentes, comenzando con verde: HOME\Workstation\Plant en secuencia.

#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_PHOTO;
        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);
}

  • e1002_display_init(): Inicializa el hardware de la pantalla e-ink y establece sus parámetros de funcionamiento.

  • pinMode(..., INPUT_PULLUP): Configura el pin del botón como modo de entrada y habilita la resistencia pull-up interna. Esto asegura que el pin permanezca en un nivel alto (HIGH) cuando el botón no está presionado y se conecte a tierra, volviéndose bajo (LOW), cuando se presiona.

  • ui_init() y loadScreen(): Estas funciones inicializan la biblioteca de interfaz de usuario LVGL y cargan la pantalla especificada

  • lv_timer_handler(): Esta es una función esencial en la biblioteca LVGL que maneja eventos de temporizador dentro de LVGL, como animaciones y actualizaciones de pantalla.

  • if (lastKey0State == HIGH && currentKey0State == LOW): Esta línea es el núcleo de la detección de eventos de tecla. Verifica si el estado de una tecla ha cambiado de no presionada a presionada.

  • Cuando se cumple la condición, el programa actualiza page_index y llama a la función loadScreen() para cargar una nueva página.

  • Actualización de Estado: lastKey0State = currentKey0State; Esta línea es crucial. Guarda el estado actual de la tecla para usar en la siguiente iteración del loop(), habilitando la siguiente comparación de estado.

  • Actualización E-ink: e1002_display_should_refresh() y e1002_display_refresh() gestionan la actualización de la pantalla E-ink. A diferencia de las pantallas LCD, E-ink no puede actualizarse en tiempo real. Típicamente requiere actualizaciones selectivas o de pantalla completa en intervalos específicos para conservar energía y extender la vida útil. Este código implementa ese mecanismo de actualización bajo demanda.

  • delay(10): Esta es una medida simple de debouncing por software para evitar que el programa malinterprete las oscilaciones físicas de la tecla como múltiples presiones.

Diagrama de Visualización de Interfaz​

Página de InicioPágina de Estación de TrabajoPágina de Foto

Soporte Técnico y Discusión de Productos​

¡Gracias por elegir nuestros productos! Estamos aquí para brindarle diferentes tipos de soporte para asegurar que su experiencia con nuestros productos sea lo más fluida posible. Ofrecemos varios canales de comunicación para satisfacer diferentes preferencias y necesidades.

Loading Comments...