Importar imágenes

Lopaka te permite agregar imágenes, GIF y videos a tu diseño de pantalla embebida y los convierte al formato que necesita tu plataforma, ya sea un mapa de bits XBMP de 1 bit para una OLED monocromática o un arreglo RGB565 para una TFT a color.

Hay dos formas de iniciar una importación:

• Haz clic en la herramienta Imagen de la barra de herramientas para abrir el asistente de imágenes.
• Arrastra un archivo PNG o BMP directamente al lienzo para saltarte el asistente e importarlo con los ajustes predeterminados.

El asistente de imágenes

El asistente se abre en una ventana modal. Presiona Escape o haz clic fuera de ella para cancelar en cualquier momento.

Paso 1: elige un origen

Elige un modo de importación. Los modos disponibles dependen de la plataforma activa.

Paquetes de íconos

Explora la biblioteca integrada de íconos monocromáticos, agrupados por conjunto (flechas, símbolos de interfaz, clima, etc.). La sección Proyecto actual, en la parte superior, muestra las imágenes que ya importaste en esta sesión: haz clic en cualquiera para reutilizarla sin volver a subirla.

Usa la búsqueda para filtrar los paquetes de íconos y las imágenes del proyecto actual por nombre de ícono.

Haz clic en un ícono para colocarlo en el lienzo de inmediato. El asistente se cierra y se agrega la capa.

Cuándo usarlo: necesitas un ícono de interfaz estándar (batería, Wi-Fi, flechas, marcas de verificación) y no quieres preparar un archivo de imagen.

Subir archivo

Arrastra uno o varios archivos a la zona de carga, o haz clic en Buscar archivos para elegirlos en tu sistema de archivos. Se aceptan imágenes rasterizadas, GIF, video MP4/MOV con H.264 y video WebM con VP8, VP9 o AV1.

• Varios archivos: todos los archivos se ponen en cola. Puedes ver la vista previa de cada uno, pero los ajustes se aplican a todas las imágenes a la vez.
• Archivos GIF: cada fotograma se extrae automáticamente como una imagen independiente.
• Archivos de video: carga un video a la vez. La importación de video está disponible en las plataformas que admiten animaciones.

Cuándo usarlo: tienes un logotipo, ícono o foto propios que quieres mostrar en la pantalla.

Ingresar arreglo de bytes

Pega directamente un arreglo de bytes XBMP sin procesar, como los que suelen generar las herramientas de conversión de imágenes o los que aparecen en firmware existente. Ingresa el Ancho y el Alto del mapa de bits, activa Intercambiar bytes si el orden de los bytes no coincide con la vista previa, y observa cómo la vista previa se actualiza mientras escribes. Ejemplo de entrada:

0xFF, 0x81, 0x81, 0x81, 0xFF

Cuándo usarlo: estás migrando desde código de firmware que ya tiene arreglos de mapas de bits, o recibiste un mapa de bits de una herramienta que exporta los bytes sin procesar.

Animación

Úsalo para agregar una animación de fotogramas integrada en lugar de convertir un archivo de imagen. Consulta Animaciones para ver el flujo de trabajo completo y cómo se genera el código.

Paso 2: ajusta la imagen en el editor de imágenes

Después de subir los archivos, el asistente pasa al editor de imágenes. El editor se ve y se comporta de forma distinta según hayas subido un archivo o varios.

Una sola imagen

Cuando subes exactamente un archivo, se muestra el editor completo:

• Nombre es editable: define ahora el nombre de la variable en C (p. ej., wifi_icon → const uint8_t wifi_icon[]).
• Se muestran los controles de Dimensiones: cambia el tamaño y el área de recorte se actualiza en consecuencia.
• El Área de recorte está activa: arrastra el rectángulo azul para seleccionar solo una parte de la imagen.

Todo lo que configures se aplica a esa imagen cuando haces clic en Importar.

Varias imágenes

Cuando subes más de un archivo, o subes un GIF, el editor cambia al modo de varias imágenes:

• A la izquierda aparece una tira de miniaturas. Haz clic en cualquier miniatura para verla en el editor.
• Cada miniatura tiene una casilla de verificación. Todas las imágenes empiezan marcadas. Desmarca las que quieras excluir de la importación.
• Seleccionar todo: aparece en el encabezado de la tira cuando al menos una imagen está desmarcada. Haz clic para volver a seleccionarlas todas.
• Nombre no es editable: se toma automáticamente del nombre del archivo. Si hace falta, cambia el nombre de las capas en el inspector después de importar.
• Dimensiones y recorte no se muestran. Cada imagen se ajusta automáticamente al tamaño de la pantalla al importarla, de forma independiente.
• Todos los demás ajustes (remuestreo, brillo, contraste, tramado, inversión) se aplican a cada imagen seleccionada cuando haces clic en Importar.

Archivos GIF

Un GIF se trata como varias imágenes. Cada fotograma se extrae automáticamente y aparece como una entrada independiente en la tira de miniaturas, con los nombres basename_frame_1, basename_frame_2, etc. Un GIF de un solo fotograma conserva solo el nombre base.

Así puedes importar un ícono animado como una secuencia de capas de mapa de bits, una por fotograma, listas para recorrerlas en tu firmware.

Archivos de video

