LVGL(72)-v8–slider

1. Introduction to slider

1.1 Overview

Slider object looks like a toolbar with knobs. The knob can be dragged to set a value. Sliders can also be vertical or horizontal. The slide bar was used in a process when we introduced the img control earlier. Here we talked about setting the style to set some styles of the slide bar.

1.2 Parts and Styles

  • LV_PART_MAIN The slider’s background, which uses all the typical background style properties. Padding makes the indicator smaller in the corresponding direction.
  • The LV_PART_INDICATOR indicator shows the current state of the slider. All typical background style properties are also used.
  • LV_PART_KNOB Rectangle (or circle) drawn according to current value. It also uses all the typical background properties to describe the knob. By default, the knob is square (optional radius) with side length equal to the smaller side of the slider. Knobs can be made larger with padding values. Fill values can also be asymmetric.

1.3 Usage

1.3.1 Value and range

Set initial value. The animation time is set by the style’s anim_time property.

/**
 * Set a new value on the slider
 * @param obj pointer to a slider object
 * @param value the new value
 * @param anim LV_ANIM_ON: set the value with an animation; LV_ANIM_OFF: change the value immediately
 */
static inline void lv_slider_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim)

Function that specifies the range (minimum value, maximum value) of the slider

/**
 * Set minimum and the maximum values of a bar
 * @param obj pointer to the slider object
 * @param min minimum value
 * @param max maximum value
 */
static inline void lv_slider_set_range(lv_obj_t * obj, int32_t min, int32_t max)
1.3.2 Modes

The slider can be one of the following:

  • LV_SLIDER_MODE_NORMAL Normal slider as above
  • LV_SLIDER_SYMMETRICAL draws the indicator from its zero value to its current value. Requires a negative minimum range and a positive maximum range.
  • LV_SLIDER_RANGE allows setting the start value through lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF). The start value must always be smaller than the end value.
enum {
    LV_SLIDER_MODE_NORMAL = LV_BAR_MODE_NORMAL,
    LV_SLIDER_MODE_SYMMETRICAL = LV_BAR_MODE_SYMMETRICAL,
    LV_SLIDER_MODE_RANGE = LV_BAR_MODE_RANGE
};
typedef uint8_t lv_slider_mode_t;

function to set mode

/**
 * Set the mode of slider.
 * @param obj pointer to a slider object
 * @param mode the mode of the slider. See ::lv_slider_mode_t
 */
static inline void lv_slider_set_mode(lv_obj_t * obj, lv_slider_mode_t mode)
1.3.2 Knob-only mode

Typically, you adjust a slider by dragging the knob or clicking the slider. In the latter case, the knob moves to the clicked point and the slider’s value changes accordingly. In some cases, it’s best to set the slider to react only when the knob is dragged. This feature is enabled by adding LV_OBJ_FLAG_ADV_HITTEST:

lv_obj_add_flag(slider,LV_OBJ_FLAG_ADV_HITTEST).

1.4 Events

  • LV_EVENT_VALUE_CHANGED Sent when the slider is dragged or changed with keys. The event is sent continuously while the slider is dragged, and only when it is released. Use lv_slider_is_dragged to determine whether the slider is being dragged or just released.

1.5 Keys

  • LV_KEY_UP/RIGHT Increase the value of the slider by 1
  • LV_KEY_DOWN/LEFT The value of the slider decreases by 1

The change range of the slider can be set through lv_slider_set_range

The minimum value of the slider can be obtained through lv_slider_get_min_value

The maximum value of the slider can be obtained through lv_slider_get_max_value

Example 1

/**
 * Show how to style a slider.
 */
void lv_example_slider_2(void)
{
    /*Create a transition*/
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
    static lv_style_transition_dsc_t transition_dsc;
    lv_style_transition_dsc_init( & amp;transition_dsc, props, lv_anim_path_linear, 400, 0, NULL);

    static lv_style_t style_main;
    static lv_style_t style_indicator;
    static lv_style_t style_knob;
    static lv_style_t style_pressed_color;
    lv_style_init( & amp;style_main); //Set the style of the slider background
    lv_style_set_bg_opa( & amp;style_main, LV_OPA_COVER); //opaque
    lv_style_set_bg_color( & amp;style_main, lv_color_hex3(0xbbb)); //Background color
    lv_style_set_radius( & amp;style_main, 0);//LV_RADIUS_CIRCLE); // Set the style fillet arc
    //lv_style_set_pad_ver( & amp;style_main, -2); /*Makes the indicator larger*/ // Set vertical padding

    lv_style_init( & amp;style_indicator); //Set the style of the slider indicator
    lv_style_set_bg_opa( & amp;style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color( & amp;style_indicator, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
    lv_style_set_radius( & amp;style_indicator, 0);//LV_RADIUS_CIRCLE);
    lv_style_set_transition( & amp;style_indicator, & amp;transition_dsc); // Transition effects

    lv_style_init( & amp;style_knob); //Set the style of the slider knob
    lv_style_set_bg_opa( & amp;style_knob, LV_OPA_COVER);
    lv_style_set_bg_color( & amp;style_knob, lv_color_hex(0xffffff));
    lv_style_set_border_color( & amp;style_knob, lv_palette_darken( LV_PALETTE_GREY, 1)); //Set the border color of the knob
    lv_style_set_border_width( & amp;style_knob, 1); //Set the border width of the knob
    lv_style_set_radius( & amp;style_knob, LV_RADIUS_CIRCLE);
    lv_style_set_pad_all( & amp;style_knob, 12); /*Makes the knob larger*/ //Change the size of the knob
    lv_style_set_transition( & amp;style_knob, & amp;transition_dsc);


    lv_style_init( & amp;style_pressed_color); //Set the style of the slider when pressed. The color of the slider changes after pressing
    lv_style_set_bg_color( & amp;style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));

    /*Create a slider and add the style*/
    lv_obj_t * slider = lv_slider_create(lv_scr_act());

    lv_obj_remove_style_all(slider); /*Remove the styles coming from the theme*/

    lv_obj_add_style(slider, & amp;style_main, LV_PART_MAIN);
    lv_obj_add_style(slider, & style_indicator, LV_PART_INDICATOR);
    lv_obj_add_style(slider, & style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);
    lv_obj_add_style(slider, & style_knob, LV_PART_KNOB);
    lv_obj_add_style(slider, & style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);
    lv_obj_set_size(slider,500,4);

    lv_obj_center(slider);
}

Change the height of the indicator bar to be higher than the background

lv_style_set_pad_ver( & amp;style_main, -4); /*Makes the indicator larger*/ // Set vertical padding

Change the size of the knob lv_style_set_pad_all()

  • Set slider mode to range mode
lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);