Roller with animation

How to
1

Hello,

I have a small roller that I want to set according to my selection.
This works fine with the command

lv_roller_set_selected(ui_varRoller, value, LV_ANIM_OFF);

since there seems to be an option to have an animation I tried this as well. But in this case the roller isn’t responding anymore.

lv_roller_set_selected(ui_varRoller, value, LV_ANIM_ON);

After reading the lvgl documentation my guess would have been, that I have to set a time for the animation. But if it would be 0 by default, why would the roller not work anymore? Anyhow I tried the lvgl command

lv_roller_set_anim_time(ui_varRoller, 500);

but this is not declared at it seems. I’ve searched the whole libarary but can’t find this expression at all.
So any idea what I’m doing wrong?

BR Chris

2

Hi,

I don’t know why the roller is not responding. Could you send a code snippet to reproduce the issue?

Anyway, the animation time is a style property and you can set it with lv_obj_set_style_anim_time(roller, 500, 0);

3

Well I have tried multiple things but non are working.

I have stripped down my display project to the bare minium. Only background and roller remain.
I have added more selections in case 3 was not enough for a animation to happen.
I have tried to set the animation style. Nothing works.

Since I can not upload files yet I have provided a link where you can download the code
https://42volt.net/Display/AmpDisplay.zip

As board I’m using a Lilygo T-Display S3 wit an ESP32S3 controller.

4 
lv_obj_clear_flag(ui_varRoller, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE |  LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE);     /// Flags

This line makes the roller not CLICKABLE probably you added this flag by accident.
image

5

Hmm, this is not the problem. Tested both variants, clickable and not. Or maybe I’m understanding the property animation wrong? Is animation supposed to only work at touchscreen displays?
I don’t have a touchscreen but my educated guess would have been, that the animation is a smoth transistion between the values of the roller instead of a simple switch

6

I see in my code

_ui_roller_set_property(ui_Screen3_Roller1, _UI_ROLLER_PROPERTY_SELECTED_WITH_ANIM, Preamp_Settings.lcd_input-1);
7

Not at all.

Let summarize the current state:

  • does the animation work after lv_obj_set_style_anim_time?
  • what do exactly mean by “the roller not work anymore”?
8

Ok., here is what I did so far. I have created a roller object in my Studio Project. The roller has 3 options, but I also tried a version with more options, just in case 3 was not enough.

My source code on my ESP32 controller cycles through the roller options

source++;
  if (source > 2){
    source = 0;
  }    

  lv_roller_set_selected(ui_varRoller, source, LV_ANIM_OFF);

every 500 ms.

If I use the roller like this, I can see it toggling between the 3 options on the display. It is a hard transition.

My guess would have been, that I can use the LV_ANIM property to archive a smoother transistion effect between those cylcles.

Now if I enable the LV_ANIM property the roller stops working. It will remain on the first option and is not cylcing anymore on the diplay.

As you has suggested I tried to set an animation time with lv_obj_set_style_anim_time of 500 ms and increased my own cycle time to 2 seconds. The result was the same, the roller was not updated anymore and remained on the same options.

Maybe I can make a video of that in the next few days.

9

Oh, I just might have figured out what the root cause for this problem is. I went through the documentation. And stumbled upon the Tick requirement. Since I used an Arduino Example as template for my own application, it never occured to me, that there is an additional requirement for animations. Ok, I will give it a try later on and I’m pretty sure that this will resolve my issue.

10

Upon further review this seems not to be the whole explanation. Due to theuse of an example project my lv_conf.h was already changed to a custom tick.

#define LV_TICK_CUSTOM 1
#if LV_TICK_CUSTOM
#define LV_TICK_CUSTOM_INCLUDE “Arduino.h” /Header for the system time function/
#define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis()) /Expression evaluating to current system time in ms/
#endif /LV_TICK_CUSTOM

with this the display in gerneral works, except the roller animation part. If I change the declaration to 0 and try to implement the lv_tick_inc function call my project breaks and the display remains black. Need to figure out what I’m doing wrong. But per se I would expect the animation to work non then less, due to the custom tick configuration, right?

11

Ok, finally figured it out.
The problem was the delay in my main loop. I had set it to 500 ms, so my test code would slowly switch trough the different roller options. So it seems that a blocking delay breaks the animation.

12

Ahhh, yes, it’s a problem. This way LVGL thinks that 500 ms has elapsed in the animation too and will finish it immediately on the next call of lv_timer_handler.