Introducing LVGL's UI editor (Preview of v0.1)

Announcements
1

Hi Guys,

I’m happy to share that we have published a detailed video about our UI editor:

image

The main features of this tool include:

  • Component-oriented: Various elements of the UI can be implemented as reusable components.
  • XML-based: The components are described in an HTML-like form.
  • Instant preview: The components can be previewed as you edit them.
  • Figma support: LVGL’s Figma plugin helps to quickly extract styles from any Figma elements.
  • Online preview: A CI action converts the XML files into a website where they can be previewed.
  • Custom widget creation: Unlike components, widgets have C logic. You can recompile the editor to make it contain the new widgets’ code.
  • C export: Both components and widgets can be exported to C, enabling seamless integration into your application, just like handwritten code.
  • Runtime XML loading: Components can be loaded from XML at runtime without recompiling the firmware.

The target release date of v0.1 is 2025 January. v1.0 is planned at 2025 September.

We would love to hear what you think about this tool and concept. Please leave your feedback here: Issues · lvgl/lvgl_editor · GitHub

6 Likes
4

Hi @kisvegabor,

Congratulations on the LVGL’s UI editor.

One question, can I make a discrete slider with the value displayed on top of the thumb ?
Both in the UI editor and manual code typing ?!

Example:
Android dev: Material Design

discrete_slider
discrete_slider771×423 38.2 KB

Let’s say I did it in percentage in range 0% to 100% value.
In 0% i would put OFF and in 100% put FULL, in the middle steps 10%.
Would show on top of thumb: OFF, 10%, 20%, 30%, … , 90%, FULL

Thank’s.

1 Like
5

Thank you for the great question!

Here you can create a custom widget, similar to the dark_slider in the video. Set the range to 0…10 and in the event callback you can do something like:

value = value * 10; /*0..10 -> 0..100*/
if(value == 0) text = "OFF";
else if(value == 100) text = "FULL";
else text = to_string(value); /*to_string is just an example function*/

draw_text(text);
6

I see, but I think that the rendering on top of the thumb shouldn’t be so trivial right ?

7

Here is the related code: lvgl_editor/examples/widgets/dark_slider/dark_slider.c at master · lvgl/lvgl_editor · GitHub

Not trivial but not super complicated either.

1 Like
9

Hi, awesome work congratulations.

Where can I download and try the UI editor?

10

I’m not able to run it on macOS Apple Silicon, the docker desktop requires WSL2 which is not supported by Paralells Desktop.

AppImage encounted exe format error on the Virtual Ubuntu as well.

Do you have any plan to release macOS version or Linux ARM64 version? I’m willing to try it. Thank you.

11

Hey all,

In case someone missed it, v0.1 is out and can be downloaded and tried out.

Unfortunately the Mac version is not available yet. Releasing apps for Mac is well… complicated…
But we are on it!