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

One 、bar brief introduction

1.1 summary Overview

   The progress bar object has a background and an indicator . The width of the indicator is set according to the current value of the bar chart . If the width of an object is less than its height , You can create a vertical bar . You can not only set the end value , You can also set the start value , This changes the start position of the indicator .

1.2 Part and style Parts and Styles

  LV_PART_MAIN The background bar and it use typical background style properties . Adding padding can make the indicator smaller or larger . If you use LV_ANIM_ON Set the value ,anim_time Property sets the animation time LV_PART_INDICATOR It also uses all the typical background properties .

1.3 Use Usage

1.3 Values and ranges Value and range

   Can pass lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF) Set a new value . This value is interpreted as a range ( Min and Max ), It can be used lv_bar_set_range(bar, min, max) Modify this range . Default range is 1…100.lv_bar_set_value() The new value in the function can be animated or not , It depends on the last parameter (LV_ANIM_ON/OFF).

1.3 Pattern Modes

  bar It can be one of the following two modes :
LV_BAR_MODE_NORMAL The normal bar as described above
LV_BAR_SYMMETRICAL Draw the indicator from zero to the current value . The minimum negative range and the maximum positive range are required .
LV_BAR_RANGE Allowed to pass through lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF) Set the start value . The start value must always be less than the end value .

1.4 event Events

  LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END Send main and indicating components , So that the drawing of the hook . More about the main parts . details , see also Base Object's document . The indicator uses the following fields :clip_area, draw_area, rect_dsc, part.

1.5 Key Keys

The object type does not handle any key.

Two 、Bar API

lv_obj_t * lv_bar_create(lv_obj_t * parent);								// Create a bar object 
void lv_bar_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim);// Set a new value on the bar 
void lv_bar_set_start_value(lv_obj_t * obj, int32_t start_value, lv_anim_enable_t anim);// Set a new starting value on the toolbar 
void lv_bar_set_range(lv_obj_t * obj, int32_t min, int32_t max);			// Set up a bar The minimum and maximum of 
void lv_bar_set_mode(lv_obj_t * obj, lv_bar_mode_t mode);					// Set the type of column .
int32_t lv_bar_get_value(const lv_obj_t * obj);								// Get one bar Value 
int32_t lv_bar_get_start_value(const lv_obj_t * obj);						// Get the starting value of a bar 
int32_t lv_bar_get_min_value(const lv_obj_t * obj);							// Get the minimum value of a bar chart 
int32_t lv_bar_get_max_value(const lv_obj_t * obj);							// Get one bar The maximum of 
lv_bar_mode_t lv_bar_get_mode(lv_obj_t * obj);								// obtain bar The type of .

3、 ... and 、 Example

3.1Bar Basic display

/************************************************* *  The name of the function  : bar_show_1 *  ginseng   Count  ：  nothing  *  The functionality  ：  Progress bar  *************************************************/
void bar_show_1()
{
    
   lv_obj_t * bar1 = lv_bar_create(lv_scr_act());  // establish bar object 
   lv_obj_set_size(bar1,200,20);                   // Set dimensions 
   lv_obj_center(bar1);                            // Center object 
   lv_bar_set_value(bar1,70,LV_ANIM_OFF);          // Set up bar value 
}

3.2 Realize the loading process of progress bar

/************************************************* *  The name of the function  : bar_show_2 *  ginseng   Count  ：  nothing  *  The functionality  ：  Progress bar  *************************************************/
void bar_show_2()
{
    
   static lv_style_t style_bg;            // establish bar Background style 
   static lv_style_t style_indic;         // establish bar Indicator style 

   lv_style_init(&style_bg);              // Initialize style 
   lv_style_set_border_color(&style_bg,lv_palette_main(LV_PALETTE_BLUE));// Set the edge color 
   lv_style_set_border_width(&style_bg,2);// Set border width 
   lv_style_set_pad_all(&style_bg,6);     // Set the inside margin 
   lv_style_set_radius(&style_bg,6);      // Setting fillet 
   lv_style_set_anim_time(&style_bg,1000);// Set animation time 

   lv_style_init(&style_indic);           // Initialize style 
   lv_style_set_bg_opa(&style_indic,LV_OPA_COVER);// Set the transparency of the style background 
   lv_style_set_bg_color(&style_indic,lv_palette_main(LV_PALETTE_BLUE));// Set the background color 
   lv_style_set_radius(&style_indic,3);   // Setting fillet 

   lv_obj_t * bar = lv_bar_create(lv_scr_act());// establish bar Background style 
   lv_obj_remove_style_all(bar);          // Remove the style 
   lv_obj_add_style(bar,&style_bg,0);     // Create and add style 
   lv_obj_add_style(bar,&style_indic,LV_PART_INDICATOR);// Add the style 

   lv_obj_set_size(bar,200,20);           // Set style dimensions 
   lv_obj_center(bar);                    // centered 
   lv_bar_set_value(bar,100,LV_ANIM_ON);  // Set initial value 
}

3.3 Realize gradient loading

