Constructor de GUI de Arduino
Dibuja la pantalla para tu OLED de 128x64 en el navegador y luego copia el código U8g2 o AdafruitGFX que la dibuja.
Se ejecuta en el navegador. Cuenta gratuita, sin instalación.
Qué hace
Lopaka es un editor visual para código de pantallas embebidas. Colocas texto, rectángulos, líneas, círculos e imágenes importadas en un lienzo que tiene exactamente el tamaño de tu panel, y el editor escribe las llamadas de dibujo a medida que avanzas. Nada se adivina a partir de una captura de pantalla: cada capa que colocas se convierte en una llamada a función en el sketch generado.
El camino habitual en un proyecto Arduino es escribir las llamadas U8g2 o AdafruitGFX a mano, flashear la placa, entrecerrar los ojos ante el panel, ajustar una coordenada y volver a flashear. La vista previa aquí se renderiza como lo hace una pantalla de 1 bit, así que el trabajo de alineación sucede en el navegador y la placa solo ve la versión que ya se ve bien.
Diseñar dentro de un presupuesto de memoria AVR
Un Uno tiene 32 KB de flash y 2 KB de SRAM, y una pantalla es una de las formas más fáciles de gastar ambas. Lopaka no compila tu sketch, así que no puede decirte cuánto cuesta una compilación, pero la aritmética siguiente es fija y vale la pena conocerla antes de dibujar.
Un mapa de bits de pantalla completa de 128x64 cuesta 1024 bytes
Un bit por píxel, así que 128 x 64 / 8. En un Uno eso es un tercio del presupuesto de 32 KB de flash gastado en una sola imagen, que suele ser el momento en que un diseño dibujado supera a una captura convertida.
Un ícono de 16x16 cuesta 32 bytes
Lo suficientemente pequeño para que una pantalla construida con íconos, texto y primitivas se mantenga mucho más barata que la misma pantalla enviada como un solo mapa de bits.
Los mapas de bits se declaran PROGMEM
Las matrices generadas se marcan PROGMEM para U8g2 y Adafruit GFX, así que viven en la memoria flash en lugar de ocupar los 2 KB de SRAM que un Uno tiene para todo lo demás.
El texto y las formas no cuestan ninguna matriz
Un rectángulo, una línea o una cadena es una llamada a función. Solo las imágenes y las fuentes agregan datos, por lo que un diseño dibujado con primitivas es la forma barata de llenar una pantalla.
Antes de importar un logotipo grande, calcula el tamaño de la matriz de la imagen y elige el formato que espera tu biblioteca de dibujo.
Pantallas y bibliotecas
Elige la biblioteca que tu sketch ya incluye y el editor genera su sintaxis. Los tamaños van de 32x8 a 480x320, con ancho y alto personalizados para cualquier cosa que no esté en la lista.
| Pantalla | Controladores comunes | Destino de exportación |
|---|---|---|
| OLED monocromo | SSD1306, SH1106, SSD1309 | U8g2 o AdafruitGFX Mono |
| LCD monocromo | PCD8544 y destinos U8g2 similares | U8g2 |
| TFT a color en una placa de 32 bits | ILI9341, ST7789, GC9A01 | TFT_eSPI, ArduinoGFX o AdafruitGFX Color |
| Papel electrónico | Paneles controlados mediante GxEPD2 | GxEPD2 |
Lista completa de destinos de exportación: U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.
Crear una pantalla
- Abre el editor, elige U8g2 o Adafruit GFX y establece el tamaño de pantalla que indica tu panel.
- Dibuja la pantalla: texto, rectángulos, líneas, círculos e imágenes importadas en un lienzo del tamaño de la pantalla real.
- Ajusta las capas de un píxel en un píxel y lee la vista previa, que se renderiza como lo hará un panel de 1 bit.
- Copia la función de dibujo generada en tu sketch en Arduino IDE y flasheala.
Cómo se ve el código generado
Una lectura de sensor en un OLED monocromo de 128x64, exportada para Adafruit GFX. El termómetro es la única capa que cuesta memoria: 32 bytes de PROGMEM para un ícono de 16x16. El borde, la raya y ambas cadenas son llamadas a funciones y no agregan nada.
static const unsigned char PROGMEM image_thermometer_bits[] = {0x07,0x80,0x08,0x40,0x0b,0x40,0x0b,0x4e,0x0b,0x50,0x0b,0x50,0x0b,0x4e,0x0b,0x40,0x0b,0x40,0x13,0x20,0x17,0xa0,0x17,0xa0,0x17,0xa0,0x08,0x40,0x07,0x80,0x00,0x00};
void draw(void) {
display.clearDisplay();
// frame
display.drawRect(0, 0, 128, 64, 1);
// title
display.setTextColor(1);
display.setTextWrap(false);
display.setCursor(6, 14);
display.print("SENSOR NODE");
// divider
display.drawLine(4, 20, 123, 20, 1);
// reading
display.setCursor(32, 46);
display.print("21.5 C");
// thermometer
display.drawBitmap(8, 32, image_thermometer_bits, 16, 16, 1);
display.display();
}Preguntas
¿Qué produce realmente el constructor de GUI de Arduino?
Una función de dibujo con la sintaxis de la biblioteca que elegiste, además de las declaraciones que necesita: matrices de mapas de bits PROGMEM, inclusiones de fuentes y cualquier variable que hayas marcado. La pegas en tu sketch y la llamas. Lopaka nunca compila el sketch, flashea la placa ni se comunica con ella por el puerto serie.
¿A qué bibliotecas de pantalla puedo exportar?
Lopaka genera código fuente para U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.
¿Cabrá el código generado en un Arduino Uno?
Depende de lo que dibujes, y el editor te muestra las partes que cuestan algo. El texto, las líneas y los rectángulos son llamadas a funciones que no agregan datos. Una imagen de 1 bit agrega ancho x alto / 8 bytes, así que un ícono de 16x16 son 32 bytes y una pantalla completa de 128x64 son 1024. Los mapas de bits se declaran PROGMEM para que residan en la memoria flash en lugar de en los 2 KB de SRAM.
¿Funciona con Arduino IDE?
Sí, porque la salida es C++ ordinario. Copia la función generada en tu sketch junto a la configuración de U8g2 o Adafruit GFX que ya tienes, y compílala como compilas cualquier otra cosa. No hay ningún complemento que instalar ni ningún paso de compilación nuestro en el camino.
¿Puedo establecer la resolución de mi propio panel?
El desplegable de tamaños cubre los paneles comunes de 32x8 a 480x320, incluido el OLED de 128x64 que usan la mayoría de los proyectos Arduino, y cualquier cosa que no esté en la lista se puede ingresar como ancho y alto personalizados.
¿Qué pasa con las fuentes?
Los diseños U8g2 usan la biblioteca de fuentes BDF, y los diseños Adafruit GFX usan las fuentes Adafruit y GFX. El editor renderiza los glifos reales, así que el texto que colocas tiene el ancho que tendrá en el panel en lugar de una aproximación que descubres después de flashear.
¿Es gratis?
Sí. Diseñar una pantalla y generar código para cada biblioteca compatible forman parte del plan Basic gratuito, junto con las bibliotecas comunitarias de fuentes e íconos y un par de proyectos en la nube para guardar tu trabajo. 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 en tu propia pantalla
Crea una cuenta gratuita y el editor se abre en una pantalla en blanco con el tamaño de tu panel.