TouchGFX es un marco de desarrollo de interfaces gráficas de usuario (GUI) proporcionado por STMicroelectronics, diseñado para el desarrollo de sistemas embebidos dirigido a chips microcontroladores (MCU) STM32. Ofrece la capacidad de diseñar pantallas contextuales de objetos, ayudando a los usuarios de STM MCU a construir páginas de interfaz de usuario (UI) suaves, atractivas y diversas.

El siguiente ejemplo utiliza la versión 4.23.2 de TouchGFX como referencia:

Figura 1: Pantalla de inicio de TouchGFX mostrando opciones como Example, Demo, Create Board chip, etc.

Resumen de la Estructura de TouchGFX

La arquitectura del programa TouchGFX adopta el patrón Modelo-Vista-Presentador (MVP), como se ilustra en la Figura 2, con las siguientes ventajas:

Separación de responsabilidades (Separation of Concerns): El mantenimiento del código varía en diferentes etapas, facilitando a los usuarios escribir interfaces y comunicarse con capas inferiores, resultando en estructuras claras y comprensibles con alta reutilización.

Pruebas unitarias (Unit Testing): La vista de la capa superior puede interactuar directamente con el código generado por GFX, facilitando la validación independiente de los resultados.

Figura 2: Diagrama de relaciones de los componentes de TouchGFX (MVP)

Vista: La página principal de visualización generada por GFX, diseñada para la representación de la interfaz. Normalmente, actúa como el extremo pasivo de la capa superior del MVP, manejando toda la información de diseño para la interfaz UI y mostrando las pantallas correspondientes según las propiedades de los objetos usados.

Modelo: Sirve como el núcleo para procesar y enviar datos. Algunos paquetes de comunicación son evaluados o procesados y luego enviados a la Vista a través del Presentador para cambiar el contenido mostrado y el estado del objeto actual.

Presentador: Actúa como el canal de comunicación entre la Vista y el Modelo, permitiendo solicitudes de datos desde el Modelo para que las funciones puedan ser reutilizadas.

Debido a la filosofía de diseño del firmware (FW), que enfatiza al Modelo como el centro de procesamiento de comandos, se puede ilustrar un diagrama (Figura 3).

A través del procesamiento a nivel inferior para diferentes interfaces (por ejemplo, CAN bus, RS485, UART, Bluetooth, Wi-Fi), los datos se envían al Modelo para comunicación y luego se retransmiten a la Vista mediante el Presentador, logrando el cambio de estado del objeto.

Figura 3: Comunicación entre múltiples interfaces y la arquitectura MVP

Dos ejemplos pueden ilustrar el método de intercambio de datos:

Ejemplo 1: Supongamos que el Host envía un comando CANopen al Dispositivo (Figura 4).

CANopen recibe paquetes a través del puerto IF, posiblemente descifra los datos del paquete mediante la tarea CAN y luego reenvía el contenido al Modelo. Después de que el Modelo actualiza la base de datos y ejecuta el comando correspondiente, envía el resultado de vuelta a la Vista a través del Presentador para actualizar la página.

Figura 4: Ejemplo de Host enviando un comando

Ejemplo 2: Si un usuario toca un objeto UI en el dispositivo, un paquete de evento táctil se reporta de vuelta al Host (Figura 5).

Cuando un usuario hace clic en un objeto interactivo, la Vista genera un evento de clic, que luego es pasado al Modelo mediante un Evento de Usuario a través del Presentador. El Modelo responde basado en la interfaz actualmente usada, enviando el código de vuelta a la tarea CAN y finalmente envía un paquete TX para notificar al Host.

Figura 5: Evento táctil del usuario enviado de vuelta al Host

Resumen del Conocimiento sobre la Página Vista

En la interfaz del software TouchGFX, diseñar N páginas generará N conjuntos correspondientes de Vista y Presentador, pero solo un Modelo controlará todas las páginas de vista.

Cuando un usuario diseña un escenario de UI, incluyendo gráficos, apariencia, coordenadas y visualización de texto, al presionar "Generar Código" se producirá el código en la página vista nombrada correspondiente.

Las carpetas generadas se dividen en ..\generated\ y ..\gui\, donde ..\generated\ contiene el código básico para la visualización de la página diseñada, y ..\gui\ contiene la lógica para las interacciones de los objetos.

Podemos usar esta información para colocar objetos en sus respectivas páginas y consultar el código utilizable.

A continuación, una explicación sencilla paso a paso de la descripción anterior:

