LV_LAYOUT_PRETTY_xxx, how to use correctly?

How-to
1

“Pretty” layouts

What MCU/Processor/Board and compiler are you using?

C in general

What do you want to achieve?

Make the mighty container obey my layout directives!

What have you tried so far?

See below

Code to reproduce

Here’s my test for LV_LAYOUT_PRETTY_TOP/MID/BOTTOM.

lv_obj_t *cont = lv_cont_create(base, NULL);
/* Fixed height container */
lv_cont_set_fit2(cont, LV_FIT_PARENT, LV_FIT_NONE);
lv_obj_set_style_local_bg_color(cont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY);

lv_obj_set_height(cont, 150);
/* This has no effect .. top, mid, bottom */
lv_cont_set_layout(cont, LV_LAYOUT_PRETTY_MID);

lv_obj_t *edit_btn = lv_btn_create(cont, NULL);

/*
   Clipped away: Here I adjust the button to desired form; Diameter 34, margins 4 (horiz.) and 2 (vert.)
*/

/* Nine buttons altogether */
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);
lv_btn_create(cont, edit_btn);

Screenshot and/or video

Here’s the result. It is always similar with PRETTY layouts TOP/MID/BOTTOM. Am I missing now something? With i.e MID version I’d expect to see equal spacing in vertical direction too…

image
image496×682 3.03 KB

Thanks!

2

I tend to position things by hand, so I may not be much help, but maybe you need to call lv_cont_set_layout after creating the buttons?

3

I think I tried that too -> no help. I traced the execution a little and it really always re-positions all after adding a single item. That makes sense. I will however check tomorrow what happens when I place the layout call at the end.

Sir @kisvegabor has created this, let’s hear what he has to say (should he had some spare time…) :slight_smile:

Thank you!

4

@embeddedt, I checked this and as I recalled, it does not affect whether I call lv_cont_set_layout() before or after creating objects.

I have to stick fixing things manually for the moment, but I look forward hearing @kisvegabor’s opinion, as these automatic layout are super handy at certain places. Mmm, maybe I’ll get an opportunity fix this should there be a bug :smiley:

5

MID/TOP/BOTTOM means what to do when the objects has different height. Align their middle line bottom or to top (in the same row) .

I also could use a “real middle” layout in some projects so I’m open to find new useful layouts and/or update the existing ones.

1 Like
6

@kisvegabor Have you ever considered implementing flexbox or a similar layout implementation in LVGL? It tends to be quite "flex"ible (excuse the pun) for these kinds of situations. :slightly_smiling_face:

1 Like
7

OK, so apparently there isn’t (yet) suitable alignment option - Flexboxes “align items center” would be such :slight_smile:

1 Like
8

It sounds great! Using the flexbox-approach would simply layouts yet make them more versatile. Besides, we already made a good friendship with CSS in the styles. :slight_smile: Getting more ideas from there is definitely a good idea.

Maybe we can join fit and layout into one property.

We already have an open issue for reworking layouts.

Let’s continue there. @embeddedt Could you add a comment with idea of flexbox.