init Files

libraries/lvgl/examples/widgets/slider/index.rst

@@ -0,0 +1,24 @@
+
+Simple Slider
+-------------
+
+.. lv_example:: widgets/slider/lv_example_slider_1
+  :language: c
+
+Slider with custom style
+------------------------
+
+.. lv_example:: widgets/slider/lv_example_slider_2
+  :language: c
+
+Slider with extended drawer
+---------------------------
+
+.. lv_example:: widgets/slider/lv_example_slider_3
+  :language: c
+
+Slider with opposite direction
+------------------------------
+
+.. lv_example:: widgets/slider/lv_example_slider_4
+  :language: c

libraries/lvgl/examples/widgets/slider/lv_example_slider_1.c

@@ -0,0 +1,34 @@
+#include "../../lv_examples.h"
+#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+static void slider_event_cb(lv_event_t * e);
+static lv_obj_t * slider_label;
+
+/**
+ * A default slider with a label displaying the current value
+ */
+void lv_example_slider_1(void)
+{
+    /*Create a slider in the center of the display*/
+    lv_obj_t * slider = lv_slider_create(lv_screen_active());
+    lv_obj_center(slider);
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+
+    lv_obj_set_style_anim_duration(slider, 2000, 0);
+    /*Create a label below the slider*/
+    slider_label = lv_label_create(lv_screen_active());
+    lv_label_set_text(slider_label, "0%");
+
+    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+}
+
+static void slider_event_cb(lv_event_t * e)
+{
+    lv_obj_t * slider = lv_event_get_target(e);
+    char buf[8];
+    lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
+    lv_label_set_text(slider_label, buf);
+    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+}
+
+#endif

libraries/lvgl/examples/widgets/slider/lv_example_slider_2.c

@@ -0,0 +1,55 @@
+#include "../../lv_examples.h"
+#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+/**
+ * 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(&transition_dsc, props, lv_anim_path_linear, 300, 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(&style_main);
+    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
+    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
+    lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/
+
+    lv_style_init(&style_indicator);
+    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
+    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
+    lv_style_set_transition(&style_indicator, &transition_dsc);
+
+    lv_style_init(&style_knob);
+    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
+    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
+    lv_style_set_border_width(&style_knob, 2);
+    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
+    lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
+    lv_style_set_transition(&style_knob, &transition_dsc);
+
+    lv_style_init(&style_pressed_color);
+    lv_style_set_bg_color(&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_screen_active());
+    lv_obj_remove_style_all(slider);        /*Remove the styles coming from the theme*/
+
+    lv_obj_add_style(slider, &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_center(slider);
+}
+
+#endif

libraries/lvgl/examples/widgets/slider/lv_example_slider_3.c

@@ -0,0 +1,69 @@
+#include "../../lv_examples.h"
+#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+#define MAX_VALUE 100
+#define MIN_VALUE 0
+
+static void slider_event_cb(lv_event_t * e);
+
+/**
+ * Show the current value when the slider is pressed by extending the drawer
+ *
+ */
+void lv_example_slider_3(void)
+{
+    /*Create a slider in the center of the display*/
+    lv_obj_t * slider;
+    slider = lv_slider_create(lv_screen_active());
+    lv_obj_center(slider);
+
+    lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);
+    lv_slider_set_range(slider, MIN_VALUE, MAX_VALUE);
+    lv_slider_set_value(slider, 70, LV_ANIM_OFF);
+    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);
+
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);
+    lv_obj_refresh_ext_draw_size(slider);
+}
+
+static void slider_event_cb(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    /*Provide some extra space for the value*/
+    if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
+        lv_event_set_ext_draw_size(e, 50);
+    }
+    else if(code == LV_EVENT_DRAW_MAIN_END) {
+        if(!lv_obj_has_state(obj, LV_STATE_PRESSED)) return;
+
+        lv_area_t slider_area;
+        lv_obj_get_coords(obj, &slider_area);
+        lv_area_t indic_area = slider_area;
+        lv_area_set_width(&indic_area, lv_area_get_width(&slider_area) * lv_slider_get_value(obj) / MAX_VALUE);
+        indic_area.x1 += lv_area_get_width(&slider_area) * lv_slider_get_left_value(obj) / MAX_VALUE;
+        char buf[16];
+        lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));
+
+        lv_point_t label_size;
+        lv_text_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
+        lv_area_t label_area;
+        label_area.x1 = 0;
+        label_area.x2 = label_size.x - 1;
+        label_area.y1 = 0;
+        label_area.y2 = label_size.y - 1;
+
+        lv_area_align(&indic_area, &label_area, LV_ALIGN_OUT_TOP_MID, 0, -10);
+
+        lv_draw_label_dsc_t label_draw_dsc;
+        lv_draw_label_dsc_init(&label_draw_dsc);
+        label_draw_dsc.color = lv_color_hex3(0x888);
+        label_draw_dsc.text = buf;
+        label_draw_dsc.text_local = true;
+        lv_layer_t * layer = lv_event_get_layer(e);
+        lv_draw_label(layer, &label_draw_dsc, &label_area);
+    }
+}
+
+#endif

libraries/lvgl/examples/widgets/slider/lv_example_slider_4.c

@@ -0,0 +1,34 @@
+#include "../../lv_examples.h"
+#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+static void slider_event_cb(lv_event_t * e);
+static lv_obj_t * slider_label;
+
+/**
+ * Slider with opposite direction
+ */
+void lv_example_slider_4(void)
+{
+    /*Create a slider in the center of the display*/
+    lv_obj_t * slider = lv_slider_create(lv_screen_active());
+    lv_obj_center(slider);
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    /*Reverse the direction of the slider*/
+    lv_slider_set_range(slider, 100, 0);
+    /*Create a label below the slider*/
+    slider_label = lv_label_create(lv_screen_active());
+    lv_label_set_text(slider_label, "0%");
+
+    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+}
+
+static void slider_event_cb(lv_event_t * e)
+{
+    lv_obj_t * slider = lv_event_get_target(e);
+    char buf[8];
+    lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
+    lv_label_set_text(slider_label, buf);
+    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+}
+
+#endif