Description
What MCU/Processor/Board and compiler are you using?
All, but I’m experimenting on ESP32 using esp-idf
What LVGL version are you using?
Master branch
What do you want to achieve?
I have significant experience in programming, though none of it involves graphical user interfaces. My background is primarily in microcontroller hardware and PC/embedded backend development. The LVGL examples have been excellent, allowing me to quickly prototype the different ‘screens’ for my GUI.
My current challenge is determining the most effective way to connect these GUI elements to the underlying application logic. I want to avoid a complex web of callbacks or other simplistic methods that could lead to maintainability issues.
My experimental project displays data from the on-chip ADCs. The main screen shows several ‘channels,’ each with a vertical bar representing the channel level and a button below indicating the channel number. Tapping a channel button navigates to a dedicated page displaying options for that channel. These options are presented as buttons, with the current value shown as a label above each button. Some of these option buttons lead to a full-screen keyboard/textarea.
Currently, all the displayed data is static placeholder values. I’m seeking advice on the best approach for updating the GUI with live data coming from another FreeRTOS task and for sending user-initiated changes back to the application. The system uses a global array of structures to store the settings and current data for each channel.
I would greatly appreciate any guidance from experienced GUI developers on recommended practices for this type of integration.
Michael
advice for a newbie?..
Run away!!!..
Nah I’m joking…
This is going to really get your brain cooking on how things are to be handled…
Keep this thought in your head at all times. lv_obj_t is a container that you can “optionally” render to… Now I quote optionally because you can strip all of the style and formatting stuff from it and you can make it so that it is visually transparent and also input transparent as well. This is where the container comes from. Just because the container is transparent to input and visually doesn’t mean that the contents of the container are also the same way.
Why this is important… group things into these containers and you can use it in different areas of the UI. A single container can only be active in one place at one time. But of you have multiple “screens” that use a similar or the same kind of a grouping of UI elements then you can pass the container between the different screens changing just text or values that the different elements have set. You don’t have to create and tear down over and over again. You can reuse like elements and grouping them together makes it a lot easier to manage.
Now remember to keep that container idea in your head because it also pertains to creating custom controls… Take this as an example.
That is made of over 100 lv_obj_t “containers” that are used to layer together a single widget. the knob is made from a single image of a gradient that has a gradient white that is also has a gradient alpha channel that moves in the same direction.placing that image into an lv_obj_t I am then able to adjust the color of the gradient that is being seen. by creating the same arrangement with other containers using rotation and resizing I was able to get the 3D ish effect using the shadow style option I created the shadow of the knob that worked in conjunction with the inner bezel to give you what looks like a light source coming from the lower right. This is further added by having the light sweep across the center section getting lighter as it move across the center section from the bottom right.
The ticks are a slew of lv_obj_t’s with an outline and a shadow for the glow and they are rotated and placed around the knob. I simply hide and show them when they need to be seen or need to be invisible. All of this is housed inside a single lv_obj_t that has been made input invisible and also visually invisible. This allows me to move show or hide the whole thing as a single UI element. I did write a helper function to handle resizing because each item needs to be sized based on what the size of the container.
to make lv_obj_t into a container you need to set all of the different styles to have a color opacity of zero. all border and outline widths need to be set to zero and all margins and padding needs to be set to zero. Then you remove any input flags.
3 Likes
