Roller animation not working

General discussion
1

Description

Hi, I am using EEZ Studio to generate LVGL code for display and having problem with lv_roller_set_selected function.

What MCU/Processor/Board and compiler are you using?

ESP32 / Arduino framework

What LVGL version are you using?

8.3

What do you want to achieve?

When using this function:

lv_roller_set_selected(objects.source_picker, sourcePosition, LV_ANIM_OFF);

I can change the roller items with rotary encoder without a problem, but if I try LV_ANIM_ON
there is no animation and the roller cant move.
This is the generated code for a roller in the screens.c file:

 lv_obj_t *parent_obj = obj;
        {
            // sourcePicker
            lv_obj_t *obj = lv_roller_create(parent_obj);
            objects.source_picker = obj;
            lv_obj_set_pos(obj, 138, 37);
            lv_obj_set_size(obj, 161, 160);
            lv_roller_set_options(obj, "AUX 1\nAUX 2\nAUX 3", LV_ROLLER_MODE_NORMAL);
            lv_obj_add_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
            lv_obj_set_style_bg_color(obj, lv_color_hex(0xff0d0d0d), LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_border_color(obj, lv_color_hex(0xff000000), LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_text_font(obj, &lv_font_montserrat_18, LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_text_color(obj, lv_color_hex(0xff212121), LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_anim_time(obj, 200, 0);
        }
2

Show loop code.

3

I am not at home right now… Anyway, loop is almost empty, it contains only lvgl handling and encoder value passed to lv_roller_set_selected function, no delay() etc.

4

Then crystalball say you miss , but what? Is any other animation working for you?

5

Yes, I’ve tried lv_screen_load_fade_in and it works.
I’ll send a full code later…

6

The loop code:

void loop() {
  ui_tick();          // Update EEZ-Studio UI
  lv_timer_handler(); /* let the GUI do its work */
  // constrain rotary encoder steps
  static int sourcePosition = 0;
  int newPos = encoder->getPosition();
  if (newPos < 0) {
    encoder->setPosition(0);
    newPos = 0;
  }
  if (newPos > 2) {
    encoder->setPosition(2);
    newPos = 2;
  }
  // Print on display
  if (sourcePosition != newPos) {
    lv_roller_set_selected(objects.source_picker, sourcePosition, LV_ANIM_OFF); // Working
    // lv_roller_set_selected(objects.source_picker, sourcePosition, LV_ANIM_ON); // NOT working
    sourcePosition = newPos;
    Serial.print("sourcePosition:");
    Serial.println(sourcePosition);
  }
}
7

this type of coding encoder is bad. Too sourcePosition where is changed ?
Read and apply indev encoder, indev group with roller selected and events animate your roller without call set selected.

8

I’m sorry, I edited the example code now.

This is only a minimal working example.
The intention is that I call lv_roller_set_selected() function only when encoder value is changed, but it’s obviously a wrong concept in this case (when using animation).

Oh, I am pretty fresh with lvgl, I didn’t knew “indev” even existed :smile: , I have to look into it, thank you! LVGL is a very powerful library, and pretty complicated too. :slight_smile:

9

I am using indev driver for encoder and its pushbutton, animation is working as it should.
Anyway I have a problem with a style about focus state of the roller. On pisc,

you could see when I click on encoder push button, I reload the page and once it appears with brown outline around roller and when I click again, the outline color changes to blue.

What do you want to achieve?

What I want is to both of these outlines to erase or change to black (same as background) but whatever parameter I tried to change it’s still there. This is the code part for the roller object:

// sourcePicker
            lv_obj_t *obj = lv_roller_create(parent_obj);
            objects.source_picker = obj;
            lv_obj_set_pos(obj, 123, 44);
            lv_obj_set_size(obj, 187, 152);
            lv_roller_set_options(obj, "AUX 1\nAUX 2\nAUX 3", LV_ROLLER_MODE_NORMAL);
            lv_obj_set_style_text_font(obj, &lv_font_montserrat_18, LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_text_color(obj, lv_color_hex(0xff212121), LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_bg_color(obj, lv_color_hex(0xff2d2d2d), LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_blend_mode(obj, LV_BLEND_MODE_ADDITIVE, LV_PART_MAIN | LV_STATE_DEFAULT);
            lv_obj_set_style_bg_color(obj, lv_color_hex(0xff365c6b), LV_PART_SELECTED | LV_STATE_DEFAULT);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_DEFAULT);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_CHECKED);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_PRESSED);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_CHECKED | LV_STATE_PRESSED);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_DISABLED);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_FOCUSED);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_FOCUS_KEY);
            lv_obj_set_style_border_width(obj, 0, LV_PART_SELECTED | LV_STATE_SCROLLED);

01
02

10

For remove edit select marker use

  lv_obj_remove_style(ui_Screen3_Roller1, NULL, LV_STATE_FOCUS_KEY);
  lv_obj_remove_style(ui_Screen3_Roller1, NULL, LV_STATE_EDITED);

and for manage force edit mode from code

  lv_group_set_editing(g1, true);
  lv_group_focus_freeze(g1, true);
11

Tank you a lot! First two rows you suggested did the trick.