The interface

A tour of the window, panel by panel, and what each control is for.

The designer is one window with five regions: a menu bar and toolbar across the top, the Screens, Widgets and Hierarchy panels on the left, the canvas in the middle, the Inspector, Hardware, Data, Theme and History tabs on the right, and the Assets, Console and Problems tabs along the bottom. Every panel, menu and list works from the keyboard as well as the mouse - see Keyboard. Which panels are open is remembered per browser, as are the zoom, the grid and which tabs were showing.

The menu bar

The centre of the bar names the project and its MCU. To the right are a yellow Support button (a coffee for the developer, through Buy Me a Coffee, in a new tab), a Gallery button, the green Export code button, and the account controls: Sign in when you are anonymous, or your nickname with a menu (My projects, Edit profile, Sign out) when you are not.

A right-click on a widget, on the canvas or on its row in the Hierarchy, opens a menu of what can be done to it: the Edit menu's Cut, Copy, Paste, Duplicate and Delete, the inspector's Bring to front and Send to back, Hide and Lock, and for an instance of a component Go to master, Reset to master and Detach instance. A widget that is not selected is selected first; a right-click on one that is keeps the whole selection. A right-click on nothing deselects and offers Paste, Select all, Undo and Redo. Shift+F10, or the menu key, opens it for the selection from the keyboard. In Preview, and in a text field, the browser's own menu is left alone.

The toolbar

Undo and redo, a readout of how many screens and widgets the project has and what panel it targets, a switch that shows the grid and one that snaps to it, zoom out, the zoom percentage, zoom in, zoom-to-fit, and the Play button that enters preview. The zoom is a percentage of device pixels, so 100% shows the panel at its native resolution.

Screens

The list of screens in the project, with the current one highlighted. Add screen creates a blank one the size of the panel. Duplicate is beside every screen's name: it makes a copy with everything on it, and what the copy's widgets do to each other they do on the copy, not on the original. Rename and delete appear when you point at an entry. Deleting the last screen is refused. Clicking a screen makes it current: the canvas shows it and the Inspector, when nothing is selected, edits it.

Widgets

The catalogue, in three groups. Basic is the building material - Panel, Container, Button, Label, Image, Textarea, Tabview. Controller is anything a finger operates - Slider, Switch, Checkbox, Dropdown, Roller, Arc, Spinbox, Image Button, Keyboard, Calendar, Colorwheel. Visualiser shows a value - Bar, Chart, Spinner. Click an entry to add one in the middle of what is selected - into a selected panel, container or Tab view (the tab in sight), or beside the selected widget (a button included) - and of the current screen when nothing is; or drag it onto the canvas to place it, including into a panel or container. Each is described in the widget reference.

Hierarchy

The tree of widgets on the current screen, in z-order. Click to select, drag to re-parent or re-order, and use the two buttons on each row to hide a widget on the canvas (a designer convenience that is not exported) or lock it against accidental drags. Once a widget holds others, a Collapse all button appears in the header to fold every container.

Folding the panels away

Every side column can be folded to a slim strip, which is the answer on a laptop screen. The chevron in the Screens header folds the Screens and Widgets column; the one in the Hierarchy header folds the hierarchy; the one at the right-hand end of the Inspector / Hardware / Data tab row folds the whole right panel. A folded column shows its name sideways - click the strip to reopen it. The same switches are in the View menu, together with Focus on the canvas, which folds everything (and the bottom panel) in one go, and Show every panel to bring it all back. On a window narrower than about 1240 pixels the hierarchy starts folded; under about 980, so does the Screens and Widgets column.

Point at a widget's row in the Hierarchy, or select it, and four buttons appear on the row: hide, lock, duplicate and delete. On a row that is part of a selection, duplicate and delete act on everything selected. The toolbar has a Duplicate button too, beside the grid and snap switches, and right-clicking a widget offers the same.

The canvas

The screen at the chosen zoom, drawn by the same renderer the gallery previews use. Everything you would expect works: click to select, drag to move, drag the eight handles to resize, drag on empty space for a marquee, Shift-click to add to the selection. Widgets snap to the grid (its step is chosen in the View menu, from 4 to 32 px) and to alignment guides against siblings and the parent's edges and centre; hold Alt while dragging to switch both off, and Shift while resizing to keep the widget square. Arrow keys nudge by one pixel, Shift+arrows by the grid step.

The grid is drawn over the design as faint dotted lines, every fourth a little stronger, so the step can be seen as well as snapped to. It lies over everything on the screen, since a design's first widget is usually a backdrop that would hide it, and it is never in Preview, in an export or in a gallery picture. The toolbar's grid button, View → Hide the grid and Ctrl+' each switch it off and on, and the choice is remembered in the browser. Showing the grid and snapping to it are two switches, and either works without the other. Zoomed far out, some lines are left out so that they do not run together.

A drag is committed as a single undo step when you release, however far the mouse travelled.

A selected widget stays where it is in the stack: whatever lies over it is still drawn over it, so it can be placed against that, and only its outline and handles are on top. Where another widget covers it, a drag begun inside its outline still moves it, and a click there, with no drag, picks the widget on top instead.

The screen cuts away whatever lies outside it, as the panel will. A widget that has ended up wholly off the screen - dragged too far, or left behind when a screen was made smaller - is drawn faintly where it lies, in an orange dotted box with its name, so it can be found. Press it there and drag it back; a selection box can be started from the ground round the panel to catch several. The part of a widget that hangs off an edge can be picked up the same way. A press on the empty ground round the panel, like one on an empty part of the screen, takes the selection away.

