About the sub-object position (coordinates) problem

Applications
,
1

Description

About the sub-object position (coordinates) problem

What LVGL version are you using?

V8.3.6

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

lv_obj_t *cont = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont, 480, 320-30);
lv_obj_align(cont,  LV_ALIGN_BOTTOM_MID, 0, 0);

lv_obj_t *btn = lv_btn_create(cont);
lv_obj_align(btn,  LV_ALIGN_TOP_LEFT, 0, 0);
lv_obj_t *btn1 = lv_btn_create(cont);
lv_obj_align(btn1, LV_ALIGN_BOTTOM_RIGHT, 0, 0);

Result

The code is as above, but btn is not in the upper left corner of cont, and btn1 is not in the lower right corner of cont.

2

You have to set all the margins, paddings to zero as well as the border width and outline width. I don’t remember which one is exactly causing it but one of those is. I set up a style and add the style to every widget I create to make sure the positioning is as it should be.

3

Thank you very much for your reply, I will try your suggestion. But if I change to the following code the position of btn and btn1 is completely correct.

lv_obj_t *btn = lv_btn_create(lv_scr_act());
lv_obj_align(btn,  LV_ALIGN_TOP_LEFT, 0, 0);
lv_obj_t *btn1 = lv_btn_create(lv_scr_act());
lv_obj_align(btn1, LV_ALIGN_BOTTOM_RIGHT, 0, 0);
4

The buttons are not what is causing the problem. it’s the “cont” you have that sits between the screen and the buttons that is. That is the thing you need to remove any of the margins and border widths from.

The other things I noticed was this…

lv_obj_t *cont = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont, 480, 320-30);
lv_obj_align(cont,  LV_ALIGN_BOTTOM_MID, 0, 0);

if your display has a resolution of 480 x 320 then your buttons are not going to be in the corners of the screen. That is because the “cont” has a size that is 30 pixel less in width than the screen is. You are using the bottom mid as the alignment point which means align the bottom of the child object to the bottom of the parent object so the vertical center line for both the child aand the parent are also in alignment. That means the edges of the “cont” object are going to be 15 pixels in from the edges of the display. Your buttons if aligned to the bottom left and the bottom right will align to the bottom corners of their parent. In the original code that is going to be the “cont” object. So if you are expecting the buttons to be in the corners of the display then you need to set the width of the “cont” object to be the same as the display.

1 Like
5

lvgl
lvgl2355Ă—1629 96.3 KB

I set the width of pad( top bottom left and right ) and Border to 0, which is the result I want. thank you very much for your help.

6

FANTASTIC!!!

Make sure to mark my post as the solution to your issue. This way others will know the problem has been solved.