Resumen del editor

Esta página es la referencia completa de la interfaz del editor de Lopaka. Cada sección principal tiene una guía propia, enlazada desde los encabezados de abajo. Usa esta página para orientarte y llegar a los detalles.

Disposición

El editor combina un árbol de capas del proyecto, un área de trabajo y un panel de código:

┌──────────┬──────────────────────────┬─────────────┐
│          │        Top bar           │             │
│  Layers  ├──────────────────────────┤  Inspector  │
│  panel   │        Screens + tools   │    panel    │
│          ├──────────────────────────┴─────────────┤
│          │  Code panel          │  Code settings  │
└──────────┴──────────────────────┴─────────────────┘

Zona	Función
Panel de capas	Pantallas, capas y grupos desplegables; tamaño ajustable
Barra superior	Detalles y acciones del proyecto
Lienzo	Las pantallas y el diseño del proyecto
Panel del inspector	Propiedades de la capa seleccionada
Panel de código	Pestañas con el código de cada pantalla; tamaño ajustable
Ajustes de código	Opciones de salida del código y descargas

Cambiar el tamaño de los paneles

El panel de capas y el panel de código tienen tamaño ajustable. Arrastra el control de cambio de tamaño del borde de un panel para modificar su tamaño.

Barra superior

La barra superior contiene los detalles del proyecto y las acciones. Las herramientas de dibujo están encima del área de trabajo, con los controles de zoom a su derecha.

Detalles del proyecto

Muestra información sobre el proyecto y la pantalla actuales.

• Ruta de navegación: Project name › Screen name. Ambos nombres se acortan si son largos.
• Insignia de plataforma: muestra la plataforma activa (por ejemplo, tft-espi). Es solo informativa: la plataforma se elige al crear el proyecto y no se puede cambiar después.
• Insignia de tamaño de pantalla: muestra la resolución configurada de la pantalla (por ejemplo, 128×64).
• Ajustes del proyecto (ícono de engranaje): abre el cuadro de diálogo de ajustes del proyecto.
• Proyecto público: etiqueta verde que aparece cuando el proyecto es visible para todos los usuarios en la Galería.

La zona de detalles del proyecto solo se muestra cuando iniciaste sesión o cuando ves el proyecto en modo de solo lectura.

Barra de herramientas

La barra de herramientas sobre el área de trabajo contiene el botón Seleccionar y las herramientas de dibujo de la plataforma activa.

Seleccionar (ninguna herramienta activa)

Haz clic en el ícono del cursor o presiona Escape para volver al modo de selección. En este modo, el cursor es el puntero predeterminado; al hacer clic en una capa del lienzo, la seleccionas. Al hacer clic en un espacio vacío, se quita la selección de todas las capas.

Herramientas de dibujo

Las herramientas que la plataforma activa no admite se ocultan. Estas son todas las herramientas que existen:

Herramienta	Cómo usarla
Imagen	Abre el asistente de imágenes: sube una imagen, un GIF o un video; elige entre los paquetes de íconos integrados; pega un arreglo de bytes; o agrega una animación en las plataformas compatibles
Pintar	Dibujo a mano alzada, píxel a píxel, en una capa de mapa de bits; el clic derecho borra; mantén Shift para trazar líneas rectas
Texto	Al hacer clic se activa la herramienta; se coloca automáticamente una capa de texto en el centro de la pantalla, queda seleccionada y el campo de texto del inspector recibe el foco
Rectángulo	Haz clic y arrastra para definir dos esquinas opuestas
Círculo	Haz clic y arrastra desde el centro; el radio sigue al arrastre
Elipse	Haz clic y arrastra para definir el rectángulo que la contiene
Línea	Haz clic y arrastra desde el punto inicial hasta el final
Triángulo	Tres clics: haz clic en cada vértice; termina con doble clic o Escape
Polígono	Varios clics: coloca tantos vértices como quieras y termina con doble clic o Escape; haz doble clic en un polígono existente para editar sus vértices
Arco	Solo TFT_eSPI; agrega un arco centrado con radio, ángulos, ancho, colores y suavizado de bordes editables

Solo LVGL

