LVGL Pro

LVGL Pro is a professional development environment designed to accelerate LVGL UI development. It provides a workflow that sits on top of the open-source LVGL library, allowing developers to design, develop, test, and debug embedded UIs using an LVGL-native editor, Figma integration, and CLI tools.

Key benefits include:

• Instant Iteration: Real-time previews as you edit XML.
• Maintainability: Building screens from reusable components with custom properties and public APIs.
• Multi-target Support: Managing different resolutions, hardware configurations, or architectures within a single project.
• Designer-Developer Collaboration: Using the Figma Flow to export designs directly into the project and sharing interactive UIs via the Online Viewer.
• Automated Testing: Using the CLI to run UI tests and generate screenshots in CI/CD pipelines.

The LVGL Pro Editor is a visual development environment for building embedded UIs. It is part of the LVGL Pro toolkit, which includes a CLI, Figma plugin, and online viewer.

Key capabilities include:

• Real-time preview: Pixel-perfect rendering using real LVGL to match device output.
• XML Editing: Full control over UI structure with autocomplete and syntax highlighting.
• Design Mode: Drag-and-drop visual editing for building screens.
• C Code Generation: Exporting optimized C code for firmware integration.
• Advanced Features: Support for custom widgets, data bindings, UI testing, animations, and multi-language translations.
• Figma Integration: Exporting designs directly from Figma to XML via a plugin.

LVGL Pro is a professional toolkit designed to streamline embedded UI development through four primary components:

• XML Editor: A visual editor with autocomplete for describing UI components, screens, tests, animations, and data bindings. It provides pixel-perfect previews and C code export.
• Online Share: A web-based version of the Editor that loads XML files directly from GitHub repositories, allowing for UI sharing without local installation.
• CLI: A command-line interface used for validating XML files, generating C code, and executing UI tests within CI/CD pipelines.
• Figma Plugin: A tool to extract and synchronize style properties from Figma designs into the Editor or via the CLI.

The LED widget is a rectangle or circle used to simulate a glowing indicator. Its appearance is driven by a single color, which controls the background, border, and shadow. The brightness of the LED is adjusted to simulate the glow effect.

To use an LED, you can define its color and its brightness level. Lowering the brightness darkens the entire component.

// Example usage via the built-in example
lv_example_led();

The plugin interface is organized into a header and several functional modes:

• Mode Toggle: Located at the top of the header, used to switch between Project, Annotate, Export, and Inspect modes.
• Project Identity: Displays your connected project's name and branch on the left side of the header.
• Connection Status: A status dot glows green when the plugin and service are successfully connected.
• Connection Tools: The plug icon allows you to open connection details, while the log button provides access to logs.

The Switch is a small slider widget used to display and toggle an on/off value. By default, it is oriented horizontally, but it automatically switches to a vertical orientation if its width becomes smaller than its height. You can manually control this behavior using the orientation property.

/* See lv_example_switch for a full implementation example */

The Roller is a wheel-like list widget used to pick a single item from a list by scrolling. The item positioned in the center band is considered the selected item and is typically styled differently to indicate selection.

To use a Roller, you can define its options, set the number of visible rows, and choose between normal or infinite scrolling modes.

<!-- Example conceptual XML usage -->
<lv_roller 
  options="Option 1, Option 2, Option 3" 
  visible_row_count="3" 
  options-mode="normal" />

The Label widget is used to display text in the UI. It supports advanced features such as line wrapping, long-text overflow modes (scrolling, clipping, or ellipsis), per-word recoloring using color codes, and binding text to subjects using printf-style formatting.

<lv_label text="Hello World" />

The lv_spangroup widget is used to display rich text composed of multiple spans. Each span can have its own unique font, color, and size. Spans can be dynamically added or removed at runtime to create complex, multi-styled text blocks.

<lv_spangroup>
  <lv_spangroup-span text="Hello " style="color:red" />
  <lv_spangroup-span text="World" style="color:blue; font_size:20" />
</lv_spangroup>