Editor Overview

This page is the complete reference for the Lopaka editor UI. Each major section has a dedicated guide linked from the headings below. Use this page to get your bearings and find your way into the details.

Layout

The editor is a grid with five regions:

┌──────────┬──────────────────────────┬─────────────┐
│          │        Top bar           │             │
│  Layers  ├──────────────────────────┤  Inspector  │
│  panel   │        Canvas            │    panel    │
│          ├──────────────────────────┴─────────────┤
│          │  Code panel          │  Code settings  │
└──────────┴──────────────────────┴─────────────────┘

Region	Purpose
Layers panel	Screens list, layer list and groups, resizable
Top bar	Project details, drawing tools, actions
Canvas	The virtual screen you draw on
Inspector panel	Properties for the selected layer
Code panel	Live-generated source code, resizable
Code settings	Code output toggles and downloads

Top bar

The top bar contains three sections: Project details, the Toolbar, and Actions.

Project details

Shows information about the current project and screen.

• Breadcrumb — Project name › Screen name. Both labels are truncated if long.
• Platform badge — shows the active platform (e.g. tft-espi). Read-only display; change the platform via Project settings.
• Display size badge — shows the configured display resolution (e.g. 128×64).
• Star — bookmark the project. Shows the total star count. Requires login.
• Forks — shows how many times the project has been forked.
• Settings (cog icon) — opens the Project Settings modal.
• Public project — a green label shown when the project is visible to all users in the Gallery.

The project details zone is only shown when you are logged in or viewing in read-only mode.

Toolbar

Contains the Select button, all drawing tools for the active platform, and the Scale slider.

Select (no tool active)

Click the cursor icon or press Escape to return to select mode. In select mode the cursor is the default pointer; clicking a layer on the canvas selects it. Clicking empty space deselects all layers.

Drawing tools

Tools that are not supported by the active platform are hidden. The following tools exist in the codebase:

Tool	How to use
Image	Opens the image import wizard (upload or paste a PNG/BMP/GIF; pick from built-in icon packs; or paste a raw byte array — converts to a bitmap layer)
Paint	Freehand pixel-level drawing on a bitmap layer; right-click erases; hold Shift to draw straight lines
Text	Click activates the tool; a text layer is placed at the center of the screen automatically, selected, and the inspector text field focused
Rectangle	Click-drag to define opposite corners
Circle	Click-drag from center; radius follows the drag
Ellipse	Click-drag to define the bounding box
Line	Click-drag from start to end point
Triangle	Three-click multi-point: click each vertex, double-click or Escape to finish
Polygon	Multi-click: place any number of vertices, double-click or Escape to finish; double-click an existing polygon to edit vertices

LVGL only

Tool	How to use
Text Area	Same as Text but produces a multiline text layer
Panel	Draws a panel container widget
Button	Draws a button widget
Checkbox	Draws a checkbox widget
Switch	Draws a switch widget
Slider	Draws a slider widget

Image import wizard

See the full Importing Images guide for all import modes, editor controls, and step-by-step workflows.

Tip: You can also drag a PNG or BMP file directly onto the canvas to skip the wizard entirely — the image is imported with default settings.

Paint brush controls

When the Paint tool is active on a color-capable platform two extra controls appear in the toolbar:

• Color mode toggle — switch between Monochrome (1-bit) and RGB brush modes.
• Brush color picker — visible in RGB mode; sets the current paint color.

Scale

A scale control on the right of the toolbar adjusts canvas zoom. The same zoom can be changed with Ctrl + / Ctrl - or by scrolling the mouse wheel while holding Ctrl/Cmd.

Actions

Project-level actions, visible when logged in or viewing in read-only mode.

• Star — bookmark the project. The button shows the current star count.
• Fork — creates a copy of the project under your own account and opens it immediately. Requires login.
• Share — dropdown menu with the following options:
  • Copy public link — copies a direct gallery URL to the clipboard. Disabled if the project or current screen is private.
  • Presentation — opens a full-screen slideshow of all screens in the project.
  • Save As — exports the current screen. Sub-options: Text file (source code), PNG image, BMP image.

Canvas

