Tips ： This blog serves as a learning note , If there are mistakes, I hope to correct them

One 、img brief introduction

1.1 summary Overview

   The image is in flash in ( In array form ) Or the basic object that displays the image in the form of an external file . Images can also display symbols (LV_SYMBOL_…).
   Use image decoder interface , You can also support custom image formats .

1.2 Part and style Parts and Styles

  LV_PART_MAIN A background rectangle , It uses the typical background style attributes and the image itself using the image style attributes .

1.3 Use Usage

1.3.1 Image resources Image source

   To provide maximum flexibility , The source of the image can be :
• A variable in the code ( A with pixels C Array ).
• Files stored externally ( such as SD card ).
• Signed text .
   To set the source of the image , Use lv_img_set_src(img, src). From you to PNG、JPG or BMP Image generation pixel array , Please use Online image conversion tool , And use its pointer to set the converted image :lv_img_set_src(img1, &converted_img_var); To make the variable in C It can be seen in the document , Need to use LV_IMG_DECLARE(converted_img_var) Declare it .
   To use external files , You also need to use the online converter tool to convert image files , But now you should choose binary output format . You also need to use LVGL File system module , And register a driver with some basic file operation functions . Go to file system for more information . Use lv_img_set_src(img, “S:folder1/my_img.bin”) Get the image settings from the file .
   It can be set similar to “ label ” The symbol of . under these circumstances , The image will be rendered as text according to the font specified in the style . It can use lightweight monochrome “ Letter ” Instead of real images . You can set things like lv_img_set_src(img1, LV_SYMBOL_OK) Such symbols .

1.3.2 Label as picture Label as an image

   Images and labels are sometimes used to convey the same thing . for example , Describe the function of the button . therefore , Images and labels are interchangeable , That is, the image can use LV_SYMBOL_DUMMY Display text as a prefix to text . for example ,lv_img_set_src(img,LV_SYMBOL_DUMMY“Some text”).

1.3.3 transparency Transparency

   Inside ( Variable ) And external image support 2 A transparent processing method :
• Chrome keying - Pixels and LV_COLOR_CHROMA_KEY (lv_conf.h) The color will be transparent .
• Alpha byte - One alpha Bytes are added to each pixel that contains pixel opacity

1.3.4 Palette and Alpha Indexes Palette and Alpha index

   except RGB (True color) Outside the color format , The following formats are also supported :
• Indexed - The image has a palette .
• Alpha indexed - Only store alpha value .
   These options can be selected in the image converter . To learn more about color formats , Please read the image section .

1.3.5 Recolor Recolor

   A color can be mixed into each pixel of the image at a given intensity . This is very useful to show different states ( Check , Inactive , Press down , etc. ) Image , Instead of storing more versions of the same image . This feature can be found in LV_OPA_TRANSP( No double color , value :0) and LV_OPA_COVER( Full color , value :255) Set between img_recolor_opa To enable . The default value is LV_OPA_TRANSP, So disable this feature .
   The color to be mixed is determined by img_recolor Set up .

1.3.6 Auto size Auto-size

   When the width or height of the image object is set to LV_SIZE_CONTENT when , The size of the object will be set according to the size of the image source in their respective directions .

1.3.7 Mosaic Mosaic

   If the size of the object is larger than the size of the image in any direction , Then the image will repeat like a mosaic . This is a very useful feature , You can create a large image from a very narrow source . for example , You can have a picture with a special gradient 300 x 5 Image , And use the mosaic properties to set it as wallpaper .

1.3.8 The offset Offset

   Use lv_img_set_offset_x(img, x_ofs) and lv_img_set_offset_y(img, y_ofs), You can add some offsets to the displayed image . If the target size is smaller than the image source size , This is useful . Use the offset parameter , You can use animation x or y Create a texture or offset atlas “ Run the image ” effect .

