Cosas de Paco Satué

Iconografía en Velneo con fuentes de Iconos

En nuestras aplicaciones utilizamos recursos gráficos para representar y transmitir al usuario determinada información de una manera esquemática o conceptual.

Normalmente utilizamos el icono como elemento gráfico principal de la iconografía de la aplicación.

La iconografía es un conjunto de imágenes visuales y símbolos que ayudan a los usuarios a comprender y moverse por la aplicación. Los iconos se usan en toda la interfaz de usuario como metáforas visuales que representan un concepto, una acción o un estado.

En Velneo solo podemos gestionar los iconos de la aplicación de dos maneras, una con el objeto Dibujo y otra usando una fuente de Iconos.

Las fuentes de Iconos (icon fonts) se implementan por medio de una tipografía especial, y en lugar de los típicos caracteres que representan letras, lo hacen representando imágenes que se colocarán como cualquiera texto, indicando la fuente de ese elemento.

A diferencia del objeto Dibujo de Velneo, que solo puede gestionar imágenes estáticas de mapas de bits, las fuentes de Iconos contienen iconos vectoriales y por lo tanto son escalables, no pierden su calidad y sus archivos son más pequeños que los de los iconos en mapa de bits.

Fuentes de Iconos en Velneo

Las fuentes de Iconos deben estar instaladas en el equipo donde se ejecuta vClient y por lo tanto dependen del sistema operativo.

Es importante tener en cuenta que en vDevelop solo se podrán usar las fuentes de Iconos en aquellos controles que tengan la propiedad Fuente.
En el editor de fórmulas muchos iconos aparecerán como un carácter desconocido, sin embargo en la Vista previa se mostrarán correctamente.

En Windows 11 disponemos de la fuente Segoe Fluent Icons que ha sustituido a la fuente Segoe MDL2 Assets de Windows 10, y a su vez ésta sustituyó a la fuente Segoe UI Symbol de Windows 8/8.1. Hay otras fuentes con iconos como Wingdings o Webdings

La fuente Segoe Fluent Icons de Microsoft proporciona más de 1.400 iconos. La tecnología de visualización de fuentes de Windows permite que estos iconos se vean nítidos en cualquier pantalla, en cualquier resolución y en cualquier tamaño.

La imagen siguiente muestra la Extensión de vDevelop realizada con QML que permite buscar y seleccionar fácilmente cualquier icono de la fuente.

Puedes comprobar su funcionamiento en la aplicación Mis Módulos QML con Velneo a través de la VRL: vatps://PRUEBAS:pruebas@c3.velneo.com:10190/0PS_MiQML_iapp

PS 11 ListaSegoeFluentIcons

Iconos en el control Texto estático

Usando el control Texto estático en los formularios se pueden usar fácilmente los iconos de la fuente Segoe Fluent. Las ventajas son varias:

El icono se inserta y manipula como cualquier otro carácter.
Se puede cambiar el tamaño del icono sin perder calidad.
El color del icono es un atributo que podemos variar dinámicamente mediante CSS o con el subobjeto Condición de estilo de la Rejilla.

En vDevelop existe la función getUnicodeChar(código unicode) que nos permite insertar el icono en el editor de fórmulas conociendo el código Unicode.

Usaremos el siguiente CSS para mostrar correctamente el Texto estático con fuentes de Iconos

/* La fuente Segoe Fluent Icons contiene la lista de iconos para Windows 11 */
/* https://learn.microsoft.com/es-es/windows/apps/design/style/segoe-fluent-icons-font */
/* Segoe UI Symbol contiene iconos heredados de Windows 8 */
/* 20px va bien para Segoe Fluent Icons */
/* 40px va bien para Segoe UI Symbol */
QLabel[objectName^=TXT_ICON_20_] {
	font-family: Segoe UI Symbol, Segoe Fluent Icons;
	font-size: 20px;
	font-weight: normal;
	color: DarkSlateGray;
}
QLabel[objectName^=TXT_ICON_40_] {
	font-family: Segoe UI Symbol, Segoe Fluent Icons;
	font-size: 40px;
	font-weight: normal;
	color: SteelBlue;
}

Veamos algunos ejemplos del uso de fuentes de Iconos en el control Texto estático.

Para facilitar la selección de la fuente de Iconos en los controles de Velneo es conveniente definir dichas fuentes en la pestaña Fuentes de las Propiedades del proyecto.

