Change color selected line in a roller

How-to
#1

Hello everyone,
I use LVGL VERSION: 8.3.3.
I’m trying to be able to change the color of the selected row in a Roller based on the value of a variable (puntero), but I don’t know if it’s possible and I’m doing it right.
These are the instructions I use:

    static lv_style_t style_sel, style_sel1, style_sel2;
    lv_style_init(&style_sel);
    lv_style_set_bg_color(&style_sel, lv_color_hex(0x0BFF01));
    lv_style_init(&style_sel1);
    lv_style_set_bg_color(&style_sel1, lv_color_hex(0xF7BF05)); 
    lv_style_init(&style_sel2);
    lv_style_set_bg_color(&style_sel2, lv_color_hex(0xFE0000));

    Vista_Roller1 = lv_roller_create( Vista);
    lv_obj_set_width( Vista_Roller1, 308);
    lv_obj_set_height( Vista_Roller1, 181);
    lv_obj_set_x( Vista_Roller1, 0);
    lv_obj_set_y( Vista_Roller1, 20);
    lv_obj_set_align( Vista_Roller1, LV_ALIGN_CENTER);
    lv_obj_set_scrollbar_mode( Vista_Roller1, LV_SCROLLBAR_MODE_AUTO);
    lv_obj_set_style_text_font( Vista_Roller1, & font_Font20, LV_PART_MAIN | LV_STATE_DEFAULT);
    int puntero = lv_roller_get_selected( Vista_Roller1);
    if ( puntero < 8 ) lv_obj_add_style( Vista_Roller1, &style_sel, LV_PART_SELECTED);  
    if ( puntero > 8 && puntero <16) lv_obj_add_style( Vista_Roller1, &style_sel1, LV_PART_SELECTED);
    if ( puntero > 16 ) lv_obj_add_style( Vista_Roller1, &style_sel2, LV_PART_SELECTED); 
.....
.....
.....
    lv_obj_invalidate(Vista);

When executed, it takes the red color for its value of 23, but when I move the roller to lines where the color should change, it does not.
I have included (lv_obj_invalidate(Vista):wink: , because I have read somewhere that I needed to refresh the screen for the change to take effect.
Can you help me with this? Thanks.
Greetings.

#2

Try this:

  lv_obj_set_style_bg_color(Vista_Roller1, lv_color_hex(0xFE0000), LV_PART_SELECTED);

Remember that the code to check the values will need to be in the callback…

Hope that helps

#3

Thanks for your help, now it works when I scroll the roller, but the first time the screen is shown it doesn’t change the color of the selected row.
These are the instructions I use:

    ui_Vista_Roller1 = lv_roller_create(ui_Vista);
    lv_obj_set_width(ui_Vista_Roller1, 308);
    lv_obj_set_height(ui_Vista_Roller1, 181);
    lv_obj_set_x(ui_Vista_Roller1, 0);
    lv_obj_set_y(ui_Vista_Roller1, 20);
    lv_obj_set_align(ui_Vista_Roller1, LV_ALIGN_CENTER);
    lv_obj_set_scrollbar_mode(ui_Vista_Roller1, LV_SCROLLBAR_MODE_AUTO);
    lv_obj_set_style_text_font(ui_Vista_Roller1, &ui_font_Font20, LV_PART_MAIN | LV_STATE_DEFAULT);
 
    if ( estados[ lv_roller_get_selected( ui_Vista_Roller1 ) ] == 0 ) lv_obj_set_style_bg_color(ui_Vista_Roller1, lv_color_hex(0x0BFF01), LV_PART_SELECTED);  
    if ( estados[ lv_roller_get_selected( ui_Vista_Roller1 ) ] == 1 ) lv_obj_set_style_bg_color(ui_Vista_Roller1, lv_color_hex(0xF7BF05), LV_PART_SELECTED);
    if ( estados[ lv_roller_get_selected( ui_Vista_Roller1 ) ] == 2 ) lv_obj_set_style_bg_color(ui_Vista_Roller1, lv_color_hex(0xFE0000), LV_PART_SELECTED);   
    lv_obj_set_style_text_font(ui_Vista_Roller1, &ui_font_Font20, LV_PART_SELECTED | LV_STATE_DEFAULT);

void ui_event_Vista_Roller1(lv_event_t * e)
{
    lv_event_code_t event_code = lv_event_get_code(e);
    lv_obj_t * target = lv_event_get_target(e);
    if(event_code == LV_EVENT_VALUE_CHANGED || event_code == LV_EVENT_FOCUSED || event_code == LV_EVENT_DRAW_POST_BEGIN) { 
      if ( estados[ lv_roller_get_selected( ui_Vista_Roller1 ) ] == 0 ) lv_obj_set_style_bg_color(ui_Vista_Roller1, lv_color_hex(0x0BFF01), LV_PART_SELECTED);  
      if ( estados[ lv_roller_get_selected( ui_Vista_Roller1 ) ] == 1 ) lv_obj_set_style_bg_color(ui_Vista_Roller1, lv_color_hex(0xF7BF05), LV_PART_SELECTED);
      if ( estados[ lv_roller_get_selected( ui_Vista_Roller1 ) ] == 2 ) lv_obj_set_style_bg_color(ui_Vista_Roller1, lv_color_hex(0xFE0000), LV_PART_SELECTED);
    }
}

Is there a special event for this?

#4

Hello, I have already found the problem, it was a matter of changing the order of the instructions, performing the positioning before asking it to change color.
Thanks for your help.
Greetings. :sweat_smile: