LVGL Part 2: basic overview and modifications

OK so let’s investigate what’s going on in our code. The code looks pretty simple, although there’re some critical parts that we have to pay attention to. This is because when we migrate the code to our device, it’ll easier for us to have similar code structure.

The LVGL initialization is done, obviously, by lv_init(), and we don’t even have to touch this at this point. 

hal_init(); is responsible for our peripheral initialization: we initialize our hardware (display, touch driver, buttons, etc.) in here.

lv_demo_widgets(); is a part where a basic design of our GUI is created. We can put there definitions of the tabviews, screens, buttons, gauges, etc.

lv_task_handler(); is required (for the internal timing of LVGL) to be called once every 1 to 10 milliseconds. This function is responsible for refreshing the content of our display.

Another important (at this moment) section of our code is the lv_conf.h file:

This file is our main config file, where we can set parameters such as display’s width and height, color depth, used theme, and many more advances parameters.

So, let’s make some simple modifications to our GUI:

  • change display’s resolution from 800 x 480 to 1024 x 768px,
  • add new tabview with custom buttons,
  • add a custom button event.

Display’s resolution

In order to change the display’s resolution, go to lv_conf.h file and change LV_HOR_RES_MAX & LV_VER_RES_MAX parameters:

New tab

As we already have our GUI structure prepared, adding a new tabview is pretty simple. First, let’s add a new static object t4 for our new tab:

Then, go to the lv_demo_widgets(); and initialize it to be a new tab of tabview tv, with the name “NewTab”:

The content of each tab is generated by functions:

So let’s create a new function, which our new tab’s design:

At first, our function will have a simple button, which does completely nothing at this stage. Here is the definition:

Last, we need to call our new function inside the lv_demo_widgets();

Everything put together should look like this:

Button events

Now we will add an event to our button. This event will do nothing but print messages, based on its state. First, lets declare our event:

Now we should define it appropriately:

Last, but not least, assign this event as a callback function inside the newTab_create();

Compile, run, and the GUI should work as follows:

Source code: