Herramientas y enfoques de desarrollo de interfaces gráficas de usuario integradas

Índice

Introducción

Una interfaz gráfica de usuario integrada suele entenderse simplemente como «gráficos en una pantalla». En la práctica, es mucho más que eso. La interfaz gráfica de usuario integrada es una combinación de arquitectura de software, estrategia de representación, gestión de entradas y capacidades de hardware, que trabajan conjuntamente para presentar información y aceptar la interacción del usuario de forma fiable y predecible.

A diferencia de las aplicaciones para ordenadores de sobremesa o móviles, las GUI integradas operan bajo estrictas restricciones. El rendimiento limitado de la CPU, la memoria restringida, los requisitos de tiempo real y los largos ciclos de vida de los productos influyen en cómo se diseña e implementa la interfaz de usuario. Como resultado, las soluciones GUI integradas van desde interfaces ligeras que se ejecutan en pequeños microcontroladores hasta aplicaciones gráficas avanzadas que se ejecutan en sistemas basados en Linux.

Debido a esta diversidad, el término «GUI integrada» no describe una única tecnología o flujo de trabajo. En su lugar, abarca un amplio espectro de enfoques que difieren en el lugar donde tiene lugar la renderización, en lo estrechamente vinculada que está la GUI a la plataforma de hardware y en el grado de flexibilidad que existe para la futura evolución del sistema.

Tres categorías prácticas de soluciones GUI integradas

Desde el punto de vista del sistema, la mayoría de las soluciones GUI integradas pueden agruparse en tres categorías prácticas. Esta clasificación no se basa en productos o proveedores concretos, sino en cómo se integra la GUI en la arquitectura general del sistema.

1. Interfaz gráfica de usuario vinculada a un único ecosistema de hardware

En esta categoría, el marco y las herramientas de la GUI se diseñan específicamente para una familia de procesadores o un proveedor de silicio. La interfaz de usuario se convierte en una extensión natural del ecosistema de hardware, con herramientas estrechamente integradas y flujos de trabajo recomendados.

2. Frameworks y bibliotecas GUI multiplataforma

Aquí, el marco de la interfaz gráfica de usuario es en gran medida independiente del hardware subyacente. La misma base de código de interfaz de usuario puede reutilizarse en diferentes microcontroladores o procesadores, siempre que se disponga de controladores de entrada y visualización adecuados.

3. GUI con renderizado descargado a controladores gráficos externos

En este enfoque, el procesador principal no renderiza directamente la interfaz gráfica. En su lugar, la renderización es gestionada por un controlador gráfico externo dedicado, mientras que la CPU principal se centra en la lógica de la aplicación y el control del sistema.

Este modelo de tres categorías proporciona una forma clara y práctica de entender el panorama de las GUI integradas. También facilita el posicionamiento de herramientas y marcos específicos basándose en elecciones arquitectónicas, en lugar de en listas de comprobación de características.

En los siguientes apartados, se describe cada categoría con más detalle, junto con ejemplos concretos que ilustran cómo se utilizan estos enfoques en sistemas empotrados reales.

GUI vinculada a un único ecosistema de hardware

En esta categoría, la interfaz gráfica de usuario está estrechamente vinculada a una plataforma de hardware específica o a un proveedor de silicio. El marco de la interfaz gráfica de usuario, las herramientas de desarrollo y los flujos de trabajo recomendados están diseñados para trabajar juntos como parte de un ecosistema coherente.

Este enfoque suele proporcionar un alto nivel de integración entre la GUI y el hardware subyacente. Los controladores de pantalla, los controladores táctiles, la aceleración de gráficos y el uso de memoria están alineados con las capacidades de una familia MCU o SoC concreta. Como resultado, la curva de aprendizaje suele ser más suave, especialmente para los equipos que ya están familiarizados con el entorno de desarrollo del proveedor.

Las soluciones GUI de esta categoría suelen seleccionarse para proyectos en los que:

• la plataforma de hardware se fija al principio del diseño,
• Se espera un apoyo a largo plazo dentro de un único ecosistema,
• La velocidad de desarrollo y la coherencia de la cadena de herramientas son importantes.

En lugar de centrarse en la portabilidad entre plataformas, estas soluciones dan prioridad al acoplamiento estrecho y a la optimización dentro de un entorno.

TouchGFX para STM32

