Code Generation

Lopaka generates platform-specific source code from your visual design in real time. This page explains how that code is produced, how to get it into your project, and how to go the other direction — pasting existing code back into Lopaka to reconstruct layers.

Generation

How the output is built

Every time you change a layer, Lopaka rebuilds the entire code block. The output depends on four things:

1. Platform — each platform has its own code template and syntax.
2. Layers — only visible, non-overlay layers appear in the output, in their stacking order.
3. Screen title — becomes the wrapper function name (see below).
4. Code settings — toggles that control which sections are included.

Screen title and the wrapper function

The screen title (set in the screens list panel) becomes the name of the generated wrapper function. Lopaka converts it to a valid C++ identifier automatically:

Screen title	Generated function
Main Screen	void drawMain_Screen(void)
gauge display	void drawgauge_display(void)
123 Alert	void draw_123_Alert(void)
Status/Bar	void drawStatus_Bar(void)

Rules: spaces and special characters become underscores; names starting with a digit get a leading underscore; C++ reserved words get a trailing underscore.

If you turn off Wrapper function in Code Settings, the bare draw calls are output without any enclosing function. This is useful when pasting directly into an existing callback.

Layer names and variable names

Layer names appear in two places in the output:

• Comments — when Comments is enabled, each draw call is preceded by // layer name.
• Variable names — when Declare variables is enabled, property variables are named {layerName}_{property} (e.g., label_x, label_color).

Name your layers clearly before enabling variables — the names go directly into code identifiers.

Hidden layers

Layers toggled off with the eye icon in the layer panel are excluded from code generation entirely. Use this to keep work-in-progress shapes or reference layers in the project without including them in the output.

Code Settings

The Code Settings panel (bottom-right of the editor) controls what sections are emitted. Not all settings are available on every platform.

Setting	What it does
Wrapper function	Wraps all draw calls in void draw{ScreenTitle}(void) { ... }
Comments	Emits a // layer name comment before each draw call
Include fonts	Adds font declarations or #include directives for fonts used in the design
Declare images	Adds image array declarations for bitmap and icon layers
Declare variables	Extracts marked layer properties into typed variable declarations (see below)
Clear/Fill display	Adds a screen-clear call at the top of the function
PROGMEM	Marks image and font arrays with Arduino's PROGMEM storage class

Settings are saved per platform in your browser, so switching platforms preserves each platform's own configuration.

Variables

Variables let you replace hard-coded layer properties with named identifiers that you can update at runtime without touching the drawing logic.

To mark a property as a variable:

1. Select a layer.
2. In the Inspector, click the variable toggle (the hexagon icon) next to a supported property such as x, y, text, or color.
3. Enable Declare variables in Code Settings.

The property value is pulled out to the top of the generated code as a typed declaration:

// Declared at the top when "Declare variables" is on
int label_x = 10;
int label_y = 20;
const char* label_text = "Hello";

// Draw call references the variables
display.setCursor(label_x, label_y);
display.print(label_text);

Variable names are derived from the layer name and the property name. Renaming the layer changes all its variable names — do this before sharing or committing the code.

Not every property supports variables. Position, size, color, and text content do on most platforms. Properties like font size are fixed and cannot be marked as variables.

Exporting

Copy from the code panel

The code panel in the editor is read-only and always reflects the current state of your design. Click the Copy button in the code panel to copy the full output to your clipboard. You can also select text manually with Ctrl A and Ctrl C.

Download as a file

You can download the generated code directly as a .txt file. The file is named after the screen title (e.g., Main_Screen.txt) and contains the same content shown in the code panel.

To download: open the Share menu in the top bar and choose Save As → Text file.

Download fonts and images

When your design uses custom fonts or image layers, Lopaka can export those assets separately so you can include them in your project alongside the generated code.

In the Code Settings panel, a Fonts section lists all font files referenced by the design. A Images section lists all bitmap layers. Click the download icon next to each entry to save the asset.

• Font files are downloaded in the format required by the active platform (.h for GFX-based platforms, .bdf for U8g2).
• Image files can be downloaded as a C header (.h) or BMP depending on the platform.

WARNING

If your project references a custom font but the font file is not in your Arduino sketch folder, the sketch will fail to compile. Always download and place font and image assets next to your .ino or YAML file before flashing.

Import

Lopaka can parse existing platform source code and reconstruct layers from it. This is useful for picking up where a previous export left off, or for pulling an existing sketch into the visual editor.

WARNING

Code import is an experimental feature. Not all syntax is supported. The parser reconstructs what it can from a best-effort analysis of the code — review the result and check for any warnings shown after import.

How to import

Paste into the code panel: Click anywhere in the code panel and paste (Ctrl V). Lopaka detects that the clipboard contains source code (not a layer paste) and triggers the import dialog.

Import from a file: Click the Import button in the code panel (to the left of the Copy button) to select a source file from disk.

Both methods append the reconstructed layers to the current design. Existing layers are not removed. If you want to start fresh, clear the canvas first.

What gets reconstructed

The parser strips comments, extracts #define macros and variable declarations, then scans for drawing function calls and maps them back to layer types.

Parsed construct	Reconstructed as
drawLine / line	Line layer
drawRect / fillRect	Rectangle layer
drawCircle / fillCircle	Circle layer
drawPixel	Dot layer
print / drawString	Text layer
drawBitmap / drawXBitmap	Image / paint layer
Image array declarations	Bitmap data, linked to layers
Font references	Font assigned to text layers

Variable values referenced in function arguments are resolved back to their declared values, so drawRect(x, y, 40, 20, WHITE) where x = 10 and y = 5 creates a rectangle at (10, 5) with size 40 × 20.

Known limitations

• Layer names are not restored. Imported layers get generic names. Rename them manually if you plan to use variables.
• Only standard library calls are parsed. Custom helper functions, #ifdef branches, and preprocessor macros beyond #define are ignored.
• Variable state is not restored. Even if a property was originally a variable, it is imported as a fixed value. Re-enable the variable toggle per layer manually if needed.
• Color ambiguity. For monochrome platforms, the parser distinguishes 0/1 colors. For RGB platforms it expects hex constants (0xRRGGBB, 0xRRRR) or named constants like WHITE, BLACK. Non-standard color definitions may not be recognized.
• No settings detection. The parser does not detect which Code Settings were active when the code was generated. Check the settings panel after import.

Warnings

After import, any constructs the parser could not resolve are shown as warnings in a banner above the code panel. Common warnings:

• Bitmap array not found — the code references an image by name but no matching array declaration was in the pasted code. The image layer is created as a placeholder.
• Font not recognized — the font name in the code does not match any available font. The text layer is created but the font falls back to the platform default.
• Variable not resolved — a variable referenced in a draw call had no matching declaration. The argument is imported as zero.

Address warnings before treating the imported design as the ground truth.