What do you want to achieve?
I have a list of options. Each option is a different panel. Each panel contains a label on the left and switch on the right, to enable such option.
I’m navigating the UI only using an encoder, so I’d like the focus to be on the switches. However, when the scrolling happens, it only moves the list up to where the switch becomes visible, resulting in a cropped option panel (parent). In fact, even the focused outline on the switch is cropped.
Is there a way to focus on the switches but always making sure its parent is fully visible?
I’m aware there’s a “scroll chain” flag that “allows propagating the scroll to a parent” but it doesn’t seem to be available for checkboxes or switches, nor does it work for the Dropdown object I have in Panel3.
Screenshot or video
As you can see, the option at the top is cropped even though its switch is focused.
Others
- SquareLine Studio version:
1.4
- Operating system:
Windows 11
- Target hardware:
ESP32S3 (Arduino)
I think I can do what I want by focusing on the panels instead, with the help of events.
When pressing on a panel (encoder push button), a MODIFY STATE action will be triggered on the switch object, state: checked, action: toggle. And “scroll on focus” flag enabled for the panel objects.
Edit: I still have the problem where the scroll is not considering outline around the widget, so it gets cropped. Isn’t there an offset option somewhere?
Beside ‘scroll on focus’, setting a ‘Snapping’ align-mode on the panels’ parent can do this automatically, like adding lv_obj_set_scroll_snap_y( ui_PanelContainer, LV_SCROLL_SNAP_CENTER ); to the UI-initialization. This will bring the selected panel to the center which might not be what you want exactly.
The solution which you tried works for me in a replicated project similar to yours, added an event for the ‘Checkbox1’ switch-widget for ‘FOCUSED’ trigger and ‘CALL_FUNCTION’ action. The function in ui_events.c runs when the key-focus is arrives on Checkbox1, and does this: lv_event_send( ui_Panel1, LV_EVENT_FOCUSED, NULL );
If setting these kind of events for all widgets still feels quirky, you might find other solution by checking Grid navigation — LVGL documentation section of LVGL documents. Especially the example Grid navigation — LVGL documentation and Grid navigation — LVGL documentation seems to be looking similar to your project. These examples allow focusing by cursor/TAB keys and the elements are always fully shown on the top/bottom when they’re scrolled to…
( At LVGL forum there is a similar question, but no answer yet: How to programmatically Scroll On Focus, in a LV_LIST using LVGL 8 - How-to - LVGL Forum )
1 Like
I will check out grid navigation, thanks.
Instead of using events, I focused on the switches and dropdowns, enabling these flags for them: “Clickable”, “Click focusable” and “Event bubble”, and for the parent panel I enabled “Scroll on focus”. So when a child switch is focused, its parent panel is automatically focused now.
Checkboxes are different, though, as clicking on them enables the edit mode for some reason, so rotating the encoder after clicking does not change the focus to the next/previous object, but instead toggles it, so you have to long-press the encoder to return to navigation mode. I don’t know why checkboxes and switches aren’t treated in the same way. edit: it’s a bug in LVGL, and a recent commit fixed it.
