Layers

Order of creation

By default, LVGL draws new objects on top of old objects.

For example, assume we added a button to a parent object named button1 and then another button named button2. Then button1 (with its child object(s)) will be in the background and can be covered by button2 and its children.

../_images/layers.png

/*Create a screen*/
lv_obj_t * scr = lv_obj_create(NULL, NULL);
lv_scr_load(scr);          /*Load the screen*/

/*Create 2 buttons*/
lv_obj_t * btn1 = lv_btn_create(scr, NULL);         /*Create a button on the screen*/
lv_btn_set_fit(btn1, true, true);                   /*Enable to automatically set the size according to the content*/
lv_obj_set_pos(btn1, 60, 40);              	   /*Set the position of the button*/

lv_obj_t * btn2 = lv_btn_create(scr, btn1);         /*Copy the first button*/
lv_obj_set_pos(btn2, 180, 80);                    /*Set the position of the button*/

/*Add labels to the buttons*/
lv_obj_t * label1 = lv_label_create(btn1, NULL);	/*Create a label on the first button*/
lv_label_set_text(label1, "Button 1");          	/*Set the text of the label*/

lv_obj_t * label2 = lv_label_create(btn2, NULL);  	/*Create a label on the second button*/
lv_label_set_text(label2, "Button 2");            	/*Set the text of the label*/

/*Delete the second label*/
lv_obj_del(label2);

Bring to the foreground

There are several ways to bring an object to the foreground:

  • Use lv_obj_set_top(obj, true). If obj or any of its children is clicked, then LVGL will automatically bring the object to the foreground. It works similarly to a typical GUI on a PC. When a window in the background is clicked, it will come to the foreground automatically.

  • Use lv_obj_move_foreground(obj) to explicitly tell the library to bring an object to the foreground. Similarly, use lv_obj_move_background(obj) to move to the background.

  • When lv_obj_set_parent(obj, new_parent) is used, obj will be on the foreground on the new_parent.

Top and sys layers

LVGL uses two special layers named as layer_top and layer_sys. Both are visible and common on all screens of a display. They are not, however, shared among multiple physical displays. The layer_top is always on top of the default screen (lv_scr_act()), and layer_sys is on top of layer_top.

The layer_top can be used by the user to create some content visible everywhere. For example, a menu bar, a pop-up, etc. If the click attribute is enabled, then layer_top will absorb all user click and acts as a modal.

lv_obj_set_click(lv_layer_top(), true);

The layer_sys is also used for similar purposes on LVGL. For example, it places the mouse cursor above all layers to be sure it's always visible.