How to put vertical sliders side by side in the lv_examples_menu_5

How-to
1

Description

I am using lv_example_menu_5 as a base of my project. I have used lv_ grid to place a 3 by 3 button layout (lv_btn matrix does not provide the flexibility I need for each button placed in the section.
The example creates a section into which I pace two objects (grid and slider) and I want these side by side
lv_obj_t * sub_gimbal_page = lv_menu_page_create(menu, NULL);
lv_obj_set_style_pad_hor(sub_gimbal_page,
lv_obj_get_style_pad_left(lv_menu_get_main_header(menu), 0), 0);
lv_menu_separator_create(sub_gimbal_page);
section = lv_menu_section_create(sub_gimbal_page);
lv_gimbal_grid(section);
create_slider(section,LV_SYMBOL_SETTINGS, “Speed”, 0, 150, 100);

What LVGL version are you using?

8.4

What have you tried so far?

I assumed that I could use lv_obj_align_to(slider, parent, LV_ALIGN_TOP_RIGHT, 0, 0); to align the slider to the right of the parent i.e. section see code below

static lv_obj_t * create_slider(lv_obj_t * parent, const char * icon, const char * txt, int32_t min, int32_t
max,int32_t val)
{
lv_obj_t * obj = create_text(parent, icon, txt, LV_MENU_ITEM_BUILDER_VARIANT_2);
lv_obj_t * slider = lv_slider_create(obj);
lv_obj_set_size(slider, 20, 300);
lv_obj_align_to(slider, parent, LV_ALIGN_TOP_RIGHT, 0, 0);
lv_slider_set_range(slider, min, max);
lv_slider_set_value(slider, val, LV_ANIM_OFF);

if(icon == NULL) {
    lv_obj_add_flag(slider, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
}

return obj;

}

The slider is shown below the grid. It appears that the align flags, although they compile do not work in a section created by lv_menu_section_create. I tried lv_menu_cont_create with the same result.

I also tried:
//section = lv_menu_section_create(sub_gimbal_page);
lv_obj_t * mycont = lv_cont_create(sub_gimbal_page, LV_LAYOUT_ROW_TOP)

but error “lv_cont_create’ was not declared in this scope” so I assume i t will not work if parent is a menu

Any ideas how to align two objects side by side in a menu page.

Thank you
PS because I do not understand the underling structure of LVGL I find it a very frustrating leaning curve and the documentation does explain what works with what FLAGS work with what widget.

2

Hi,
try to use UI design tool like Square Line Studio or EEZ Studio.

3

Hi Thank, I will have a look at these options. But it appears to me that non of the alignment options work in a menu page. Even a single object will not align to center. Not sure if any one else has found this

4

Unfortunately Square Line Studio does not support the driver in the Waveshare ESP 32 3S LCD touch 4.3" display.

5

It is independent of the driver, as long as LvGL is working, it will work.
Check controllers tech youtube channel.

6

Unfortunately not so simple. With Arduino and Squareline use the TFT_esPI library. Should not be a problem as Waveshare provide a lvgL_port for the 4.3 touch which effectively replaces the TFT_esPI. Did not work at all.

Success using Expressif with a board that is very close to the 4.3 touch (ESP32-S3-LCD-EV-BOARD) , a simple label - it worked !, but I did have to create an Arduino project and copy the Squareline files to it and copy the screen.c contents to the project .ino file. I guess I need to work out how to #include the screens folder.

Just need to try a more complex layout.

7

I have limited experience with arduino ide.
I prefer to use more advanced IDE for the MCU.