Scrolling in page by cycling through buttons using physical keys

How-to
1

Hi guys!
I am trying to create a custom list, for that I used a page and then created buttons with custom labels.
How can I make it scroll down (choose a button outside screen) just by pressing key up or down?
I can scroll through a list. But I am not being able to replicate the same behavior using a page and buttons.

Currently I am doing this:

prev_screen = lv.scr_act()
screen = lv.obj()

screen = header(screen)

page = lv.page(screen)
page.set_size(300, 144)
page.align(None, lv.ALIGN.CENTER, 0, -5)
page.set_scrl_layout(lv.LAYOUT.COL_M)
page.set_scrl_width(200)

group=add_group(False)


for scheduledTask in lastUpdate['tasks']:
    
    btnUpdate = lv.btn(page)

    btnUpdate.set_width(270)
    #btnUpdate.set_fit(True)
    #page.glue_obj(btnUpdate)
    btnUpdate.set_layout(lv.LAYOUT.OFF)
    
    btnUpdateLabel = lv.label(btnUpdate)
    btnUpdateLabel.set_long_mode(lv.label.LONG.BREAK)
    btnUpdateLabel.set_width(266) 
    btnUpdateLabel.set_text("Date: "+scheduledTask['date']+"\n"+"Task: "+scheduledTask['name'])
    
    btnUpdate.set_event_cb(lambda obj, event, scheduledTask = scheduledTask: scheduled_task(None, scheduledTask) if event == lv.EVENT.CLICKED else None )
    
    lv.group_add_obj(group, btnUpdate)

And my add_group function is the following:

def add_group(group_type_list, list_obj = None):
    if group_type_list == True:
        group = lv.group_create() # Create a group
        lv.group_add_obj(group, list_obj)
        kbd.group = group
        lv.group_set_style_mod_cb(group, None)
        lv.group_set_style_mod_edit_cb(group,None)
        lv.group_set_editing(group, True)
        #list_obj.set_scroll_propagation(True)
        list_obj.set_edge_flash(True)
        tA._key = lv.KEY.LEFT
        tC._key = lv.KEY.RIGHT
        
    else:
        group = lv.group_create()
        kbd.group = group
        #lv.group_set_style_mod_cb(group, None)
        lv.group_set_style_mod_edit_cb(group,None)
        tA._key = lv.KEY.PREV
        tC._key = lv.KEY.NEXT
    
    return group

Thank you for the help!

2

I don’t think this is Micropython specific question.
Same question would apply to C code, right?

Perhaps @embeddedt / @kisvegabor could comment.

1 Like
3

Ah yes indeed! It was the habit sorry! Moved to How-to

4

Take a look at the list implementation: https://github.com/lvgl/lvgl/blob/6dac633235da32fa3040207b2c900bd9b255babb/src/lv_widgets/lv_list.c#L742-L769

Essentially, you’d want to keep track of the currently focused button, find the next/previous button when a key is pressed, and call lv_page_focus on that.

1 Like
5

Hi @embeddedt thank you for your suggestion, taking it in consideration as well after reading https://github.com/lvgl/lvgl/issues/94 I ended up solving it by simply adding:

lv.group_set_focus_cb(group, lambda x: page.focus(lv.group_get_focused(group),lv.ANIM.OFF))

Hope this helps someone in the future!

1 Like