Skip to content

Animations, Paint Tools, and Editor Workflow Updates

This update makes Lopaka better for building real embedded screens: you can add ready-made animations, edit bitmap layers directly on the canvas, select layers faster, and export more complete code for supported platforms.

Built-in animations

Lopaka now includes a built-in animation browser for projects with animation code generation.

Open the Image tool, choose Animation, then pick an animation from the list. The browser has categories, search, hover previews, and size/detail controls, so you can find the right animation before placing it on the screen.

Animations can be added at 32x32, 48x48, or 64x64. You can also choose the detail level:

  • High: 28 frames
  • Medium: 14 frames
  • Low: 7 frames

Lower detail keeps the animation smaller for firmware. Lopaka shows an estimated data size for the selected size and detail before you add it.

When you place an animation, Lopaka creates an animation layer in the center of the canvas. It behaves like a normal layer for positioning and ordering. When selected, it plays in the editor; when not selected, it shows the first frame.

Generated animation code

Animation layers now generate playback code, not just static bitmap data.

With Include animation enabled in Code Settings, Lopaka generates frame data, an updateAnimations() helper, and the drawing code needed to advance frames over time. Platforms that group animation drawing also get a drawAnimations() helper.

For Arduino-style Adafruit GFX output, the generated sketch includes a loop() that redraws animations. For U8g2 Arduino output, the animation update is wired into the U8g2 picture loop. U8g2 ESP-IDF output stays embeddable, so it does not create an app_main() function for you.

Animation attachments are listed in Code Settings when the screen uses animation layers. Download them with the generated code and place them next to your sketch or project files.

Better Paint editing

The Paint tool now has brush patterns. Choose Full, Checkerboard, Horizontal lines, Vertical lines, or Circle from the pattern dropdown, and the preview updates before you draw.

Eraser mode can now be toggled directly while using Paint. Right-click erase still works, and both erase paths use the selected brush pattern.

Paint layers can also be cropped directly on the canvas. Select a Paint layer, enter crop mode, adjust the orange crop handles, then apply or cancel. Applied crops are added to undo history.

Faster layer selection

The Layers list now supports the selection patterns you expect from desktop tools.

Use Ctrl/Cmd + click to toggle layers in the selection. Use Shift + click to select a range from the last clicked layer. Group headers can also be selected or toggled as a group, and range selection includes layers inside collapsed groups.

Search where it helps

Icon Packs now have search across built-in icons and current-project images. Gallery search.

Animation search filters the animation list by name and keeps only matching categories visible.

Code and platform updates

U8g2 triangles now follow the platform behavior consistently: triangle layers are filled, and there is no fill toggle for them.

Polygon layers generate helper functions with names derived from the layer name, converted to valid code identifiers.

On supported color platforms, text layers can use a background color, and that background is included in the generated text drawing code.