1.4 transformation Transformations

   Use lv_img_set_zoom(img, factor) Enlarge the image . take factor Set to 256 or LV_IMG_ZOOM_NONE To disable scaling . Larger values enlarge the image ( Such as 512 Multiple size ), Smaller values reduce the image ( Such as 128 Multiple size ). The fractional scale also applies . example 281, Zoom in 10%.256 or LV_ZOOM_IMG_NONE No scaling , Greater than 256 Zoom in , Less than 256 The zoom ,128 It's half the size ,512 Zoom in two times .
   Use lv_img_set_angle(img, angle) Rotated image . The angle is 0.1 Degree accuracy , therefore 45.8° Set to 458.transform_zoom and transform_angle Style attributes are also used to determine the final zoom and angle .
   By default , The pivot point of the rotation is the center of the image . have access to lv_img_set_pivot(img, pivot_x, pivot_y) To change it .0,0 It's the upper left corner .
   The quality of the conversion can be determined by lv_img_set_antialias(img, true/false) To adjust . After anti aliasing is enabled , The quality of conversion will be higher , But it will be slower .
   These transformations require the entire image to be available . therefore , Index image (LV_IMG_CF_INDEXED_…),alpha Images (LV_IMG_CF_ALPHA_…) Or images from files cannot be converted . let me put it another way , The conversion works only when the real color image is stored as C Array , Or if the custom image decoder returns the entire image .
   It should be noted that , During the transformation , The actual coordinates of the image object will not change .lv_obj_get_width/height/x/y() The original non scaled coordinates will be returned .

1.5 event Events

   The image object does not send any special messages . Special events .

1.6 Key Keys

   The object type does not handle any key.

Two 、IMG API

lv_obj_t * lv_img_create(lv_obj_t * parent);							// Create an image object 
void lv_img_set_src(lv_obj_t * obj, const void * src);					// Set the image data to be displayed on the object 
void lv_img_set_offset_x(lv_obj_t * obj, lv_coord_t x);					// Set the offset of the image source , In this way, the image will be displayed from the new origin .
void lv_img_set_offset_y(lv_obj_t * obj, lv_coord_t y);					// Set the offset of the image source .
void lv_img_set_angle(lv_obj_t * obj, int16_t angle);					// Set the rotation angle of the image .
void lv_img_set_pivot(lv_obj_t * obj, lv_coord_t x, lv_coord_t y);		// Set the rotation center of the image .
void lv_img_set_zoom(lv_obj_t * obj, uint16_t zoom);					// Set the zoom factor of the image .
void lv_img_set_antialias(lv_obj_t * obj, bool antialias);				// Enable / Disable antialiasing conversion ( rotate , The zoom ) Or not .
void lv_img_set_size_mode(lv_obj_t * obj, lv_img_size_mode_t mode);		// Set image object size mode .
const void * lv_img_get_src(lv_obj_t * obj);							// Get the source of the image 
lv_coord_t lv_img_get_offset_x(lv_obj_t * obj);							// Get the offset of the image object x attribute .
lv_coord_t lv_img_get_offset_y(lv_obj_t * obj);							// Get the offset of the image object y attribute .
uint16_t lv_img_get_angle(lv_obj_t * obj);								// Get the rotation angle of the image .
void lv_img_get_pivot(lv_obj_t * obj, lv_point_t * pivot);				// Get the axis of the image ( Center of rotation ).
uint16_t lv_img_get_zoom(lv_obj_t * obj);								// Get the scaling factor of the image .
bool lv_img_get_antialias(lv_obj_t * obj);								// Get conversion ( rotate , The zoom ) Anti aliasing or not 
lv_img_size_mode_t lv_img_get_size_mode(lv_obj_t * obj);				// Get the size mode of the image 

3、 ... and 、 Example

It is worth noting that all the pictures used here are stored in... In the form of array flash Medium , We need to convert the picture to the corresponding C Array , have access to LVGL Official online tool conversion ,LVGL Image online conversion tool

3.1 Realize the basic display of pictures and internal label pictures

