Generación de código

Lopaka genera en tiempo real código fuente específico de cada plataforma a partir de tu diseño visual. Esta página explica cómo se produce ese código, cómo llevarlo a tu proyecto y cómo hacer el camino inverso: importar código existente en Lopaka para reconstruir las capas.

Generación

Cómo se construye la salida

El panel de código muestra la pantalla seleccionada en sus pestañas de código. Cada vez que esa pantalla cambia, Lopaka vuelve a generar su bloque de código. La salida depende de cuatro cosas:

1. Plataforma: cada plataforma tiene su propia plantilla de código y su propia sintaxis.
2. Capas: solo las capas visibles y sin superposición aparecen en la salida, en su orden de apilamiento.
3. Título de la pantalla: se convierte en el nombre de la función contenedora (ver más abajo).
4. Ajustes de código: opciones que controlan qué secciones se incluyen.

Título de la pantalla y función contenedora

El título de la pantalla (que puedes editar con doble clic sobre el título, encima de la pantalla) se convierte en el nombre de la función contenedora generada. Lopaka lo convierte automáticamente en un identificador de C++ válido:

Título de la pantalla	Función generada
Main Screen	void drawMain_Screen(void)
gauge display	void drawgauge_display(void)
123 Alert	void draw_123_Alert(void)
Status/Bar	void drawStatus_Bar(void)

Reglas: los espacios y los caracteres especiales se convierten en guiones bajos; los nombres que empiezan por un dígito reciben un guion bajo al principio; las palabras reservadas de C++ reciben un guion bajo al final.

Si desactivas Función contenedora en Ajustes de código, las llamadas de dibujo se emiten sin ninguna función que las envuelva. Esto es útil cuando pegas el código directamente en un callback existente.

Nombres de capas y nombres de variables

Los nombres de las capas aparecen en dos lugares de la salida:

• Comentarios: con Comentarios, títulos de capas activado, cada llamada de dibujo va precedida de // layer name.
• Nombres de variables: con Declarar variables activado, las variables de propiedades se llaman {layerName}_{property} (p. ej., label_x, label_color).

Ponles nombres claros a tus capas antes de activar las variables: los nombres pasan directamente a los identificadores del código.

Capas ocultas

Las capas que ocultas con el ícono del ojo en el panel de capas se excluyen por completo de la generación de código. Úsalo para conservar en el proyecto formas en progreso o capas de referencia sin incluirlas en la salida.

Ajustes de código

El panel Ajustes de código (abajo a la derecha del editor) controla qué secciones se emiten. No todos los ajustes están disponibles en todas las plataformas.

Ajuste	Qué hace
Función contenedora	Envuelve todas las llamadas de dibujo en void draw{ScreenTitle}(void) { ... }
Comentarios, títulos de capas	Emite un comentario // layer name antes de cada llamada de dibujo
Incluir fuentes	Agrega declaraciones de fuentes o directivas #include para las fuentes que usa el diseño
Declarar imágenes	Agrega declaraciones de arreglos de imagen para las capas de mapa de bits e íconos
Incluir archivos de imagen	Deja los píxeles de las imágenes fuera del código generado y hace referencia a los archivos de recursos descargados
Declarar variables	Extrae las propiedades de capa marcadas en declaraciones de variables con tipo (ver más abajo)
Borrar/rellenar pantalla	Agrega una llamada para borrar la pantalla al principio de la función
Funciones auxiliares de animación	Agrega funciones auxiliares de reproducción y datos de fotogramas externos para las capas de animación
Declarar como PROGMEM	Marca los arreglos de imágenes y fuentes con la clase de almacenamiento PROGMEM de Arduino

Los ajustes se guardan por plataforma en tu navegador, así que los proyectos de distintas plataformas conservan su propia configuración.

Para la salida específica de animaciones, incluidas las funciones auxiliares de reproducción y los datos de fotogramas descargables, consulta Animaciones.

Funciones auxiliares de polígonos

Las capas de polígono se emiten mediante funciones auxiliares generadas. El nombre de la función auxiliar se deriva del nombre de la capa y se convierte en un identificador de código válido; luego, el flujo de dibujo principal llama a esa función.

