LVGL Pro Editor Project Setup Question - How to create a MVC-ish setup?

How-to
1

I’m trying to figure out how to set up my LVGL project in a way that LVGL’s Pro Editor likes it. I’ve been trolling through all the demos, documentation and a string of projects but none really get into the Editor’s way of creating the project. My experience is mostly C# & C++, so there might be some core concept of C that I just don’t know.

Or, maybe there is something like #define LV_IGNORE_THIS or something to STUB out that is hidden in the documentation.

So, lets say I have a code layout like this:

+src/main.c

  • Top level file, includes “demo.h” and “logic.h”

+src/logic.c (and .h)

  • Business logic, things like “access a database” and “read from a network”
  • demo/demo.c (and .h) ← Export from LVGL XML project
  • demo/demo_gen.c (and .h) ← Export from LVGL XML project

In demo.c, I have a function called “button_clicked” that is called via callback from a button on a screen created in the XML project. I want it to be able to call a function in logic.h. In my normal C#/C++ mind, I tag of a rider to the button_clicked event in the initliazation of logic.h.

void button_clicked(lv_event_t * e)
{
call_function_in_logic_h();
}

So, here is where things get murky.

If I try to build in LVGL, it gets upset because it can’t find that undefined symbol.

No problem. Add in an extern in demo.c:

extern void call_function_in_logic_h();

This will build at the top level build. But LVGL Editor fails: undefined symbol: call_function_in_logic_h

I went on to try different methods to do something like how there used to be lv_msg() in 8.0x to try to set it up to have some sort of global event sender. But I can’t figure out the functions to bind an event that might not exist when the screen changes or if I am going down the wrong rabbit hole.

So, I’m stuck with trying to figure out the “intended” way of using the lvgl project. I wish there was a simple short project like the lv_port set that is just a really,really simple LVGL Editor project with a wrapper to guide this expectation.

2

I figured out part of my question.

LV_EDITOR_PREVIEW ← This is the compiler def I was looking for that is set in for editor preview builds.

Searching the documentation, I found it once on the page for the Zephyr RTOS - LVGL 9.5 documentation

Which is why I hadn’t seen it until now.

3

Hi!

Yes you can use LV_EDITOR_PREVIEW to ignore or include files in the Editor build.

Let me give you a more complete overview about your question on how to structure a UI project using LVGL Pro Editor.

Here in the LVGL Services team we use LVGL Pro daily to implement customer projects. We usually don’t have the customer hardware, don’t know how the main application is structured or have access to it.

Even though we can develop a full decoupled UI from the main application. To achieve such thing we make heavy usage of LVGL subjects and observers: How to Use - LVGL 9.6 documentation
We don’t mix application logic code with UI code.

The application logic and UI logic interact using subjects.

For example let’s say there is a toggle switch in the UI that should turn on the WiFi of the device. Instead of creating a callback that will run WiFi stuff inside the callback, you can bind the toggle switch value to a subject.

The main application logic can set up an observer to “monitor” the toggle switch value and start a thread that will then manage the WiFi of the device. This way you don’t mix WiFi code inside the UI code.

Another example. Let’s say you have a “Save” button that should make a HTTP POST request to save some user data somewhere.
You can create a click callback but instead of handling the POST request inside the callback, you can set a subject value indicating the user clicked the “Save” button.
Then on the main application side of the code you can have an observer callback to monitor that button value and then handle the HTTP request.

This way you can develop the full UI code without relying on the main application logic. And by doing that you can test the full UI inside the Editor.

All this custom UI C code for handling subjects and all that you can do it in the main C source file of the UI generated by the Editor or other custom C files that you may create yourself.

Take a look at this Metronome UI project I did. It runs fully in the Editor:

Please let us keep discussing if you have any other questions.