Tutorial 2: Creando tu propia aplicación
Sigue este tutorial para aprender más sobre los fundamentos de TouchGFX. Aprenderás a añadir
imágenes a tu aplicación y a usar botones. También verás cómo usar textos y números calculados. En los
últimos pasos, escribirás código para mejorar la apariencia de la interfaz de usuario (UI User Interface)
que creaste con TouchGFX Designer. Este tutorial no presupone conocimientos de TouchGFX, pero sí
algo de experiencia en programación.
Paso 1: Configurar una imagen de fondo
En este primer paso, verás cómo insertar una imagen PNG como fondo. Pero primero, crearemos un
nuevo proyecto.
Iniciar un nuevo proyecto
Inicia un nuevo proyecto en TouchGFX Designer. Lo llamaremos "MyApplication1". El proyecto se
basa en el "STM32F746G Discovery Kit" (en mi caso el Riverdi STM32 Embedded Display, opción
de resolución 800x480).
Si tienes un Kit de evaluación STM32 diferente, consulta la lista de TouchGFX Designer para
comprobar si es compatible. Si no tiene una placa compatible, puede seleccionar " Simulator" y ejecutar
la aplicación en su ordenador Windows.
Tenga en cuenta que este tutorial se ejecuta en una pantalla con una resolución de 480x272 (en mi caso
tengo una pantalla con una resolución de 800x480). Si selecciona una plantilla de aplicación con una
resolución diferente, los gráficos no se ajustarán a la pantalla, pero debería poder completar el tutorial de
todas formas.
Creando el nuevo proyecto usando el STM32F746
Ahora que tiene un proyecto en blanco recién creado, comencemos a modificarlo.
Una aplicación TouchGFX (TouchGFX app) consta de varias pantallas. Estas pantallas contienen varios
widgets que conforman la interfaz de usuario. Cada pantalla cubre toda la pantalla, por lo que solo se
muestra una a la vez.
Lo primero que debe hacer es cambiar el nombre de la pantalla inicial a "Main", como se muestra a
continuación. Seleccione la pantalla en la lista de la izquierda (1) y cambie el nombre en el campo de
nombre de la derecha (2). También puede cambiar el nombre de la pantalla haciendo doble click o click
derecho sobre ella en la lista (1).
Cambiar el nombre de la pantalla
Insertar un fondo
Normalmente es recomendable cubrir el fondo completo de una pantalla con uno o más widgets. Por
ejemplo, puede ser un cuadro o una imagen. El fondo se verá negro si no se cubre. En esta aplicación,
usaremos una imagen.
Para poder usar una imagen en TouchGFX Designer, debemos importar el archivo. TouchGFX admite
imágenes BMP y PNG (aunque TouchGFX Designer solo admite la importación de imágenes PNG). Se
prefieren los archivos PNG a los BMP, ya que son más pequeños y admiten píxeles transparentes.
Las imágenes que usaremos en este tutorial se pueden descargar desde este enlace. Descomprima el
archivo en un directorio de su disco.
Queremos usar el archivo "[Link]" como fondo. Para importarlo:
· Seleccione la pestaña Images y haga clic en el botón "+".
· Vaya a la carpeta descomprimida y seleccione el archivo "[Link]".
· Presione "open" para importarlo.
También puedes arrastrar y soltar imágenes desde el Explorador de archivos a la pestaña de imágenes, o
incluso directamente al "Canvas" o lienzo, para importarlas a tu proyecto.
Ten en cuenta que las imágenes importadas se convertirán y compilarán en tu proyecto, ocupando así
espacio en Flash. Por lo tanto, importa solo las imágenes que necesites. Haz clic en el botón " Images" a
la izquierda (1) y luego en el botón "+" a la derecha (2) para agregar una imagen. TouchGFX Designer
abre un explorador de archivos donde puedes navegar hasta las imágenes descargadas y seleccionar el
archivo "[Link]".
La imagen [Link] es importada
Ahora sí, podemos usar la imagen en nuestra aplicación. Necesitamos un widget de imagen para eso.
· Haz click en el botón "Canvas" o lienzo, a la izquierda (1).
· Busca el widget "Image" en la lista de widgets (2)
· Selecciónalo haciendo click en él, para añadir un widget de imagen en la pantalla.
Es recomendable cambiar el nombre de los widgets con nombres descriptivos. En este caso, algo ideal
sería "backgroundImage" (3).
Añadir un widget de imagen
Tras insertar un widget, normalmente necesitamos configurar algunas de sus propiedades, como Position
o color. Las propiedades del widget seleccionado se muestran a la derecha en el TouchGFX Designer.
Los widgets en la pantalla se muestran en la vista de árbol a la izquierda (1). En este caso, nos
conformamos con la posición en el punto 0,0, pero queremos cambiar la propiedad llamada Image para
seleccionar el archivo "[Link]" previamente importado. Haga click en la propiedad Image (2)
y seleccione "[Link]".
Seleccionar el archivo de imagen importado como fondo
Hemos creado una aplicación sencilla con una sola pantalla que solo contiene una imagen de fondo que
cubre toda la interfaz de usuario.
Antes de continuar, intenta pulsar el botón "Run Simulator"o la tecla F5, para comprobar que el
proyecto compila y se ejecuta. Aún no puedes interactuar con la aplicación, ya que aún no hemos añadido
ningún widget activo.
Paso 2: Añadir botones
En este paso, añadiremos dos botones a la aplicación y usaremos diferentes archivos PNG para
personalizarlos.
Añadir los botones
· Añadir un botón a la pantalla haciendo click en el widget Button en la pestaña Widgets (1).
· Arrastrar el nuevo widget con el ratón.
· Colocar el botón en x=40, y=60. Verificar la posición en las propiedades a la derecha (2).
· Llamar al nuevo widget "buttonUp".
· Añadir otro botón en la posición x=40, y=150. Llamar a este widget "buttonDown".
El proyecto ahora se ve así:
Agregar dos botones
Puedes usar el pequeño botón arriba/abajo en las propiedades X e Y para ajustar la posición de los
widgets. También puedes seleccionar el widget de botón (haciendo click en él en el "canvas" o lienzo) y
ajustar su posición con las flechas del teclado.
Cambiar la apariencia
Ahora cambiaremos la apariencia de los botones. Un botón se compone de dos imágenes. Una imagen se
muestra al presionar el botón y otra cuando se suelta. La mayoría de los widgets incluyen un conjunto de
estilos predefinidos, que consiste básicamente en valores para ciertas propiedades del widget que
describen una apariencia particular. Estos estilos son útiles para la creación rápida de prototipos, pero
normalmente se reemplazan al crear una aplicación real.
Ve a la pestaña Images como en el paso anterior y haz click en el icono "+" en la esquina superior
derecha para importar algunas imágenes. Esta vez importe las cuatro imágenes:
"button_down_pressed.png", "button_down_released.png", "button_up_pressed.png" y
"button_up_released.png".
Añadiendo cuatro imágenes de botón
Vemos que tenemos un total de siete imágenes en nuestro proyecto, a pesar de que solo importamos
cinco. Las dos imágenes adicionales son las azules que se usan en los botones por defecto. Estas se
eliminarán automáticamente cuando ya no se usen.
Vuelve al "Canvas" o lienzo y selecciona el botón "buttonUp". Haz click en la propiedad "Released
Image" (1), luego en "Project" para mostrar tus imagenes (2) y, finalmente, selecciona la imagen
correcta (3). Para el botón "buttonUp", selecciona "button_up_released.png" para la propiedad Released
Image (imagen liberada). Selecciona "button_up_pressed.png" como propiedad Pressed Image
(imagen presionada).
Configuración de las imágenes de los botones
Puedes ver inmediatamente el aspecto del botón en el lienzo de TouchGFX Designer.
Configuración de bitmaps (mapas de bits) para los botones
Para "buttonDown", seleccione "button_down_released.png" para la Released Image (imagen liberada) y
"button_down_pressed.png" para la Pressed Image (imagen presionada).
Ha terminado de configurar los botones. Haga click en "Run Simulator" o la tecla F5, para probar la
aplicación.
Pruebe ambos botones para verificar que estén configurados correctamente.
Ejecución del simulador
Consejo: La mayoría de los widgets en TouchGFX usan imágenes para definir su tamaño, lo que
significa que no se pueden redimensionar directamente. Esto se hace por razones de rendimiento
(consulte "General UI Component Performance" o Rendimiento general de los componentes de la interfaz
de usuario). Si deseas cambiar el tamaño de estos widgets, como por ejemplo los botones de este tutorial,
deberás crear un nuevo conjunto de imágenes para los botones y usarlas como Image Released (imágen
liberada) y como Image Pressed (imagen presionada).
Paso 3: Añadir texto
En este paso, añadiremos un widget grande de área de texto TextArea a la aplicación.
Todo el texto se muestra mediante un widget TextArea, pero antes de añadirlo, añadiremos otra imagen
para mejorar el fondo del texto.
Fondo de texto
· Importa otro archivo de imagen, "counter_box.png".
· Inserta un nuevo widget de imagen.
· Nómbralo "textBackground".
· Colócalo en x=250, y=59.
· Establece la propiedad de Image en "counter_box".
Fondo añadido para el texto
Añadiendo el texto
Ahora estamos listos para añadir el widget TextArea. Haz click en el icono TextArea en el menú
desplegable Widgets / Miscellaneous. Cambia el nombre del widget a "textCounter" y muévelo a la
posición x=250, y=90. Queremos que el widget muestre texto grande, así que desmarca la propiedad
Auto-size (Tamaño automático) y establece el tamaño en un ancho (width) fijo de 152 y un alto (height)
de 90.
Se agregó un área de texto
El color predeterminado del widget TextArea es el negro, que queda bastante oscuro en nuestro fondo.
Seleccione la propiedad Color de "textCounter" y cámbielo a blanco.
Cambiar el color del texto
Cambiar la tipografía del texto
Queremos que el texto sea más grande. Para lograrlo, cambia la tipografía. Una tipografía define la fuente
(p. ej., Verdana), el tamaño y la alineación (izquierda, derecha o centrada).
Selecciona la pestaña Texts en la esquina superior izquierda de TouchGFX Designer (1), haz click en
Typographies (2) y cambia el tamaño de la tipografía "Default" (Predeterminada) a 80 (3).
Cambiar el tamaño del texto
Al volver a la pantalla (haciendo click en la pestaña "Canvas" en la esquina superior izquierda), vemos
que el texto ahora es mucho más grande. De hecho, no podemos leer el texto completo de "New Text".
Haga click en el icono de centrado debajo de la propiedad Alignment (Alineación) para centrar el texto
(1).
Cambiar la alineación del texto
Usar un texto comodín (Wildcard Text)
Queremos que el área de texto muestre un número que podamos modificar con los botones. Para ello,
debemos cambiar el texto para que incluya un wildcard o comodín. Un wildcard o comodín es un
marcador ("<d>") en el texto que puede sustituirse por algo más, como un número, en tiempo de
ejecución. Solo queremos mostrar un número, así que cambiaremos el texto a " <d>". En otros proyectos,
se pueden combinar las partes dinámicas con un texto fijo, por ejemplo, "Temperature: <temp> °C".
Nota: El texto dentro de los corchetes <...> es opcional. Puede usarlo para indicar a los implementadores
o traductores qué tipo de información se insertará en el comodín o dejarlo vacío.
Cambie la propiedad Text en el campo Translation a <d> (1), haga click en "Wildcard 1" y luego + (2),
establezca el initial value (valor inicial) en "0" y marque la opción "Use wildcard buffer" (Usar búfer de
comodín). El ID lo deja como "Auto-generated".
Configurar el texto wildcard o comodín
Haga click en el botón "Run Simulator" o la tecla F5, para probar la aplicación.
Ejecución del simulador
Lectura adicional: Para obtener más información sobre el uso de textos y fuentes, lea la página Texts
and Fonts.
Paso 4: Añadir código
Con TouchGFX Designer es fácil vincular acciones a un botón mediante una interacción. Una
interacción vincula un Trigger o disparador (p. ej., pulsar un botón) a una acción (p. ej., ejecutar código o
mover un elemento).
Seleccione la pestaña Interactions (interacciones) en la esquina superior derecha (1) y haga click en el
botón "+" para crear una nueva interacción.
Agregando interacciones
Se implementarán dos interacciones, una por cada botón. Ambas ejecutarán un método C++ en la pantalla
actual.
· Cambie la propiedad del disparador "Trigger" a "Button is clicked" (Botón pulsado).
· Establezca la propiedad "Choose clicked source" (Elegir origen pulsado) en "buttonUp".
· Cambie la propiedad "Action" a "Call new virtual function" (Llamar nueva función virtual).
· En la propiedad "Function Name", escriba "buttonUpClicked".
· También debe asignarle un nombre descriptivo a la interacción, para que pueda reconocerla más
adelante. Para ello, en la propiedad "Interaction Name"", se ha escrito "Up".
Configurar la interacción del botón
Cree una interacción similar con "buttonDown" como "clicked source":
· Haga clic en "+" para iniciar una nueva interacción.
· Cambie la propiedad "Trigger" a "Button is clicked".
· Establezca la propiedad "Choose clicked source" en "buttonDown".
· Cambie la propiedad "Action" a "Call new virtual function".
· En "Function Name, escriba "buttonDownClicked".
· También debe asignar un nombre descriptivo a la interacción para que pueda reconocerla más
adelante. Para ello, en la propiedad "Interaction Name"", se ha escrito "Down".
Si hace click en el botón "Generate Code" (o la tecla F4) o en el botón "Run Simulator" (o la tecla F5) ,
TouchGFX Designer actualizará el código generado con la información introducida en las interacciones
recién creadas. Esto significa que creará dos nuevas funciones virtuales en la clase ViewBase para esta
pantalla.
Investiguemos esto con más detalle y veamos cómo podemos ejecutar nuestro propio código. Haga click
en "Generate Code" (o la tecla F4), en la esquina inferior derecha y luego en el botón "Files" en la
esquina inferior izquierda. Esto abrirá un Explorador de archivos en la carpeta de su aplicación. Vaya a la
carpeta:
MyApplication1/TouchGFX/generated/gui_generated/include/gui_generated/main_screen/
y abra el archivo [Link]. Si lo desea, también puede abrir uno de los archivos del proyecto
y buscarlo en su IDE:
Nota: No todos los archivos del proyecto están presentes por defecto. Para cambiar la cadena de
herramientas del proyecto, debe usar la herramienta STM32CubeMX. Para más información, consulte la
página Using IDEs with TouchGFX (Uso de IDE con TouchGFX).
Los nuevos métodos virtuales se encuentran en la parte pública de la clase MainViewBase. Los métodos
generados tienen implementaciones vacías. La intención es que el programador implemente estos
métodos en la subclase MainView.
Implementación de los métodos virtuales
Ahora queda implementar estos dos métodos para cambiar el valor del contador cuando el usuario pulsa
los botones. Para ello, vuelva a declarar los métodos en la clase MainView. Esta clase se encuentra en:
MyApplication1/TouchGFX/gui/include/gui/main_screen/[Link]
Abra este archivo e inserte las dos declaraciones de función en la clase:
La siguiente tarea consiste en implementar los dos métodos añadiendo la implementación al archivo .cpp.
Este archivo se encuentra en:
MyApplication1/TouchGFX/gui/src/main_screen/[Link]
En la siguiente implementación, hemos añadido llamadas a touchgfx_printf. Esta función es útil para
imprimir líneas de texto al ejecutar el simulador. Para usar esta función, es necesario incluir [Link]. Al
ejecutarse en el destino, las líneas no tienen efecto.
Haga clic de nuevo en "Run Simulator" (o la tecla F5) en TouchGFX Designer para ejecutar el nuevo
código. Haga click en los botones un par de veces para comprobar que las interacciones y los métodos
funcionan correctamente:
Ejecución del simulador con impresión
Actualización del valor del contador
La última tarea es escribir código C++ en los nuevos métodos para actualizar el valor del contador cuando
el usuario presiona el botón. Para ello, primero añadimos una nueva variable entera, "counter" (contador),
a la clase MainView:
En el método buttonUpClicked, incrementamos el valor del contador. El nuevo valor se convierte en una
cadena y se copia al búfer de wildcard o comodín que configuramos para el área de texto TextArea en un
paso anterior:
Los widgets TextArea usan Unicode, por lo que debemos usar una función especial snprintf que admite
la escritura en búferes Unicode.
Tenga en cuenta que llamamos a invalidate() en el widget textCounter después de actualizarlo. Esto
garantiza que el área de texto TextArea se redibuje después de actualizar el valor del contador.
Necesitamos un paso más antes de finalizar la aplicación. TouchGFX solo incluye los caracteres
necesarios, por lo que debemos indicarle a TouchGFX Designer que incluya los caracteres del 0 al 9 en
la tipografía "Default" (Predeterminada). Para ello, vuelva a TouchGFX Designer y haga click en la
pestaña "Texts" y luego en la pestaña "Typographies". En la columna "Wildcard Ranges" (Rangos de
wildcards o comodines) de la tipografía "Default", agregue el rango "0-9" (1).
Configuración del rango de comodines para la tipografía predeterminada
Ahora haga click de nuevo en "Run Simulator" o la tecla F5, y pulse el botón de flecha arriba varias
veces:
Ejecución del simulador
En su estado actual, el programa no gestiona correctamente los números negativos. Esto se puede
solucionar insertando una condición de protección (o guard clause) en la función buttonDownClicked()
para garantizar que el contador no baje de 0 o añadiendo el carácter "-" a la tipografía utilizada. Esto se
puede lograr simplemente añadiendo un signo menos ("-") en la celda "Wildcard Characters"
(Caracteres comodín) de la tipografía Default o predeterminada.
En programación, una "condición de protección" (o guard clause, en inglés) es una verificación que se
hace al inicio de una función o bloque de código para asegurarse de que se cumplen ciertas condiciones
antes de continuar con la ejecución.
En nuestro caso, se refiere a añadir una comprobación en la función buttonDownClicked(), ubicado en el
archivo fuente [Link] para impedir que el contador baje de 0. Por ejemplo, se podría escribir
algo como:
if (counter > 0)
{
counter--;
}
Esto garantiza que el valor nunca sea negativo, protegiendo así el estado del programa.
Lecturas adicionales: Lea más sobre textos en la página "Textos y fuentes".