Ejemplodefuentes

Qué incluye

• Pantalla tipográfica multilingüe de 480 x 480, diseñada como un canvas compacto de prueba de fuentes.
• Nueve ejemplos de texto visibles, que cubren cirílico, chino, japonés, griego, árabe, coreano, hebreo, tailandés y bengalí.
• Capas de etiquetas específicas por escritura, nombradas en el panel de capas para que sea fácil ver qué objeto de texto pertenece a cada idioma.
• Diez recursos de fuente convertidos, mostrando que un proyecto LVGL real puede necesitar varias familias y tamaños de fuente.
• Sin dependencia de imágenes, por lo que el proyecto se centra en renderizado de texto en vez de capturas bitmap.
• Tamaños de fuente mixtos, incluidos labels pequeños de cuerpo y texto display más grande.
• Colores mixtos, haciendo que cada escritura sea fácil de inspeccionar sobre el fondo oscuro.
• Recordatorios de fuente dentro del canvas, destacando las dos reglas grandes: elegir una fuente compatible con tu idioma objetivo e incluir los caracteres que tu UI realmente usa.
• Ejemplo del panel Create Font, mostrando fuentes incluidas, subidas, presets de tamaño, Letters, Asian y opciones avanzadas.

Resumen de recursos

El panel de recursos muestra esta plantilla PicoPixel centrada en fuentes:

• Imágenes: 0, la vista previa se construye con objetos de texto editables.
• Colores: 0, los colores se aplican directamente a las etiquetas en el diseño.
• Fuentes: 10, suficientes para demostrar varias escrituras, tamaños y familias.
• Widgets: 0, manteniendo el ejemplo centrado en texto y recursos de fuente.

Los recursos de fuente visibles incluyen:

• Gothic A1 48
• M PLUS 1p 60
• Noto Sans Arabic 32
• Noto Sans Bengali 32
• Noto Sans Cyrillic 48
• Noto Sans SC 32
• Noto Sans Thai Bold 32
• Open Sans Greek 48
• Open Sans Hebrew 48

La lista en la captura es desplazable, así que el proyecto contiene un recurso de fuente más además de las filas visibles. El patrón importante es que cada escritura usa una fuente que realmente contiene los glifos que necesita.

Estructura de capas

El panel de capas está configurado como una lista de comprobación de idiomas. Bajo Screen 1, cada etiqueta se nombra según la escritura o idioma que demuestra:

• Cyrillic - RU
• Chinese
• Japanese
• Greek
• Arabic
• Korean
• Hebrew
• Thai-na
• Bengali

Esa estructura hace que el archivo sea útil como referencia. Si un idioma se renderiza correctamente, puedes inspeccionar la etiqueta, el recurso de fuente, el tamaño, el color y el valor de texto, y luego copiar el mismo enfoque en tu propio proyecto PicoPixel.

Fuentes CJK y glifos faltantes

Las fuentes chinas, japonesas y coreanas necesitan cuidado especial en LVGL porque los conjuntos completos de caracteres son enormes. Incluir todos los glifos posibles puede añadir megabytes a un proyecto embebido, lo cual suele ser demasiado para dispositivos pequeños.

Para texto CJK, usa la opción Asian en el panel Create Font de PicoPixel y luego añade en el campo Symbols los caracteres exactos que mostrará tu interfaz. Incluye cada etiqueta, botón, elemento de menú, mensaje de advertencia, unidad y cadena de estado que pueda aparecer en pantalla.

El recorrido detallado está en Working with fonts, especialmente la sección sobre chino, japonés y coreano.

Elegir fuentes para cada escritura

No todas las fuentes soportan todos los idiomas. Una fuente latina puede verse perfecta en inglés pero no contener glifos árabes, hebreos, tailandeses, coreanos, japoneses o chinos. La plantilla muestra el enfoque más seguro: usar familias diseñadas para la escritura que estás renderizando.

• Usa Noto Sans SC u otra fuente compatible con CJK para chino simplificado.
• Usa una fuente compatible con japonés para texto japonés.
• Usa una fuente compatible con coreano, como Gothic A1 u otra fuente Hangul, para texto coreano.
• Usa Noto Sans Arabic para texto de escritura árabe.
• Usa Open Sans Hebrew u otra fuente compatible con hebreo.
• Usa una fuente compatible con griego para griego.
• Usa una fuente compatible con cirílico para ruso y otros textos cirílicos.
• Usa fuentes compatibles con tailandés y bengalí para etiquetas tailandesas y bengalíes.

