lopaka

Lopaka is an open-source graphics editor designed to create graphics for embedded screens. It allows you to draw graphics and automatically generate C/C++ source code for use in Arduino, ESP32, or STM32 projects.

Key Features

• Pixel perfect editor with various screen sizes.
• Tools for drawing shapes and using custom images.
• Support for popular fonts.
• Auto-generation of XBMP graphics.
• C/C++ source code generation.
• FlipperZero live preview.
• Zoom scale selection.

Supported Platforms

Lopaka provides compatibility for several embedded graphics libraries and hardware, including:

• Libraries: TFT_eSPI, u8g2, AdafruitGFX (and ESPHome coming soon).
• Hardware/Frameworks: FlipperZero, Inkplate, Watchy, and compatibility with M5GFX, LovyanGFX, and others.

Lopaka is built with VueJS 3 and Vite. To install the project locally using pnpm, first ensure you have pnpm installed, then run:

pnpm install

After installing dependencies with pnpm, you can use the following commands to manage the application:

• Development server: Starts the local development environment.
• Production build: Generates the production-ready assets.

pnpm dev

pnpm build

To run Lopaka using Docker, use the following command to build and start the containers:

docker-compose up --build

Lopaka uses EditMode to track the current interaction state of a layer and TLayerEditPoint to provide handles (like resize corners) for user interaction.

Edit Modes

Use the EditMode enum to manage how a layer responds to input:

• MOVING: The layer is being repositioned.
• RESIZING: The layer's dimensions are being changed.
• CREATING: A new layer is being initialized.
• DRAWING: Active drawing is occurring.
• ERASING: Content is being removed.
• NONE / EMPTY: No active interaction.

Edit Points

Layers can expose TLayerEditPoint objects via the editPoints array. Each point defines:

• cursor: The CSS cursor to display (e.g., 'nwse-resize', 'move', 'ns-resize').
• getRect(): Returns the Rect area of the handle.
• move(point: Point, event?: MouseEvent | TouchEvent): The logic to execute when the user interacts with this specific handle.

Lopaka supports several font formats for rendering graphics on embedded screens. When providing or selecting fonts, you can work with the following formats:

• BDF: Bitmap Distribution Format (FontFormat.FORMAT_BDF).
• GFX: C header files containing bitmap data (FontFormat.FORMAT_GFX).
• TTF: TrueType Fonts (FontFormat.FORMAT_TTF).
• 5x7: Specialized 5x7 bitmap fonts (e.g., Adafruit 5x7) (FontFormat.FORMAT_5x7).

The SmoothDrawingRenderer is a specialized implementation of AbstractDrawingRenderer designed for platforms requiring vector-based, anti-aliased rendering (such as LVGL via a canvas). It provides high-level methods for drawing primitive shapes, complex UI components (buttons, switches, sliders, checkboxes), and text.

Note that most drawing methods in this renderer call this.clear() internally, which clears the current drawing context before performing the new draw operation.

You can deploy Lopaka using the provided docker-compose.yml file. This configuration builds the service from the local directory and maps the web service to port 80 on the host machine. The service uses the woomoo/lopaka image.

services:
  web:
    build: .
    ports:
      - "80:80"
    image: woomoo/lopaka

Use the following methods to draw basic geometric shapes. Most methods require a Point for position/size and a color string.

• drawRect(position: Point, size: Point, fill: boolean, color: string): Draws a rectangle.
• drawRoundedRect(position: Point, size: Point, radius: number, fill: boolean, color: string): Draws a rectangle with rounded corners.
• drawCircle(center: Point, radius: number, fill: boolean, color: string): Draws a circle.
• drawEllipse(center: Point, radiusX: number, radiusY: number, fill: boolean, color: string): Draws an ellipse.
• drawLine(from: Point, to: Point, color: string): Draws a line between two points.
• drawTriangle(p1: Point, p2: Point, p3: Point, fill: boolean, color: string): Draws a triangle.
• drawPolygon(points: Point[], fill: boolean, color: string): Draws a polygon defined by an array of points.

Use getFont(name: string) to retrieve a previously loaded font from the internal cache by its name.

Behavior Note: If the requested name is not found in the cache, the function returns the first available font in the cache instead of throwing an error. If the cache is empty, it returns undefined (via the iterator's next value).