Pantalla de papel reTerminal E Serie trabajando con SquareLine Vision

Introducción

Cuando quieras crear tu propio terminal inteligente, sin duda esperarás que este dispositivo tenga una interfaz de usuario atractiva y elegante. LVGL puede lograrlo. Es la biblioteca gráfica embebida gratuita y de código abierto más popular para crear interfaces de usuario atractivas para cualquier tipo de MCU, MPU y pantalla. Con esta biblioteca, puedes crear una gran cantidad de interfaces de usuario embebidas y atractivas. Especialmente cuando utilizas nuestros productos de papel electrónico reTerminal E Serie, una interfaz atractiva es una parte indispensable. Sin embargo, escribir el código de la biblioteca LVGL también es una tarea muy complicada. Por lo tanto, este tutorial se centra principalmente en presentar un editor que te permite dibujar la interfaz de usuario simplemente arrastrando y soltando controles. El método de creación WYSIWYG (What You See Is What You Get) permite captar mejor el efecto de presentación final y, después de dibujar la interfaz de usuario, puedes exportarla como archivos de interfaz de usuario de LVGL, lo que simplifica enormemente el proceso de desarrollo para los desarrolladores. El nombre de esta herramienta es SquareLine Vision, es una herramienta visual de front-end para LVGL.

SquareLine Vision es un entorno de desarrollo de interfaces de usuario basado en el navegador (Web) o en un entorno compatible con la Web, dedicado a diseñar rápidamente interfaces de usuario (UI) para sistemas embebidos (como dispositivos con pantallas). También es una herramienta de diseño + exportación de código: diseñas la interfaz en la plataforma y luego puedes exportar el diseño como código o recursos para ejecutarlo en dispositivos embebidos.

Las características de SquareLine Vision

• Diseño visual de UI – Diseña interfaces hermosas e interactivas de forma visual con un editor de arrastrar y soltar, eliminando la necesidad de crear manualmente código LVGL.
• Prototipado rápido embebido – Previsualiza y valida al instante tu interfaz de usuario en el escritorio o en el hardware de destino, reduciendo drásticamente el tiempo de iteración del diseño al dispositivo.
• Exportación impulsada por LVGL – Exporta sin problemas tus diseños a código fuente limpio basado en LVGL, listo para compilarse en dispositivos embebidos, microcontroladores o entornos de simulación.

Con SquareLine Vision, puedes pasar de un concepto a un prototipo de interfaz de usuario embebida interactiva en cuestión de minutos, combinando flexibilidad de diseño, vista previa en tiempo real y salida LVGL lista para producción para acelerar todo tu ciclo de desarrollo de producto.

Materiales necesarios

Para completar este tutorial, prepara uno de los siguientes dispositivos reTerminal E Serie, el E1001 es monocromático y el E1002 es a todo color:

reTerminal E1001	reTerminal E1002
Consigue uno ahora 🖱️	Consigue uno ahora 🖱️

Primeros pasos con SquareLine Vision

Introducción de componentes

Toda la plataforma SquareLine Vision se puede dividir en dos partes: Launcher y la Interfaz de la aplicación. En la interfaz de Launcher, podemos ver las siguientes tres funciones principales:

• proyectos
• gestionar importaciones
• controlar la configuración de la cuenta

Cuando empieces a dibujar la interfaz de usuario, conocerás cinco herramientas:

• sistema de jerarquía
• gestión de pantallas
• opciones de estilo
• varios tipos de widgets
• cómo aprovechar eventos, disparadores y acciones

Cuando tengas una comprensión clara de la estructura organizativa general y de las herramientas de la plataforma, será de gran ayuda para la realización de tu proyecto personal. A continuación, crearé un proyecto basado en nuestro reTerminal E1002.

Crear un proyecto

Iniciar un nuevo proyecto LVGL

En la parte superior de la interfaz Launcher de SquareLine Vision, haz clic en el botón Create new. Luego, selecciona Seeed Studio para ver nuestros productos. Elige el reTerminal E1002 para crear un proyecto. Los ajustes fijos de este proyecto son:

• Resolution: 800x480
• Offset: 0(x), 0(y)
• Rotation: 0°
• Shape: Rectangle
• Color Depth: 32 bit
• LVGL version: 9.1
• Theme: Light

tip

