当前位置：网站首页>Getting started with the lvgl Library - colors and images

Getting started with the lvgl Library - colors and images

2022-06-24 12:50:00 【Frozen candle】

Color

Construction color

stay LVGL in , Color by structure lv_color_t Express . At the beginning of the migration of the entire project , Once in the lv_conf.h Color depth modified in ：

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 32

LVGL The appropriate color structure will be automatically created according to the selected color depth . There are also several color related configuration options in the next few places , It can be modified by referring to the notes .

for example ,16 position big-endian The color of is defined as ：

typedef union {
    struct {
        uint16_t blue  : 5;
        uint16_t green : 6;
        uint16_t red   : 5;
    } ch;
    uint16_t full;
} lv_color16_t;
typedef lv_color16_t lv_color_t;

Then you can create appropriate color values based on this structure ：

lv_color_t orange = {
    .ch = {
        .red   = 0b11111,
        .green = 0b101001,
        .blue  = 0
    }
};

Create directly RGB565 The color format is a bit difficult to color , However, you can use the following functions to generate appropriate color values from 16 bit colors ：

lv_color_t orange = lv_color_make(0xFF, 0xA5, 0);  //  Create from the color channel 
lv_color_t aqua = lv_color_hex(0x00FFFF);          //  Create... From hex 
lv_color_t lightgrey = lv_color_hex3(0xddd);       //  Create... From hexadecimal abbreviations

These colors are created , The values for each color channel use 0~255 Can be expressed , It will be automatically converted to the appropriate color value during the creation process .

LVGL It also provides HSV Format color support ,

lv_color_t red = lv_color_hsv_to_rgb(0, 100, 100);   //  from  HSV  Color space create colors 
lv_color_hsv_t blue = lv_color_rgb_to_hsv(r, g, b);  //  take  RGB  The color changes to  HSV  Color

besides ,lv_color_t 、RGB Color 、HSV Colors can also be converted to each other .

If you feel 16 Hexadecimal color is not intuitive enough , You can also use the palette function .LVGL Provides the color value representation of common colors , You can use it directly 、 fine-tuning 、 Mix these colors .

for example , The following directly calls up a purple ：

lv_color_t purple = lv_palette_main(LV_PALETTE_PURPLE)

If you think the default purple is too dark or too light , You can also change the brightness in the palette ：

lv_color_t dark_purple = lv_palette_darken(LV_PALETTE_PURPLE, 2)  //  Two levels of depth adjustment , It can be adjusted deep or shallow at most  4  level 
lv_color_t light_purple = lv_color_lighten(purple, 60);  //  Make it lighter , Transfer to  255  It becomes pure white

You can even mix two colors ：

lv_color_t orange = lv_color_mix(red, yellow, 156);

The value of the ratio is 0~255 , For example, set to 0 It's all red ,128 That is, red and yellow account for half and so on .

You can apply a color type directly to the following style properties ：

Property name	meaning
`bg_color`	The background color
`border_color`	Border color
`outline_color`	Outline color
`shadow_color`	Shadow color
`text_color`	text color

And the line and arc colors mentioned in the previous section .

transparency

Sometimes two controls may overlap , At this point, you can set a transparency for them .

Transparency usage type lv_opa_t Express ,LVGL Predefined several macros for transparency ：LV_OPA_TRANSP Indicates full transparency ,LV_OPA_COVER Indicates full opacity , The rest LV_OPA_10 ~ LV_OPA_90 The whole ten indicates that the transparency decreases in turn .

Transparency can be applied to the following style attributes ：

Property name	meaning
`bg_opa`	Background transparency
`border_opa`	Border transparency
`outline_opa`	Contour transparency
`shadow_opa`	Shadow transparency
`text_opa`	Text transparency
`opa`	Overall transparency

And the transparency of lines and arcs . for example , The following creates two partially overlapping controls , And add transparency to a background ：

