Built in spinbox button for increment and decrement

In the official documentation of LVGL, there is a simple spinbox demo.

I noticed that the demo have two buttons on both sides of the spinbox. It is used to increment and decrement the value of the spinbox.

I did not see the option for the two buttons built into the Spinbox components in Squareline Studio. This could be handful as I don’t need to add the code for the two buttons.

image

The following is the sample code of the spinbox demo in LVGL documentation.

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 lv_ex_spinbox_1(void)
{
    spinbox = lv_spinbox_create(lv_scr_act(), NULL);

    lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_size(btn, h, h);
    lv_obj_set_event_cb(btn, lv_spinbox_increment_event_cb);

    btn = lv_btn_create(lv_scr_act(), btn);
    lv_obj_set_event_cb(btn, lv_spinbox_decrement_event_cb);
}

You could place 2 buttons next to the spin box. Size 50px x 50px

Then assign the functions you mentioned above to them on SHORT CLICK and LONG_PRESSED_REPEAT.

I just did the same in my project

Screenshot 2023-07-23 at 10.19.03 pm

1 Like

With the spinbox widget, we added the Step spinbox action to the events. With this, you can increase or decrease the value of the spinbox with a trigger of a button or any widget.

1 Like