Por ejemplo:

1. Abrir un proyecto en blanco y presionar "Crear Nuevo" para establecer un proyecto (Figura 6).

Figura 6: Pantalla de apertura de proyecto TouchGFX

2. En TouchGFX, estará disponible una pantalla por defecto llamada Screen1. Añadimos un nuevo objeto botón, seleccionamos la imagen deseada y ejecutamos "Generar Código" (Figura 7).

Figura 7: Demostración de creación de botón

3. Luego, al cambiar a la ruta del proyecto, se mostrarán dos nuevas carpetas: gui y generated (Figura 8):

Figura 8: Contenido de la carpeta del proyecto

La carpeta generated contiene el código básico relacionado con los componentes de Screen1, que es generado automáticamente por TouchGFX y no puede modificarse directamente. Si cambia el estado del objeto en la página y se reconstruye el código, el código en la carpeta generated se actualizará.

De manera similar, después de ejecutar "Generar Código", GFX creará Screen1ViewBase.cpp en ..\generated\gui_generated\src\screen1_screen (Figura 9).

Figura 9: Ubicación de Screen1ViewBase.cpp

Si abrimos Screen1ViewBase.cpp con Notepad++ (Figura 10), podemos ver las propiedades y contenido relacionados con la página Screen1 y los datos del botón:

- Establecer coordenadas del botón:
button1.setXY(63, 109);

- Establecer ID de imagen del botón:
button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID),TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));

- Añadir el objeto botón a la página:
Add(button1);

Figura 10: Contenido de Screen1ViewBase.cpp

El código con el nombre XXXBase.cpp se reconstruirá durante "Generar Código", y cualquier cambio en los datos de atributos se reflejará. Por lo tanto, si ajustamos la posición, imagen, etc. del botón, las funciones también pueden cambiar.

En cuanto a la carpeta gui, es donde TouchGFX permite a los usuarios escribir la lógica del programa (Figura 8). Por ello, aquí también se construye la arquitectura MVP (Figuras 11 y 12), permitiéndonos planificar nuestros propios métodos de comunicación de código MVP para realizar las directrices de diseño UI.

Figura 11: Ruta del Modelo

Figura 12: Rutas del Presentador y Vista

4. Diseño de un Escenario Simple para Explicación del Diseño GUI/Generado

- Escribir un control lógico para la interacción entre un botón y un texto.
- Cuando se haga clic una vez en el botón, el valor del texto aumentará.

A continuación se muestra cómo implementar esta funcionalidad:

Paso 1:

Arrastrar dos objetos, un botón (button1) y un área de texto (textArea1) (Figura 13).

Figura 13: Proyecto de diseño UI con control de botón

Paso 2:

Seleccionar la acción de interacción en el lado derecho, agregar un Evento de clic de botón y elegir llamar a la función add_number cuando se ejecute esta acción (Figura 14).

Figura 14: Añadiendo Evento de Interacción1

Paso 3:

Observar Screen1ViewBase.cpp (Figura 15) para encontrar el código de propiedades relevantes para crear button1 y textArea1.

Debido a las interacciones recién añadidas, se genera buttonCallbackHandler para manejar el evento táctil de button1. Cuando se hace clic, llamará a la función llamada add_number mediante la función de devolución de llamada.

Figura 15: Screen1ViewBase.cpp

Contenido de Screen1ViewBase.hpp (Figura 16).

Figura 16: Contenido de Screen1ViewBase.hpp

Paso 4:

En la sección gui, añadir Screen1View.cpp y Screen1View.hpp.
Agregar el programa add_number para utilizar el parámetro count para la acumulación (Figuras 17 y 18).

Usar Unicode: snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%02d", count); para actualizar el conteo en textArea1.

Luego usar textArea1.invalidate() para refrescar los datos.

Figura 17: Contenido de Screen1View.cpp

Figura 18: Contenido de Screen1View.hpp

Después de ejecutar el simulador, se puede confirmar que cada vez que se toca button1, textArea1 (valor count) comenzará a aumentar desde 0 (Figura 19).

Figura 19: Resultado de la simulación

Esto confirma que la definición de las propiedades de los objetos se establece generalmente en la ruta generada, mientras que el usuario escribe el código de ejecución lógica en la sección gui.

Ejemplos de Propiedades de Objetos en TouchGFX y Builder