Herramienta	Cómo usarla
Área de texto	Igual que Texto, pero crea una capa de texto multilínea
Panel	Dibuja un widget contenedor de tipo panel
Botón	Dibuja un widget de botón
Casilla de verificación	Dibuja un widget de casilla de verificación
Interruptor	Dibuja un widget de interruptor
Control deslizante	Dibuja un widget de control deslizante
Arco LVGL	Agrega un widget de arco de LVGL con valor y pista

Herramientas de arco

TFT_eSPI y LVGL usan herramientas de arco distintas porque sus modelos de dibujo son diferentes. En TFT_eSPI, Arco es una primitiva de dibujo que se controla con el radio, los ángulos inicial y final, el ancho, el color de primer plano, el color de fondo y la opción Suave. Si los ángulos inicial y final son iguales, se obtiene un círculo completo.

Arco LVGL crea un widget con ancho, alto, giro, ángulos inicial y final, valor, color del indicador y color de la pista. El valor está limitado a 0–100. Cada herramienta de arco solo aparece en su plataforma compatible.

Asistente de importación de imágenes

Consulta la guía completa Importar imágenes para conocer todos los modos de importación, los controles del editor y los flujos de trabajo paso a paso.

Consejo: También puedes arrastrar un archivo PNG o BMP directamente al lienzo para saltarte el asistente; la imagen se importa con los ajustes predeterminados.

Controles del pincel

Cuando la herramienta Pintar está activa, aparecen controles adicionales en la barra de herramientas:

• Forma y patrón del pincel: elige Cuadrado, Tablero de ajedrez, Líneas horizontales, Líneas verticales o Círculo. La vista previa se actualiza antes de dibujar, y los patrones se alinean con la cuadrícula de la pantalla entre trazos separados.
• Borrador: hace que el pincel normal borre píxeles. El clic derecho también borra, y ambas formas de borrar usan el patrón de pincel seleccionado.
• Modo de color: cambia entre los modos de pincel Mono (1 bit) y RGB.
• Color de pintura: visible en modo RGB; define el color de pintura actual.
• Recortar imagen: aparece en las capas de pintura lo bastante grandes como para recortarlas. El modo de recorte muestra controladores naranjas y oscurece el área fuera del recorte; arrastra la zona o los controladores y luego aplica o cancela. Escape sale del modo de recorte antes de salir de la herramienta Pintar, y los recortes aplicados se pueden deshacer.

Escala

Un control de escala a la derecha del área de trabajo ajusta el zoom del lienzo. También puedes cambiar el zoom con Ctrl + / Ctrl - o girando la rueda del mouse mientras mantienes Ctrl/Cmd.

Acciones

Acciones a nivel de proyecto, visibles cuando iniciaste sesión o cuando ves el proyecto en modo de solo lectura.

• Estrella: marca el proyecto como favorito. El botón muestra la cantidad actual de estrellas.
• Copiar: crea una copia del proyecto en tu propia cuenta y la abre de inmediato. Requiere iniciar sesión.
• Compartir: menú desplegable con estas opciones:
  • Copiar enlace público: copia al portapapeles un enlace directo a la galería. Está desactivado si el proyecto o la pantalla actual son privados.
  • Presentación: abre una presentación a pantalla completa con todas las pantallas del proyecto.
  • Guardar como: Archivo de texto exporta la pestaña de código abierta, incluido el código personalizado. Imagen PNG e Imagen BMP exportan la pantalla seleccionada o, si no hay ninguna seleccionada, la pantalla de la pestaña de código.

Lienzo

El área de trabajo muestra juntas todas las pantallas del proyecto con la escala seleccionada. Cada pantalla muestra una vista previa del diseño para la pantalla de destino.

Cuadrícula

Haz clic en Cuadrícula a la derecha del área de trabajo para alternar entre una cuadrícula de 1 píxel, una de 10 píxeles y ninguna. La cuadrícula predeterminada de 1 píxel aparece con un zoom de 300% o más; la de 10 píxeles, con 30% o más. La cuadrícula es solo visual y no tiene ajuste magnético.

Interacciones con el mouse