The canvas renders the virtual screen at the selected scale. It is a pixel-accurate preview of what will appear on the target display.

Grid

A pixel-grid overlay appears automatically when zoom is 3× or higher. The grid is visual only and has no snap behavior.

Mouse interactions

Interaction	Effect
Click empty area	Deselect all layers
Click layer	Select that layer
Shift + click	Add or remove layer from selection
Click-drag empty area	Draw a rubber-band selection rectangle
Click-drag selected layer	Move the layer
Click-drag resize handle	Resize the selected layer
Hold Shift while resizing	Constrain to original aspect ratio
Hold Alt while resizing	Resize from center
Click a grouped layer	Selects all layers in the group
Double-click a grouped layer	Selects that individual layer only
Shift + click a grouped layer	Adds all group members to selection
Double-click Polygon / Triangle	Enter vertex edit mode
Right-click (Paint tool)	Erase pixels
Ctrl/Cmd + scroll wheel	Zoom in / out, centered on the cursor
Scroll wheel (no modifier)	Pan the canvas

Dropping images

You can drag a PNG or BMP file directly onto the canvas. The image is imported immediately using default settings and placed as a bitmap (Paint) layer.

Screens list

The screens panel sits at the top of the left sidebar and lists all screens in the current project.

Adding screens

Click the + button in the panel header to add a new screen. The name is auto-generated as Screen N with the next available number.

Navigating screens

Click any screen row to open it in the editor. The active screen is highlighted with a primary-color border on its thumbnail.

Reordering screens

Drag a screen row to a new position. The order is saved immediately.

Renaming a screen

Double-click the screen name to edit it inline.

Visibility indicator

A small dot on each screen thumbnail shows its visibility state:

• Green — screen is public (visible in the Gallery).
• Blue — screen is private but the project is public (hidden by project settings).
• No dot — screen is private.

Context menu (right-click)

Right-click any screen to open its context menu:

Action	Description
Duplicate	Creates a copy of the screen and appends it to the list.
Publish	Makes a private screen visible in the Gallery.
Make Private	Hides the screen from the Gallery.
Delete	Removes the screen. Requires a second click to confirm.

Layers list

The layers panel lists every layer in the current screen in render order (top of the list = top of the stack = drawn last, i.e., on top of everything else). It lists every layer in the current screen in render order (top of the list = top of the stack = drawn last, i.e., on top of everything else).

Layer list actions

Action	How
Select a layer	Click its row
Multi-select	Ctrl A to select all layers
Reorder	Drag-and-drop a row to a new position
Reorder with keyboard	Select a layer, then Ctrl ↑ / Ctrl ↓
Show / hide	Click the eye icon on hover
Lock / unlock	Click the lock icon on hover
Delete	Select, then Delete or the Delete button in the Inspector

Groups

Layers can be grouped. A group appears as a collapsible entry in the layer list. Click the group header to select all member layers at once. Click the expand arrow to show or hide member layers inside the group row.

Action	Shortcut
Group selected layers	Ctrl G
Ungroup	Ctrl Shift G
Rename group	Double-click group name in Inspector

You can drag individual layers into and out of groups by dropping them inside or outside the group container in the list.

Inspector

The inspector panel is on the right side. Its content changes depending on the selection state.

Shortcuts cheatsheet

When nothing is selected the inspector shows a keyboard shortcut reference. This is a quick reminder; the full list is in the Keyboard Shortcuts reference.

Single layer selected

The inspector shows:

• Layer icon + name — hover to reveal the edit icon, then click it to rename inline.
• Alignment buttons — six buttons that position the layer relative to the display edges and center:

Button	Single layer	Multiple layers
Align left	Move to left edge of display	Align all left edges to the leftmost layer
Align horizontal centers	Center horizontally on display	Align all horizontal centers to the shared center
Align right	Move to right edge of display	Align all right edges to the rightmost layer
Align top	Move to top edge of display	Align all top edges to the topmost layer
Align vertical centers	Center vertically on display	Align all vertical centers to the shared center
Align bottom	Move to bottom edge of display	Align all bottom edges to the bottommost layer