El Smart Display GUI Builder proporcionado por Winstar es una herramienta de diseño de interfaces para UI/UX con funcionalidad de arrastrar y soltar, que ofrece a los clientes un servicio de desarrollo sin código, adaptado para el rápido desarrollo y diseño de productos basados en STM MCU. Construido como una extensión del marco TouchGFX, el GUI Builder incorpora las funcionalidades originales de los widgets de TouchGFX, siendo su principal distinción el soporte para múltiples interfaces de sistema y protocolos de comunicación. Esto permite a los usuarios observar directamente cómo los comandos afectan el control y los cambios de los widgets.

Aquí está la introducción al Builder:
https://www.winstar.com.tw/es/video/play/142.html

La filosofía de diseño de Smartdisplay está relacionada con la funcionalidad de la configuración de TouchGFX, incluyendo el firmware escrito utilizando STM32 MCU como base de MVP. Los objetos internos están diseñados utilizando elementos existentes combinados con lógica.

Por lo tanto, entre los objetos abiertos por el GUI Builder, algunos elementos pueden implementarse utilizando los componentes UI existentes de TouchGFX para lograr los resultados de visualización correspondientes.

*Segmento de explicación complementaria

Aquí un ejemplo sencillo usando el control deslizante (slider) del Builder (Figura 20):

Figura 20: Página de propiedades del slider en Builder

Las propiedades del Slider en Builder son las siguientes:

Size:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Pos: 0

 

Estos parámetros corresponden a la configuración del componente Slider en TouchGFX (Figura 21).

Figura 21: Propiedades del Slider en TouchGFX

Las propiedades del Slider en TouchGFX son:

Location:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Y: 0

Los usuarios pueden ajustar el valor Start en GFX para simular resultados en Builder (Figura 22).
Si el valor se establece en 100, puede simular el mismo resultado en Builder (Figura 23).

Figura 22: Ajustando Start = 100 en TouchGFX

Figura 23: Ajustando valor de prueba = 100 en Builder

Si observamos Screen1ViewBase.cpp generado por GFX (Figura 24):

Figura 24: Función en Screen1ViewBase.cpp

Podemos entender cómo los parámetros mencionados pueden usarse y modificarse en el código. Estos números están directamente relacionados con el diseño del proyecto GFX. Cuando Builder sube el proyecto, restablece los parámetros iniciales para el Slider del dispositivo.

Si el Host envía un comando para cambiar el valor del Slider, ejecutará slider1.setValue() en la vista para completar el cambio del objeto (Figura 25).

Figura 25: Host envía comando al slider

Esta es una explicación sencilla de la relación entre los objetos de Builder y TouchGFX.

Extensiones Futuras y Evaluación de Desarrollo de Objetos Builder

Con la reciente actualización a TouchGFX versión 4.24.0, hay nuevos objetos y funcionalidades disponibles. Si necesitamos evaluar si Builder puede integrarse, primero podemos probar los ejemplos por defecto de GFX para demos e investigación (Figura 26):

Figura 26: Varios proyectos de ejemplo

 

Desde la versión 4.24.0 se soportan nuevos objetos como el código QR, podemos evaluar los parámetros y funciones que pueden usarse si Builder se integra.

Ejemplo usando Código QR:

1. Seleccionar BlankUI.
2. Arrastrar el contenedor de código QR.
3. Observar las propiedades configurables (Figura 27):
Location: (X, Y)
Configuration:
- QRVersion
- Scale
- Text
- Error Correction Code…

Figura 27: Pantalla de propiedades del código QR

Estos parámetros del código QR pueden consultarse en la página oficial (Figura 28).

Figura 28: Explicación en sitio oficial

En la función generada de Screen1ViewBase.cpp, confirmamos los parámetros y configuraciones disponibles (Figura 29):

1. Establecer coordenadas: qrCode1.setXY(208, 224);
2. Establecer versión del código QR: qrCode1.setQRCodeVersion(3);
3. Establecer escala QR: qrCode1.setScale(5);
4. Ingresar texto para generar el código QR:
qrCode1.convertStringToQRCode("https://www.winstar.com.tw/zh-tw/");

Figura 29: Código generado en Screen1ViewBase.cpp

Si la función de código QR se integra en Builder en el futuro, permitirá a los usuarios ajustar estos parámetros.

Referencias:

https://support.touchgfx.com/docs/category/introduction
https://www.eettaiwan.com/20200203np21/
https://en.wikipedia.org/wiki/STMicroelectronics
https://www.winstar.com.tw/es/video/smartdisplay.html