Creating a GUI using the LVGL library

Projects Programming
1

I used the following to Create a Container with a grid of 2X2.

  static lv_coord_t col_dsc[] = {370, 370, LV_GRID_TEMPLATE_LAST};
  static lv_coord_t row_dsc[] = {215, 215, LV_GRID_TEMPLATE_LAST};
  lv_obj_t * screen = lv_obj_create(lv_scr_act());  //Create the Screen Space Pointer
  lv_obj_set_grid_dsc_array(screen, col_dsc, row_dsc);
  lv_obj_set_size(screen, Display.width(), Display.height());  //Set the window to the full size of the GIGA display
  lv_obj_set_style_bg_color(screen, lv_color_hex(0xffffff), LV_PART_MAIN);
  lv_obj_center(screen);

then I create the grid of containers by:

  obj = lv_obj_create(screen);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_STRETCH, 0, 1);
 obj = lv_obj_create(screen);
 lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 0, 1);
  obj = lv_obj_create(screen);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_STRETCH, 1, 1);
  obj = lv_obj_create(screen);
  lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 1, 1);

My Results are:

image
image336×268 20.5 KB

my question is how do you get rid of the grid container outlines?

thanks

2

It is likely an argument with one of the API members. Try double-clicking the library name in the Include, then right-click and select Go To Definition. This will add a RO tab with the h file. Now read.
NOTE: The sketch must have been compiled clean first.

3

Apply a border style to the screen or cell object.

  lv_obj_t * screen = lv_obj_create(lv_scr_act());

  // Choose either line to suit your design.
  // lv_obj_set_style_border_width(screen, 0, LV_PART_MAIN);
  // lv_obj_set_style_border_opa(screen, LV_OPA_0, LV_PART_MAIN);
  lv_obj_set_style_border_width(screen, 0, LV_PART_MAIN);

Here is an example applying to the cell object.

  lv_obj_t * screen = lv_obj_create(lv_scr_act());

  static lv_style_t style_cell;
  lv_style_init(&style_cell);

  // Choose either line to suit your design.
  // lv_style_set_border_width(&style_cell, 0);
  // lv_style_set_border_opa(&style_cell, LV_OPA_0);
  lv_style_set_border_width(&style_cell, 0);

  lv_obj_t * obj = lv_obj_create(screen);
  lv_obj_add_style(obj, &style_cell, LV_PART_MAIN);
1 Like
4

Thanks. That helped a lot. Also In creating a GUI is it best to place the GUI objects in Cells or just place them in the SCREEN space?

Thanks

5

If the style is specific to an object, you can use lv_obj_set_style_...() function.

The lv_style_t can be applied to multiple objects. To do this, declare it as static. In the case of the code you showed, if you want to provide the same style properties to cells in a grid container, you only need to create one lv_style_t object, which is more memory efficient.

You can find style properties in:

6

Maybe I didn't understand the point of your question :sweat_smile:

I think a grid container is a good way to arrange objects neatly in rows and columns, like a table.

I hope this makes sense for your question :wink:

7

Is there a preferred GUI Builder to help one in building and laying out a screen design? Im using Arduino hardware.

Thanks

8

Yes, there is EezStudio and it is Free.

9

I started learning LVGL with SquareLine Studio during the 30-day free trial period. It would be best if this tool was free to use forever :man_tipping_hand:

EEZ Studio can be used for free. Unlike SquareLine Studio, since the structure of generated source files is not based on the object-oriented, it took me a while to get used to it in my case.

The LVGL developers are currently developing a new design tool, LVGL UI Editor. Aiming to separate design and coding, the design is written in XML. You can try it at here.

If you want to use it continuously as a hobby, I think EEZ Studio is the choice.