Scroll with arrow buttons and snap to objects

How-to
1

Important: unclear posts may not receive useful answers.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the FAQ and read the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

I have an object with multiple panels through which I can scroll horizontally (over the X axis), based on the Snapping example from the docs.
The product I’m working on will not have capacitive touch over the entire screen, but rather will have a couple of (touch) buttons.
I want to scroll through the multiple panels with two of those buttons and have it snap to the previous/next panel when I do so.

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

ESP32-C3 / riscv32-esp-elf-gcc

What LVGL version are you using?

v8.2

What do you want to achieve?

Scroll using buttons and snap to the previous/next snappable item.

What have you tried so far?

I have a grp_main group connected to my button input device and a container object named panel:

   lv_obj_t* panel = lv_obj_create(scr_main);
   lv_obj_set_size(panel, lv_pct(100), lv_pct(100));
   lv_obj_set_scroll_snap_x(panel, LV_SCROLL_SNAP_CENTER);
   lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_ROW);
   lv_obj_align(panel, LV_ALIGN_CENTER, 0, 0);
   lv_obj_add_flag(panel, LV_OBJ_FLAG_SCROLL_ONE | LV_OBJ_FLAG_SCROLL_WITH_ARROW);
   lv_group_add_obj(grp_main, panel);

To that panel I add multiple “panes”, like so:

      lv_obj_t* pane = lv_obj_create(panel);
      lv_group_add_obj(grp_main, pane); // also tried it without this line
      // ... add specific content for the particular pane in here ...
      lv_obj_set_scroll_snap_x(pane, LV_SCROLL_SNAP_CENTER);
      lv_obj_add_flag(pane, LV_OBJ_FLAG_SNAPPABLE | LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
      lv_obj_clear_flag(pane, LV_OBJ_FLAG_SCROLLABLE);

I have four buttons at the moment:

  • Left
  • Right
  • Next (Tab)
  • Enter

The display I’m working with right now does have a touch panel and if I try to scroll using a gesture on there, it snaps to the previous/next panel (with a little animation), depending on the direction I’m swiping in.
However, if I use the Left/Right buttons, it only moves a little bit, without any animation or snapping.

If I use Next followed by Enter, it does go to the next pane, but without animation (and I also don’t want to press two buttons for doing that).

2

Hi,

I think you need the gridnav extension:
https://docs.lvgl.io/master/others/gridnav.html

3

Thanks for the suggestion. I will try to integrate it and let you know if worked for me.

4

The gridnav extension worked. I did notice that the LV_USE_GRIDNAV option is missing from the Kconfig, for which I’ve opened an issue on GitHub.

I do have a follow up question though: is there an easy way to disable the animation for the grid navigation?
I.e. instead of the view scrolling to the the next object, I’d want it to move to that object immediately, without any animation.

We are currently determining how we would want to drive the LCD panel and SPI is just a bit too slow for the animation to feel smooth, so we want to look at the user experience without the animation as well.

1 Like