[LVGL] Roller Misalignment When Generating Options from Expression

[enrip19]

Describe the bug
The roller jumps out when trying to select an option. It only happens when the options are generated from an expression. It is an attached video which shows the bug behavior

To Reproduce
Steps to reproduce the behavior:

1. Add a roller widget
2. Add a "values" array::integer and fill it of numbers from 1 to 15
3. In its configuration, got to Specific->Options and select Expression in the selector. In the expression box write "values"
4. Run the program
5. See error

Expected behavior
The roller should work smoothly to select the options available.

Screenshots

rollerError.mp4

Desktop :

• OS: Windows 11
• Browser: Microsoft Edge
• Version: 0.13.1

Additional context

• I am using LVG with EEZ-Flow framework.
• This buggy behavior happens with any expression and array type you try.

[mvladic]

I can't reproduce this problem.

Here is my project:

lvgl_roller_test.zip

[mvladic]

I tried with both 8.3 and 9.0

[enrip19]

You're right, I had forgotten to set the key configuration for the problem to occur. It must be in INFINITE mode.

[enrip19]

Here it is the video

rollerError2.mp4

[mvladic]

I found what is the problem. When INFINITE mode is used then LVGL expands/multiplies given options string N times (where N is equal to LV_ROLLER_INF_PAGES, defined in lv_conf.h, in case of EEZ Studio it is value 7). So, if I give the options string "1\n2\n3", LVGL will keep it as "1\n2\n3\n1\n2\n3\n1\n2\n3\n1\n2\n3\n1\n2\n3\n1\n2\n3\n1\n2\n3". So, when updating options in ui_tick() we compare new options string (from options variable) with current options string set on roller widget and it is always different. Now, I need to think about how to fix this issue on our side.

[mvladic]

I just committed a fix for this issue in EEZ Studio and also eez-framework. So to test you can build EEZ Studio and get the latest version of eez-framework. Here is the project I used to test:

lvgl_roller_test.zip

[mvladic]

BTW, in version 9.0 there is no LV_ROLLER_INF_PAGES, instead required value is calculated depending on the font used. We are handling this version also.

[whzbngry]

Thanks @mvladic for sharing your project file. I was struggling with getting the selected index stored into a variable to trigger other things in my UI.
I wanted to use to roller to show or hide different panels. The "Run" feature in EEZ Studio shows a preview of what the roller would look like and everything seems to be working. For some reason the contents of the roller do not show on my display (LilyGo T4 S3). I am using a string array.

I did try using your project as well, but sadly that seems to also not show the roller contents.

I also tried just using a roller with my string array - without any variable selected in "Specific" under properties - in this case the contents of the roller show on the display.

Another test I did was to use "Literal" for roller options and then use an assignable variable to get the index of the roller to trigger the panels to show or hide. All seems to work in EEZ Studio's simulation, but the panels don't change on the actual display.

Anything I am missing?
LVGL 8.4.0

[mvladic]

You need to call ui_tick() periodically, for example after lv_timer_handler() or lv_task_handler() in your GUI loop.

[whzbngry]

Well, I think figured out what I was missing. None of my variable definitions in EEZ Studio were exported the actual code. So I am now trying to manually define it using this documentation: https://github.com/eez-open/native-interface-lvgl-with-flow