Spinbox (lv_spinbox)

Overview

The Spinbox contains a number as text which can be increased or decreased by Keys or API functions. The Spinbox is a modified Text area.

Set format

lv_spinbox_set_digit_format(spinbox, digit_count, separator_position) set the format of the number. digit_count sets the number of digits. Leading zeros are added to fill the space on the left. separator_position sets the number of digit before the decimal point. 0 means no decimal point.

lv_spinbox_set_padding_left(spinbox, cnt) add cnt “space” characters between the sign an the most left digit.

Value and ranges

lv_spinbox_set_range(spinbox, min, max) sets the range of the Spinbox.

lv_spinbox_set_value(spinbox, num) sets the Spinbox’s value manually.

lv_spinbox_increment(spinbox) and lv_spinbox_decrement(spinbox) increments/decrements the value of the Spinbox.

lv_spinbox_set_step(spinbox, step) sets the amount to increment decrement.

Style usage

The lv_spinbox_set_style(roller, LV_SPINBOX_STYLE_..., &style) set the styles of a Spinbox.

  • LV_SPINBOX_STYLE_BG Style of the background. All style.body properties are used. style.text is used for label. Default: lv_style_pretty

  • LV_SPINBOX_STYLE_SB Scrollbar’s style which uses all style.body properties. padding.right/bottom sets horizontal and vertical the scrollbars’ padding respectively and the padding.inner sets the scrollbar’s width. (default: lv_style_pretty_color)

  • LV_SPINBOX_STYLE_CURSOR Style of the cursor which uses all style.body properties including padding to make the cursor larger then the digits.

Events

Besides the Generic events the following Special events are sent by the Drop down lists:

  • 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.

Learn more about Events.

Keys

The following Keys are processed by the Buttons:

  • LV_KEY_LEFT/RIGHT With Keypad move the cursor left/right. With Encoder decrement/increment the selected digit.

  • LY_KEY_ENTER Apply the selected option (Send LV_EVENT_VALUE_CHANGED event and close the Drop down list)

  • LV_KEY_ENTER With Encoder got the net digit. Jump to the first after the last.

Example

C

Simple Spinbox

Spinbox example in LittlevGL

code

#include "lvgl/lvgl.h"
#include <stdio.h>

static void event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        printf("Value: %d\n", lv_spinbox_get_value(obj));
    }
    else if(event == LV_EVENT_CLICKED) {
        /*For simple test: Click the spinbox to increment its value*/
        lv_spinbox_increment(obj);
    }
}

void lv_ex_spinbox_1(void)
{
    lv_obj_t * spinbox;
    spinbox = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_digit_format(spinbox, 5, 3);
    lv_spinbox_step_prev(spinbox);
    lv_obj_set_width(spinbox, 100);
    lv_obj_align(spinbox, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(spinbox, event_handler);
}

MicroPython

Simple Spinbox

Spinbox example in LittlevGL with MicroPython

code

def event_handler(obj, event):
    if event == lv.EVENT.VALUE_CHANGED:
        print("Value: %d" % obj.get_value())
    elif event == lv.EVENT.CLICKED:
        # For simple test: Click the spinbox to increment its value
        obj.increment()

spinbox = lv.spinbox(lv.scr_act())
spinbox.set_digit_format(5, 3)
spinbox.step_prev()
spinbox.set_width(100)
spinbox.align(None, lv.ALIGN.CENTER, 0, 0)
spinbox.set_event_cb(event_handler)

API

Typedefs

typedef uint8_t lv_spinbox_style_t

Enums

enum [anonymous]

Values:

LV_SPINBOX_STYLE_BG
LV_SPINBOX_STYLE_SB
LV_SPINBOX_STYLE_CURSOR

Functions

lv_obj_t *lv_spinbox_create(lv_obj_t *par, const lv_obj_t *copy)

Create a spinbox objects

Return

pointer to the created spinbox

Parameters
  • par: pointer to an object, it will be the parent of the new spinbox

  • copy: pointer to a spinbox object, if not NULL then the new object will be copied from it

static void lv_spinbox_set_style(lv_obj_t *spinbox, lv_spinbox_style_t type, lv_style_t *style)

Set a style of a spinbox.

Parameters
  • templ: pointer to template object

  • type: which style should be set

  • style: pointer to a style

void lv_spinbox_set_value(lv_obj_t *spinbox, int32_t i)

Set spinbox value

Parameters
  • spinbox: pointer to spinbox

  • i: value to be set

void lv_spinbox_set_digit_format(lv_obj_t *spinbox, uint8_t digit_count, uint8_t separator_position)

Set spinbox digit format (digit count and decimal format)

Parameters
  • spinbox: pointer to spinbox

  • digit_count: number of digit excluding the decimal separator and the sign

  • separator_position: number of digit before the decimal point. If 0, decimal point is not shown

void lv_spinbox_set_step(lv_obj_t *spinbox, uint32_t step)

Set spinbox step

Parameters
  • spinbox: pointer to spinbox

  • step: steps on increment/decrement

void lv_spinbox_set_range(lv_obj_t *spinbox, int32_t range_min, int32_t range_max)

Set spinbox value range

Parameters
  • spinbox: pointer to spinbox

  • range_min: maximum value, inclusive

  • range_max: minimum value, inclusive

void lv_spinbox_set_padding_left(lv_obj_t *spinbox, uint8_t padding)

Set spinbox left padding in digits count (added between sign and first digit)

Parameters
  • spinbox: pointer to spinbox

  • cb: Callback function called on value change event

static const lv_style_t *lv_spinbox_get_style(lv_obj_t *spinbox, lv_spinbox_style_t type)

Get style of a spinbox.

Return

style pointer to the style

Parameters
  • templ: pointer to template object

  • type: which style should be get

int32_t lv_spinbox_get_value(lv_obj_t *spinbox)

Get the spinbox numeral value (user has to convert to float according to its digit format)

Return

value integer value of the spinbox

Parameters
  • spinbox: pointer to spinbox

void lv_spinbox_step_next(lv_obj_t *spinbox)

Select next lower digit for edition by dividing the step by 10

Parameters
  • spinbox: pointer to spinbox

void lv_spinbox_step_prev(lv_obj_t *spinbox)

Select next higher digit for edition by multiplying the step by 10

Parameters
  • spinbox: pointer to spinbox

void lv_spinbox_increment(lv_obj_t *spinbox)

Increment spinbox value by one step

Parameters
  • spinbox: pointer to spinbox

void lv_spinbox_decrement(lv_obj_t *spinbox)

Decrement spinbox value by one step

Parameters
  • spinbox: pointer to spinbox

struct lv_spinbox_ext_t

Public Members

lv_ta_ext_t ta
int32_t value
int32_t range_max
int32_t range_min
int32_t step
uint16_t digit_count
uint16_t dec_point_pos
uint16_t digit_padding_left

Example