TouchGFX es un marco de interfaz gráfica de usuario desarrollado específicamente para los microcontroladores STM32. Está estrechamente integrado con el ecosistema STM32 y constituye una extensión natural del flujo de trabajo de desarrollo de ST.

Desde la perspectiva del desarrollador, TouchGFX combina una herramienta visual de diseño de interfaz de usuario con un marco C++ optimizado para el hardware STM32. Las pantallas de interfaz de usuario, las animaciones y las interacciones se crean en el diseñador, mientras que la lógica de la aplicación y la configuración del hardware se gestionan a través de STM32CubeMX y las herramientas de desarrollo asociadas.

Esta estrecha integración permite diseñar la GUI con un claro conocimiento de los recursos disponibles de la MCU, las interfaces de pantalla y las funciones de aceleración de gráficos.

Características típicas

• Marco GUI diseñado exclusivamente para STM32
• Diseñador visual de interfaz de usuario combinado con código C++ incrustado
• Flujo de trabajo alineado con las herramientas STM32Cube

TouchGFX - Herramienta de selección de placas

Si quieres saber más sobre TouchGFX, puedes encontrar más información en el sitio web de ST.

Guía GUI NXP

NXP GUI Guider representa un enfoque ligeramente diferente, pero aún centrado en el proveedor. Aunque utiliza LVGL como biblioteca gráfica subyacente, el flujo de trabajo general sigue estando estrechamente vinculado al ecosistema de NXP.

GUI Guider proporciona una interfaz de arrastrar y soltar para crear pantallas y definir el comportamiento de la interfaz de usuario. La herramienta genera código fuente basado en LVGL, que luego se integra y construye en el entorno SDK de MCUXpresso. Desde el punto de vista del usuario, la GUI se crea y gestiona como parte de una única cadena de herramientas proporcionada por el proveedor.

Aunque LVGL en sí es multiplataforma, la forma en que se utiliza aquí refleja un flujo de trabajo específico de la plataforma, optimizado para los microcontroladores NXP y su pila de software recomendada.

Características típicas

• Creación visual de la IU mediante una herramienta proporcionada por el proveedor
• LVGL utilizado como motor de renderizado
• Fuerte integración con el SDK MCUXpresso y las plataformas NXP

NXP Gui Guider - Nueva ventana de proyecto

Puedes obtener más información sobre NXP Gui Guider en el sitio web de NXP.

Otros enfoques específicos del proveedor

Se pueden encontrar conceptos similares en toda la industria de los sistemas integrados. Muchos proveedores de silicio ofrecen herramientas o marcos de interfaz gráfica de usuario que están diseñados para funcionar mejor dentro de sus propios ecosistemas de hardware y software.

Aunque las herramientas específicas difieren, la idea común sigue siendo la misma:

• la interfaz gráfica de usuario se trata como una parte nativa de la plataforma de hardware,
• y los ejemplos están alineados con una familia específica de MCU o SoC,
• la optimización y la facilidad de uso en un entorno tienen prioridad sobre la portabilidad.

Esta categoría sigue siendo una opción sólida para proyectos en los que la estandarización en un único proveedor simplifica el desarrollo y el mantenimiento a largo plazo.

Frameworks y bibliotecas GUI multiplataforma

Los marcos de interfaz gráfica de usuario multiplataforma adoptan un enfoque diferente al de las soluciones específicas de un proveedor. En lugar de estar estrechamente vinculados a un ecosistema de hardware, están diseñados para funcionar en varias plataformas con cambios mínimos o nulos en el código base de la interfaz de usuario.

En este modelo, la GUI se convierte en una capa de software distinta que se sitúa por encima de la abstracción del hardware. Siempre que se proporcionen controladores de visualización, entrada y temporización adecuados, se puede reutilizar el mismo marco en diferentes microcontroladores, procesadores, sistemas operativos e incluso generaciones de productos.

Esta categoría suele elegirse cuando

• Las plataformas de hardware pueden cambiar con el tiempo,
• múltiples variantes de producto comparten una interfaz de usuario común,
• El mantenimiento a largo plazo y la portabilidad son objetivos de diseño importantes.

En lugar de optimizar para una MCU concreta, los marcos multiplataforma dan prioridad a la coherencia y la reutilización en distintos entornos.

LVGL como marco GUI integrado multiplataforma

