Introducing the Design of the UI editor's XML Markup

Hey,

We’ve made significant progress! After gathering extensive feedback from companies and establishing important collaborations, we have finally begun working on the editor itself too.

The first step was to create several internal proofs of concept. Based on these and the feedback we’ve received, we have started designing how the editor should truly work.

As you may already know, it will be a developer-centric tool aimed at helping you implement and test UI designs at a rapid pace. This means the focus will be on you and your workflow as a developer. :hugs:

Here’s what it means:

  • Modularity is key: you will be able to create custom widgets with a custom API, not just using LVGL’s built-in widgets.
  • The generated code and your written code will coexist seamlessly.
  • The new widgets can be tested.
  • Version tracking will naturally work (we’ll use only text files).
  • The primary interaction with the editor will be through your keyboard, not your mouse.

The core idea is to describe new widgets in XML, with an excellent autocomplete feature to help you write UIs quickly. As you type, the result will be immediately displayed in a preview (similar to Google Chrome’s Inspector tool). In this XML file, you can describe how the widgets look (similar to HTML and CSS). To implement complex logic, you can extend your widgets with custom C code. Finally, your custom widget (XML + C) can be compiled back into the editor, allowing you to use your widget with all its features.

I hope you’re still with me, because here’s the exciting part! :blush: I’ve just published the design of this XML markup. It includes a lot of details about widgets, constants, font and image management, component libraries, and more.

You can take a look at it here: GitHub link. It’s a bit long, but I hope you’ll find it interesting.

Please let us know what you think here or on GitHub. We’re developing this tool for you, and now is the best time to tell us what we should change!

4 Likes

It’s a good start Gabor, keep up the great work you’re doing!

1 Like

I have delved deeply into some UI designers before, and I want to clarify a few things. For example, are the files generated by the new editor build XML+C? Does the SoC need an XML parser to run the resource files generated by the new editor?

Hi,

I’d be happy all the questions that you have :slight_smile:

It’s up to you:

  1. You can export C code which doesn’t require XMLs at all. It’s just C code, similar to what you can write with hand.
  2. Or you can load the XMLs directly if you want.