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

One 、slider brief introduction

1.1 summary Overview

  Slider The object looks like a toolbar with a knob . You can drag the knob to set a value . The slider can also be vertical or horizontal . Slide bar, we introduced img Control has a history of using , Where we talk about setting the style to realize the setting of some styles of the slider .

1.2 Part and style Parts and Styles

• LV_PART_MAIN The background of the slider , It uses all the typical background style attributes . Filling makes the indicator smaller in the corresponding direction .
• LV_PART_INDICATOR The indicator shows the current state of the slider . All typical background style attributes are also used .
• LV_PART_KNOB Rectangle drawn at current value ( Or circle ). It also uses all typical background attributes to describe the knob . By default , The knob is square ( Optional radius ), The side length is equal to the smaller side of the slider . The knob can be made larger with recharge . The fill value can also be asymmetric .

1.3 Use Usage

1.3.1 Values and ranges Value and range

   Use lv_slider_set_value(slider, new_value, LV_ANIM_ON/OFF) Set initial value . The animation time is determined by the style of anim_time Property settings .
   To specify a range ( minimum value , Maximum ), have access to lv_slider_set_range(slider, min, max).

1.3.2 Pattern Modes

   The slider can be one of the following ways :
• LV_SLIDER_MODE_NORMAL Normal slider as described above
• LV_SLIDER_SYMMETRICAL Draw the indicator from zero to the current value . The minimum negative range and the maximum positive range are required .
• LV_SLIDER_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 .
   The mode can be through lv_slider_set_mode(slider, LV_SLIDER_MODE_…)

1.3.2 knob Pattern Knob-only mode

   Usually , You can adjust the slider by dragging the knob or clicking the slider . In the latter case , Move the knob to the point you clicked , slide
The value of the block changes accordingly . In some cases , It's best to set the slider to react only when you drag the knob . This feature is achieved by adding LV_OBJ_FLAG_ADV_HITTEST To enable :lv_obj_add_flag(slider,LV_OBJ_FLAG_ADV_HITTEST).

1.4 event Events

• LV_EVENT_VALUE_CHANGED Use the slider key to change when dragging . When the slider is dragged , Events are sent continuously ,
And only when it is released . To send . Use lv_slider_is_dragged To decide whether you are dragging or just releasing slider.

1.5 Key Keys

• LV_KEY_UP/RIGHT Increase the value of the slider 1
• LV_KEY_DOWN/LEFT The value of the slider decreases 1

Two 、Slider API

lv_obj_t * lv_slider_create(lv_obj_t * parent);												// Create a slider object 
static inline void lv_slider_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim)// Set a new value on the slider 
static inline void lv_slider_set_left_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim)// The left knob of the slider sets a new value 
static inline void lv_slider_set_range(lv_obj_t * obj, int32_t min, int32_t max)			// Set up a bar The minimum and maximum of 
static inline void lv_slider_set_mode(lv_obj_t * obj, lv_slider_mode_t mode)				// Sets the mode of the slider .
static inline int32_t lv_slider_get_value(const lv_obj_t * obj)								// Get the value of the main knob of the slider 
static inline int32_t lv_slider_get_left_value(const lv_obj_t * obj)						// Get the value of the left knob of the slider 
static inline int32_t lv_slider_get_min_value(const lv_obj_t * obj)							// Get the minimum value of the slider 
static inline int32_t lv_slider_get_max_value(const lv_obj_t * obj)							// Get the maximum value of the slider 
static inline lv_slider_mode_t lv_slider_get_mode(lv_obj_t * slider)						// Give the slider to be dragged or not 

3、 ... and 、 Example

3.1Slider Basic display with callback

