Arduino GUI Builder

Draw the screen for your 128x64 OLED in the browser, then copy out the U8g2 or AdafruitGFX code that draws it.

Design a screen

Runs in the browser. Free account, no install.

What it does

Lopaka is a visual editor for embedded display code. You lay out text, rectangles, lines, circles, and imported images on a canvas that is exactly the size of your panel, and the editor writes the drawing calls as you go. Nothing is guessed from a screenshot: every layer you place becomes one function call in the generated sketch.

The usual path for an Arduino project is to write U8g2 or AdafruitGFX calls by hand, flash the board, squint at the panel, adjust a coordinate, and flash again. The preview here renders the way a 1-bit display does, so the alignment work happens in the browser and the board only sees the version that already looks right.

Designing inside an AVR memory budget

An Uno has 32 KB of flash and 2 KB of SRAM, and a screen is one of the easiest ways to spend both. Lopaka does not compile your sketch, so it cannot tell you what a build costs, but the arithmetic below is fixed and worth knowing before you draw.

A full-screen 128x64 bitmap costs 1024 bytes

One bit per pixel, so 128 x 64 / 8. On an Uno that is a third of the 32 KB flash budget spent on a single image, which is usually the moment a drawn layout beats a converted screenshot.

A 16x16 icon costs 32 bytes

Small enough that a screen built from icons, text, and primitives stays far cheaper than the same screen shipped as one bitmap.

Bitmaps are declared PROGMEM

The generated arrays are marked PROGMEM for U8g2 and Adafruit GFX, so they live in flash instead of taking up the 2 KB of SRAM an Uno has for everything else.

Text and shapes cost no array at all

A rectangle, a line, or a string is a function call. Only images and fonts add data, which is why a layout drawn from primitives is the cheap way to fill a screen.

Displays and libraries

Pick the library your sketch already includes and the editor generates its syntax. Sizes run from 32x8 to 480x320, with a custom width and height for anything not in the list.

Display	Common controllers	Export target
Monochrome OLED	SSD1306, SH1106, SSD1309	U8g2 or AdafruitGFX Mono
Monochrome LCD	PCD8544 and similar U8g2 targets	U8g2
Colour TFT on a 32-bit board	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX, or AdafruitGFX Color
E-paper	Panels driven through GxEPD2	GxEPD2

Full list of export targets: U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Building a screen

1. Open the editor, pick U8g2 or Adafruit GFX, and set the display size your panel reports.
2. Draw the screen: text, rectangles, lines, circles, and imported images on a canvas the size of the real display.
3. Nudge layers a pixel at a time and read the preview, which renders the way a 1-bit panel will.
4. Copy the generated draw function into your sketch in the Arduino IDE and flash it.

What the generated code looks like

A sensor readout on a 128x64 monochrome OLED, exported for Adafruit GFX. The thermometer is the only layer that costs memory: 32 bytes of PROGMEM for a 16x16 icon. The border, the rule, and both strings are function calls and add nothing.

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();
}

Questions

What does the Arduino GUI builder actually produce?

A draw function in the syntax of the library you picked, plus the declarations it needs: PROGMEM bitmap arrays, font includes, and any variables you marked. You paste it into your sketch and call it. Lopaka never compiles the sketch, flashes the board, or talks to it over serial.

Which display libraries can I export to?

Lopaka generates source for U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Will the generated code fit on an Arduino Uno?

That depends on what you draw, and the editor shows you the parts that cost something. Text, lines, and rectangles are function calls that add no data. A 1-bit image adds width x height / 8 bytes, so a 16x16 icon is 32 bytes and a full 128x64 screen is 1024. Bitmaps are declared PROGMEM so they sit in flash rather than in the 2 KB of SRAM.

Does it work with the Arduino IDE?

Yes, because the output is ordinary C++. Copy the generated function into your sketch next to the U8g2 or Adafruit GFX setup you already have, and compile it the way you compile anything else. There is no plugin to install and no build step of ours in the way.

Can I set the resolution of my own panel?

The size dropdown covers the common panels from 32x8 to 480x320, including the 128x64 OLED most Arduino projects use, and anything not on the list can be entered as a custom width and height.

What about fonts?

U8g2 designs use the BDF font library, and Adafruit GFX designs use the Adafruit and GFX fonts. The editor renders the real glyphs, so the text you position is the width it will be on the panel rather than an approximation you discover after flashing.

Is it free?

Yes. Designing a screen and generating code for every supported library are part of the free Basic plan, along with the community font and icon libraries and a couple of cloud projects to keep your work in. Plus adds higher limits, custom font import, the full icon and animation libraries, and file export, but nothing on this page needs it.

Try it on your own display

Create a free account and the editor opens on a blank screen at your panel size.

Design a screen