Option to design standalone UI elements that can be easily added to an existing UI


we use LVGL in our Smartwatch project (link). This Smartwatch is able to run user-specific apps and we are looking for a good workflow to use SquareLine Studio to design the UI of those apps. We use Zephyr and CMake as build environment.

I played around with different options and ideas on how we could combine everything in a good and clever way, but I got stuck at different points because SquareLine Studio isn´t flexible enough. Maybe there is a good solution to handle it.

What do you want to achieve?

However, it turns out that SquareLine Studio is not ideal for designing single screens or standalone applications that can be embedded in an existing LVGL application.

What does an ideal workflow look like (for us)?

  • Use SquareLine Studio to design the UI
  • Export the UI into an UI directory of the app
  • The UI directory of the app contains a CMakeLists.txt to integrate the exported UI
  • Add the source code for the app to connect the app UI with the app logic and allow the integration into our ecosystem
  • Compile everything

What kind of problems are we facing now?

  • The CMakeLists.txt compiles everything as a library and this can not be integrated with our application without issues (maybe an issue with our setup). But it would be helpful if we could choose between compiling as a library or as raw code, by switching between
add_library(ui ${SOURCES})


target_sources(ui PRIVATE ${SOURCES})
  • ui_helpers is generated for every UI. The functions in this code have the same names which leads to duplicated errors during the compilation if we have more than one UI added.

  • A bunch of extern variables is exported. There is a risk of issues when using more than one UI and without a proper name scheme on our side (which is hard to implement). Or we do have to rename all the variables to prevent this

  • ui_init has the same name in every UI, so we have duplicated issues again

  • The names for the UI initialization function (i. e. ui_Home_screen_init) should contain the project name. Otherwise, we have a duplicated issue again if we have another UI with a Home screen

  • It´s theoretically possible to use each UI as a library (we haven´t tested it, because of the issue from above). But then we still have the naming issue

Maybe there is an option to create the UI as “module” or something like this. As a module, the files ui and ui_helper shouldn´t be included in the exported files. Then ui_helpers has to be generated manually, because they are needed only once(?).

Do you see alternative options and workaround to achieve it?

Not yet. I think we will stick with the plan to do all the changes by hand and individually for each UI project. But we are thinking about it at the moment.

Feel free to discuss this with me. Would be really nice if we could find a good solution to handle these issues, so we can use your tool for our project.

Thank you for the nice idea and details, we’ll consider including this feature in future versions of SquareLine Studio.

Adding a plus one on this, I think it would be a very nice feature and would improve our workflow alot.

Similar question was asked here: Loading screens from SD card - #3 by Thomas1955 and V1.4.0 CPU usage is too high )
I tested the manual solution there as an interim workaround (attached a zipped example V1.4.0 CPU usage is too high - #2 by Hermit), this feature-request is already on the list of tasks to do.