How to create multiple pages?

Hello everyone, I want to create multiple pages to show various functions. Is there any good way to implement it? Or what controls are better?

Hi Anda!

What exactly are you trying to accomplish? There’s not much detail for anyone to go on.

I’ve started work on my own menu system. I often use a button’s callback to draw a new screen (see the LV_EVENT_CLICKED event here). I’ve also used a tabview which allows you to create several pages at once each tied to one of the tabs (see here).

There are lots of ways to go about creating and laying out multiple pages. It just depends on what makes sense and works for your application :slight_smile:

1 Like

Hello, tarvik, thank you very much for your reply, um, this is my first post. My app is a smart bracelet watch. I want to slide to the next page, and see what I sent, you probably understand it.I look forward to your reply again.

This sounds like the perfect application for a tabview. Did you see the example tabview in the documentation I referenced above?

I don’t know if you want to have visible tabs for these individual screens or not, but I suspect you do not. Fortunately you can easily hide the tabs and just use the swipe to go between pages. This is some pseudo-code off the top of my head to get you started.

lv_obj_t *tabview = lv_tabview_create(lv_scr_act(), NULL);
lv_obj_t *tabpulse = lv_tabview_add_tab(tabview, ""); // No text needed for tabs
lv_obj_t *tabbp = lv_tabview_add_tab(tabview, "");    // as they will be hidden
lv_obj_t *taboxy = lv_tabview_add_tab(tabview, "");

lv_tabview_set_btns_hidden(tabview, true);

lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BG, &mystyle); // mystyle defined elsewhere
// Styles for the tabs not needed as they are hidden

// This is where it gets more tricky as in my example I would load an image
// but in your application you want it to graph data. Hopefully you get the idea

I highly encourage you to take a look at the documentation as it probably covers about 95% of anything you need to do. Also, I have found this project to be a huge help (source here) for learning how all the different widgets function. My biggest issue has been getting screens to layout exactly how I want, but this is the same process with every GUI application I’ve used :slight_smile:

1 Like

Hello, tarvik, thank you again for your good advice. I want to use the TabView control to achieve multiple pages for sliding effects. When I swipe to the next page, is it necessary to manually delete the current page, then create a new page and add control content?

I suggest that you read the documentation.

The tabview stores all of its pages internally, so you can create all the pages in advance (provided that you have the memory for it).

Hello, embeddedt, thank you for your suggestion. When I use the TabView control, I don’t want to use the title of the TabView item, is it possible to hide it directly?

Yes, it is possible.
It’s shown in the docs.

1 Like

Hello, Anda, how do you achieve the smooth curve at the top of the chart and the darkness at the bottom?

Please post in English.