Hemos dado soporte a los dispositivos SenseCAP Watcher y reTerminal E1001 y E1002. En el futuro, también admitiremos más productos de Seeed Studio.

Importar un proyecto .slvp existente

Si ya tienes un archivo .slvp, puedes importarlo directamente como proyecto. Hemos proporcionado dos paneles relacionados con el clima. Puedes descargarlos directamente a continuación.

Clima monocromático	Clima a todo color	Clima a todo color 2

Configuración de parámetros del proyecto y diseño de la interfaz de usuario

Una vez que entres en la interfaz de ingeniería, podrás ver cuatro áreas principales:

• La Región 1 es Hierarchy, que se utiliza principalmente para gestionar la estructura de los elementos de la interfaz de usuario.
• La Región 2 es Simulator, donde se muestra la interfaz de usuario y se utiliza para ver los efectos de presentación de cada interfaz.
• La Región 3 es Inspector, que proporciona controles detallados para el elemento seleccionado actualmente.
• La Región 4 es Toolbar, situada en la parte superior de la interfaz de la aplicación, lo que permite acceder fácilmente a muchas herramientas y funciones.

Diseño de la interfaz de usuario

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

En SquareLine Vision, puedes ensamblar rápidamente interfaces arrastrando y soltando componentes. Utiliza herramientas como Styles, Fonts, Bitmaps y Themes para controlar con precisión los efectos visuales y crear una experiencia de usuario profesional y distintiva.

tip

Este tutorial solo cubre los controles que aparecen en este proyecto. Sin embargo, SquareLine Vision ofrece muchas otras funcionalidades, como animaciones, eventos y diferentes fuentes. Si quieres explorar más esta herramienta, consulta los tutoriales oficiales.

Introducción a Hierarchy

Aquí puedes anidar widgets entre sí, creando relaciones padre-hijo donde el widget contenedor se convierte en el padre y los elementos dentro de él se convierten en widgets hijo. Se puede ver que esta imagen está compuesta por varios contenedores, imágenes y textos. Estos tres controles se pueden encontrar todos en la barra de herramientas.

Introducción al Inspector

Este panel te permite ver y modificar las propiedades de pantallas, contenedores, widgets y otros elementos de la interfaz de usuario. Además, puede haber configuraciones especiales que varían según el tipo de widget. Cuando selecciono la "background img", puedo ver todos los componentes relacionados con la img en el Inspector.

Introducción a la barra de herramientas

La barra de herramientas incluye opciones para la configuración del proyecto, guardar tu proyecto, acceder a la ayuda, informar de problemas, modificar la vista del proyecto, descargar el código de tu proyecto e iniciar tu proyecto en modo de reproducción directamente en SquareLine Vision.

• Menú: Desde aquí puedes acceder a las funciones para guardar tu trabajo, exportar el proyecto, ajustar la configuración del proyecto y volver a la pantalla del lanzador.
• Nombre del proyecto: Muestra el nombre de tu proyecto actual.
• Plan: Muestra el plan de suscripción actual del usuario.
• Modo Editor / Animación: Alterna entre dos entornos de trabajo distintos.
• Widgets: Accede a los elementos de la interfaz de usuario a través de tres menús desplegables que agrupan lógicamente los componentes, lo que facilita localizar el widget adecuado para tu proyecto.
• Deshacer / Rehacer: Permite retroceder y avanzar a través de los cambios de diseño, lo que favorece la experimentación sin riesgo.
• Modo de reproducción: Inicia la vista previa y prueba la simulación de la interfaz de usuario.
• Enviar informe de error: Proporciona acceso directo al sistema de reporte de errores.
• Usuario(s): Muestra todos los usuarios activos que están trabajando actualmente en tu proyecto, lo que favorece los esfuerzos de diseño colaborativo.
• Opciones de vista: Puedes alternar la visualización del minimapa e introducir valores de zoom precisos en un campo de entrada dedicado.
• Versión: Muestra la versión actual de SquareLine Vision en la que se está ejecutando tu proyecto, asegurando que conozcas tu entorno de software.

Generación de código y estructura del proyecto

El exportador de SquareLine Vision genera código de GUI basado en LVGL organizado de forma estructurada para separar responsabilidades y hacer que el código sea mantenible. El código exportado sigue una arquitectura modular con una separación clara entre la inicialización de la GUI, la gestión de pantallas, los eventos, los estilos y las animaciones.