Primer plano y fondo del texto

Algunas plataformas a color permiten que las capas de texto usen un color de fondo, que se incluye en el código generado para dibujar el texto.

Variables

Las variables te permiten reemplazar propiedades de capa fijas por identificadores con nombre que puedes actualizar en tiempo de ejecución sin tocar la lógica de dibujo.

Para marcar una propiedad como variable:

1. Selecciona una capa.
2. En el inspector, haz clic en el selector de variable (el ícono del hexágono) junto a una propiedad compatible, como x, y, text o color.
3. Activa Declarar variables en Ajustes de código.

El valor de la propiedad se lleva al principio del código generado como una declaración con tipo:

// Declared at the top when "Declare variables" is on
int label_x = 10;
int label_y = 20;
const char* label_text = "Hello";

// Draw call references the variables
display.setCursor(label_x, label_y);
display.print(label_text);

Los nombres de las variables se derivan del nombre de la capa y del nombre de la propiedad. Si cambias el nombre de la capa, cambian todos los nombres de sus variables: hazlo antes de compartir o confirmar el código.

No todas las propiedades admiten variables. La posición, el tamaño, el color y el contenido del texto sí, en la mayoría de las plataformas. Propiedades como el tamaño de la fuente son fijas y no se pueden marcar como variables.

Exportación

Copiar desde el panel de código

Selecciona la pestaña de código de la pantalla y haz clic en Copiar para copiar toda su salida, incluido el código propio que tengas antes y después de la sección generada. Solo la sección generada es de solo lectura; las secciones que la rodean se pueden editar. Consulta Plantilla de código editable. También puedes seleccionar el texto a mano con Ctrl A y Ctrl C.

Descargar como archivo

Puedes descargar el contenido de la pestaña de código abierta como archivo .txt, con el código propio que tengas antes y después de la sección generada.

Para descargarlo: abre el menú Compartir en la barra superior y elige Guardar como → Archivo de texto.

Descargar fuentes e imágenes

Cuando tu diseño usa fuentes personalizadas o capas de imagen, Lopaka puede exportar esos recursos por separado para que los incluyas en tu proyecto junto al código generado.

En el panel Ajustes de código, la sección Fuentes enumera todos los archivos de fuentes a los que hace referencia el diseño. La sección Imágenes muestra una entrada por cada imagen única del diseño. Haz clic en el ícono de descarga junto a cada entrada para guardar el recurso.

• Los archivos de fuentes se descargan en el formato que requiere la plataforma activa (.h para las plataformas basadas en GFX y para U8g2).
• En U8g2, Incluir solo los glifos usados limita cada fuente descargada a los caracteres que usan las capas de texto y de área de texto que hacen referencia a ella. Déjalo sin marcar para exportar todos los glifos del BDF. Las fuentes que usa el texto variable en tiempo de ejecución siempre se exportan completas.
• Los archivos de imagen se descargan en el formato que compila la plataforma activa, con el nombre del símbolo que usa el código generado. Las imágenes con píxeles idénticos aparecen una sola vez y se dibujan a partir de ese único recurso.

Plataforma	Archivo de recurso de imagen
Adafruit GFX (color y mono), Arduino GFX, TFT_eSPI, GxEPD2, Inkplate	Encabezado C con bytes XBM o píxeles RGB565: image_<Name>_bits.h o image_<Name>_pixels.h
U8g2 (Arduino y ESP-IDF)	Encabezado C: image_<Name>_bits.h
Flipper Zero	Encabezado C independiente con arreglos uint8_t y sin encabezados de Arduino: image_<Name>_bits.h
LVGL (v9)	Código fuente C con el descriptor image_<Name>_dsc y su mapa de píxeles: <Name>.c
CircuitPython	Mapa de bits cargado mediante displayio.OnDiskBitmap: image_<Name>_bits.bmp
MicroPython	Mapa de bits portable: image_<Name>_bits.pbm
ESPHome	PNG al que el YAML generado hace referencia como images/<Name>.png