En el panel Create Font, el desplegable Letters controla la cobertura de escrituras no CJK como griego, cirílico, hebreo, árabe, tailandés y más. El desplegable Asian está separado porque los conjuntos de glifos CJK son mucho más grandes.

Por qué funciona bien con LVGL

Esta plantilla es útil porque coincide con la forma real en que LVGL maneja fuentes en hardware embebido.

• Las fuentes LVGL son recursos bitmap convertidos, así que cada tamaño seleccionado se genera por separado.
• Solo se incluyen los glifos seleccionados, lo que mantiene controlado el tamaño del firmware.
• Las fuentes específicas por escritura reducen glifos faltantes, especialmente en idiomas no latinos.
• Pueden coexistir varios tamaños, así que encabezados, etiquetas de cuerpo y textos pequeños pueden usar cada uno un recurso adecuado.
• Las etiquetas siguen siendo editables, así que puedes reemplazar el texto de muestra por tus propias traducciones antes de exportar.
• El proyecto se exporta como código UI LVGL 8.x estándar, incluidos los recursos de fuente que necesitan las etiquetas.

Patrón en tiempo de ejecución

Después de exportar, tus etiquetas todavía pueden actualizarse desde el firmware. Los nombres exactos de símbolos generados dependen de tus nombres de objetos y fuentes en PicoPixel, pero el patrón LVGL es conocido:

lv_label_set_text(ui_status_label, "Settings");
lv_obj_set_style_text_font(ui_status_label, &ui_font_noto_sans_32, 0);

Para texto traducido, asegúrate de que la fuente exportada contiene cada carácter que puedas pasar a lv_label_set_text. Esto importa sobre todo para cadenas CJK y para mensajes de estado dinámicos que no son visibles en el canvas inicial de diseño.

Ideas de personalización

Usa esto como una plantilla gratuita de tipografía LVGL y luego adáptala para tu propio producto.

• Sustituye los saludos de muestra por tus etiquetas reales traducidas.
• Crea una fuente por escritura y tamaño que tu interfaz realmente necesite.
• Reduce tamaños de fuente sin usar antes de exportar para mantener el firmware más pequeño.
• Usa el mismo layout de texto para comparar varias familias antes de elegir una.
• Añade etiquetas de derecha a izquierda para árabe, persa, hebreo u otras interfaces RTL.
• Crea pantallas traducidas separadas para selección de idioma, ajustes, onboarding o alertas.
• Usa Delete Unused Fonts después de experimentar para que solo queden recursos de fuente referenciados.

Exportar a tu proyecto

Abre la plantilla en PicoPixel, inspecciona los recursos de fuente, sustituye las etiquetas de muestra por tu propio texto y crea cualquier fuente faltante antes de exportar. Si trabajas con chino, japonés o coreano, pega las cadenas exactas de UI en el campo Symbols al crear la fuente.

Para proyectos ESP32, el flujo habitual es:

1. Elige los idiomas que debe soportar tu UI.
2. Crea fuentes LVGL compatibles para cada escritura y tamaño.
3. Para chino, japonés y coreano, incluye los caracteres exactos que mostrará tu UI.
4. Sustituye las etiquetas de muestra de esta plantilla por tu texto real de UI.
5. Exporta la UI de PicoPixel como LVGL C.
6. Añade la UI exportada y los archivos de fuente a tu proyecto ESP-IDF, Arduino o PlatformIO.
7. Llama a ui_init() después de que LVGL y tu driver de pantalla estén listos.

Para el flujo de fuentes paso a paso, lee Working with fonts. Para importar y abrir plantillas, consulta How to use PicoPixel templates.

Mejores usos

Esta plantilla encaja bien cuando quieres un punto de partida claro para:

• Ejemplos de texto multilingüe LVGL
• Configuración de fuentes CJK para chino, japonés o coreano
• Prototipos de UI traducida en ESP32
• Pruebas de conversión de fuentes
• Depuración de glifos faltantes
• Comprobaciones de escrituras derecha-a-izquierda y no latinas
• Pantallas de ajustes internacionales
• Interfaces de kiosco, wearable, dashboard y dispositivo inteligente