static lv_style_t style_grass;
lv_style_init(&style_grass);
lv_style_set_opa(&style_grass, LV_OPA_30);
lv_obj_t* obj = lv_obj_create(lv_scr_act());
lv_obj_t* cover = lv_obj_create(lv_scr_act());
lv_obj_add_style(cover, &style_grass, 0);

In this way, you can see the occluded control ：

Attention needs to be paid to the upper layer , That is, the control created after adding transparency will have such an effect . Transparency is actually the re - coloring of controls , So it's not 32 Bit color screens can also use transparency .

lv_opa_t The essence of type is 8 Bit unsigned integer , So you can create a transparency value by yourself , Set to 255 It means complete transparency ; You can also apply transparency to lv_color_mix() On the third parameter of .

gradient

You can use a gradient to add a more beautiful effect to the control .

Only the background color can be set as a gradient . The effect of a gradient is governed by the following attributes ：

Property name	meaning
`bg_color`	Main colors
`bg_grad_color`	Gradient color
`bg_grad_dir`	Gradient direction
`bg_main_stop`	Gradient start position
`bg_grad_stop`	Gradient end position
`bg_dither_mode`	Rendering mode

When the gradient direction is determined , Gradient from bg_main_stop Position start , from bg_color Over to bg_grad_color , stay bg_grad_stop End of position . The position here is measured by proportion , The gradient area is divided into... In each direction 256 Share , for example 128 Represents the middle position ,255 Represents the end position, etc .

for example , The following code ：

