How to set roller default

How-to
1

Description

i create a roller with 6 item,but it select second item default.How to make roller start first item?
And there is a space area on roller and first item by default.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

 lv_obj_clean(lv_scr_act());

    lv_obj_t* scr = lv_obj_create(NULL, NULL);
    lv_scr_load(scr);
    lv_obj_t* title = lv_label_create(scr, NULL);
    lv_label_set_text(title, "TEST");
    lv_obj_set_size(title, 320, 10);
    lv_obj_align(title, scr, LV_ALIGN_IN_TOP_MID, 0, 20);
    lv_obj_set_style_local_bg_color(title, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
    lv_obj_set_style_local_bg_opa(title, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_COVER);

    lv_obj_t* roller = lv_roller_create(scr, NULL);
    lv_roller_set_auto_fit(roller, false);
    lv_obj_set_size(roller, 310, 30);
    lv_roller_set_options(roller,
        "TEST one\n"
        "TEST two\n"
        "TEST three\n"
        "TEST four\n"
        "TEST five\n"
        "TEST six",
        LV_ROLLER_MODE_NORMAL);

    lv_roller_set_visible_row_count(roller, 4);
    lv_obj_align(roller, scr, LV_ALIGN_IN_TOP_MID, 0, 40);
    //lv_obj_set_event_cb(roller1, event_handler);
    lv_obj_t* back = lv_btn_create(scr, NULL);
    lv_obj_align(back, scr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
    //lv_obj_add_style(back, LV_BTN_PART_MAIN, &style_halo);
    lv_obj_set_style_local_value_str(back, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Back");
    //lv_obj_set_event_cb(back, event_callback);

    lv_obj_t* Trans_type = lv_btn_create(scr, NULL);
    lv_obj_align(Trans_type, scr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
    //lv_obj_add_style(Trans_type, LV_BTN_PART_MAIN, &style_halo);
    lv_obj_set_style_local_value_str(Trans_type, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Confirm");
    //lv_obj_set_event_cb(back, event_callback);

Screenshot and/or video

image

2

I think it’s the lv_roller_set_selected function:

The roller documentation:
https://docs.lvgl.io/latest/en/html/widgets/roller.html

3

if modify lv_roller_set_visible_row_count(roller, 2),it display correct,but roller height changed.

4

i want to fixed roller width and height,and set roller visible row count as 5.

5

does not work as expect.
image
image

6

image

     roller1 = lv_roller_create(om, NULL);
    //lv_obj_set_size(roller1,200,128);
    lv_obj_add_style(roller1, LV_ROLLER_PART_BG,&bg_style);
    lv_obj_add_style(roller1, LV_ROLLER_PART_SELECTED, &local_style);
    lv_roller_set_options(roller1,
                       LV_SYMBOL_AUDIO " 1\n"
                       LV_SYMBOL_VIDEO " 2\n"
        LV_SYMBOL_LIST " 3\n"
        LV_SYMBOL_GPS  " 4\n"
        LV_SYMBOL_WIFI " 5\n"
        LV_SYMBOL_BLUETOOTH " 6\n"
        LV_SYMBOL_POWER " 7\n"
        LV_SYMBOL_REFRESH " 8\n"
        LV_SYMBOL_VOLUME_MAX " 9\n"
        LV_SYMBOL_BELL" 10\n"
        LV_SYMBOL_CHARGE" 11\n"
                        "12",
        LV_ROLLER_MODE_NORMAL);
        //LV_ROLLER_MODE_INIFINITE);
    lv_roller_set_anim_time(roller1, 50);
    lv_roller_set_fix_width(roller1,204);
    lv_roller_set_visible_row_count(roller1, 3);
    lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(roller1, event_handler);
7

when i modify as lv_roller_set_fix_width(roller,310);it seems display as expect.But you can see there is a space area as picture .How to decrease the White space?
image

8

Yes, in nomal mode, when you select item 0, there is a blank at the top. If you don’t want to see the blank, select LV_ROLLER_MODE_INIFINITE when creating ROLLER

9

ok,Thanks a lot.
Another question,when i press key1 or key1 on keyboad,how to get event from event_cb() to know which key is pressed?

10

sry,i don’t know the keypad is a input_dev or LVGL’s button ,if the first kind i think this link could be helpfull.
if the second one, you should give a call back fuction when you created the btn.

11

would you share a sample keyboad?
i mean when you press key on keyboad,you can get key event and which key pressed on event_cb()
if the samble run on real device,it iwll be better

12

you can check this demo:lv_demo_keypad_encoder();

13

Another question,when switch page,if textarea or button include the page,sometimes,the obj(textarea or button) will display on incorrect position then go back correct position a little time.
how to fixed the issue?

14

can you show me your code? because i don’t know how do you swtich the pages.

15

yes,i checked the sample.but i dont know how to get pressed key on keyboad in event_cb().only confirm key pressed,i can catch the event in event_cb()

16

plese check this:

static void ta_event_cb(lv_obj_t * ta, lv_event_t e)
{
    /*Create a virtual keyboard for the encoders*/
    lv_indev_t * indev = lv_indev_get_act();
    if(indev == NULL) return;
    lv_indev_type_t indev_type = lv_indev_get_type(indev);

    if(e == LV_EVENT_FOCUSED) {
        lv_textarea_set_cursor_hidden(ta, false);
        if(lv_group_get_editing(g)) {
            if(textinput_objs.kb == NULL) {
                textinput_objs.kb = lv_keyboard_create(lv_scr_act(), NULL);
                lv_group_add_obj(g, textinput_objs.kb);
                lv_obj_set_event_cb(textinput_objs.kb, kb_event_cb);
                lv_obj_set_height(tv, LV_VER_RES - lv_obj_get_height(textinput_objs.kb));
            }

            lv_keyboard_set_textarea(textinput_objs.kb, ta);
            lv_group_focus_obj(textinput_objs.kb);
            lv_group_set_editing(g, true);
            lv_page_focus(t2, lv_textarea_get_label(ta), LV_ANIM_ON);
        }
    }
    else if(e == LV_EVENT_DEFOCUSED) {
        if(indev_type == LV_INDEV_TYPE_ENCODER) {
            if(textinput_objs.kb == NULL) {
                lv_textarea_set_cursor_hidden(ta, true);
            }
        } else {
            lv_textarea_set_cursor_hidden(ta, true);
        }
    }
}

static void kb_event_cb(lv_obj_t * kb, lv_event_t e)
{
    lv_keyboard_def_event_cb(kb, e);

    if(e == LV_EVENT_APPLY || e == LV_EVENT_CANCEL) {
        lv_group_focus_obj(lv_keyboard_get_textarea(kb));
        lv_obj_del(kb);
        textinput_objs.kb = NULL;
        lv_obj_set_height(tv, LV_VER_RES);
    }
}

i think lv_obj_set_event_cb(textinput_objs.kb, kb_event_cb); is the key function;

17

here is first page code
static void DispLogo()
{
/Darken the button when pressed/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_image_recolor_opa(&style, LV_STATE_PRESSED, LV_OPA_30);
lv_style_set_image_recolor(&style, LV_STATE_PRESSED, LV_COLOR_BLACK);
lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_WHITE);

lv_obj_clean(lv_scr_act());

lv_obj_t * scr = lv_obj_create(NULL, NULL);
lv_scr_load(scr);
/*Create imgbtn*/
lv_obj_t* paymentbtn = lv_imgbtn_create(scr, NULL);
lv_imgbtn_set_src(paymentbtn, LV_BTN_STATE_RELEASED, &lv_logo_payment);
lv_imgbtn_set_src(paymentbtn, LV_BTN_STATE_PRESSED, &lv_logo_payment);
lv_imgbtn_set_checkable(paymentbtn, true);
lv_obj_add_style(paymentbtn, LV_IMGBTN_PART_MAIN, &style);
lv_obj_align(paymentbtn, scr, LV_ALIGN_IN_TOP_LEFT,20, 30);
//lv_obj_set_auto_realign();

lv_obj_t* Networkbtn = lv_imgbtn_create(scr, NULL);
lv_imgbtn_set_src(Networkbtn, LV_BTN_STATE_RELEASED, &lv_logo_network);
lv_imgbtn_set_src(Networkbtn, LV_BTN_STATE_PRESSED, &lv_logo_network);
lv_imgbtn_set_checkable(Networkbtn, true);
lv_obj_add_style(Networkbtn, LV_IMGBTN_PART_MAIN, &style);
lv_obj_align(Networkbtn, scr, LV_ALIGN_IN_TOP_LEFT,120, 30);

lv_obj_t* Downloadbtn = lv_imgbtn_create(scr, NULL);
lv_imgbtn_set_src(Downloadbtn, LV_BTN_STATE_RELEASED, &lv_logo_Download);
lv_imgbtn_set_src(Downloadbtn, LV_BTN_STATE_PRESSED, &lv_logo_Download);
lv_imgbtn_set_checkable(Downloadbtn, true);
lv_obj_add_style(Downloadbtn, LV_IMGBTN_PART_MAIN, &style);
lv_obj_align(Downloadbtn, scr, LV_ALIGN_IN_TOP_LEFT, 220, 30);

lv_obj_t* Testbtn = lv_imgbtn_create(scr, NULL);
lv_imgbtn_set_src(Testbtn, LV_BTN_STATE_RELEASED, &lv_logo_Test);
lv_imgbtn_set_src(Testbtn, LV_BTN_STATE_PRESSED, &lv_logo_Test);
lv_imgbtn_set_checkable(Testbtn, true);
lv_obj_add_style(Testbtn, LV_IMGBTN_PART_MAIN, &style);
lv_obj_align(Testbtn,scr, LV_ALIGN_IN_TOP_LEFT,20,130);

lv_obj_t* Historybtn = lv_imgbtn_create(scr, NULL);
lv_imgbtn_set_src(Historybtn, LV_BTN_STATE_RELEASED, &lv_logo_History);
lv_imgbtn_set_src(Historybtn, LV_BTN_STATE_PRESSED, &lv_logo_History);
lv_imgbtn_set_checkable(Historybtn, true);
lv_obj_add_style(Historybtn, LV_IMGBTN_PART_MAIN, &style);
lv_obj_align(Historybtn,scr, LV_ALIGN_IN_TOP_LEFT, 120, 130);

lv_obj_t* Infobtn = lv_imgbtn_create(scr, NULL);
lv_imgbtn_set_src(Infobtn, LV_BTN_STATE_RELEASED, &lv_logo_Info);
lv_imgbtn_set_src(Infobtn, LV_BTN_STATE_PRESSED, &lv_logo_Info);
lv_imgbtn_set_checkable(Infobtn, true);
lv_obj_add_style(Infobtn, LV_IMGBTN_PART_MAIN, &style);
lv_obj_align(Infobtn, scr, LV_ALIGN_IN_TOP_LEFT, 220, 130);

}
here is second page code:
static void DispInput()
{
lv_obj_clean(lv_scr_act());
lv_obj_t * scr = lv_obj_create(NULL, NULL);
lv_scr_load(scr);
lv_obj_t* title = lv_label_create(scr, NULL);
lv_label_set_text(title, “PAYMENT”);
lv_obj_set_size(title, 320, 10);
lv_obj_align(title,scr, LV_ALIGN_IN_TOP_MID, 0,30);
lv_obj_set_style_local_bg_color(title, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
lv_obj_set_style_local_bg_opa(title, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_COVER);

lv_obj_t* amt = lv_label_create(scr, NULL);
lv_label_set_text(amt, "AMOUNT:");
lv_obj_set_size(amt, 50, 10);
lv_obj_align(amt,scr, LV_ALIGN_IN_TOP_LEFT, 10, 50);

lv_obj_t* Cur = lv_label_create(scr, NULL);
lv_label_set_text(Cur, " $ ");
lv_obj_set_size(Cur, 50, 10);
lv_obj_align(Cur,scr, LV_ALIGN_IN_TOP_RIGHT, -20, 50);

lv_obj_t* input = lv_textarea_create(scr, NULL);
lv_obj_set_size(input, 320, 40);
lv_obj_align(input, scr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, -80);
lv_textarea_set_text(input, "0.01");
lv_textarea_set_text_align(input,LV_LABEL_ALIGN_RIGHT);
lv_obj_set_state(input, LV_STATE_DEFAULT);
//lv_obj_set_event_cb(input, Input_handler);

static lv_style_t style_btn;
lv_style_init(&style_btn);
lv_style_set_transition_time(&style_btn, LV_STATE_PRESSED, 400);
lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 0);
lv_style_set_transition_delay(&style_btn, LV_STATE_DEFAULT, 200);
lv_style_set_outline_width(&style_btn, LV_STATE_DEFAULT, 0);
lv_style_set_outline_width(&style_btn, LV_STATE_PRESSED, 20);
lv_style_set_outline_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_outline_opa(&style_btn, LV_STATE_FOCUSED, LV_OPA_COVER);   /*Just to be sure, the theme might use it*/
lv_style_set_outline_opa(&style_btn, LV_STATE_PRESSED, LV_OPA_TRANSP);
lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_OUTLINE_OPA);
lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_OUTLINE_WIDTH);

lv_obj_t* back = lv_btn_create(scr, NULL);
lv_obj_align(back, scr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
lv_obj_add_style(back, LV_BTN_PART_MAIN, &style_btn);
lv_obj_set_style_local_value_str(back, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Back");
//lv_obj_set_event_cb(back, Back_home_handle);

lv_obj_t* Trans_type = lv_btn_create(scr, NULL);
lv_obj_align(Trans_type,scr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
lv_obj_add_style(Trans_type, LV_BTN_PART_MAIN, &style_btn);
lv_obj_set_style_local_value_str(Trans_type, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Type");
//lv_obj_set_event_cb(back, Select_TransType_handle);

}
when i pressed confirm button on keyboad,will switch to page_2(DispInput),when i pressed Cancle Button on keyboad,will switch page_1(DispLogo)

18

when i test almost three times,i found textarea display on top of screen,wait almost 3ms,it go back correct position

19

image
image808×196 7.84 KB
i set tick as 20ms