Inspector

Every panel is a list of sections, and each starts folded: press a heading to open it. What you open stays open - across widgets, tabs and reloads, in this browser - so a panel settles into showing the parts you use.

Everything about the selected widget, top to bottom:

• Name - the C identifier, and a Delete button.
• Geometry - Align, X, Y, Width, Height; then a row of alignment tools and the z-order buttons (Bring to front, Bring forward, Send backward, Send to back).
• The widget's own settings - the parameters for its type: a slider's range and value, a label's text and long mode, a chart's series.
• Flags - the LV_OBJ_FLAG_* switches: Hidden, Clickable, Scrollable and the rest.
• Layout - None, Flex or Grid for widgets that contain others.
• Style settings - a Part and a State selector, then every style property grouped by Background, Border, Outline, Shadow, Text, Image, Line, Arc, Padding, Transform and Misc.
• Events - triggers and their actions.
• Data bindings - variables driving properties, and vice versa.

With nothing selected the Inspector edits the screen: its name and the C identifier it becomes, the Temporary and Don't export flags, the Screen size (with a button to match every screen to the display), its layout, its styles and its screen-level events.

Hardware

Eight tabs: Board (MCU, flash, PSRAM, partitions, FQBN, graphics library, filesystem and, last, the preset), Display (controller, bus, pins, resolution, rotation, colour depth and order, inversion, backlight pin, active level, PWM dimming and default level), Touch (controller, bus, pins, address, axis swap and inversion, and for a resistive panel whether it calibrates on the board plus its starting range), Buses (extra I2C and SPI buses, each labelled with the Wire or SPI object it becomes), Devices (peripherals and their configuration), I/O (I/O extenders, analog inputs, digital I/O), Inputs (rotary encoder, button pad, keypad) and Check, which carries a badge with the current error count. The bottom panel's Fonts tab holds fonts you import - see Importing your own font. The three hardware pages - Boards and displays, Peripherals and I/O - go through them.

Data

Two lists: Variables, each with its type, source, formula, unit, decimals and range, and Automations, each with a trigger and an action list. Variables and bindings and Automations.

Theme

Colours and themes comes first. It names the colours a design is drawn in and switches between themes, which restyles the whole project in one click. See Project themes.

Then the project-wide look LVGL itself is given: Mode light or dark, the Primary and Secondary colours and the Default font, which become the lv_theme_default_init() call; the LVGL version the project targets (9.x or 8.3.x - it changes which registration calls and API names are generated); and Fonts in use, the Montserrat sizes that will be enabled in lv_conf.h and the library fonts that will be copied into src/ui/fonts/, each with its flash cost.

History

The undo stack as a list, one entry per committed change, with the label the action gave it - Add Button, Set text, Align. Click an entry to jump back to that point.

It lasts for the session and is gone on a reload. The copies kept of a saved project each time it is saved are something else: File > Version history, part of Pro - Accounts and limits describes it.

The bottom panel

Assets lists imported images and the filesystem settings. Fonts holds fonts you import. Icons is the icon library: search it, see an icon at device sizes, and add it as an Icon widget or put it on the selected button. Console is where the preview logs things it cannot simulate and where actions report what they did. Problems is the validator's output, the same list the Check tab and the export dialog use, with errors and warnings counted separately on the tab. Each problem says where it is fixed and takes you there: press one and the tab it names opens with the widget, pin or variable selected. The panel can be hidden from the View menu; each tab shows a count when it has something to say.

Drag the bar along the panel's top edge to make it taller or shorter - or focus it and use the arrow keys - and double-click the bar to put it back. The height is remembered in this browser. The filesystem settings on the Assets tab are the same ones as on Hardware › Board.

Keyboard

Nothing needs the mouse. Tab moves between the regions; inside one, the arrow keys move within it. The menu bar opens with Enter or ↓ and walks with ← and →. The widget palette is one stop per group, with the arrows moving between tiles and Enter adding the widget where a click would. In the Hierarchy, ↑ and ↓ move, → and ← open and close a branch, Enter selects (Ctrl+Enter adds to the selection) and F2 renames. Tab rows - the side panel, Hardware, the bottom panel - move with the arrows. A dialog takes focus when it opens, keeps it while it is up, and hands it back to whatever opened it when Esc closes it.

Shortcuts

Hold Alt while dragging to bypass snapping; hold Shift while resizing to keep a widget square.

Copying a group of widgets

Select as many widgets as you like, on the canvas or in the hierarchy, and copy them. Paste them on the same screen or go to another screen and paste there. A container comes with everything in it. Every pasted widget is a widget of its own: new names where the screen already has those names, and nothing shared with the original.

What the group did among itself comes across intact. A button that changed the label beside it changes the copy of that label; an arc that carried a pointer carries the copy of the pointer.

There are two ways to paste, and a note on the canvas lets you switch for the paste you just made:

• Paste (Ctrl+V) brings how the widgets look and nothing they were wired to: new widgets, ready to be bound to something else.
• Paste with bindings and events (Ctrl+Shift+V) brings what they had as well: the variables they are bound to, their events and their translations.

A copy of a component is another instance of that component either way: it arrives whole, and goes on following its master.

Cut and paste is a move, so there it is the other way round: a widget you cut arrives with everything it had, and Shift is what leaves it behind. Duplicate (Ctrl+D) and Duplicate screen always keep everything.

A paste goes beside the originals on their own screen, and to the same position on another one. To paste into a container, select that container first. Copying is within one project.