With multiple layers selected, alignment is relative to the bounding box of all selected layers, not the display. Each layer moves to match the corresponding edge or center of that combined bounds.

• Property fields — all editable properties for the selected layer type. Common fields:

Field	Type	Layers
X, Y	Number	All positionable layers
W, H	Number	All sized layers
X1, Y1, X2, Y2	Number	Line
Radius / RX / RY	Number	Circle, Ellipse
Fill	Boolean	Rectangle, Circle, Ellipse, Triangle
Inverted (XOR)	Boolean	Most shape layers
Color / Fill / Back / Border	Color	Platform-dependent
Font	Font picker	Text, Text Area, Button, Checkbox
Text	String	Text, Text Area, Button, Checkbox
Checked	Boolean	Checkbox
Overlay	Boolean	Dims layer and skips it from code generation
Alpha channel	Boolean	RGB paint layers

• Variable toggle (small switch next to numeric and color fields) — marks a property as a variable instead of a literal in the generated code.
• Actions — image operation buttons available on bitmap (Paint) layers:
  • Flip horizontally — mirror the bitmap along the vertical axis.
  • Flip vertically — mirror the bitmap along the horizontal axis.
  • Rotate clockwise — rotate the bitmap 90° to the right.
  • Invert colors — invert every pixel in the bitmap.
• Merge to Bitmap — renders all selected layers into a single bitmap (Paint) layer. The source layers are removed and replaced by one flat image the size of the full display. XOR/inverted layers are composited correctly during the merge.
• Delete — removes the selected layer(s).

Multiple layers selected

The inspector shows the count of selected layers, alignment buttons (for distributing relative to each other), the Merge to Bitmap button, and the Delete button.

If all selected layers belong to the same group, the group name is shown and can be renamed inline.

Code

The code panel sits at the bottom of the editor. It shows the source code generated from the current canvas state in real time.

The panel uses syntax highlighting for the active platform language (C, C++, YAML, etc.). When you select a layer, the panel scrolls to and highlights the corresponding generated line.

• Copy button — copies the full generated code to the clipboard, including any custom prefix and suffix you have written (see below).
• Import button — lets you upload a source code back to restore layers. Works best with code that Lopaka itself generated.

Editable code template

The code panel is split into three zones separated by marker comments:

// [BEGIN lopaka generated]
  … generated draw calls …
// [END lopaka generated]

The prefix zone (above the BEGIN marker) and the suffix zone (below the END marker) are fully editable. Type any code you need there — #include directives, variable declarations, a setup() function, or anything else your sketch requires. The generated section in the middle is read-only and updates automatically as you edit layers.

Your prefix and suffix are saved locally in your browser per screen and restored on page reload. Switching between screens loads the template that belongs to each screen.

Code settings

The code settings panel is to the right of the code panel. It controls how source code is generated.

Output toggles

Available toggles depend on the platform. The common ones are:

Setting	Effect
Wrapper function	Wraps all draw calls in a named function
Comments	Emits a // layer name comment before each draw call
Include fonts	Outputs #include or font declarations
Declare images	Outputs bitmap array declarations
Declare variables	Extracts mutable layer properties into typed C variables
Clear/Fill display	Prepends a screen-clear call at the top of the function
Declare as PROGMEM	U8g2 only — places bitmap arrays in flash memory

Syntax selector

U8g2 is the only platform with multiple syntax modes. A Syntax dropdown appears above the toggles with two options:

• Arduino — outputs C++ code for the Arduino framework.
• ESP-IDF — outputs C code for the ESP-IDF framework.

Font and image downloads

When fonts or bitmap images are referenced by layers, download links appear at the bottom of the code settings panel. Click a font link to download the .h or .bdf file. Click an image link to download the bitmap as a .bmp or .h file depending on the platform.

Autosave

The editor saves your work automatically as you draw. Changes are persisted to the cloud every second after the last edit. There is no manual save button; closing the tab or navigating away is safe after the canvas is no longer changing.

Read-only / gallery mode

When opening a project you do not own (gallery or shared link), the editor renders in read-only mode. Tools are hidden, the inspector is view-only, and code can be copied but not imported. The layer list is still navigable.