当前位置:网站首页>ESP32 LVGL8. 1 - arc (arc 19)

ESP32 LVGL8. 1 - arc (arc 19)

2022-04-23 18:37:00 Please call me Xiao Peng

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

One 、arc brief introduction

1.1 summary Overview

   In front of the style clock , We learned some style settings about arcs , Including setting the width of the arc 、 End shape 、 Color 、 Color filter 、 And transparency and background pictures , This is mainly about arc Some properties of arc object .
   The arc consists of a background arc and a foreground arc . front ( Indicator ) The arc can be adjusted by fingers .

1.2 Part and style Parts and Styles

1.LV_PART_MAIN Draw the background using typical background style properties , Draw an arc using the arc style properties . The size and position of the arc will follow the properties of the fill pattern .
2.LV_PART_INDICATOR Draw other arcs using the arc style properties . Its fill value is interpreted relative to the background arc .
3.LV_PART_KNOBIt Draw a handle at the end of the indicator . It uses all background attributes and fill values . The size of the zero fill knob is the same as the width of the indicator . A bigger fill makes it bigger , Smaller fill makes it smaller .

1.3 Use Usage

1.3.1 Values and angles Value and range

  lv_arc_set_value(arc, new_value) You can set a new value . This value is interpreted as a range ( Min and Max ), It can be used lv_arc_set_range(arc, min, max) modify . Default range is 1…100.
   Indicates that the arc is drawn on the arc of the main component . in other words , If the valve is set to maximum , Indicates that the arc will cover the entire “ background ” arc . Use
lv_arc_set_bg_angles(arc, start_angle, end_angle) Function or lv_arc_set_bg_start/end_angle(arc,
start_angle) To set the start and end angles of the background arc .
   Zero is in the middle right (3 O'clock direction ) The object and degree are increased clockwise . The angle should be [0;360] Within the scope of

1.3.2 rotate Rotation

   have access to lv_arc_set_rotation(arc, deg) Add to 0 The offset of the degree position .

1.3.3 Pattern Mode

   An arc can be one of the following ways :
LV_ARC_MODE_NORMAL Indicates that the arc is drawn from the minimum value to the current value .
LV_ARC_MODE_REVERSE Indicates that the arc is drawn counterclockwise from the maximum value to the current ..
LV_ARC_MODE_SYMMETRICAL Draws an indicating arc from the midpoint to the current value .
   This mode can be realized through lv_arc_set_mode(arc, LV_ARC_MODE_⋯) Set up , And only if the angle is determined by lv_arc_set_value() Use when setting or adjusting radian with finger .

1.3.4 Change rate Change rate

   If you press the arc , The current value will limit the speed according to the set rate of change . The rate of change is in degrees / Define in seconds , have access to
lv_arc_set_change_rage(arc, rate) Set up .

1.3.4 Set indicators manually Setting the indicator manually

   You can also use lv_arc_set_angles(arc, start_angle, end_angle) The function directly sets the angle of the indicated arc , perhaps
lv_arc_set_start/end_angle(arc, start_angle) Sets the angle of the indicated arc . under these circumstances , Set up “value” and “mode” Will be ignored .
   let me put it another way , The setting angle and value are independent . You should use values and angle settings . Mixing the two can lead to unexpected lines
by . To make the arc non adjustable , Remove the style of the knob , Make the object non clickable :

lv_obj_remove_style(arc, NULL, LV_PART_KNOB);			// Remove all styles 
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);			// Add flag bit 

1.4 event Events

  LV_EVENT_VALUE_CHANGED When pressed / Send when dragging an arc to set a new value .
  LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END Send background rectangle , Background arc , Foreground arc and knob , To allow drawing of hooks . More details about the background rectangle , see also Base Object's document .lv_obj_draw_dsc_t The fields of are set as follows :
   For these two arcs :clip_area, p1( Arc center ), radius ,arc_dsc, part.
   knob :clip_area., draw_area, rect_dsc, part.

1.5 Key Keys

  LV_KEY_RIGHT/UP Add value to 1.
  LV_KEY_LEFT/DOWN Reduce the value 1.

Two 、arc API