LVGL es uno de los marcos GUI multiplataforma más utilizados en el mundo de los sistemas embebidos. Está diseñado para funcionar en una amplia gama de sistemas, desde pequeñas MCU con recursos limitados hasta plataformas basadas en MPU que ejecutan Linux.

Desde una perspectiva arquitectónica, LVGL proporciona:

• un modelo de objetos unificado para pantallas, widgets y estilos,
• un canal de renderizado flexible que puede adaptarse a distintos controladores de pantalla,
• compatibilidad tanto con sistemas bare-metal como con sistemas basados en SO.

Como LVGL es independiente de cualquier proveedor de silicio, permite a los equipos de desarrollo mantener la misma lógica de interfaz gráfica de usuario mientras cambian la plataforma de hardware subyacente. Esto lo hace especialmente atractivo para productos que evolucionan con el tiempo o existen en múltiples configuraciones de hardware.

Características típicas

• Un único marco GUI para sistemas MCU y MPU
• Base de código portátil basada en C
• Amplia gama de pantallas, controladores táctiles y plataformas compatibles

Si quieres saber más, lee Introducción a LVGL o consulta la documentación en docs.lvgl.io

Qt y Qt Quick en sistemas embebidos

Qt representa un enfoque de alto nivel para el desarrollo de GUI embebidas y se utiliza con mayor frecuencia en sistemas basados en MPU que ejecutan Linux. En este entorno, la interfaz de usuario se trata como una capa de aplicación completa y no como una extensión ligera del firmware.

El núcleo de las modernas interfaces gráficas integradas basadas en Qt es Qt Quick, un marco de trabajo construido en torno a QML, un lenguaje declarativo para describir interfaces de usuario. Qt Quick separa la estructura visual, las animaciones y la lógica de interacción del código subyacente de la aplicación, permitiendo que la interfaz de usuario evolucione independientemente de la funcionalidad del sistema.

Este enfoque permite:

• diseños flexibles y escalado dinámico en todos los tamaños de pantalla,
• animaciones y transiciones suaves,
• renderizado acelerado por hardware mediante modernos conductos gráficos,
• una separación clara entre el diseño de la interfaz de usuario y la lógica de la aplicación.

Qt Quick es, por tanto, la principal tecnología responsable de lo que se muestra en pantalla en los sistemas embebidos contemporáneos basados en Qt.

Creación visual de IU con Qt Design Studio

Una parte esencial del flujo de trabajo de la interfaz gráfica de usuario integrada en Qt es Qt Design Studio, que sirve como herramienta principal para el diseño visual de la interfaz de usuario y la creación de prototipos.

Qt Design Studio permite a diseñadores y desarrolladores crear interfaces de usuario visualmente, definir animaciones y estados, y previsualizar interacciones sin centrarse en el código de bajo nivel de la aplicación. La herramienta genera activos QML que pueden integrarse directamente en la aplicación embebida.

Desde el punto de vista del flujo de trabajo, Qt Design Studio permite:

• composición visual de pantallas y componentes,
• diseño de animación basado en la línea de tiempo,
• iteración rápida sobre el aspecto y la sensación,
• estrecha colaboración entre los equipos de diseño y software.

Estudio de diseño Qt

En los proyectos embebidos, Qt Design Studio desempeña un papel similar al de los diseñadores de GUI específicos del fabricante que se encuentran en los ecosistemas MCU, pero está adaptado a las necesidades de los sistemas de clase Linux con capacidades gráficas más avanzadas. Puedes encontrar más detalles sobre este entorno en el sitio web de Qt.

Contexto de integración y despliegue

Las aplicaciones integradas basadas en Qt suelen desarrollarse e integrarse utilizando Qt Creator, que sirve como IDE principal para gestionar QML, C++ y las configuraciones de compilación. Aunque Qt Creator no es una herramienta de diseño de interfaz gráfica de usuario en sí, proporciona el entorno en el que los activos de interfaz de usuario creados en Qt Design Studio se combinan con la lógica de la aplicación.

En los productos comerciales embebidos, Qt se suministra a menudo utilizando Qt para la creación de dispositivos, que proporciona un tiempo de ejecución compatible, una cadena de herramientas y una infraestructura de actualización para dispositivos Linux embebidos. Este paquete simplifica el despliegue y el mantenimiento a largo plazo, pero no afecta directamente al diseño de la interfaz gráfica de usuario.