lv_obj_t * slider_label;
/************************************************* *  The name of the function  : slider_show_event_cb *  ginseng   Count  ：  nothing  *  The functionality  ：  Event callback  *************************************************/
static void slider_show_event_cb(lv_event_t * e)
{
    
   lv_obj_t * slider = lv_event_get_target(e);
   char buf[8];
   lv_snprintf(buf,sizeof(buf),"%d%d",(int)lv_slider_get_value(slider));
   lv_label_set_text(slider_label,buf);
   lv_obj_align_to(slider_label,slider,LV_ALIGN_OUT_BOTTOM_MID,0,10);
}
/************************************************* *  The name of the function  : slider_show_1 *  ginseng   Count  ：  nothing  *  The functionality  ： slider Show  *************************************************/
void slider_show_1()
{
    
   lv_obj_t * slider = lv_slider_create(lv_scr_act());   // Create slider object 
   lv_obj_center(slider);                                // centered 
   lv_obj_add_event_cb(slider,slider_show_event_cb,LV_EVENT_VALUE_CHANGED,NULL); // Display callback settings 
   lv_slider_set_value(slider,50,LV_ANIM_OFF);
   slider_label = lv_label_create(lv_scr_act());         // establish Label
   lv_label_set_text(slider_label,"0%");                 // Set up label Content 

   lv_obj_align_to(slider_label,slider,LV_ALIGN_OUT_BOTTOM_MID,0,10); // Set location 
}

3.2 Slider Style settings and their animation when pressed

/************************************************* *  The name of the function  : slider_show_2 *  ginseng   Count  ：  nothing  *  The functionality  ： slider Show  *************************************************/
void slider_show_2()
{
    
   static const lv_style_prop_t props[] = {
    LV_STYLE_BG_COLOR,0};  // Parameter setting 
   static lv_style_transition_dsc_t transition_dsc;               // Set the conversion variable 
   lv_style_transition_dsc_init(&transition_dsc,props,lv_anim_path_linear,300,0,NULL); // Initialize conversion 

   static lv_style_t style_main;                                  // Create styles 
   static lv_style_t style_indicator;                             // Create styles 
   static lv_style_t style_knob;                                  // Create styles 
   static lv_style_t style_pressed_color;                         // Create styles 
   lv_style_init(&style_main);                                    // Initialize style 
   lv_style_set_bg_opa(&style_main,LV_OPA_COVER);                 // Set background transparency 
   lv_style_set_bg_color(&style_main,lv_color_hex3(0xbb));        // Set the background color 
   lv_style_set_radius(&style_main,LV_RADIUS_CIRCLE);             // Setting fillet 
   lv_style_set_pad_ver(&style_main,-2);                          // Set the top and bottom margins 

   lv_style_init(&style_indicator);                               // Initialize style 
   lv_style_set_bg_opa(&style_indicator,LV_OPA_COVER);            // Set background transparency 
   lv_style_set_bg_color(&style_indicator,lv_palette_main(LV_PALETTE_CYAN));// Set the background color 
   lv_style_set_radius(&style_indicator,LV_RADIUS_CIRCLE);        // Setting fillet 
   lv_style_set_transition(&style_indicator,&transition_dsc);     // Set conversion 

   lv_style_init(&style_knob);                                    // Initialize style 
   lv_style_set_bg_opa(&style_knob,LV_OPA_COVER);                 // Set background transparency 
   lv_style_set_bg_color(&style_knob,lv_palette_main(LV_PALETTE_CYAN));// Set the background color 
   lv_style_set_border_color(&style_knob,lv_palette_darken(LV_PALETTE_CYAN,3));// Set the border background color 
   lv_style_set_border_width(&style_knob,2);                      // Set border width 
   lv_style_set_radius(&style_knob,LV_RADIUS_CIRCLE);             // Setting fillet 
   lv_style_set_pad_all(&style_knob,6);                           // Set margins 
   lv_style_set_transition(&style_knob,&transition_dsc);          // Set conversion 

   lv_style_init(&style_pressed_color);                           // Initialize style 
   lv_style_set_bg_color(&style_pressed_color,lv_palette_darken(LV_PALETTE_CYAN,2));// Set the background color 

   lv_obj_t * slider = lv_slider_create(lv_scr_act());            // Create slider 
   lv_obj_remove_style_all(slider);                               // Remove all styles 

   lv_obj_add_style(slider,&style_main,LV_PART_MAIN);             // Add the style 
   lv_obj_add_style(slider,&style_indicator,LV_PART_INDICATOR);   // Add the style   Indicator 
   lv_obj_add_style(slider,&style_pressed_color,LV_PART_INDICATOR | LV_STATE_PRESSED); // Add the style   Indicator   Press state 
   lv_obj_add_style(slider,&style_knob,LV_PART_KNOB);             // Add the style   Round head 
   lv_obj_add_style(slider,&style_pressed_color,LV_PART_KNOB | LV_STATE_PRESSED);      // Add the style   Round head   Press state 

   lv_obj_center(slider);                                         // centered 
}