/************************************************* *  The name of the function  : set_temp *  ginseng   Count  ：  nothing  *  The functionality  ：  Set the temperature  *************************************************/
static void set_temp(void * bar,int32_t temp)
{
    
   lv_bar_set_value(bar,temp,LV_ANIM_ON);
}
/************************************************* *  The name of the function  : bar_show_3 *  ginseng   Count  ：  nothing  *  The functionality  ：  Progress bar  *************************************************/
void bar_show_3()
{
    
   static lv_style_t style_indic;                  // establish bar Background style 
   lv_style_init(&style_indic);                    // Initialize style 
   lv_style_set_bg_opa(&style_indic,LV_OPA_COVER); // Set background transparency 
   lv_style_set_bg_color(&style_indic,lv_palette_main(LV_PALETTE_RED));       // Set the background color 
   lv_style_set_bg_grad_color(&style_indic,lv_palette_main(LV_PALETTE_BLUE)); // Set the bottom half background color 
   lv_style_set_bg_grad_dir(&style_indic,LV_GRAD_DIR_VER);  // Set the background direction of the lower half 

   lv_obj_t * bar = lv_bar_create(lv_scr_act());   // Set up bar object 
   lv_obj_add_style(bar,&style_indic,LV_PART_INDICATOR);    // Add the style 
   lv_obj_set_size(bar,20,200);                    // Set dimensions 
   lv_obj_center(bar);                             // Center style 
   lv_bar_set_range(bar,-20,40);                   // Set the angle 

   lv_anim_t a;                                    // Animate 
   lv_anim_init(&a);                               // Initialize animation 
   lv_anim_set_exec_cb(&a,set_temp);               // Set callback 
   lv_anim_set_time(&a,3000);                      // Setup time 
   lv_anim_set_playback_time(&a,3000);             // Set fallback time 
   lv_anim_set_var(&a,bar);                        // Animate objects 
   lv_anim_set_values(&a,-20,40);                  // Set animation values 
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); // Animate and repeat 
   lv_anim_start(&a);                              // Start the animation 
}

3.4 Achieve custom background progress bar display

/************************************************* *  The name of the function  : bar_show_4 *  ginseng   Count  ：  nothing  *  The functionality  ：  Progress bar  *************************************************/
void bar_show_4()
{
    
   LV_IMG_DECLARE(img_skew_strip);              // Include header file 
   static lv_style_t style_indic;               // Set the style 
   lv_style_init(&style_indic);                 // Initialize style 
   lv_style_set_bg_img_src(&style_indic,&img_skew_strip);// Set background picture resources 
   lv_style_set_bg_img_tiled(&style_indic,true);// Set whether the picture background is tiled 
   lv_style_set_img_opa(&style_indic,LV_OPA_30);// Set image transparency 

   lv_obj_t * bar =lv_bar_create(lv_scr_act()); // establish Bar object 
   lv_obj_add_style(bar,&style_indic,LV_PART_INDICATOR);// Add the style 

   lv_obj_set_size(bar,260,20);                 // Set dimensions 
   lv_obj_center(bar);                          // centered 
   lv_bar_set_mode(bar,LV_BAR_MODE_RANGE);      // Set the mode 
   lv_bar_set_value(bar,90,LV_ANIM_OFF);        // Set up bar Value 
   lv_bar_set_start_value(bar,20,LV_ANIM_OFF);  // Set up bar The starting value of 
}

3.5 Example progress bar direction change display

/************************************************* *  The name of the function  : bar_show_5 *  ginseng   Count  ：  nothing  *  The functionality  ：  The display loading direction is different  *************************************************/
void bar_show_5()
{
    
   lv_obj_t * label;                                        // Create a label 
   lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());        // establish bar object 
   lv_obj_set_size(bar_ltr,200,20);                         // Set dimensions 
   lv_bar_set_value(bar_ltr,70,LV_ANIM_OFF);                // Set initial value 
   lv_obj_align(bar_ltr,LV_ALIGN_CENTER,0,-30);             // Set location 

   label = lv_label_create(lv_scr_act());                   // establish bar object 
   lv_label_set_text(label,"Left to Right base direction"); // Set contents 
   lv_obj_align_to(label,bar_ltr,LV_ALIGN_OUT_TOP_MID,0,-5);// Set location 

   lv_obj_t * bar_rtl = lv_bar_create(lv_scr_act());        // establish bar object 
   lv_obj_set_style_base_dir(bar_rtl,LV_BASE_DIR_RTL,0);    // Set the direction of the base class 
   lv_obj_set_size(bar_rtl,200,20);                         // Set dimensions 
   lv_bar_set_value(bar_rtl,70,LV_ANIM_OFF);                // Set initial value 
   lv_obj_align(bar_rtl,LV_ALIGN_CENTER,0,30);              // Set location 

   label = lv_label_create(lv_scr_act());                   // Create a label 
   lv_label_set_text(label,"Right to Left base direction"); // Set contents 
   lv_obj_align_to(label,bar_rtl,LV_ALIGN_OUT_TOP_MID,0,-5);// Set location 
}

3.6 Realization bar Loading animation label Follow display

function API explain

