Horizontally line up elements on button?


I’d like to line up children of a button horizantally, like this:

    lv_obj_t *btn = lv_btn_create (page, NULL);
    lv_obj_set_size  (btn, lv_obj_get_width_fit(page), 132);
    lv_obj_set_pos   (btn, 8, 8);
    //    lv_obj_add_style (btn, LV_BTN_PART_MAIN, );

    lv_obj_t *img = lv_img_create (btn, NULL);
    lv_obj_set_pos   (btn, 8, 8);
    lv_img_set_src (img, &icon_60x60_settings);

    lv_obj_t *lbl1 = lv_label_create (btn, NULL);
    lv_label_set_text (lbl1, "some text");
    lv_obj_set_pos (lbl1, 100, 8);

    lv_obj_t *lbl2 = lv_label_create (btn, NULL);
    lv_label_set_text (lbl2, "more text");
    lv_obj_set_pos (lbl2, 200, 8);

Unfortunately, the calls to lv_obj_set_pos() semm to be ignored. The sub-objects of the button are composed vertically.

Any hints what I am missing here?

By default, pages automatically (and forcefully) position their children.

In your case, I would suggest doing one of these things:

  • If these buttons are the only widgets you want on the page, call lv_page_set_scrl_layout and choose a layout that arranges them horizontally. The page will then line them up for you.
  • If you want other widgets on the page, create a new child container with a horizontal layout, and then put the buttons inside that.
  • If you would prefer to just control the positions of everything yourself, set the page’s layout to LV_LAYOUT_OFF using lv_page_set_scrl_layout. It should then allow you to use lv_obj_set_pos.

Thanks for the explanation, @embeddedt!

The buttons are the only objects in the page, so I think your I’d go with your first suggestion.

What I am trying to achieve is, having a scrollable list of “events” like this:

ICON  Timestamp  Location  Event
ICON  Timestamp  Location  Event
ICON  Timestamp  Location  Event

Items to this list should be added/removed dynamically (when messages arrive on a serial line), so this list can get long.

The buttons have multiple labels in order to line them up properly, making them look somewhat like a table.

Every line in this list is a button which opens a context-menu when clicked to operate on this “event”.

But now I notice that when the buttons consume all the space in the page, there is no way to scroll the page without clicking one of the buttons.

What would be the proper way to get around this problem?

Maybe I am completely off the road and there’s a better way to do this?

Manual navigation

Thanks for the hint, @juneofive!

This means, I need two additional buttons somewhere on the screen? Scrolling by drag should be disabled, then?

It is recommended to read the documentation first, and the link is given to show you how to manually scroll the page (without touching the screen).

Here’s the solution to your problem:

After adding a new item (button) to the page, scroll to the latest position (set the focus to the newly added item) if it is out of the screen area
This requires software logic to handle and does not require new buttons

@Juneofive, I guess you misunderstood my question. That’s why you assume I did not read the doc.

I see that I can scroll (by software).

But how will THE USER scroll back to another child which will be scrolled out of sight due to my manual navigation? After all, the User is not able to scroll by dragging, since all the space in the page is used up by buttons and every touch in this area invokes the callbacks of the buttons instead of starting the page’s scroll function.

Thus, to give the USER the ability to scroll through the page, I need additional buttons. One “UP” button and one “DOWN” button. Those buttons would invoke the manual navigation functions you mentioned. Right?

Emm, maybe my understanding is wrong.

What I understand now is that you have a lot of buttons on your page (all over the page), and each button has a callback, so you can’t scroll through the page by touching the page area to select a button outside the screen area.(because a button callback is triggered when a page area is touched).

In this case, the extra button to scroll the page is really a solution.

Yes. Like those two buttons that old windows versions had at the end of each slider.

Maybe there’s a way to make the slider itself draggable?

Another way might be to reduce the clickable area of the buttons (maybe only the left half of the button is clickable). But this might get somewhat counter-intuitive…

AFAICS, the clickable area can be extended, but not reduced. So this would not be an option anyway.