Interacción	Efecto
Clic en un área vacía	Quita la selección de todas las capas
Clic en una capa	Selecciona esa capa
Shift + clic	Agrega la capa a la selección o la quita
Clic y arrastrar en un área vacía	Dibuja un rectángulo de selección
Clic y arrastrar una capa seleccionada	Mueve la capa
Clic y arrastrar un controlador de tamaño	Cambia el tamaño de la capa seleccionada
Mantener Shift al cambiar el tamaño	Conserva la proporción original
Mantener Alt al cambiar el tamaño	Cambia el tamaño desde el centro
Clic en una capa agrupada	Selecciona todas las capas del grupo
Doble clic en una capa agrupada	Selecciona solo esa capa
Shift + clic en una capa agrupada	Agrega todos los miembros del grupo a la selección
Doble clic en un polígono o triángulo	Entra en el modo de edición de vértices
Clic derecho (herramienta Pintar)	Borra píxeles
Ctrl/Cmd + rueda del mouse	Acerca o aleja, centrado en el cursor
Rueda del mouse (sin modificador)	Desplaza el lienzo
Arrastrar con el botón central	Desplaza el lienzo

Soltar imágenes

Puedes arrastrar un archivo PNG o BMP directamente al lienzo. La imagen se importa al instante con los ajustes predeterminados y se coloca como una capa de mapa de bits (de pintura).

Lista de pantallas

Las pantallas aparecen como entradas desplegables en el árbol Capas de la izquierda, con sus capas y grupos anidados debajo.

Agregar pantallas

Haz clic en Agregar pantalla en el encabezado de Capas para agregar una pantalla nueva. El nombre se genera automáticamente como Screen N, con el siguiente número disponible.

Navegar entre pantallas

Haz clic en la fila de una pantalla en el árbol de Capas para seleccionarla y centrar la vista en ella. Usa su flecha para mostrar u ocultar sus capas.

Reordenar pantallas

Arrastra la fila de una pantalla a otra posición. El orden se guarda al instante.

Cambiar el nombre de una pantalla

Haz doble clic en el título que aparece sobre una pantalla en el área de trabajo para editarlo ahí mismo.

Menú contextual (clic derecho)

Haz clic derecho en el título que aparece sobre una pantalla para abrir su menú contextual:

Acción	Descripción
Duplicar	Crea una copia de la pantalla y la agrega al final de la lista.
Publicar	Hace visible en la Galería una pantalla privada.
Hacer privada	Oculta la pantalla de la Galería.
Eliminar	Elimina la pantalla. Requiere un segundo clic para confirmar.

Lista de capas

El árbol de Capas muestra las pantallas, capas y grupos del proyecto. Despliega una pantalla para ver sus capas en orden de renderizado (arriba en la lista = arriba en la pila = se dibuja al final).

Acciones de la lista de capas

Acción	Cómo
Seleccionar una capa	Haz clic en su fila
Seleccionar un rango	Haz clic en una capa y luego Shift + clic en otra
Alternar la selección	Ctrl/Cmd + clic en una capa
Seleccionar todo	Ctrl A
Reordenar	Arrastra y suelta una fila en otra posición
Reordenar con el teclado	Selecciona una capa y luego Ctrl ↑ / Ctrl ↓
Mostrar / ocultar	Haz clic en el ícono del ojo al pasar el cursor
Bloquear / desbloquear	Haz clic en el ícono del candado al pasar el cursor
Eliminar	Selecciona y luego Delete o el botón Eliminar del inspector

Grupos

Las capas se pueden agrupar. Un grupo aparece como una entrada plegable en la lista de capas. Haz clic en el encabezado del grupo para seleccionar todas sus capas a la vez. Ctrl/Cmd + clic en el encabezado de un grupo agrega o quita todos sus miembros de la selección actual. Haz clic en la flecha para mostrar u ocultar las capas del grupo dentro de su fila; la selección de rango sigue incluyendo las capas de los grupos plegados.

Acción	Atajo
Agrupar las capas seleccionadas	Ctrl G
Desagrupar	Ctrl Shift G
Cambiar el nombre del grupo	Doble clic en el nombre del grupo en el inspector

Puedes arrastrar capas individuales hacia dentro o fuera de un grupo soltándolas dentro o fuera del contenedor del grupo en la lista.

Inspector