／**
* Get text size 
*@param size_res The pointer points to a 'point_t' Variable , Used to store results 
* @param The text pointer points to a text 
* @param The text font of the font pointer 
* @param letter_space The letter space of the text 
* @param txt. Line space of text 
* @param flags Set up ::lv_text_flag_t The text of 
* @param max_width max with the text (break the lines to fit this size) Set up CORD_MAX avoid 
* A newline 
*／
Void lv_txt_get_size(lv_point_t * size_res, const char * text, const lv_font_t * font, lv_coord_t letter_space, lv_coord_t line_space, lv_coord_t max_width, lv_text_flag_t flag);

／**
*  Write a text 
* @param Labels for coordinates 
* @param The mask label will only be drawn in this area 
* @param DSC Pointer drawing descriptor 
* @param TXT ' \0 ' Stop writing text 
* @param Point to variable ' lv_draw_label_hint_t ' Prompt pointer .
* It speeds up very long text by drawing ( Thousands of lines ) The draw .
*／
LV_ATTRIBUTE_FAST_MEM void lv_draw_label(const lv_area_t * cods, const lv_area_t * mask,Const lv_draw_label_dsc_t * dsc,Const char * txt,lv_draw_label_hint_t *hint);

course Code

/************************************************* *  The name of the function  : bar_set_value *  ginseng   Count  ：  nothing  *  The functionality  ：  The callback implements the display value  *************************************************/
static void bar_set_value(void * bar,int32_t v)
{
    
   lv_bar_set_value(bar,v,LV_ANIM_OFF);
}
/************************************************* *  The name of the function  : bar_event_cb *  ginseng   Count  ：  nothing  *  The functionality  ：  Callback processing value  *************************************************/
static void bar_event_cb(lv_event_t * e)
{
    
   lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e); // Get callback parameters 
   if(dsc->part != LV_PART_INDICATOR)  return;

   lv_obj_t * obj = lv_event_get_target(e);              // Get the callback object 

   lv_draw_label_dsc_t label_dsc;                        // Create drawing descriptor 
   lv_draw_label_dsc_init(&label_dsc);                   // Initialize draw descriptor 
   label_dsc.font = LV_FONT_DEFAULT;                     // Set the drawing descriptor font 

   char buf[8];                                          // Define a receive variable 
   lv_snprintf(buf,sizeof(buf),"%d",(int)lv_bar_get_value(obj));  // What will be obtained bar Print the value of to buf in 
   lv_point_t txt_size;                                  // Set point variable 
   // Get text size 
   lv_txt_get_size(&txt_size,buf,label_dsc.font,label_dsc.letter_space,label_dsc.line_space,LV_COORD_MAX,label_dsc.flag);

   lv_area_t txt_area;                                   // Represents an area of the screen   With two coordinate values, you can display the specific location and size of a content 
   if(lv_area_get_width(dsc->draw_area) > txt_size.x + 20){
     // When getting bar The value of the progress bar is greater than the width of the displayed number  + 20
      txt_area.x2 = dsc->draw_area->x2 - 5;              // Set up x2 The location of , It's to be in bar Inside   Get the value at the rightmost end of the progress bar minus 5
      txt_area.x1 = txt_area.x2 - txt_size.x + 1;        // More x2 The value of minus   Get the width value of the font  
      label_dsc.color = lv_color_white();                // Set display font 
   }else{
                                                    // stay bar External display 
      txt_area.x1 = dsc->draw_area->x2 + 5;              // The leftmost position of the display is directly displayed at the rightmost end of the progress bar  + 5  Location  
      txt_area.x2 = txt_area.x1 + txt_size.x - 1;        // Displays the position of the rightmost end of the font 
      label_dsc.color = lv_color_black();                // Set font color 
   }
   txt_area.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - txt_size.y) / 2; // Set the font y1  The location of 
   txt_area.y2 = txt_area.y1 + txt_size.y -1;            // Set the font y2 The location of 
   lv_draw_label(&txt_area,dsc->clip_area,&label_dsc,buf,NULL);   // Redraw the display 
}
/************************************************* *  The name of the function  : bar_show_6 *  ginseng   Count  ：  nothing  *  The functionality  ： bar Show  *************************************************/
void bar_show_6()
{
    
   lv_obj_t * bar = lv_bar_create(lv_scr_act());         // establish bar object 
   lv_obj_add_event_cb(bar,bar_event_cb,LV_EVENT_DRAW_PART_END,NULL);// Add callback event 
   lv_obj_set_size(bar,200,20);                          // Set dimensions 
   lv_obj_center(bar);                                   // centered 

   lv_anim_t a;                                          // Create animated objects 
   lv_anim_init(&a);                                     // Initialize animation 
   lv_anim_set_var(&a,bar);                              // Animate objects 
   lv_anim_set_values(&a,0,100);                         // Set animation values 
   lv_anim_set_exec_cb(&a,bar_set_value);                // Set callback 
   lv_anim_set_time(&a,2000);                            // Setup time 
   lv_anim_set_playback_time(&a,2000);                   // Set playback time 
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); // Set the count 
   lv_anim_start(&a);                                    // Start the animation 
}