LVGL - [pad_column] is an invalid option for [obj]

Documentation:

Reality:

What am i doing wrong?

Itā€™s a layout parameter: LVGL Graphics ā€” ESPHome

Yeah, thatā€™s exactly how I was trying to use it.
Well, I had to use ā€œflexā€ instead.

No, you were putting pad_column in the wrong place. See the docs I linked to.

Above you can see a screenshot from the official documentation, my code is copied from it and only the variables are slightly changed. If there is incorrect code in this part of the documentation, it should be fixed.
Or if you are more specific about which lines in these two screenshots you see discrepancies, it will be more helpful. Thanks.

If ā€œread the docsā€ is a little vague, let me break this into an easy step-by-step sequence:

  1. Click on the link I posted above which is to the definitive documentation for LVGL layouts in ESPHome.
  2. Scroll down, read the description of the pad_column and associated parameters.
  3. scroll further to observe the example config, compare that with your code.
  4. Notice that pad_column goes under the layout: key, not directly in the widget config.

I believe the screenshot you posted is from the ā€œtips and tricksā€ section. This is not the main documentation, it is a set of examples that have been put together at various times and may not be up to date. If in doubt, read the primary documentation. That has had the most work put into it and has been well checked.

PRs to fix any outdated examples in the tips and tricks section (or any other part of the docs) will be welcome.

1 Like

Yes, it was a tips and tricks page, and I mistakenly thought it was equivalent to the main documentation. Thank you for your help!

To avoid creating new topics, could you please advise,
I want to control the screen background.
I can change the disp_bg_image value with lvgl.update, ie substitute different image file values.
But what if I want to switch to a solid color and make the background for example black, how do I ā€œdisableā€ the value of disp_bg_image , leaving only disp_bg_color?
Because if I have a color value specified, but then an image is specified, that image will be on top of the color.
For now I solved this problem by creating an ā€œemptyā€ 1x1 pixel file, but perhaps there is a standard solution that I have not found.

If youā€™re using pages, then your work-around is probably as good as any. If not using pages, you can use styling on the background of the screen to change the image and colour opacity.

A future version using LVGL 9 will have more options for this.

1 Like

Yes, iā€™m using pages, many pages ) Building a kind of automotive dashbord for my friendā€™s diy camper bus. Configuration with multiple devices, сan-bus communication, sensors, relays and a nice LVGL interface.
If you donā€™t mind, Iā€™d like to ask you a couple more questions that I canā€™t handle with instructions.
While i have an option to change backround/wallpaper, i want to store last selected background image id with globals, to restore it on next boot.
My yaml (parts related to this problem):

globals:
  - id: wallpaper
    type: std::string
    restore_value: yes
    initial_value: '"bg_image2"'

image:
  - file: "image.jpg"
    id: bg_image1
    type: RGB565
  - file: "gears.jpg"
    id: bg_image2
    type: RGB565

lvgl:
  id: lvgl_comp
  disp_bg_image: !lambda 'return {id(wallpaper).c_str()};'
...
                  rows:
                    - buttons:
                      - id: bg_01
                        text: "Waves"
                        on_value:
                          then:
                            - globals.set:
                                id: wallpaper
                                value: '"bg_image1"'
                            - lvgl.update:
                                disp_bg_image: bg_image1
                    - buttons:
                      - id: bg_02
                        text: "Gears"
                        on_value:
                          then:
                            - globals.set:
                                id: wallpaper
                                value: '"bg_image2"'
                            - lvgl.update:
                                disp_bg_image: bg_image2

The problem is that on boot it tries to restore the id from the global variable, but apparently it gets an incorrect value from there, because i got black screen instead of image, and console log error
[lvgl:000]: draw_bg_img: Couldnā€™t read the background image (in lv_draw_sw_rect.c line #391)
I seem to be mishandling globals. Probably just misplaced some brackets or quotes) Thatā€™s still not clear for me, could you give me some guidance? Thanks a lot!

You canā€™t use a string to set an image source (or any other ID) at runtime - youā€™ll have to use some kind of map from an integer or string to an image ID. Iā€™d suggest asking for help in the Discord #general-support channel, itā€™s not an LVGL issue as such.

1 Like

Thanks.
Am I understanding correctly that you are related to lvgl development in esphome?
What about the possibilities of animations of text and other elements besides image? If I need to create blinking text for example, would that be possible? Since Iā€™m making an analog of a car dashboard, I need some icons to blink. And they are rendered in glyphs, not images.