Flex Size/Scroll/Focus Issues

General discussion
1

Hi all!

Really digging into the meat of this project now putting a system in place for building screens, navigating between them, showing overlays, busy indicators, etc. Fun stuff.

When first trying to use flex layout though, I created something like this:

https://sim.lvgl.io/v8.1/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/b279f63d6bf84159aab855b962a9f431d5c40eb3/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/b279f63d6bf84159aab855b962a9f431d5c40eb3/examples/get_started/lv_example_get_started_1.py&script_direct=b4e43cd38d526c561e1da284abf4b92fed2dabd1

##### startup script #####

#!/opt/bin/lv_micropython -i

import lvgl as lv

import display_driver

curr_theme = lv.theme_get_from_obj(lv.scr_act())
new_theme = lv.theme_mono_init(lv.disp_get_default(), False, curr_theme.font_small)
lv.disp_get_default().set_theme(new_theme)

##### main script #####

class Test():
    def __init__(self):
        group = lv.group_t()
        message='''Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'''
        parts = message.split('\n')
        screen = lv.scr_act()
        screen.set_flex_flow(lv.FLEX_FLOW.COLUMN)
        screen.set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER)
        screen.set_size(240, 320) # TODO: should be the height minute the header

        for part in parts:
            print('part={}'.format(part))
            container = lv.obj(screen)
            container.set_width(screen.get_width())
            label = lv.label(container)
            label.set_long_mode(lv.label.LONG.WRAP)
            label.set_style_text_align(lv.ALIGN.CENTER, 0)
            label.set_recolor(True)
            label.set_text(part)
            label.set_width(screen.get_width() - 40)

            label_style = lv.style_t()
            label_style.init()
            label_style.set_bg_color(lv.color_hex(0x000000))
            label_style.set_text_color(lv.color_hex(0xFFFFFF))
            container.add_style(label_style, lv.STATE.FOCUSED)

            # print('dir(lv)={}'.format(dir(lv)))
            # print('dir(label)={}'.format(dir(label)))

            container.add_flag(label.FLAG.SCROLL_ON_FOCUS)
            group.add_obj(container)

        # print('dir(lv)={}'.format(dir(lv)))
        # print('dir(self.screen)={}'.format(dir(self.screen)))
        # self.label.set_scrollbar_mode(lv.SCROLLBAR_MODE.ON)

        # create a simple button
        button = lv.btn(screen)

        button.align(lv.ALIGN.CENTER, 0, -40)
        label = lv.label(button)
        label.set_text("Back")
        group.add_obj(button)

        # create a simple button
        button2 = lv.btn(screen)
        button2.align(lv.ALIGN.CENTER, 0, -40)
        label = lv.label(button2)
        label.set_text("Done")
        group.add_obj(button2)

c = Test()

A few issues with this:

  1. The first item on the screen is scrolled off the top even though the scrollbar is at its highest point.

  2. The height of the containers for the labels are taller than I expected. They are probably being set evenly to fill the “rest” of the space, but it’s not clear why that “rest” of the space would be so big.

  3. On my device, I use the keyboard to change focus between the containers and buttons. If I use LV_KEY_NEXT/LV_KEY_PREV to change focus, the topmost text box does not scroll into view, but the other ones and the buttons do. Note that keyboard input doesn’t seem mapped in the online simulator, but you can click the mouse on the topmost label to give it focus, and it will not scroll into view.

Have I misconfigured the flex container perhaps?

2

Hi, I’ve checked it here are my suggestion about what to change:

 screen.set_flex_align(lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER)

container.set_height(lv.SIZE.CONTENT)

Similarly to HTML scroll is applied only on the left and bottom.

Result:
https://sim.lvgl.io/v8.1/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/b279f63d6bf84159aab855b962a9f431d5c40eb3/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/b279f63d6bf84159aab855b962a9f431d5c40eb3/examples/get_started/lv_example_get_started_1.py&script_direct=75412f0dcfc0a0ab08611541eb6258a22a68e42a

3

Awesome! That works just as I expected now. Thanks for taking a look!

This demo code was to test one alternative to a more general UI design issue I have regarding how to scroll through a screen with some long text and other controls. I’ll post a separate topic about the other alternative I’m looking into.

1 Like