Introducción de la GUI integrada LVGL "Spinbox Spinner Control"

1. El concepto de control giratorio LVGL GUI

Spinbox contiene un texto numérico que se puede incrementar o disminuir mediante pulsaciones de teclas o funciones API. Debajo del Spinbox está el área de texto modificada.

2. Widgets y estilos giratorios de la GUI de LVGL

La parte principal de Spinbox se llama LV_SPINBOX_PART_BG con un fondo rectangular usando todas las propiedades típicas de estilo de fondo. También describe el estilo de la etiqueta usando su propiedad de estilo de texto.
LV_SPINBOX_PART_CURSOR es la parte virtual que describe el cursor.

3. Uso de controles giratorios GUI LVGL

1. Establecer formato

Utilice esta función para establecer el formato de la rueda, lv_spinbox_set_digit_format(spinbox, digit_count, separator_position), donde el segundo parámetro digit_count es el número de dígitos en el número entero, y separator_position es el número de dígitos antes del punto decimal, que es el número de dígitos enteros

Use esta función para configurar lv_spinbox_set_padding_left(spinbox, cnt) relleno izquierdo entre símbolos (+/-) a números

Escribamos un programa para crear 4 ruletas, la primera es la predeterminada, la segunda es establecer el número total de números en 5, el número entero es 2, la tercera es establecer el número total en 6 y el número entero es 4, el cuarto es el predeterminado, pero el espacio entre el símbolo y el número es 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. Valor y rangos

Use esta función para establecer el rango de la ruleta lv_spinbox_set_range(spinbox, min, max)

Use esta función para establecer el valor de la ruleta lv_spinbox_set_value(spinbox, num)

Use estas dos funciones lv_spinbox_increment(spinbox)/lv_spinbox_decrement(spinbox) para aumentar/disminuir el valor de la ruleta

Use esta función para establecer el incremento de la ruleta

Por ejemplo, escribamos uno con Event

3. Eventos

Además de los eventos generales, existen los siguientes eventos especiales

• LV_EVENT_VALUE_CHANGED  enviado cuando el valor ha cambiado. (el valor se establece como datos de eventos como  int32_t)

• LV_EVENT_INSERT  enviado por el antepasado Área de texto pero no debe usarse.

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);
}

De acuerdo, se acabó, continúa empujando más emocionante ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