Hi @kisvegabor,
First of all, thank you for working on the LVGL Editor. I am relatively new to LVGL, tried all the UI designers and I think what we really need is a tool that let’s us write the UI in a declarative way with a live preview, like the new editor.
However, to be honest, I am quite disappointed “surprised” about the choice to go with XML. This is not really a format intended to be written (and read) by humans, I think it is primary intended to be processed by machines. It is simply too verbose (so many special characters and syntax boilerplate) to write it by hand, making UI design unnecessary cumbersome (and slow). In the end, an LVGL UI description file is not a data file. And also we don’t need the flexibility of XML or HTML since it only needs to reflect the feature-set of LVGL.
But I am not writing here to complain. I’d like to make a suggestion and share my experience with a large, open-source desktop application (LibrePCB) which I am migrating from Qt to Slint. This UI toolkit uses the same principle as you (a declarative file, a code generator, and a live preview), but they invented a domain-specific language. Honestly I was skeptical about it in the beginning, but after a deeper look (and now heavily using it since half a year), I have to say this DSL is the feature that makes Slint so incredibly powerful. It is clean & lean, with no unnecessary syntax clutter at all (so it is very easy to write and read by humans), and reflects perfectly the structure and feature-set of the underlying UI toolkit (simple example). With the experience I made with Slint, I am pretty sure a DSL for the LVGL editor would be the perfect solution too.
In principle, we only need to transform the XML into a DSL. Let me make a real-world example by converting this XML into a DSL:
<screen permanent="true">
<view width="100%" height="100%">
<style name="main" />
<header title="settings"/>
<row flex_grow="1" style_bg_color="0xebebeb" style_bg_opa="255" style_pad_all="5"
width="100%" flex_flow="row_wrap">
<column>
<checkbox text="Bluetooth" subject="bluetooth_on"/>
<checkbox text="WiFi" subject="wifi_on"/>
<checkbox text="Notifications" subject="notification_on" />
<lv_button style_text_font="font_subtitle">
<lv_label text-translated="about"/>
<event_cb callback="about_click_event_cb" trigger="clicked" />
</lv_button>
</column>
</row>
</view>
</screen>
Which could look something like this:
settings := Screen {
width: 100%;
height: 100%;
style: main;
permanent: true;
Header {
title: "settings";
}
Row {
flex_grow: 1;
style_bg_color: #ebebeb;
style_bg_opa: 255;
style_pad_all: 5;
width: 100%;
flex_flow: row_wrap;
Column {
CheckBox {
text: "Bluetooth";
subject: bluetooth_on;
}
CheckBox {
text: "WiFi";
subject: wifi_on;
}
CheckBox {
text: "Notifications";
subject: notification_on;
}
LvButton {
style_text_font: font_subtitle;
clicked: about_click_event_cb();
LvLabel {
text: @tr("About");
}
}
}
}
}
(just as a very simple example, actually the Slint DSL supports way more specialized features like properties, 2-way property bindings, evaluating expressions, functions, callbacks etc.)
IMHO a syntax like this is so much easier to write than XML. So much less boilerplate and special syntax characters. And it’s also much easier to read. Note that for the live reload in the application a DSL might not be the best solution (maybe a DSL parser is more complicated / larger in size than an XML parser) but I think this feature should have second priority and could be implemented with an intermediate file format (e.g. DSL compiled into XML or even a binary format which is then loaded by the application).
Just wanted to share my thoughts about it. Maybe it’s too late anyway to move to a DSL now, or maybe you have already considered it and decided for XML for some other reasons.
P.S. while writing this post, I ended up converting the globals.xml to a file which is actually YAML (which is also much more convenient than XML) 
images:
img_wifi: images/wifi-solid.png
img_bluetooth: images/bluetooth-brands.png
fonts:
font_title:
type: tiny_ttf
size: 20
src: fonts/Inter-SemiBold.ttf
font_subtitle:
type: tiny_ttf
size: 14
src: fonts/Inter-SemiBold.ttf
subjects:
hours: 17
mins: 45
age: 17
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.
