Spinbox (lv_spinbox)

Overview

Spinbox contains an integer displayed as a decimal number with a possible fixed decimal point position and a configurable number of digits. The value can be increased or decreased by Keys or API functions. Under the hood Spinbox is a Text Area (lv_textarea) with behaviors extended to enable a numeric value to be viewed and modified with configurable constraints.

Parts and Styles

Spinbox's parts are identical to those of Text Area.

Value, range and step

lv_spinbox_set_value(spinbox, 1234) sets a new value for the Spinbox.
lv_spinbox_increment(spinbox) and lv_spinbox_decrement(spinbox) increments/decrements the value of the Spinbox according to the currently-selected digit.
lv_spinbox_set_range(spinbox, -1000, 2500) sets its range. If the value is changed by lv_spinbox_set_value(spinbox), by Keys, by lv_spinbox_increment(spinbox) or lv_spinbox_decrement(spinbox) this range will be respected.
lv_spinbox_set_step(spinbox, 100) sets which digit to change on increment/decrement. Only multiples of ten can be set.
lv_spinbox_set_cursor_pos(spinbox, 1) sets the cursor to a specific digit to change on increment/decrement. Position '0' sets the cursor to the least significant digit.

If an encoder is used as input device, the selected digit is shifted to the right by default whenever the encoder button is clicked. To change this behaviour to shifting to the left, the lv_spinbox_set_digit_step_direction(spinbox, LV_DIR_LEFT) can be used

Format

lv_spinbox_set_digit_format(spinbox, digit_count, separator_position) sets the number format. digit_count is the total number of digits to display. separator_position is the number of leading digits before the decimal point. Pass 0 for separator_position to display no decimal point.

Rollover

lv_spinbox_set_rollover(spinbox, true / false) enables/disabled rollover mode. If either the minimum or maximum value is reached with rollover enabled, and the user attempts to continue changing the value in the same direction, the value will change to the other limit. If rollover is disabled the value will stop at the minimum or maximum value.

Events

LV_EVENT_VALUE_CHANGED Sent when value has changed.

Keys

LV_KEY_LEFT/RIGHT With Keypad move the cursor left/right. With Encoder decrement/increment the selected digit.
LV_KEY_UP/DOWN With Keypad and Encoder increment/decrement the value.
LV_KEY_ENTER With Encoder, move focus to next digit. If focus is on last digit, focus moves to first digit.

Example

Simple Spinbox

#include "../../lv_examples.h"
#if LV_USE_SPINBOX && LV_BUILD_EXAMPLES

static lv_obj_t * spinbox;

static void lv_spinbox_increment_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_SHORT_CLICKED || code  == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_increment(spinbox);
    }
}

static void lv_spinbox_decrement_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_SHORT_CLICKED || code == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_decrement(spinbox);
    }
}

void lv_example_spinbox_1(void)
{
    spinbox = lv_spinbox_create(lv_screen_active());
    lv_spinbox_set_range(spinbox, -1000, 25000);
    lv_spinbox_set_digit_format(spinbox, 5, 2);
    lv_spinbox_step_prev(spinbox);
    lv_obj_set_width(spinbox, 100);
    lv_obj_center(spinbox);

    int32_t h = lv_obj_get_height(spinbox);

    lv_obj_t * btn = lv_button_create(lv_screen_active());
    lv_obj_set_size(btn, h, h);
    lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_RIGHT_MID, 5, 0);
    lv_obj_set_style_bg_image_src(btn, LV_SYMBOL_PLUS, 0);
    lv_obj_add_event_cb(btn, lv_spinbox_increment_event_cb, LV_EVENT_ALL,  NULL);

    btn = lv_button_create(lv_screen_active());
    lv_obj_set_size(btn, h, h);
    lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_LEFT_MID, -5, 0);
    lv_obj_set_style_bg_image_src(btn, LV_SYMBOL_MINUS, 0);
    lv_obj_add_event_cb(btn, lv_spinbox_decrement_event_cb, LV_EVENT_ALL, NULL);
}

#endif

API

lv_types.h

lv_spinbox.h