LVGL basic formatting queries

ESPHome
1

Hi all, novice getting started with lvgl and have a couple of basic formatting issues.

Firstly, the docs says border_width defaults to 0 but if I omit it then my widgets have a white border.

Second, is radius the correct method to remove rounded corners? Setting draw_rounding to 0 at the top level crashes the ESP32 in to a loop.

Finally, I’m seeing scrollbars even though there doesn’t appear to be an overlap. The code below gives a red box in the middle of the screen but it has a vertical scroll bar on the nested obj when there is a 20 pixel difference.

lvgl:
  buffer_size: 25%
  color_depth: 16
  disp_bg_color: 0x494949
  #border_width: 0
  align: center
  radius: 0
  pages:
    - id: main_page
      bg_color: 0x494949
      widgets:
        - obj:
            align: CENTER
            #border_width: 0
            radius: 0
            width: 290
            height: 220
            x: 0
            y: 0
            bg_color: 0x494949
            bg_opa: COVER
            widgets:
              - obj:
                  align: CENTER
                  #border_width: 0
                  width: 200
                  height: 200
                  bg_color: 0xf41414
                  bg_grad_color: 0xff8c8c
                  bg_grad_dir: VER
                  bg_opa: COVER
                  radius: 20

Grateful for any pointers. Thanks.

2

draw_rounding has nothing to do with widgets, it’s a display interface setting.

Generally speaking you rarely need to create obj widgets, and they have a fair bit of pre-defined styling from the basic theme. Start by adding more useful things like labels, then read up on the layout options.

3

Thanks. I am working my way through the docs and testing as I go. Layouts next.

Are you saying the vertical scrollbar is expected behaviour for the obj: widget? With no padding defined and no overlap I wouldn’t expect one.

Thanks

4

It’s expected behaviour when the contents are larger than the content area. Why that is in your case I couldn’t tell you without detailed examination, but it clearly is since you see a scroll bar. If you set the height and width of the outer obj to size_content it will go away.

There is a clue in your comment “there is no padding defined” - by you. There is padding defined in the default theme.

Refer to the LVGL docs on the border-box model for more information.

5

Thank you. Setting pad_all: 0 removes the scrollbar.