Rotary encoder / arrow key scrolling bounce

I’m working on a UI intended primarily for a rotary encoder (or directional scrolling buttons) and a small screen ideally with just one focusable list of things on it at a time.

Scrolling a panel with a touchscreen automatically does the elastic effect and springs back to the valid position, but I wished for a way to convey this edge bounce with key/knob scrolling as well.

I tweaked a couple of things in lv_group and the “snapping” example to illustrate roughly what I mean to accomplish:


I did this with a group that has wrap set to false, and a combination of “edge” callbacks (the opposite of the “focus” callback, basically, notify when focus didn’t change during an attempt to focus next/prev) and listening to the panel’s events for scrolling begin/end (to avoid interrupting while it’s already scrolling)

When the “edge” is reached at the beginning, I nudge it by 25 pixels (anim off) and then back (anim on), and similarly at the edge at the end, I nudge it by -25 pixels and then back.

I can throw up a GitHub PR for my implementation if desired. But as I’m fairly new to LVGL, figured I’d ask, is there a better way to trigger these programmatic bounces, or should a better one be built in than what I just hacked up? I suspect this method I picked only works in this one-off case of the snapping group of buttons, and maybe wouldn’t work for menu items or dropdown boxes, and isn’t super elegant since I only animate the scroll in the return direction. I think it’d look better animating in both directions but this wasn’t super obvious to me how to do, just yet.


I also can’t see a clean way to achieve it. Please send a PR to your implementation and we will figure out something. :slight_smile:

Opened PR