/************************************************* *  The name of the function  : img_show_1 *  ginseng   Count  ：  nothing  *  The functionality  ：  Picture shows  *************************************************/
void img_show_1()
{
    
    LV_IMG_DECLARE(img_cogwheel_argb);              // Contains the image path 
    lv_obj_t * img1 = lv_img_create(lv_scr_act());  // Create a picture object 
    lv_img_set_src(img1, &img_cogwheel_argb);       // Set the image data to be displayed on the object 
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, -20);    // centered 
    lv_obj_set_size(img1, 200, 200);                // Set object size 

    lv_obj_t * img2 = lv_img_create(lv_scr_act());  // Create a picture object 
    lv_img_set_src(img2, LV_SYMBOL_OK "Accept");    // Set the image data to be displayed on the object 
    lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);// Set location 
}

3.2 Control the recolor of the picture through the slider bar And transparency

static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
static lv_obj_t * img1;
static void slider_event_cb(lv_event_t *e)                  // Slider callback function 
{
    
   LV_UNUSED(e);
   lv_color_t color = lv_color_make(lv_slider_get_value(red_slider),lv_slider_get_value(green_slider),lv_slider_get_value(blue_slider));// Set the color 
   lv_opa_t intense = lv_slider_get_value(intense_slider);  // Get the value of the slider 
   lv_obj_set_style_img_recolor_opa(img1,intense,0);        // Set the recolor transparency 
   lv_obj_set_style_img_recolor(img1,color,0);              // Set recolor 
}
/************************************************* *  The name of the function  : create_slider *  ginseng   Count  ： color  You need to create an object background color  *  The functionality  ：  establish slider *************************************************/
static lv_obj_t * create_slider(lv_color_t color)
{
    
   lv_obj_t * slider = lv_slider_create(lv_scr_act());      // Create a slider 
   lv_slider_set_range(slider,0,255);                       // Set the value 
   lv_obj_set_size(slider,10,200);                          // Set dimensions 
   lv_obj_set_style_bg_color(slider,color,LV_PART_KNOB);    // Set the style background color , The color of the sliding round head 
   lv_obj_set_style_bg_color(slider,lv_color_darken(color,LV_OPA_40),LV_PART_INDICATOR);// Set the style background color  
   lv_obj_add_event_cb(slider,slider_event_cb,LV_EVENT_VALUE_CHANGED,NULL);   // Add event callback function 
   return slider;
}
/************************************************* *  The name of the function  : img_show_2 *  ginseng   Count  ：  nothing  *  The functionality  ：  The slider changes the color of the picture  *************************************************/
void img_show_2()
{
    
   red_slider     = create_slider(lv_palette_main(LV_PALETTE_RED));  // establish slider
   green_slider   = create_slider(lv_palette_main(LV_PALETTE_GREEN));// establish slider
   blue_slider    = create_slider(lv_palette_main(LV_PALETTE_BLUE)); // establish slider
   intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY)); // establish slider

   lv_slider_set_value(red_slider,LV_OPA_20,LV_ANIM_OFF);            // Set the sliding value  
   lv_slider_set_value(green_slider,LV_OPA_20,LV_ANIM_OFF);          // Set the sliding value  
   lv_slider_set_value(blue_slider,LV_OPA_20,LV_ANIM_OFF);           // Set the sliding value  
   lv_slider_set_value(intense_slider,LV_OPA_20,LV_ANIM_OFF);        // Set the sliding value  

   lv_obj_align(red_slider,LV_ALIGN_LEFT_MID,20,0);                        // Set location 
   lv_obj_align_to(green_slider,red_slider,LV_ALIGN_OUT_RIGHT_MID,25,0);   // Set location 
   lv_obj_align_to(blue_slider,green_slider,LV_ALIGN_OUT_RIGHT_MID,25,0);  // Set location 
   lv_obj_align_to(intense_slider,blue_slider,LV_ALIGN_OUT_RIGHT_MID,25,0);// Set location 

   LV_IMG_DECLARE(img_cogwheel_argb);                                // Inclusion path 
   img1 = lv_img_create(lv_scr_act());                               // Create a picture object 
   lv_img_set_src(img1,&img_cogwheel_argb);                          // Set up picture resources 
   lv_obj_align_to(img1,intense_slider,LV_ALIGN_OUT_RIGHT_MID,2,0);  // Set location 

   lv_event_send(intense_slider,LV_EVENT_VALUE_CHANGED,NULL);        // Set send event 
}