Estructura del proyecto

exported_project/
├── GUI/                    # Main GUI folder (or 'ui' for Studio format)
│   ├── Content/            # GUI content files
│   │   ├── screens/        # Individual screen source files
│   │   ├── images/         # Generated image source files
│   │   └── fonts/          # Font source files
│   ├── Behavior/           # Event and animation related files
│   │   ├── GUI_Events.c    # Event handler implementations
│   │   └── GUI_Animations.c # Animation and timeline definitions
│   ├── Framework/          # GUI framework files
│   │   └── LVGL/           # LVGL library files
│   ├── GUI.c               # Main GUI implementation
│   ├── GUI.h               # Main GUI header
│   ├── GUI_variables.c     # GUI object declarations
│   ├── GUI_GlobalStyles.c  # Global style definitions
│   ├── CMakeLists.txt      # CMake build configuration
│   └── filelist.txt        # List of all GUI source files
├── lv_conf.h               # LVGL configuration file
├── main.c                  # Application entry point
├── HAL.c                   # Hardware abstraction layer
├── CMakeLists.txt          # Main CMake configuration
├── build.sh                # Build script
└── run.sh                  # Run script

Componentes clave

Interfaz principal para el subsistema de GUI. Proporciona funciones de alto nivel para:

• GUI_load(): Inicialización completa de la GUI, incluyendo HAL y LVGL
• GUI_init(): Inicialización básica de la GUI
• GUI_refresh(): Actualiza el estado de la GUI (llama al manejador de LVGL
• GUI_initContent(): Inicializa pantallas y widgets
• GUI_initTheme(): Configura el tema de la GUI
• GUI_loadFirstScreen(): Carga la pantalla inicial

Grabación del programa

El módulo de control principal del E1002 es el ESP32-S3. Si quieres programar la pantalla de tinta electrónica de la serie reTerminal E usando PlatformIO, necesitas configurar la opción para admitir ESP32 en el archivo .ini.

tip

Si es la primera vez que usas PlatformIO, te recomendamos encarecidamente que consultes Getting Started with PlatformIO.

Ejemplos de uso

Configuración de PlatformIO

• Paso 1: Instala PlatformIO en el sitio web oficial. Si no has instalado el software de PlatformIO, puedes hacer clic en el enlace de arriba.

• Paso 2: Busca platformio en las extensiones de VScode. El primer icono que aparece es el que necesitas. Solo haz clic en Install para iniciar la descarga.

  

• Paso 3: Abre el plugin PlatformIO en secuencia. Luego, haz clic en el botón Open y selecciona el proyecto local de PlatformIO haciendo clic en Open Project para abrirlo.

  

Rutina de referencia

Hemos proporcionado tres plantillas existentes, cada una con una interfaz de usuario diferente que puede mostrar el panel de control del clima en tiempo real. También se integran con OpenWeather(es una plataforma de servicios que proporciona datos meteorológicos globales) para obtener cambios climáticos en tiempo real. Todo lo que necesitas hacer es obtener la API KEY de OpenWeather y conectarte a la WIFI para usarlas con normalidad.

Clima monocromático	Clima a todo color	Clima a todo color 2

• Paso 1: Abre la carpeta en VScode y espera a que se descarguen completamente las dependencias relacionadas. Después de abrir el proyecto, abre el archivo .ini y presiona Ctrl+S. En este punto, las dependencias del proyecto comenzarán a descargarse automáticamente. Cuando veas Project has been successfully updated, significa que el proceso de descarga se ha completado. Cuando aparezca la palabra successful, indicará inmediatamente que la instalación se ha completado correctamente.

  

• Paso 2: Abre OpenWeather y obtén tu propia API KEY

  
  

• Paso 3: Modifica tu WIFI_SSID, WIFI_PASSWORD y OW_API_KEY en main.cpp.

  

• Paso 4: Conecta el reTerminal al ordenador usando un cable de datos USB y selecciona el puerto serie apropiado para el proceso de grabación. Luego haz clic en el botón upload para realizar el proceso de grabación.

  

  Cuando aparezca el siguiente contenido en el terminal, indicará que el proceso de grabación se ha realizado correctamente. Posteriormente, el reTerminal actualizará automáticamente la imagen de la pantalla.

  

Presentación de resultados

Clima monocromático	Clima a todo color	Clima a todo color 2

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.