1. The concept of LVGL GUI ring loader control

The object is an arc of revolution on the boundary

2. LVGL GUI ring loader widgets and styles

Spinners use the following parts:

LV_SPINNER_PART_BG : main part
LV_SPINNER_PART_INDIC : Rotation arc (virtual part)

Widgets and styles work the same as Arc. Read its documentation for detailed instructions.

3. The use of LVGL GUI ring loader control

1. Arc length

Use this function to set the rotation arc lv_spinner_set_arc_length(spinner, deg), which is the arc of the rotating bar, write a code to verify it

void lvgl_spinner_arc_length_test(void)
{
    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, 0, -100);
    
    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 100);
    lv_spinner_set_arc_length(preload2,270);
}

2. Spinning speed

Use this function to set the rotation speed lv_spinner_set_spin_time(preload, time_ms), the second parameter is to set xx milliseconds to rotate once, write a function to verify

I write a program to verify, write a 5ms turn around, make you dazzled! Hey, GIFs have dropped frames, so you can't spend it yet


void lvgl_spinner_spin_speed_test(void)
{
    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, 0, -100);

    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 100);
    lv_spinner_set_spin_time(preload2, 50);
}

3. Spin types

You can choose from more rotation types:

LV_SPINNER_TYPE_SPINNING_ARC Spin arc, slow down at the top
LV_SPINNER_TYPE_FILLSPIN_ARC rotates the arc, slows down at the top, but also stretches the arc
LV_SPINNER_TYPE_CONSTANT_ARC rotates the arc at constant speed

Use this function to set lv_spinner_set_type(preload, LV_SPINNER_TYPE_...)

engage in a program, arrange

void lvgl_spinner_spin_type_test(void)
{
    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, -100, 0);
    lv_spinner_set_type(preload1, LV_SPINNER_TYPE_SPINNING_ARC);

    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_spinner_set_type(preload2, LV_SPINNER_TYPE_FILLSPIN_ARC);

    /*Create a Preloader object*/
    lv_obj_t* preload3 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload3, 100, 100);
    lv_obj_align(preload3, NULL, LV_ALIGN_CENTER, 100, 0);
    lv_spinner_set_type(preload3, LV_SPINNER_TYPE_CONSTANT_ARC);
}

4. Spin direction

Use this function lv_spinner_set_dir(preload, LV_SPINNER_DIR_FORWARD/BACKWARD) to set the rotation direction

void lvgl_spinner_spin_dir_test(void)
{
    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, -100, 0);
    lv_spinner_set_dir(preload1, LV_SPINNER_DIR_FORWARD);

    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_spinner_set_dir(preload2, LV_SPINNER_DIR_BACKWARD);
}

Okay, it's over, continue to poke more exciting ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Introduction of Embedded GUI LVGL "Spinner Ring Loader Control"