lv_obj_t* obj01 = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_color(obj01, lv_palette_main(LV_PALETTE_BLUE), 0);
lv_obj_set_style_bg_grad_color(obj01, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_grad_dir(obj01, LV_GRAD_DIR_HOR, 0);

The gradient effect is a horizontal gradient from blue to red ：

Again , The following code ：

lv_obj_t* obj02 = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_color(obj02, lv_palette_main(LV_PALETTE_GREEN), 0);
lv_obj_set_style_bg_grad_color(obj02, lv_palette_main(LV_PALETTE_PURPLE), 0);
lv_obj_set_style_bg_grad_stop(obj02, 128, 0);
lv_obj_set_style_bg_grad_dir(obj02, LV_GRAD_DIR_VER, 0);

The gradient effect is a vertical gradient from green to purple , But the actual gradient area is only the upper half ：

You can also use the abbreviated attribute bg_grad Set the full gradient properties . In this case , Gradients use structures lv_grad_dsc_t describe ：

typedef struct {
    lv_gradient_stop_t stops[LV_GRADIENT_MAX_STOPS];
    uint8_t            stops_count;
    lv_grad_dir_t      dir    : 3;
    lv_dither_mode_t   dither : 3;
} lv_grad_dsc_t;

macro LV_GRADIENT_MAX_STOPS Determines the maximum number of gradient colors , Can be in lv_conf_internal.h about 377 Line to modify the number of this macro ：

#ifndef LV_GRADIENT_MAX_STOPS
    #ifdef CONFIG_LV_GRADIENT_MAX_STOPS
        #define LV_GRADIENT_MAX_STOPS CONFIG_LV_GRADIENT_MAX_STOPS
    #else
        #define LV_GRADIENT_MAX_STOPS 3
    #endif
#endif

Then you can customize the gradient of multiple colors ：

static lv_grad_dsc_t grad_sunset;
grad_sunset.stops[0] = (lv_gradient_stop_t){ .color = lv_palette_main(LV_PALETTE_RED), .frac = 96 };
grad_sunset.stops[1] = (lv_gradient_stop_t){ .color = lv_palette_main(LV_PALETTE_ORANGE), .frac = 128 };
grad_sunset.stops[2] = (lv_gradient_stop_t){ .color = lv_palette_main(LV_PALETTE_BLUE), .frac = 216 };
grad_sunset.stops_count = 3;
grad_sunset.dir = LV_GRAD_DIR_VER;
lv_obj_t* obj03 = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_grad(obj03, &grad_sunset, 0);

The effect is ：

picture

Create a picture

Pictures can be stored in two ways ： First, as a variable such as an array , Second, it is stored in the form of binary files . As the relevant contents of the document have not been introduced yet , Here we only introduce the use of arrays to store and use images .

LVGL An online picture converter has been provided , Can be directly in https://lvgl.io/tools/imageconverter General PNG or JPG The picture is converted to the one that meets the requirements C Language objects ：

Note that after the conversion, you will get a complete source file , The file name is also the variable name of the image . The only thing to note about the above values is the color format used in the picture , Generally speaking, color formats can be divided into the following categories ：

True color ： Automatically fit the color depth used by the current project
Indexed ： Create a smaller number of colors from the palette
Alpha only ： Monochrome image , Only use transparency
Raw ： Use the original color format of the image

the last one RBG565-A8 No need to say more . It's worth noting that , One of the above is called “Chroma key” The color format of , It corresponds to lv_conf.h Of the 42 Line configuration , The note says ：

/*Images pixels with this color will not be drawn if they are chroma keyed)*/
#define LV_COLOR_CHROMA_KEY lv_color_hex(0x00ff00)         /*pure green*/

For more information about this, please read Wikipedia https://en.wikipedia.org/wiki/Chroma_key

After the conversion , Add the obtained source file to the current project , The image can then be displayed with the following lines of code ：

LV_IMG_DECLARE(lvgl_logo);
lv_obj_t* img01 = lv_img_create(lv_scr_act());
lv_img_set_src(img01, &lvgl_logo);

The first macro here is essentially a extern sentence . The displayed effect is ：

Note that the image created on the simulator here is transparent .

The properties of the picture

Like lines and arcs , Picture objects also have special properties , But less ：

attribute	brief introduction
`img_opa`	Picture transparency
`img_recolor`	You can add a layer of color filter to the picture
`img_recolor_opa`	The transparency of this layer of filter

By default , The picture control automatically adjusts the width to fit the picture size . If the control is too small , Then the extra part of the picture will be removed ; If the control is too large , Then the picture will be paved repeatedly like a floor tile to fill the remaining area .

Can pass lv_img_set_offset_x(img, x_ofs) And y The function corresponding to the axis sets an offset to the picture to modify the display range . for example , You can crop the picture by combining the offset with the control width ：

lv_img_set_offset_x(img01, -2);
lv_img_set_offset_y(img01, -7);
lv_obj_set_size(img01, 74, 74);

Here, the negative value is used to offset the image to the upper left corner , This box selects the appropriate area ：

Picture button

Finally, I will introduce another content , You can create a button with an image . In this case , Need to prepare three pictures , Describe the left side of the button respectively 、 Middle and right .

for example , The following prepared pictures are as follows ：

Because the width of the label is uncertain , So the picture in the middle must be horizontally tilable . After converting it to the corresponding picture format , You can create a picture button with the following code ：

lv_obj_t* imgbtn = lv_imgbtn_create(lv_scr_act());
lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, &imgbtn_left, &imgbtn_mid, &imgbtn_right);
lv_obj_t* label = lv_label_create(imgbtn);
lv_label_set_text(label, "Image Button");
lv_obj_set_style_img_recolor_opa(imgbtn, LV_OPA_30, LV_STATE_PRESSED);
lv_obj_set_style_img_recolor(imgbtn, lv_color_black(), LV_STATE_PRESSED);

Note that during the creation process , Apply the above picture to the normal state of the button （ That is, the state in which there is no event ） In the appearance of . Here, by adding a dark filter to the click event, the appearance can be changed when clicking ：

In this way, the buttons can become very fancy .

The above introduction to the pictures is relatively simple , However, it is basically enough to cope with general usage scenarios . More details can be found in the official documents .

First appeared in ：http://frozencandles.fun/archives/383