void lv_arc_set_start_angle(lv_obj_t * arc, uint16_t start);			// Set the starting angle of the arc .0 degree : Right ,90 Degree inferior .
void lv_arc_set_end_angle(lv_obj_t * arc, uint16_t end);				// Set the end angle of the arc .0 degree : Right ,90 Degree inferior .
void lv_arc_set_angles(lv_obj_t * arc, uint16_t start, uint16_t end);	// Set the start and end angles 
void lv_arc_set_bg_start_angle(lv_obj_t * arc, uint16_t start);			// Sets the starting angle of the arc background .0 degree : Right ,90 Degree inferior .
void lv_arc_set_bg_end_angle(lv_obj_t * arc, uint16_t end);				// Sets the starting angle of the arc background .0 degree : Right ,90 Degree inferior .
void lv_arc_set_bg_angles(lv_obj_t * arc, uint16_t start, uint16_t end);// Set the start angle and end angle of the arc background 
void lv_arc_set_rotation(lv_obj_t * arc, uint16_t rotation);			// Sets the rotation of the entire arc 
void lv_arc_set_mode(lv_obj_t * arc, lv_arc_mode_t type);				// Set the arc type .
void lv_arc_set_value(lv_obj_t * arc, int16_t value);					// Set a new value on the arc 
void lv_arc_set_range(lv_obj_t * arc, int16_t min, int16_t max);		// Set the maximum and minimum values of the arc 
void lv_arc_set_change_rate(lv_obj_t * arc, uint16_t rate);				// Set a rate of change to limit the speed at which the arc reaches the reduction point .
uint16_t lv_arc_get_angle_start(lv_obj_t * obj);						// Get the starting angle of the arc .
uint16_t lv_arc_get_angle_end(lv_obj_t * obj);							// Get the end angle of the arc .
uint16_t lv_arc_get_bg_angle_start(lv_obj_t * obj);						// Get the starting angle of the arc background .
uint16_t lv_arc_get_bg_angle_end(lv_obj_t * obj);						// Get the end angle of the arc background .
int16_t lv_arc_get_value(const lv_obj_t * obj);							// Get the value of the arc 
int16_t lv_arc_get_min_value(const lv_obj_t * obj);						// Get the minimum value of the arc 
int16_t lv_arc_get_max_value(const lv_obj_t * obj);						// Get the maximum value of the arc 
lv_arc_mode_t lv_arc_get_mode(const lv_obj_t * obj);					// Gets whether the arc is type type .

3、 ... and 、 Example

3.1 Realize the basic display

/************************************************* *  The name of the function  : arc_show_1 *  ginseng   Count  :  nothing  *  The functionality  :  Example 1 of circular arc   The default initial angle value is 100 *************************************************/
void arc_show_1()
{
    
   lv_obj_t * arc = lv_arc_create(lv_scr_act());   // Create an arc object 
   lv_obj_set_size(arc,150,150);                   // Set dimensions 
   lv_arc_set_rotation(arc,180);                   // Set the zero position 
   lv_arc_set_bg_angles(arc,0,180);                // Set the angle 
   lv_arc_set_value(arc,40);                       // Set initial value 
   lv_obj_center(arc);                             // centered 
}

 Insert picture description here

3.2 Example to achieve animation display

static void set_angle(void * obj,int32_t v)
{
    
   lv_arc_set_value(obj,v);
}
/************************************************* *  The name of the function  : arc_show_2 *  ginseng   Count  :  nothing  *  The functionality  :  Example 2 of circular arc  *************************************************/
void arc_show_2()
{
    
   lv_obj_t * arc = lv_arc_create(lv_scr_act());// Create an arc object 
   lv_arc_set_rotation(arc,0);                  // Set the zero position 
   lv_arc_set_bg_angles(arc,0,360);             // Set the angle 
   lv_arc_set_range(arc,0,360);
   lv_arc_set_change_rate(arc,1);

   lv_obj_remove_style(arc,NULL,LV_PART_KNOB);  // Remove the style 
   lv_obj_clear_flag(arc,LV_OBJ_FLAG_CLICKABLE);// Clear flag bits 
   lv_obj_center(arc);                          // centered 

   lv_anim_t a;                                 // Create animated objects 
   lv_anim_init(&a);                            // Initialize object 
   lv_anim_set_var(&a,arc);                     // Bind animated objects 
   lv_anim_set_exec_cb(&a,set_angle);           // Set callback 
   lv_anim_set_time(&a,10000);                  // Setup time 
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); // Duplicate settings 
   lv_anim_set_repeat_delay(&a,500);            // Set repetition delay 
   lv_anim_set_values(&a,0,360);                // Sets the start and end values of the animation 
   lv_anim_start(&a);                           // Start the animation  
}

 Please add a picture description

版权声明
本文为[Please call me Xiao Peng]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204210609450375.html