Con Incluir archivos de imagen activado (y Declarar imágenes también), el código generado hace referencia a esos archivos en lugar de contener los píxeles: en C y C++ los arreglos en línea se sustituyen por #include "<symbol>.h", y MicroPython carga el archivo .pbm al iniciar. Los bytes del recurso son exactamente los que contienen los arreglos en línea, así que ambos flujos de trabajo dibujan el mismo resultado. Con Declarar imágenes desactivado, el código solo hace referencia a los símbolos de las imágenes y no contiene datos de píxeles; las descargas siguen disponibles.

Advertencia

Descarga siempre los recursos de fuentes e imágenes y colócalos junto a tu archivo .ino o YAML antes de flashear. En U8g2, coloca los archivos .h descargados junto al código generado de la pantalla. En ESPHome, pon los archivos PNG en la carpeta images/ a la que hace referencia el YAML.

Importación

Lopaka puede analizar código fuente existente de una plataforma y reconstruir las capas a partir de él. Esto es útil para retomar el trabajo donde lo dejó una exportación anterior o para llevar un sketch existente al editor visual.

Advertencia

La importación de código es una función experimental. No se admite toda la sintaxis. El analizador reconstruye lo que puede a partir de un análisis aproximado del código: revisa el resultado y comprueba las advertencias que aparezcan después de importar.

Cómo importar

Selecciona la pestaña de código de la pantalla de destino y haz clic en el botón Importar código, a la izquierda de Copiar, para elegir un archivo de código fuente. El botón está disponible en las plataformas que admiten la importación de código.

Las capas importadas se agregan a la pantalla de esa pestaña. Las capas existentes no se eliminan. Si quieres empezar de cero, elimina primero las capas de esa pantalla.

Qué se reconstruye

El analizador quita los comentarios, extrae las macros #define y las declaraciones de variables, y luego busca llamadas a funciones de dibujo y las asigna a tipos de capa.

Construcción analizada	Se reconstruye como
drawLine / line	Capa de línea
drawRect / fillRect	Capa de rectángulo
drawCircle / fillCircle	Capa de círculo
drawPixel	Capa de punto
print / drawString	Capa de texto
drawBitmap / drawXBitmap	Capa de imagen / de pintura
Declaraciones de arreglos de imagen	Datos de mapa de bits vinculados a las capas
Referencias a fuentes	Fuente asignada a las capas de texto

Los valores de las variables usadas en los argumentos de las funciones se resuelven a sus valores declarados, así que drawRect(x, y, 40, 20, WHITE) con x = 10 e y = 5 crea un rectángulo en (10, 5) con un tamaño de 40 × 20.

Limitaciones conocidas

• Los nombres de las capas no se restauran. Las capas importadas reciben nombres genéricos. Cámbiales el nombre a mano si piensas usar variables.
• Solo se analizan llamadas de la biblioteca estándar. Las funciones auxiliares propias, las ramas #ifdef y las macros del preprocesador distintas de #define se ignoran.
• El estado de las variables no se restaura. Aunque una propiedad fuera originalmente una variable, se importa como valor fijo. Si hace falta, vuelve a activar a mano el selector de variable en cada capa.
• Ambigüedad de colores. En las plataformas monocromáticas, el analizador distingue los colores 0/1. En las plataformas RGB espera constantes hexadecimales (0xRRGGBB, 0xRRRR) o constantes con nombre como WHITE o BLACK. Es posible que no se reconozcan definiciones de color no estándar.
• No se detectan los ajustes. El analizador no detecta qué ajustes de código estaban activos cuando se generó el código. Revisa el panel de ajustes después de importar.

Advertencias

Después de importar, las construcciones que el analizador no pudo resolver se muestran en un mensaje de advertencia del editor. Advertencias habituales:

• No se encontró el arreglo del mapa de bits: el código hace referencia a una imagen por su nombre, pero el código importado no contenía ninguna declaración de arreglo que coincida. La capa de imagen se crea como marcador de posición.
• Fuente no reconocida: el nombre de la fuente en el código no coincide con ninguna fuente disponible. La capa de texto se crea, pero usa la fuente predeterminada de la plataforma.
• Variable no resuelta: una variable usada en una llamada de dibujo no tenía ninguna declaración que coincida. El argumento se importa como cero.

Resuelve las advertencias antes de dar por bueno el diseño importado.