Custom TFT Display UI Builder

Design the screen your ESP32 should show, then take the driver code away with you.

Design a screen

Runs in the browser. Free account, no install.

What you get

Lopaka is a visual editor for embedded display UIs. You place rectangles, arcs, text, and imported artwork on a canvas the size of your panel, and the code panel writes the matching library calls as you work. There is no runtime to link and no framework to adopt: the output is a plain draw function you paste into the sketch you already have.

For colour panels the targets are TFT_eSPI, M5, Lovyan, ArduinoGFX, and AdafruitGFX Color. Monochrome OLEDs, e-paper, Flipper Zero, ESPHome, MicroPython, CircuitPython, and LVGL have platforms of their own if a project needs them.

• Full RGB colour picking, packed to the RGB565 values the library expects
• Adafruit built-in and GFX fonts, plus TrueType and BDF uploads converted to GFX
• An Arc tool that emits drawSmoothArc and drawArc, for gauges and dials
• Images as 1-bit bitmaps for drawBitmap or RGB565 arrays for pushImage
• Animation frames with generated playback helpers
• Layer properties exported as variables, so a reading can change at runtime

Your controller, your library

Find the controller printed on your module, then pick the platform in the same row and set the canvas to your resolution.

Display controller	Typical canvas	Lopaka platform
ST7789	240×240	TFT_eSPI, M5, Lovyan
ILI9341	240×320	TFT_eSPI, M5, Lovyan
ST7735	128×160	TFT_eSPI, M5, Lovyan
GC9A01	240×240	TFT_eSPI, M5, Lovyan
ILI9488	480×320	TFT_eSPI, M5, Lovyan
Panels driven by Arduino_GFX	320×240	ArduinoGFX
Panels driven by Adafruit GFX	320×240	AdafruitGFX Color
SSD1306, SH1106 (monochrome OLED)	128×64	U8g2

Lopaka targets the drawing library, not the controller. Pick the library your sketch already compiles against and set the canvas to the resolution your code uses after setRotation(). Driver defines, pins, SPI frequency, and User_Setup.h stay in your project.

The TFT_eSPI guide walks through that configuration before the first pixel is drawn.

From design to firmware

1. Get the display library talking to your panel first, with a stock example.
2. Create a project on the TFT_eSPI, M5, Lovyan platform and set the canvas to your resolution.
3. Draw the screen: rectangles, arcs, text, and imported images, arranged in layers.
4. Name the layers, because names become function names, comments, and bitmap array names.
5. Copy the generated draw function into your sketch and call it after tft.init().

What the output looks like

A 240×135 screen named Main, with a border, a label, a large reading, and a bar, exported for TFT_eSPI.

void drawMain(void) {
    tft.fillScreen(0x0);
    // Panel
    tft.drawRect(0, 0, 240, 135, 0xFFFF);
    // Title
    tft.setTextColor(0xFFFF);
    tft.setTextSize(1);
    tft.drawString("CPU LOAD", 10, 12);
    // Reading
    tft.setTextColor(0x7E0);
    tft.setTextSize(3);
    tft.drawString("42%", 10, 40);
    // Bar
    tft.fillRect(10, 100, 101, 14, 0x7E0);

}

Every line starts with tft., so name your display object tft, or alias it once on M5Stack with M5GFX& tft = M5.Display;.

Questions

Which display controllers does this work with?

Any panel your library already drives. Lopaka generates calls against the library API, not against a controller, so if TFT_eSPI, M5GFX, or LovyanGFX runs your ST7789, ILI9341, ST7735, GC9A01, or ILI9488 module, the generated code runs on it too. Prove the panel works with a stock library example first.

Does Lopaka configure TFT_eSPI for me?

No. Driver selection, pins, SPI frequency, and User_Setup.h are yours. Lopaka draws the picture and emits drawing calls that assume a working display object named tft.

What exactly do I get back?

A draw function for the screen you designed, named after the screen, plus the bitmap arrays, font includes, and animation helpers it needs. You keep your own setup() and loop() and call the function from them.

Can I use my own fonts and images?

Yes. TrueType and BDF fonts are converted to GFX format on upload, and imported artwork becomes either a 1-bit bitmap or an RGB565 array depending on the layer colour mode. Font headers download from Code Settings and sit next to your sketch.

Can values change at runtime?

Yes. Mark a layer property as a variable and Lopaka declares it instead of hardcoding the literal, so a temperature or a battery percentage is a variable your firmware assigns and the draw call reads.

Is it free?

Yes. Designing a screen and copying the generated code for every supported library are part of the free Basic plan. Plus adds higher limits, custom font import, the full icon and animation libraries, and file export, but nothing on this page needs it.

Build your screen

Create a free account and the editor opens on a blank canvas at your display size.

Design a screen