Cuando Qt es la elección correcta

Las interfaces gráficas de usuario integradas basadas en Qt suelen seleccionarse cuando:

• la arquitectura del sistema ya incluye una MPU y Linux,
• la interfaz de usuario es una parte central de la experiencia del producto,
• Se requieren modelos de interacción modernos y visuales ricos,
• el diseño y el desarrollo del software proceden en paralelo.

Aunque Qt requiere un hardware más capaz que los marcos centrados en MCU, su combinación de Qt Quick y Qt Design Studio proporciona un entorno maduro y escalable para crear interfaces de usuario integradas avanzadas.

Otras tecnologías GUI portátiles

Además de LVGL y Qt, hay otros enfoques portátiles que se utilizan en proyectos integrados, dependiendo de los requisitos del sistema y de la experiencia del equipo.

Entre ellas están:

• interfaces de usuario basadas en la web, construidas con HTML, CSS y JavaScript y visualizadas mediante un navegador integrado,
• otras bibliotecas GUI abiertas o heredadas utilizadas en productos de ciclo de vida largo,
• marcos internos personalizados desarrollados para satisfacer requisitos muy específicos.

Aunque estas soluciones difieren en su implementación, comparten un principio común:
la GUI se trata como una capa independiente de la plataforma, con detalles específicos del hardware abstraídos por debajo.

GUI con renderizado descargado a controladores gráficos externos

La tercera categoría de soluciones GUI embebidas se basa en un supuesto arquitectónico diferente al de los marcos específicos de proveedor y multiplataforma. En este enfoque, la representación gráfica no la realiza la MCU o MPU principal, sino que se delega en un controlador gráfico externo dedicado.

El procesador principal se comunica con el controlador gráfico mediante comandos de alto nivel, mientras que el propio controlador se encarga de generar la salida de la pantalla y manejar la entrada táctil. Esto separa la lógica de la aplicación de la presentación y elimina la necesidad de mantener un framebuffer en la memoria principal del sistema.

Estas arquitecturas suelen elegirse cuando

• Los recursos de la MCU están limitados o reservados para tareas en tiempo real,
• Se requiere un comportamiento de renderizado predecible y determinista,
• La complejidad del sistema debe mantenerse bajo estricto control.

En lugar de escalar el rendimiento aumentando los recursos de CPU o memoria, esta categoría se basa en la descarga por hardware de la carga de trabajo gráfica.

IHM Bridgetek basados en EVE

La familia EVE de Bridgetek es un ejemplo representativo de este enfoque. Los dispositivos EVE actúan como controladores de pantalla, gráficos y táctiles dedicados, gestionando internamente la renderización, la temporización de la pantalla y el procesamiento táctil.

En un sistema basado en EVE:

• la MCU anfitriona envía comandos de dibujo y control,
• el controlador EVE construye y ejecuta una lista de visualización,
• La entrada táctil es procesada directamente por el dispositivo EVE,
• la señal de vídeo final la genera directamente el controlador EVE.

Esta arquitectura permite que incluso MCUs relativamente pequeños manejen interfaces gráficas complejas y gestionen la interacción con el usuario sin necesidad de gestionar búferes de píxeles, implementar algoritmos táctiles o realizar operaciones de renderizado en tiempo real.

Las características típicas de las IHM basadas en EVE incluyen:

• no hay framebuffer en la memoria de la MCU,
• Manejo táctil integrado (resistivo o capacitivo, según la variante del EVE),
• Rendimiento de renderizado estable, independiente de la carga de la aplicación,
• Separación clara entre la presentación de la IU, el procesamiento táctil y la lógica de la aplicación.

Esto hace que EVE sea muy adecuado para HMI industriales clásicos, paneles de control y dispositivos en los que la interacción táctil robusta, el comportamiento determinista y la simplicidad del sistema son requisitos clave.

El Diseñador de Pantallas de EVE como parte central del flujo de trabajo de EVE

Un elemento central del ecosistema EVE de Bridgetek es EVE Screen Designer (ESE), que desempeña un papel fundamental en la creación de interfaces de usuario basadas en EVE.

