Convertidor de imágenes U8g2
Convierte un PNG, BMP o GIF en una matriz XBMP de 1 bit para un SSD1306 o cualquier otra pantalla monocroma que controle U8g2, y mírala en una pantalla simulada antes de flashear nada.
Se ejecuta en el navegador. Cuenta gratuita, sin instalación.
Qué hace el convertidor
Lopaka es un editor gráfico para pantallas embebidas. Importa una imagen en un proyecto U8g2 y se convierte en una capa de mapa de bits de un bit en un lienzo del tamaño de tu pantalla, donde puedes moverla, recortarla, redibujar píxeles individuales con la herramienta Pintar y colocar texto y formas a su alrededor. El panel de código sigue el ritmo: declara la matriz y emite la llamada drawXBMP() para donde se encuentre la capa en ese momento.
Esa es la parte que un convertidor simple te deja a ti. Obtener los bytes es un paso; saber que el logotipo está 4 píxeles demasiado bajo, o que la etiqueta choca con él con este tamaño de fuente, normalmente requiere una compilación y un flasheo. Aquí requiere arrastrar la capa.
Cómo funciona realmente un mapa de bits monocromo
Un bit por píxel, no un byte
Un panel SSD1306 tiene un bit de estado por píxel: encendido u oscuro. No hay gris ni color, así que un mapa de bits para él también almacena un bit por píxel, ocho píxeles empaquetados en cada byte, fila tras fila. Una pantalla de 128x64 son 1.024 bytes en esa forma. Almacena la misma imagen como un byte por píxel y se convierte en 8.192 bytes, que en una placa AVR clásica es más RAM de la que tienes.
XBM, XBMP y de dónde viene PROGMEM
XBM es ese formato empaquetado de un bit, y es lo que U8g2 espera de drawXBM(). XBMP es el mismo dato declarado en la memoria flash en lugar de en la RAM: con Declare as PROGMEM activado, Lopaka marca la matriz U8X8_PROGMEM y llama a drawXBMP(), que la lee de la memoria de programa. En un destino Arduino eso suele ser lo que quieres, porque los mapas de bits son constantes y la RAM es el recurso escaso. La plantilla ESP-IDF emite en su lugar una matriz uint8_t simple y drawXBM().
Umbral, tramado e inversión
Una imagen de origen suele tener 256 tonos por canal y la pantalla tiene dos, así que algo tiene que decidir qué píxeles sobreviven. Un umbral simple envía todo lo que está por encima de un corte a blanco y todo lo que está por debajo a negro, lo que es correcto para logotipos y arte lineal con bordes duros. El tramado, en cambio, dispersa el error de redondeo entre los píxeles vecinos, para que un degradado se lea como textura en lugar de una banda. El brillo y el contraste mueven el corte antes de que ocurra cualquiera de las dos cosas, y Grayscale first ayuda cuando una imagen a color tiene tonos de brillo percibido similar, como rojo sobre blanco.
| Modo de tramado | 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 regular de píxeles con una textura predecible |
| Sin tramado | Arte lineal limpio, logotipos y rellenos sólidos |
Existen dos controles de inversión separados porque hay dos problemas separados. Invert palette intercambia el blanco y el negro antes del tramado, para cuando el convertidor trata tu fondo como el sujeto. Invert result voltea el mapa de bits terminado, para cuando la vista previa es correcta pero el panel lo renderiza al revés.
Pantallas y placas
U8g2 es una biblioteca gráfica monocroma que cubre una larga lista de controladores OLED y LCD, y Lopaka se dirige a su API gráfica. Los familiares son SSD1306, SH1106 y SSD1309, que es la mayoría de lo que viene en un módulo OLED pequeño I2C o SPI. Consulta la lista de constructores oficial para confirmar tu panel exacto.
Lopaka no detecta ni controla hardware. Genera el código de dibujo; tú eliges el constructor U8g2 que coincida con tu controlador, resolución, bus y pines, luego llamas a begin() y ejecutas el bucle de actualización tú mismo. Establece el tamaño de pantalla de Lopaka en la misma resolución lógica que ese constructor y las coordenadas del lienzo coincidirán con el panel.
Convertir una imagen
- Crea un proyecto, selecciona U8g2 como plataforma y establece el tamaño de pantalla en la resolución de tu pantalla.
- Abre la herramienta Imagen y suelta un PNG, BMP o GIF, o pega una matriz de bytes XBMP existente.
- Recorta y redimensiona, luego establece el brillo, el contraste y el tramado mientras la vista previa se actualiza.
- Importa el mapa de bits, colócalo en el lienzo y agrega texto o formas a su alrededor.
- Copia el código fuente generado, que declara la matriz y llama a drawXBMP en esa posición.
Si el mapa de bits aparece en blanco o desplazado en el dispositivo, comprueba los argumentos de drawXBMP, el relleno de filas y el bucle de búfer.
Cómo se ve la salida
Un ícono de 16x16 colocado en x 8, y 8 con una etiqueta a su lado, en una pantalla llamada Status. Esta es la plantilla Arduino (Cpp), así que la matriz se declara PROGMEM y se dibuja con drawXBMP.
static const unsigned char image_wifi_bits[] U8X8_PROGMEM = {0x00,0x00,0x00,0x00,0xf8,0x1f,0xfc,0x3f,0x0e,0x70,0x03,0xc0,0x00,0x00,0xf0,0x0f,0xf8,0x1f,0x1c,0x38,0x06,0x60,0x00,0x00,0xc0,0x03,0xe0,0x07,0xc0,0x03,0x00,0x00};
void drawStatus(void) {
u8g2.setFontMode(1);
u8g2.setBitmapMode(1);
// wifi
u8g2.drawXBMP(8, 8, 16, 16, image_wifi_bits);
// label
u8g2.setFont(u8g2_font_6x10_tr);
u8g2.drawStr(32, 21, "Connected");
}La misma pantalla exportada con la plantilla ESP-IDF (C). Los bytes del mapa de bits son idénticos; solo cambian la declaración y la API que los rodea.
static const uint8_t image_wifi_bits[] = {0x00,0x00,0x00,0x00,0xf8,0x1f,0xfc,0x3f,0x0e,0x70,0x03,0xc0,0x00,0x00,0xf0,0x0f,0xf8,0x1f,0x1c,0x38,0x06,0x60,0x00,0x00,0xc0,0x03,0xe0,0x07,0xc0,0x03,0x00,0x00};
void drawStatus(void) {
u8g2_ClearBuffer(&u8g2);
u8g2_SetBitmapMode(&u8g2, 1);
u8g2_SetFontMode(&u8g2, 1);
// wifi
u8g2_DrawXBM(&u8g2, 8, 8, 16, 16, image_wifi_bits);
// label
u8g2_SetFont(&u8g2, u8g2_font_6x10_tr);
u8g2_DrawStr(&u8g2, 32, 21, "Connected");
u8g2_SendBuffer(&u8g2);
}La fuente de ambos ejemplos es uno de los símbolos integrados de U8g2, así que no necesita ningún encabezado descargado. Una fuente fuera de esa lista se exporta como un encabezado que descargas junto al sketch.
Preguntas
¿Cómo convierto una imagen en un mapa de bits U8g2?
Importa la imagen en un proyecto U8g2. Lopaka la convierte en una matriz XBM de 1 bit, la muestra en un lienzo del tamaño de tu pantalla y genera la declaración más la llamada drawXBMP que la coloca en la posición a la que la arrastraste.
¿Qué es XBMP y por qué lo usa U8g2?
XBM empaqueta un píxel en un bit, ocho píxeles por byte, fila a fila. Un OLED monocromo tiene exactamente un bit de estado por píxel, así que la matriz es una copia directa de lo que muestra el panel. XBMP es el mismo dato declarado en la memoria flash con U8X8_PROGMEM, por lo que las compilaciones Arduino lo combinan con drawXBMP en lugar de drawXBM.
¿Con qué pantallas funciona esto?
Con cualquier pantalla monocroma que el propio U8g2 admita, incluidos los OLED SSD1306, SH1106 y SSD1309. Lopaka genera el código de dibujo; tú eliges el constructor U8g2 para tu controlador, bus y pines, y llamas a begin() y al bucle de actualización tú mismo.
¿Qué le hace el tramado a una fotografía?
Una pantalla monocroma no tiene gris, así que cada píxel tiene que terminar en blanco o negro. El tramado dispersa el error entre los píxeles vecinos para que un degradado se lea como una textura en lugar de un borde duro. Floyd-Steinberg y Atkinson van bien para fotos; los logotipos y el arte lineal suelen verse más limpios con el tramado desactivado.
¿Puedo usar mis matrices de mapas de bits existentes?
Sí. El asistente de importación acepta una matriz de bytes XBMP en bruto pegada desde un firmware existente. Dale el ancho y el alto, activa Swap bytes si la vista previa se ve desordenada, y se convierte en una capa editable que puedes redibujar píxel a píxel con la herramienta Pintar.
¿Genera código ESP-IDF además de Arduino?
Sí. La plataforma U8g2 tiene dos plantillas: Arduino (Cpp), que emite matrices U8X8_PROGMEM y u8g2.drawXBMP(), y ESP-IDF (C), que emite matrices uint8_t simples y u8g2_DrawXBM() contra la interfaz C. Cambia entre ellas en los Ajustes de código.
¿Es gratis?
Sí. Convertir imágenes y generar código U8g2 forman parte del plan Basic gratuito, junto con la biblioteca comunitaria de íconos y un par de proyectos en la nube. Plus agrega límites más altos, importación de fuentes personalizadas, las bibliotecas completas de íconos y animaciones, y la exportación de archivos, pero nada de esta página lo necesita.
Pruébalo con tu propia imagen
Crea una cuenta gratuita y el editor se abre en una pantalla en blanco con el tamaño de tu pantalla.