A diferencia de una PC o una tableta, la mayoría de los dispositivos integrados tienen un espacio de memoria limitado para almacenar contenido gráfico. Estas limitaciones de hardware hacen que el diseño de una interfaz gráfica de usuario (GUI) de alta calidad sea una tarea desafiante para los diseñadores. En este artículo de la serie de blogs para desarrolladores de Altia, proporcionaremos algunas técnicas de diseño y diseños de muestra creados con Altia Design, nuestro editor de GUI, para demostrar cómo crear un uso eficiente de fuentes en las GUI de su dispositivo integrado.

Métodos de manejo de fuentes.

Altia maneja las fuentes de dos maneras diferentes. Con el primer método, los glifos de fuente se pueden generar y guardar en un archivo reflash en el momento de generar el código. Con el segundo método, puede generar código con fuentes en tiempo de ejecución que generarán glifos de fuente a medida que se necesiten durante el tiempo de ejecución.

Primero, hablaremos sobre la opción más simple de generar todos los glifos de fuente necesarios en el diseño en la generación de código. Estos caracteres de fuente generados también se denominan glifos renderizados previamente. Cada fuente utilizada en su diseño requiere que su catálogo completo de caracteres se agregue a los activos de actualización. Además, cada tamaño de cada fuente requiere que estos datos se agreguen a los datos de actualización. Es lo mismo para cada negrita en todos los tamaños y en todas las fuentes, para cada cursiva en todos los tamaños y en todas las fuentes... te haces una idea.

Al mirar su carpeta reflash/fonts, podrá ver la cantidad, los tamaños y las variaciones de las fuentes que está utilizando en su diseño. En la imagen a continuación, puede ver que este diseño utiliza Arial Bold Italic 18, Arial Bold 17, Arial Italic 16, Arial Italic 17 y Arial Normal 17.

archivos de fuentes

Nuestro segundo método de manejo de fuentes, utilizando fuentes en tiempo de ejecución, genera y carga en su hardware el código fuente para el motor de fuentes utilizado en el diseño. Luego, cuando se necesita un carácter, el glifo de la fuente se genera a partir de este código. Esto puede ser especialmente beneficioso si utiliza idiomas como el chino, donde se requieren decenas de miles de caracteres. En lugar de cargar cada uno de los caracteres que pueda necesitar en su GUI de producción, cada uno se genera según sea necesario.

Entonces, ¿qué método eliges? Honestamente, depende. Por lo general, se recomiendan las fuentes en tiempo de ejecución si el tamaño del motor de fuentes y el código del modelador es menor que el tamaño de los archivos de fuentes de glifos generados. Si son iguales, recomendamos usar los glifos prerenderizados (el primer método), porque los glifos prerenderizados no tienen los mismos requisitos de CPU y RAM que un motor de fuentes en tiempo de ejecución. Además, en algunos casos especiales cuando se utiliza la canalización de representación correcta, los glifos prerenderizados tendrán formatos de codificación y compresión más pequeños que la opción de tiempo de ejecución.

rango de fuentes

Otra excelente manera de ahorrar espacio en su hardware es modificar su archivo .gen para que la generación de código cargue solo ciertos rangos de fuentes. Si tiene un diseño que usa un solo tamaño de fuente o escribe solo una vez en una pantalla de inicio, puede programar su software para cargar solo la sección de letras en inglés ASCII con una fuente Unicode. ¡Esto puede ahorrar mucho espacio en el hardware!

código de fuente en pantalla

En el ejemplo anterior, puede ver lo simple que es manipular un rango de fuentes. En la primera línea, estamos cargando solo el rango de caracteres [\32-\127]. En la segunda línea, el rango de caracteres se aplica a una fuente indicada específica en el proyecto. -Arial-media-r-normal–_-170. Esta es la única fuente afectada, por lo que esta fuente solo tendrá los caracteres imprimibles predeterminados cargados en el hardware. La tercera línea aplica el límite a todas las fuentes de una determinada familia, incluida la fuente anterior. %FONTRANGEFLAG% admite hasta 1024 selecciones (1024 rangos diferentes entre paréntesis del ejemplo), y esas selecciones pueden ser caracteres o códigos de caracteres. Estas líneas no se usarían juntas en el mismo archivo .gen; son solo tres ejemplos de una sola línea.

Resultados de la optimización de fuentes

Tenga en cuenta que los siguientes tamaños de archivos reflash se aplican a los diseños de prueba muy simples para este artículo. La única forma de saber cómo afectarán sus diseños es usar estas pruebas en sus propios proyectos de GUI.

En el Ejemplo A, verá 13 fuentes diferentes. El segundo diseño, el Ejemplo B, usa una sola fuente. El ejemplo A tiene un tamaño de archivo reflash .bin de 73 kB. El ejemplo B utiliza solo una fuente y no incluye negrita ni cursiva, tiene un tamaño .bin de 24 kB. Cuando generamos código para el Ejemplo B y usamos %FONTRANGEFLAG% * [\32-~] en el archivo .gen, ¡reducimos el tamaño del .bin a 2kB!

imagen especial de fuente
Ejemplo A
fuente especial
Ejemplo B

Es importante tener en cuenta que las optimizaciones de esta magnitud pueden afectar la experiencia general del usuario de su GUI. Lograr el equilibrio adecuado entre el diseño y el uso de la memoria es esencial, así que asegúrese de realizar pruebas pronto y con frecuencia. Parte de esa prueba puede incluir comprender si todas las fuentes utilizadas en su diseño son necesarias. Altia facilita la prueba del usuario durante el desarrollo para que pueda encontrar ese equilibrio incluso antes de llegar al hardware. ¡Implementar cualquier comentario también es rápido!

El uso de rango de fuentes también puede marcar una gran diferencia en el tamaño del archivo .bin. Esto también debe hacerse con cuidado. Si usa un carácter en su GUI que no está incluido en el rango de fuente especificado, obtendrá un error. ¡Otra razón más para hacer que las pruebas sean parte de su proceso de desarrollo!

Por último, reducir el diseño de la GUI a un número mínimo de fuentes puede proporcionar ahorros de RAM increíbles. Si bien es posible que no tenga sentido reducir el uso de fuentes a solo una como hicimos en nuestro ejemplo, esta es un área en la que su equipo de diseño realmente puede tener un impacto en el uso de la memoria.

Conclusión

Hay muchas maneras de ayudar a evitar que los diseñadores se topen con problemas de espacio de RAM y uso de CPU mientras diseñan GUI de alta calidad para dispositivos integrados. Estas técnicas de diseño de fuentes para GUI incrustadas son solo algunas a considerar.

Altia se especializa en obtener gráficos de alto impacto en el hardware más bajo posible. Nuestros expertos en GUI tienen técnicas poderosas para crear e implementar gráficos de alta calidad con menos tiempo y esfuerzo. No dude solicite una demo con nuestro equipo para discutir cómo puede crear GUI ricas y emocionantes para su hardware con limitaciones de memoria.