El panel del inspector está a la derecha. Su contenido cambia según lo que esté seleccionado. Usa Ocultar inspector o Mostrar inspector a la derecha del área de trabajo para mostrarlo u ocultarlo; tu elección se recuerda en este navegador.

Resumen de atajos

Cuando no hay nada seleccionado, el inspector muestra una referencia de atajos de teclado. Es un recordatorio rápido; la lista completa está en la referencia Atajos de teclado.

Una capa seleccionada

El inspector muestra:

• Ícono y nombre de la capa: pasa el cursor para que aparezca el ícono de edición y haz clic en él para cambiar el nombre ahí mismo.
• Botones de alineación: seis botones que colocan la capa respecto a los bordes y el centro de la pantalla:

Botón	Una capa	Varias capas
Alinear a la izquierda	Mueve la capa al borde izquierdo de la pantalla	Alinea todos los bordes izquierdos con la capa más a la izquierda
Centrar horizontalmente	Centra la capa horizontalmente en la pantalla	Alinea todos los centros horizontales con el centro común
Alinear a la derecha	Mueve la capa al borde derecho de la pantalla	Alinea todos los bordes derechos con la capa más a la derecha
Alinear arriba	Mueve la capa al borde superior de la pantalla	Alinea todos los bordes superiores con la capa más alta
Centrar verticalmente	Centra la capa verticalmente en la pantalla	Alinea todos los centros verticales con el centro común
Alinear abajo	Mueve la capa al borde inferior de la pantalla	Alinea todos los bordes inferiores con la capa más baja

Con varias capas seleccionadas, la alineación se calcula respecto al rectángulo que contiene todas las capas seleccionadas, no respecto a la pantalla. Cada capa se mueve hasta el borde o el centro correspondiente de ese rectángulo común.

• Campos de propiedades: todas las propiedades editables del tipo de capa seleccionado. Campos habituales:

Campo	Tipo	Capas
X, Y	Número	Todas las capas con posición
An, Al	Número	Todas las capas con tamaño
X1, Y1, X2, Y2	Número	Línea
Radio / RX / RY	Número	Círculo, Elipse
Radio / Inicio / Fin / Ancho	Número	Arco
Giro / Inicio / Fin / Valor	Número	Arco LVGL
Relleno	Booleano	Rectángulo, Círculo, Elipse, Triángulo
Invertido (XOR)	Booleano	La mayoría de las capas de formas
Color / Relleno / Fondo / Borde	Color	Depende de la plataforma; el fondo del texto se oculta o se ignora en las plataformas que no lo admiten
Fuente	Selector de fuente	Texto, Área de texto, Botón, Casilla de verificación
Texto	Cadena	Texto, Área de texto, Botón, Casilla de verificación
Marcado	Booleano	Casilla de verificación
Superposición	Booleano	Atenúa la capa y la excluye de la generación de código
Transparencia	Booleano	Imágenes RGB con píxeles transparentes; los mantiene transparentes en lugar de rellenarlos con el fondo de la pantalla

En las capas de texto de U8g2, Flipper, CircuitPython y LVGL, el inspector también muestra botones de giro de 0°, 90°, 180° y 270°. El giro es en sentido horario, mantiene fijo el centro de los límites de la capa y se conserva en los proyectos guardados y en el código generado. Estos botones se ocultan en las plataformas sin giro de texto nativo.

• Interruptor de variable (pequeño interruptor junto a los campos numéricos y de color): convierte una propiedad en una variable en lugar de un valor literal en el código generado.
• Acciones: botones de operaciones de imagen disponibles en las capas de mapa de bits (de pintura):
  • Voltear horizontalmente: refleja el mapa de bits sobre el eje vertical.
  • Voltear verticalmente: refleja el mapa de bits sobre el eje horizontal.
  • Girar en sentido horario: gira el mapa de bits 90° a la derecha.
  • Invertir colores: invierte cada píxel del mapa de bits.
• Combinar en mapa de bits: renderiza todas las capas seleccionadas en una sola capa de mapa de bits (de pintura). Las capas de origen se eliminan y se reemplazan por una imagen plana del tamaño de toda la pantalla. Las capas XOR o invertidas se combinan correctamente.
• Eliminar: elimina la capa o las capas seleccionadas.