3.3 Slider Mode setting display

/************************************************* *  The name of the function  : slider_show_3_event_cb *  ginseng   Count  ：  nothing  *  The functionality  ：  Slide callback display  *************************************************/
static void slider_show_3_event_cb(lv_event_t * e)
{
    
   lv_event_code_t code = lv_event_get_code(e);                   // Get events code
   lv_obj_t * obj = lv_event_get_target(e);                       // Get event object 

   if(code == LV_EVENT_REFR_EXT_DRAW_SIZE){
                           // Get the extra drawing area needed around the object ( For example, shadow )
      lv_coord_t * size = lv_event_get_param(e);                  // Get the parameters passed 
      * size = LV_MAX(*size,50);                                  // Compare the two numbers who is the biggest 
   }else if(code == LV_EVENT_DRAW_PART_END){
                          // Complete the main drawing phase 
      lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);       // Get the parameters passed 
      if(dsc->part == LV_PART_INDICATOR){
                             
         char buf[16];                                            // Define an array 
         // Print array 
         lv_snprintf(buf,sizeof(buf),"%d = %d",(int)lv_slider_get_left_value(obj),lv_slider_get_value(obj));

         lv_point_t label_size;                                   // Set point variable 
         lv_txt_get_size(&label_size,buf,LV_FONT_DEFAULT,0,0,LV_COORD_MAX,0);// Get text size 
         lv_area_t label_area;                                    // Represents an area of the screen   With two coordinate values, you can display the specific location and size of a content 
         label_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - label_size.x / 2;  // Calculation x1 Coordinates of   Displays the left coordinate  + slider The middle position of the control  -  Text size x Shaft half 
         label_area.x2 = label_area.x1 + label_size.x;            // Calculation x2 Coordinates of  x1 +  Text size 
         label_area.y2 = dsc->draw_area->y1 - 10;                 // Textual y1 Move the position down 10
         label_area.y1 = label_area.y2 - label_size.y;            //y2 The coordinates of plus the height of the text 

         lv_draw_label_dsc_t label_draw_dsc;                      // Create drawing descriptor 
         lv_draw_label_dsc_init(&label_draw_dsc);                 // Initialize draw descriptor 
         lv_draw_label(&label_area,dsc->clip_area,&label_draw_dsc,buf,NULL);  // Redraw the display 
      }
   }
}
/************************************************* *  The name of the function  : slider_show_3 *  ginseng   Count  ：  nothing  *  The functionality  ： slider Show  *************************************************/
void slider_show_3()
{
    
   lv_obj_t * slider;                                 // Create a sliding object 
   slider = lv_slider_create(lv_scr_act());           // Initialize the sliding object 
   lv_obj_center(slider);                             // centered 

   lv_slider_set_mode(slider,LV_SLIDER_MODE_RANGE);   // Set the mode 
   lv_slider_set_value(slider,70,LV_ANIM_OFF);        // Set initialization value 
   lv_slider_set_left_value(slider,20,LV_ANIM_OFF);   // Set the left value 

   lv_obj_add_event_cb(slider,slider_show_3_event_cb,LV_EVENT_ALL,NULL); // Set callback 
   lv_obj_refresh_ext_draw_size(slider);              // Call the original event handler to refresh the value of the extended drawing size .
}