1. The concept of LVGL GUI spinner control

Spinbox contains a numeric text that can be incremented or decremented by keystrokes or API functions. Below the Spinbox is the modified Text area.

2. LVGL GUI spinner widgets and styles

The main part of Spinbox is called LV_SPINBOX_PART_BG with a rectangular background using all typical background style properties. It also describes the label's style using its text-style property.
LV_SPINBOX_PART_CURSOR is the virtual part that describes the cursor.

3. Use of LVGL GUI spinner controls

1. Set format

Use this function to set the format of the spinner, lv_spinbox_set_digit_format(spinbox, digit_count, separator_position), where the second parameter digit_count is the number of digits in the whole number, and separator_position is the number of digits before the decimal point, which is the number of integer digits

Use this function to set lv_spinbox_set_padding_left(spinbox, cnt) left padding between symbols (+/-) to numbers

Let's write a program to create 4 spinners, the first is the default, the second is to set the total number of numbers to 5, the integer is 2, the third is to set the total number to 6, and the integer is 4 , the fourth is the default, but the space between the symbol and the number is 10

void lvgl_spinbox_set_format_test(void)
{
    lv_obj_t* spinbox1 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_obj_align(spinbox1, NULL, LV_ALIGN_CENTER, 0, -100);

    lv_obj_t* spinbox2 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_digit_format(spinbox2, 5, 2);
    lv_obj_align(spinbox2, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_obj_t* spinbox3 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_digit_format(spinbox3, 6, 4);
    lv_obj_align(spinbox3, NULL, LV_ALIGN_CENTER, 0, 100);

    lv_obj_t* spinbox4 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_obj_align(spinbox4, NULL, LV_ALIGN_CENTER, 0, 200);
    lv_spinbox_set_padding_left(spinbox4, 10);
}

2. Value and ranges

Use this function to set the range of the spinner lv_spinbox_set_range(spinbox, min, max)

Use this function to set the value of the spinner lv_spinbox_set_value(spinbox, num)

Use these two functions lv_spinbox_increment(spinbox)/lv_spinbox_decrement(spinbox) to increase/decrease the value of the spinner

Use this function to set the spinner's increment

For example, let's write one with Event

3. Events

In addition to general events, there are the following special events

LV_EVENT_VALUE_CHANGED sent when the value has changed. (the value is set as event data as int32_t)
LV_EVENT_INSERT sent by the ancestor Text area but shouldn't be used.

static void lv_spinbox_increment_event_cb(lv_obj_t* btn, lv_event_t e)
{
    if (e == LV_EVENT_SHORT_CLICKED || e == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_increment(spinbox);
    }
}

static void lv_spinbox_decrement_event_cb(lv_obj_t* btn, lv_event_t e)
{
    if (e == LV_EVENT_SHORT_CLICKED || e == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_decrement(spinbox);
    }
}


void lvgl_spinbox_test(void)
{
    spinbox = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_range(spinbox, -1000, 90000);
    lv_spinbox_set_digit_format(spinbox, 5, 2);
    lv_spinbox_step_prev(spinbox);
    lv_obj_set_width(spinbox, 100);
    lv_obj_align(spinbox, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_coord_t h = lv_obj_get_height(spinbox);
    lv_obj_t* btn = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_size(btn, h, h);
    lv_obj_align(btn, spinbox, LV_ALIGN_OUT_RIGHT_MID, 5, 0);
    lv_theme_apply(btn, LV_THEME_SPINBOX_BTN);
    lv_obj_set_style_local_value_str(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_SYMBOL_PLUS);
    lv_obj_set_event_cb(btn, lv_spinbox_increment_event_cb);

    btn = lv_btn_create(lv_scr_act(), btn);
    lv_obj_align(btn, spinbox, LV_ALIGN_OUT_LEFT_MID, -5, 0);
    lv_obj_set_event_cb(btn, lv_spinbox_decrement_event_cb);
    lv_obj_set_style_local_value_str(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_SYMBOL_MINUS);
}

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

Introduction of Embedded GUI LVGL "Spinbox Spinner Control"