Varias capas seleccionadas

El inspector muestra la cantidad de capas seleccionadas, los botones de alineación (para distribuirlas entre sí), el botón Combinar en mapa de bits y el botón Eliminar.

Si todas las capas seleccionadas pertenecen al mismo grupo, se muestra el nombre del grupo, que puedes cambiar ahí mismo.

Código

El panel de código está en la parte inferior del editor. En los proyectos con varias pantallas, selecciona la pestaña de una pantalla para ver su código fuente generado en tiempo real.

El panel resalta la sintaxis del lenguaje de la plataforma activa (C, C++, YAML, etc.).

• Copiar: copia todo el código generado al portapapeles, incluidos el prefijo y el sufijo personalizados que hayas escrito (ver más abajo).
• Importar código: importa un archivo fuente a la pantalla de la pestaña de código abierta, en las plataformas compatibles. Funciona mejor con código generado por el propio Lopaka.

Plantilla de código editable

El panel de código se divide en tres zonas separadas por comentarios marcadores:

// [BEGIN lopaka generated]
  … generated draw calls …
// [END lopaka generated]

La zona de prefijo (encima del marcador BEGIN) y la zona de sufijo (debajo del marcador END) son totalmente editables. Escribe ahí el código que necesites: directivas #include, declaraciones de variables, una función setup() o cualquier otra cosa que requiera tu sketch. La sección generada del medio es de solo lectura y se actualiza automáticamente mientras editas las capas.

Tu prefijo y tu sufijo se guardan localmente en tu navegador para cada pantalla y se restauran al recargar la página. Al cambiar de pestaña de código se carga la plantilla de cada pantalla.

Ajustes de código

Los ajustes de código están a la derecha del panel de código. Controlan cómo se genera el código fuente.

Opciones de salida

Las opciones disponibles dependen de la plataforma. Las más comunes son:

Ajuste	Efecto
Función contenedora	Envuelve todas las llamadas de dibujo en una función con nombre
Comentarios, títulos de capas	Agrega un comentario // layer name antes de cada llamada de dibujo
Incluir fuentes	Genera #include o las declaraciones de las fuentes
Declarar imágenes	Genera las declaraciones de los arreglos de mapas de bits
Declarar variables	Extrae las propiedades variables de las capas a variables C con tipo
Borrar/rellenar pantalla	Agrega una llamada que borra la pantalla al principio de la función
Declarar como PROGMEM	Solo U8g2: coloca los arreglos de mapas de bits en la memoria flash

Selector de sintaxis

En las plataformas con más de una plantilla de código, aparece un desplegable Sintaxis encima de las opciones:

Plataforma	Opciones
U8g2	Arduino (Cpp), ESP-IDF (C)
AdafruitGFX Color, AdafruitGFX Mono, ArduinoGFX, TFT_eSPI	Arduino (C++), ESP-IDF (C++)

La opción de Arduino es la predeterminada. Las opciones de ESP-IDF generan código que puedes integrar en un componente de ESP-IDF: los arreglos se declaran sin PROGMEM y no se genera setup() / loop() (ni app_main()), así que llamas a las funciones de dibujo generadas desde tu propia tarea. Las demás plataformas tienen una sola plantilla y no muestran el desplegable.

Descargas de fuentes e imágenes

Cuando las capas usan fuentes o imágenes de mapa de bits, aparecen enlaces de descarga en la parte inferior de los ajustes de código. Haz clic en el enlace de una fuente para descargar el archivo .h o .bdf. Haz clic en el enlace de una imagen para descargar el mapa de bits como archivo .bmp o .h, según la plataforma.

Guardado automático

El editor guarda tu trabajo automáticamente mientras dibujas. Los cambios se guardan en la nube un segundo después de la última edición. No hay un botón para guardar manualmente; puedes cerrar la pestaña o salir de la página sin problema cuando el lienzo deja de cambiar.

Modo de solo lectura / galería

Al abrir un proyecto que no es tuyo (desde la galería o un enlace compartido), el editor se muestra en modo de solo lectura. Las herramientas se ocultan, el inspector es solo de consulta y el código se puede copiar, pero no importar. La lista de capas se puede seguir recorriendo.