3.3 Zoom and rotate the picture through animation

/************************************************* *  The name of the function  : angle_set *  ginseng   Count  ：  nothing  *  The functionality  ：  The angle callback displays  *************************************************/
static void angle_set(void * img,int32_t v)
{
    
   lv_img_set_angle(img,v);
}
/************************************************* *  The name of the function  : zoom_se *  ginseng   Count  ：  nothing  *  The functionality  ：  Zoom callback display  *************************************************/
static void zoom_set(void * img,int32_t v)
{
    
   lv_img_set_zoom(img,v);
}
/************************************************* *  The name of the function  : img_show_3 *  ginseng   Count  ：  nothing  *  The functionality  ：  Picture shows  *************************************************/
void img_show_3()
{
    
   LV_IMG_DECLARE(img_cogwheel_argb);                    // Contains the image path 
   lv_obj_t * img = lv_img_create(lv_scr_act());         // Create a picture object 
   lv_img_set_src(img,&img_cogwheel_argb);               // Set up picture resources 
   lv_obj_align(img,LV_ALIGN_CENTER,50,50);              // Location setting 
   lv_img_set_pivot(img,0,0);                            // Set the rotation center of the image .

   lv_anim_t a;                                          // Create animated objects 
   lv_anim_init(&a);                                     // Initialize animation 
   lv_anim_set_var(&a,img);                              // Associate animation and pictures 
   lv_anim_set_exec_cb(&a,angle_set);                    // Display callback settings 
   lv_anim_set_values(&a,0,3600);                        // Set the value 
   lv_anim_set_time(&a,1500);                            // Set the display time 
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); // Set the number of repetitions 
   lv_anim_start(&a);                                    // Start the animation 

   lv_anim_set_exec_cb(&a,zoom_set);                     // Display callback settings 
   lv_anim_set_values(&a,128,256);                       // Set the value 
   // lv_anim_set_time(&a,3000);
   lv_anim_set_playback_time(&a,3000);                   // Set playback time 
   lv_anim_start(&a);                                    // Start the animation 
}

3.4 Realize the animation display of pictures

/************************************************* *  The name of the function  : ofs_y_anim *  ginseng   Count  ：  nothing  *  The functionality  ： y Axis offset animation  *************************************************/
static void ofs_y_anim(void * img,int32_t v)
{
    
   lv_img_set_offset_y(img,v);
}
/************************************************* *  The name of the function  : img_show_4 *  ginseng   Count  ：  nothing  *  The functionality  ：  Picture shows  *************************************************/
void img_show_4()
{
    
   LV_IMG_DECLARE(img_skew_strip);                       // Inclusion path 

   static lv_style_t style;                              // Create styles 
   lv_style_init(&style);                                // Initialize style 
   lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_YELLOW));// Set the background color 
   lv_style_set_bg_opa(&style,LV_OPA_COVER);             // Set transparency 
   lv_style_set_img_recolor_opa(&style,LV_OPA_COVER);    // Set the recolor transparency 
   lv_style_set_img_recolor(&style,lv_color_black());    // Set picture recolor 

   lv_obj_t * img = lv_img_create(lv_scr_act());         // Create an image object 
   lv_obj_add_style(img,&style,0);                       // Add the style 
   lv_img_set_src(img,&img_skew_strip);                  // Set to load picture resources 
   lv_obj_set_size(img,150,100);                         // Set dimensions 
   lv_obj_center(img);                                   // centered 

   lv_anim_t a;                                          // Create animated objects 
   lv_anim_init(&a);                                     // Initialize animation 
   lv_anim_set_var(&a,img);                              // Bind the picture used by animation 
   lv_anim_set_exec_cb(&a,ofs_y_anim);                   // Display callback settings 
   lv_anim_set_values(&a,0,100);                         // Set the animation position value 
   lv_anim_set_time(&a,1500);                            // Set the start time 
   lv_anim_set_playback_time(&a,800);                    // Set the playback time 
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); // Set the number of repetitions 
   lv_anim_start(&a);                                    // Start the animation 
}