Application of V7 version of lvgl Library

The author's ability is limited , If something goes wrong in the text , Please point it out to me , I would be grateful , thank you ~

Preface

In the use of lvgl When I was in the library , The author's V7 Version Library , In the process of using, we found that the V7 There is very little information about the version , There are documents on the official website about how to use it , But some aspects are not very comprehensive , And most of the online Chinese courses are aimed at V6 Version of ,V6 and V7 The difference in usage is quite big in some aspects , So I also want to put myself in use V7 Version of the library when some of the experience recorded , This article is not comprehensive , It's just what I used in recent days lvgl V7 A summary of some of the features of the version , If there is any new experience in the later stage , Will continue to improve the series , Okay , Let's start with the text .

V7 Version highlights

First , Let's see lvgl Of github Warehouse , You can see that there is a present V7 Version of lvgl There are several versions , The latest release is V7.1.1 Of .

About V7 Version of the library relative to V6 One of the highlights of the version library is about lv_core Under folder lv_obj_style_dec.h This file .

Let's open this file first , You can see that this file is a combination of macro definitions and inline functions , As shown below ：

So why are these macros so cleverly defined , Let's move on to the picture below ：

On the left of the code shown above is an official one demo , In the process of looking at the code , On the left 171 Line code go to In the past , Corresponding to the right figure 158 Lines of code , The code in the figure on the right shows that the front is all the same , This is if it corresponds to the code of drawing ？ This requires the use of C The concept of language macro paste . Here is an introduction Yu Lin Jun An article in the official account describes the related applications of macro paste ： You used the macro ## Paste function , And then look for execution with function pointers ？ I'll tell you today , The author also briefly describes the concept of macro paste ：

Macro paste ## The concept of

One sentence summary ## Is that ： Connect macro parameters , Here's an example ：

#include <stdio.h>

#define f(a,b) a##b
#define g(a)  #a
#define h(a)  g(a)

int main(void)
{
    printf("%s\n",h(f(1,2)));
    printf("%s\n",g(f(1,2)));
}

The output looks like this ：

For this example , What needs to be added is ：# Is used to string the macro . Here is the first one printf Calculation process ：

Got the first one printf Calculation process when output , The result of the second is clear , I will not repeat . Except that two numbers can be spliced together , This method can also be used for variable declaration , stay Yu Lin Jun The example given in the official account is this. ：

#define def_u32_array(__name, __size)    uint32_t array_##__name[__size];

So we can call it like this ：

def_u32_array(sample_buffer, 64);

The effect of macro expansion is like this ：

uint32_t array_sample_buffer[64];

besides , It can also be pasted into a function , This is the same. lvgl V7 Relative to version V6 One of the subtleties of the version .

lvgl Macro paste for

First, let's look at the macro definition at the bottom of the file ：

Expand the macro definition first , in other words _LV_OBJ_STYLE_SET_GET_DECLAR Equivalent to ：_OBJ_GET_STYLE_scalar(prop_name, func_name, value_type, style_type) _OBJ_SET_STYLE_LOCAL_scalar(prop_name, func_name, value_type, style_type) and _OBJ_SET_STYLE_scalar(prop_name, func_name, value_type, style_type), What can't be seen from the analysis , We further dismantle it , Let's see _OBJ_GET_STYLE_scalar(prop_name, func_name, value_type, style_type) , This corresponds to the code shown in the figure below ：

This is the time , Look again. _OBJ_GET_STYLE_scalar(prop_name, func_name, value_type, style_type), Is an inline function defined by a macro , Now it's basically clear , That is to say one _LV_OBJ_STYLE_SET_GET_DECLARE Three functions are declared , Let's take a concrete example for analysis , Let's analyze the first statement of this document ：

_LV_OBJ_STYLE_SET_GET_DECLARE(RADIUS, radius, lv_style_int_t, _int, scalar)

Expand it all , That's what we want to see in the end , It looks like this , As shown in the figure below ：

Let's go back to the first question ,go to Why was the corresponding code like that in the past , That's how it works .

V7 Version change font

The above is a description of the macro paste problem , besides ,V7 Version of the library when modifying fonts and V6 There is also a big difference between the versions , The online tutorial and the example given on the official website are based on V6 Version of , Modification method cannot be applied to V7 On the version , The modified font here means if I want the interface to display Chinese , How to add a font and apply it . First of all, it introduces the official font conversion tool , The conversion here is to convert the font to C Language array .

The disadvantage of this method is that the conversion is complicated , Manual operation required , When the author is looking for information , See another very convenient conversion tool , Give here gitee link ,https://gitee.com/WuBinCPP/MCU_Font_Release,README.md There is a very detailed tutorial , How to use it will not be repeated here , It is much more convenient to use than the method introduced on the official website .

So how do we actually use the font we've converted , The first thing to understand is lvgl Style in , Styles are used to decorate the appearance of objects , stay lvgl There is the concept of object in , stay lvgl in ,Button ,Label,Image,List,Chart perhaps Text area Can be called objects , If we want to show a Chinese character now , What you need to do is create a style , then , Set the font of the style to the Chinese we want to display , Last , Create a Label object , Binding the sample style just now can be realized ,V6 and V7 They are consistent in this aspect , But the specific code difference is still a little big , About V6 The version is very simple to use , After declaring the converted font , Just use the statement shown below ：

static lv_style_t my_style;
lv_style_copy(&my_style,&lv_style_plain_color);// Style copy 
my_style.text.font = &my_font_30;// Use fonts in styles 

lv_obj_t* label = lv_label_create(src,NULL);// Create a label control 
lv_label_set_style(label,LV_LABEL_STYLE_MAIN,&my_style);// Set the style 
lv_label_set_text(label," The font to use ")

That's in V7 How to use it in the version ？ It's also about creating a style , Then bind the style to the corresponding object , Finally, the font setting is realized , The detailed code is shown in the figure below ：

static lv_style_t stytle_title;

lv_style_init(&style_title);
lv_style_set_text_font(&style_title,LV_STATE_DEFAULT,&my_lv_font);

lv_obj_t * title = lv_label_create(lv_scr_act(), NULL);
lv_style_list_t * list = lv_obj_get_style_list(title, LV_LABEL_PART_MAIN);
_lv_style_list_add_style(list, &style_title);
lv_obj_refresh_style(title, LV_OBJ_PART_ALL, LV_STYLE_PROP_ALL);

lv_label_set_text(title, " This is a font test program ");

It can be seen that the use of the two versions is still different . This is how to set the font , Because of how to set up on the network V7 Version fonts are less mentioned , So record it here .

summary

The above is only about lvgl A small part of ,lvgl There is still a lot of content , About lvgl Design idea , It's still subtle , The object of its adoption , Container, etc , As mentioned just now Button ,Label,Image,List,Chart perhaps Text area Are called objects , Although the objects are different , But they can be operated as objects , You can add style properties to objects , Change its appearance . For the container mentioned , It can also be used to place objects ,Button ,Label Can be placed in the container cont in , About lvgl There's a lot more to it , I'll share my new experience later .

If you think the content of the article is helpful to you , Welcome to thumb up 、 forward 、 Watching Sanlian ~ meanwhile , Also welcome to add my personal micro signal , Communicate with each other , Common progress , The following is my personal micro signal

Meanwhile, I would like to welcome my official account. ：