El Diseñador de Pantallas de EVE es una herramienta visual e independiente del hardware que se utiliza para diseñar pantallas e interacciones completas de interfaz de usuario sin necesidad de acceder al hardware de destino final. Las pantallas se componen utilizando primitivas gráficas y widgets que se asignan directamente a los comandos de la lista de visualización de EVE.

Desde la perspectiva del flujo de trabajo de desarrollo, el Diseñador de Pantallas de EVE permite:

• la composición visual de las pantallas de la interfaz de usuario y el flujo de navegación,
• definición de las interacciones táctiles y del comportamiento en pantalla,
• previsualización y validación de la lógica de la interfaz de usuario antes de la integración del firmware,
• generación de activos de interfaz de usuario que luego son controlados por el código de la aplicación.

Como ESE refleja el modelo de renderizado subyacente de EVE, los desarrolladores trabajan con unas limitaciones bien definidas, lo que ayuda a garantizar un rendimiento predecible y evita problemas de optimización en las últimas fases.

Diseñador de Pantallas EVE

LVGL funcionando en EVE – un enfoque híbrido

Una extensión interesante del concepto EVE es el proyecto de referencia comúnmente denominado «LVGL ejecutándose en EVE». En este enfoque híbrido, LVGL se utiliza como marco GUI de alto nivel, mientras que el backend de renderizado real es manejado por el controlador EVE.

Este concepto se demuestra en un repositorio público de referencia, donde LVGL se adapta para trabajar con dispositivos Bridgetek EVE.

Desde el punto de vista arquitectónico:

• LVGL proporciona un modelo de interfaz de usuario portátil y familiar,
• EVE actúa como motor de renderizado e interfaz de visualización,
• la MCU anfitriona coordina la lógica de la aplicación y las actualizaciones de la IU.

Este modelo híbrido ilustra que las tres categorías de GUI descritas en este artículo no son límites rígidos, sino bloques de construcción arquitectónicos que pueden combinarse cuando los requisitos del proyecto lo justifiquen.

Una plataforma de visualización, múltiples enfoques GUI

Desde el punto de vista de la visualización, las diferencias arquitectónicas descritas hasta ahora no requieren necesariamente un hardware de visualización diferente.

Se puede utilizar la misma plataforma física de visualización con:

• soluciones GUI basadas en MCU específicas de cada proveedor,
• marcos multiplataforma que se ejecutan en MCUs o MPUs,
• sistemas que utilicen controladores gráficos externos,
• Plataformas basadas en Linux con interfaces de usuario Qt o basadas en web.

Mientras la interfaz de pantalla y las características eléctricas sean compatibles, la elección de la tecnología de interfaz gráfica de usuario sigue siendo una decisión a nivel de sistema, no una limitación a nivel de pantalla.

Esta flexibilidad es especialmente valiosa en productos de ciclo de vida largo y familias de productos que evolucionan con el tiempo.

Dónde encaja Riverdi en este paisaje

Riverdi se centra en proporcionar soluciones de visualización que se integren sin problemas con una amplia gama de arquitecturas de sistemas embebidos.

En lugar de estar vinculadas a un único marco de interfaz gráfica o enfoque de representación, las pantallas Riverdi están diseñadas para soportar:

• Sistemas basados en MCU que utilizan marcos GUI específicos del proveedor o multiplataforma,
• Arquitecturas basadas en EVE con renderizado descargado,
• MPU y plataformas basadas en Linux utilizando Qt o tecnologías web.

Esto permite a los equipos de desarrollo seleccionar o cambiar el enfoque de la interfaz gráfica de usuario, manteniendo la coherencia de la plataforma de visualización en diferentes proyectos y generaciones de productos.

Conclusión: elegir una arquitectura, no una limitación

El desarrollo de una interfaz gráfica de usuario integrada no se define por una única herramienta o marco, sino por un conjunto de opciones arquitectónicas que equilibran el rendimiento, la complejidad y la flexibilidad a largo plazo.

Las soluciones específicas de un proveedor proporcionan una integración estrecha y una rápida incorporación.
Los marcos multiplataforma permiten la portabilidad y la reutilización.
Los controladores gráficos externos ofrecen un rendimiento predecible con una carga mínima de la MCU.

Con una plataforma de visualización bien elegida, estos enfoques pueden coexistir y evolucionar con el tiempo, lo que permite a los equipos centrarse en la arquitectura del sistema y la experiencia del usuario en lugar de en las limitaciones técnicas.