ESP-IDF Export, Transparent RGB Images, and Touch Reordering

Since nested groups and Paint Fill, we've focused on getting your screens onto real hardware: a new export target, transparent images on color displays, and fonts that work without extra files.

Here's what's new in Lopaka.

Export for ESP-IDF

Adafruit GFX (Color and Mono), Arduino_GFX and TFT_eSPI screens can now be exported as ESP-IDF C++. Pick ESP-IDF (C++) in the code template selector. Arduino (C++) stays the default.

• No Arduino core: The code compiles in an ESP-IDF component.
• Your own task: Call the generated drawing and animation code from your ESP-IDF task.
• Matching assets: Downloaded image and animation files follow the template you picked.
• Round trip: ESP-IDF code imports back into Lopaka.

This is handy when your firmware is built with ESP-IDF and you don't want the Arduino layer just to draw a screen.

Transparent RGB images

Icons and pictures with transparent areas can now sit on top of your background on color displays.

Select an RGB image with transparent pixels and turn on Transparency in the inspector. The layers below show through on the canvas and on the device. It works on Adafruit GFX Color, Arduino_GFX, TFT_eSPI and LVGL.

Newly imported images start with Transparency off. On LVGL, tick it to keep an image's transparency.

Reorder by touch

On a tablet or phone, touch and hold an item, then drag it:

• Canvas project tree: Move layers and screens.
• Animation timeline: Reorder frames.

The project tree and the timeline scroll when you hold your finger near their edge.

LVGL slider value

LVGL sliders have a Value from 0 to 100. The knob moves to that position on the canvas, and Lopaka sets the value in the generated code. Mark the value as a variable to change it from your own code.

Closer to what your display shows

• Text: Letters like g, p and y extend below the baseline on the canvas, and the selection covers them.
• MicroPython: Ellipses on the canvas light exactly the pixels MicroPython draws.
• GxEPD2: The color picker snaps your color to the nearest one the display can show.
• ESPHome: TrueType text sits where the preview shows it, and grayscale OLEDs such as SSD1322, SSD1325 and SSD1327 show your shapes.

Fonts

• U8g2: Built-in fonts pick the variant that covers your text, including Cyrillic, Greek and accented Latin. A comment lists any characters the font can't draw.
• TFT_eSPI: Free Fonts come from the library itself, so there's nothing to download. Keep LOAD_GFXFF enabled in your TFT_eSPI setup.
• Adafruit GFX and GxEPD2: Built-in fonts are included from the library's Fonts folder, so the sketch compiles without editing font includes.

Better code import

Importing code now restores:

• U8g2: Inverted (XOR) drawing, layer names, and filled shapes in ESP-IDF code.
• Flipper Zero: Rounded rectangles and triangles.
• Arduino_GFX: Ellipses.
• All platforms: Text with escaped quotes and single pixels.

Bug fixes and improvements

• Arduino_GFX circles and ellipses are no longer shifted from where you placed them.
• Flipper Zero triangles match the editor.
• TFT_eSPI arcs use their variables in the generated code.
• U8g2 Arduino sketches with animations now show the screen and its animations on the display.
• U8g2 Arduino code follows the Clear/Fill display setting, which is off by default.
• MicroPython and CircuitPython generate valid code for untitled screens and unsupported layers.
• New LVGL widgets use the theme colors.
• Screens that use different images with the same name compile together in one sketch.
• Image import shows the correct byte size for the chosen dimensions.
• Importing a BDF font without ASCII characters no longer breaks the font menu.
• Redo restores hidden and shown layers.
• Dropping files on the canvas keeps your selection.
• Deleting animation frames keeps the playhead on an existing frame.
• Sign-in and the Image Wizard work when your browser translates the page.
• Lopaka works on older Safari versions.

Open your projects and try the update.