Un video muestra hasta 10 fotogramas de vista previa repartidos a lo largo de su duración. Usa estas vistas previas para ajustar los mismos parámetros que en las imágenes: tamaño, recorte, brillo, contraste, inversión, remuestreo y tramado. Las vistas previas solo cambian lo que muestra el editor; no se pueden seleccionar individualmente.

Define los Fotogramas por segundo de salida, de 1 a 60, y revisa la duración, la cantidad de fotogramas, las dimensiones procesadas y el tamaño monocromático estimado resultantes. Las importaciones de video están limitadas a 1000 fotogramas de salida y 5 MiB. Reduce los FPS o las dimensiones de los fotogramas si se supera alguno de los límites.

Haz clic en Importar para procesar los fotogramas configurados y abrirlos como una sola animación en el editor de animaciones. El video se decodifica en el orden de su línea de tiempo y no crea un recurso de imagen ni una capa del lienzo por cada fotograma.

Zoom

Arrastra el control deslizante de zoom para ampliar la vista previa (de 0,5× a 10×). Haz doble clic en el control para volver a 1×. Esto no afecta a la imagen exportada: solo sirve como ayuda para la vista previa.

Modo de color

Aparece en las plataformas que admiten tanto monocromo como color (p. ej., TFT_eSPI). Alterna entre:

• Monocromo: XBMP de 1 bit, muy compacto. Cada píxel está encendido o apagado. La imagen se trama o se binariza a blanco y negro.
• RGB: RGB565, 2 bytes por píxel. Conserva el color. Úsalo para pantallas a color.

En las plataformas que solo admiten un modo, el selector se bloquea automáticamente.

Dimensiones

Define el ancho y el alto de destino. Al editar un valor, el otro se escala de forma proporcional.

• Restablecer: recupera las dimensiones originales de la imagen.
• Ajustar a la pantalla: escala la imagen para que quepa en el tamaño de pantalla actual, conservando la relación de aspecto.

Área de recorte

Un rectángulo de selección azul se superpone a la vista previa. Solo se importa la zona que queda dentro de él.

• Arrastra el centro del rectángulo para moverlo.
• Arrastra cualquier esquina para cambiar su tamaño.
• Edita directamente los campos X / Y / An / Al para un control preciso.

Cuándo recortar: tienes una imagen grande y solo necesitas una zona concreta, p. ej., un ícono de la barra de estado dentro de una captura de pantalla completa, o un solo glifo de una hoja de sprites.

Tamaño en bytes

El indicador de tamaño en bytes que aparece debajo de la vista previa se actualiza en vivo y muestra cuánta RAM ocupará el mapa de bits recortado:

• Monocromo: 1 bit por píxel, empaquetado en bytes.
• RGB: 2 bytes por píxel (RGB565).

Remuestreo

Define el algoritmo que se usa al reducir la imagen a las dimensiones de destino:

Modo	Cuándo usarlo
Alta calidad	La mejor opción predeterminada, sobre todo al reducir fotos o ilustraciones detalladas
Bilineal	Cambio de tamaño suave y más rápido para imágenes en general
Más cercano	Pixel art e íconos en los que los bordes deben seguir nítidos

Alta calidad está seleccionado de forma predeterminada.

Brillo y contraste

Ajusta el brillo de −100 % a +100 % y el contraste de −100 % a +100 %. Haz doble clic en cualquiera de los dos controles deslizantes para volver a 0.

Cuándo usarlo: una fotografía se ve deslavada después de convertirla a monocromo; aumenta el contraste para que los píxeles oscuros sean más oscuros y los claros más claros. Si un logotipo tiene un fondo claro que se cuela en el mapa de bits, aumenta el contraste o reduce el brillo para llevarlo a blanco.

Escala de grises primero

Convierte la imagen a escala de grises antes de binarizarla o tramarla. Actívalo cuando tu imagen de origen sea muy colorida y la conversión automática dé un resultado inesperado, por ejemplo, un logotipo rojo sobre fondo blanco en el que el rojo y el blanco terminan con un brillo percibido similar.

Tramado (solo monocromo)

Elige cómo se convierten los tonos a blanco y negro:

Modo	Cuándo usarlo
Floyd-Steinberg	Fotos detalladas y degradados suaves
Atkinson	Un tramado más ligero y de alto contraste que funciona bien en pantallas pequeñas
Bayer 8x8	Un patrón de píxeles regular con una textura predecible
Sin tramado	Dibujos de líneas limpios, logotipos y rellenos sólidos

Ajusta el brillo y el contraste para controlar qué píxeles quedan de cada lado en la conversión a blanco y negro.

Invertir paleta (solo monocromo)

Intercambia el blanco y el negro antes del tramado. Úsalo cuando tu imagen de origen tenga un símbolo blanco sobre fondo negro pero la pantalla lo muestre invertido, o cuando la binarización automática tome el color equivocado como primer plano.

Invertir resultado

Invierte el mapa de bits final después de todo el procesamiento. Úsalo cuando la imagen se vea bien en la vista previa pero aparezca invertida en la pantalla física, por ejemplo, en pantallas cuyo fondo es blanco cuando lo predeterminado es negro.

Después de importar

Cada imagen importada se convierte en una capa de pintura (mapa de bits) en el lienzo. El nombre de la capa coincide con el nombre de la variable que se usa en el código generado. Las animaciones, en cambio, se convierten en capas de animación.

Puedes seguir editando el mapa de bits con la herramienta Pintar: dibuja o borra píxeles individuales directamente.