Puedes ver estos ejemplos del uso de fuentes de Iconos con el Recurso CSS PS-Base Label Iconos de la aplicación del cloud MisCSS.

 Control Check

Podemos simular el comportamiento de un control Check con los estados On/Off utilizando los iconos  y  en sendos controles de Texto estático. Colocamos los dos controles superpuestos en un layout de tipo grid y establecemos la propiedad "Condición de visible" del control Texto estático que tiene el icono .

Pasa el ratón por encima de las imágenes para ver en acción los ejemplos.

- Iconos Segoe Fluent Icons con unicode 59193  y 59198 
- Identificadores TXT_ICON_20_0 Y TXT_ICON_20_1

◔ Mostrar un porcentaje

Con 5 iconos podemos mostrar un valor porcentual como un sector circular relleno dentro de un círculo. Los iconos pertenecen a la colección de la fuente Segoe UI Symbol.

Usaremos la siguiente fórmula en el contenido del control Texto estático.
choose(NPORCEN<25, "○", choose(NPORCEN<50, "◔", choose(NPORCEN<75, "◑", choose(NPORCEN<100, "◕", "●"))))

- Iconos Segoe UI Symbol con unicode 9675 ○, 9684 ◔, 9681 ◑, 9685 ◕ y 9679 ●
- Identificador TXT_ICON_40_PIE

 Cambio de color con el valor

En este ejemplo el icono cambia de color dependiendo del valor seleccionado. La fórmula en el contenido del control Texto estático es getUnicodeChar(62962 + NPILA) donde NPILA toma valores de 0 a 10. Cada vez que cambia el valor de NPILA se ejecuta un manejador que establece el siguiente código CSS al control de Texto estático:

If ( NPILA > 7 )
	Interfaz: Establecer hoja de estilo CSS ( TXT_ICON_40_PILA, 
	    "QLabel[objectName^=TXT_ICON_40_] {
	        font-weight: bold;
	        color: Green;
	    }"
 )
Else if ( NPILA < 4 )
	Interfaz: Establecer hoja de estilo CSS ( TXT_ICON_40_PILA, 
	    "QLabel[objectName^=TXT_ICON_40_] {
	        font-weight: bold;
	        color: Red;
	    }"
 )
Else
	Interfaz: Establecer hoja de estilo CSS ( TXT_ICON_40_PILA, 
	    "QLabel[objectName^=TXT_ICON_40_] {
	        font-weight: normal;
	        color: Chocolate;
	    }"
 )

PS 11 IconosPila

- 11 iconos Segoe Fluent Icons con unicode 62962 a 62972 
- Contenido getUnicodeChar(62962 + NPILA)
- Identificador TXT_ICON_40_PILA

 Animación del icono

Con un conjunto de iconos es sencillo animar el control de Texto estático usando el Timer.
La variable NANI varía de 0 a 3 en cada evento TIMER.

- Iconos 9692 a 9695 ◜◝◞◟
Contenido getUnicodeChar(9692 + NANI)
- Iconos 59462, 59463, 59470 y 59471 
Contenido mid("", NANI, 1)
- Icono 60435 
> Contenido fillString("", NANI+1)

 Iconos en las columnas de la Rejilla

Una aplicación que seguramente resulta interesante es el uso de las fuentes de Iconos en las columnas de la Rejilla.

En la siguiente imagen se muestran varios ejemplos del uso de iconografía con fuentes de Iconos para mostrar información al usuario.

PS 11 RejillaIconos

Aquí podemos comprobar las ventajas de usar las fuentes de Iconos. Por un lado tenemos la posibilidad de usar varios iconos en la celda de la columna y por otro disponemos de la opción de cambiar el color de los iconos.

Columna	Fórmula del Contenido	Condición de Estilo
Iconos	mid("",#ESTADO,1)
Bandera	choose(#BANDERA, "", "")	Color Rojo
Check	choose(#CHECK, "", "")
Puntos	fillString("", #PUNTOS )
Barra	fillString("█", #PEDIDOS )	Color más claro
Stock	leftJustified(fillString("▬", #STOCK), 8, "▭")	Color Rojo

Conclusiones

Normalmente la gestión de la iconografía de nuestras aplicaciones la llevaremos a cabo usando los objetos Dibujo y las Tablas estáticas del proyecto.

Como un complemento, en este artículo hemos visto que es posible añadir dinamismo gráfico a nuestras aplicaciones si usamos las fuentes de Iconos, disponibles de manera inmediata en el sistema operativo.

Cosas de Paco Satué