From 0a7028017715baed0320016551de7b6d2e3b41e2 Mon Sep 17 00:00:00 2001 From: Gabor Kiss-Vamosi Date: Wed, 26 May 2021 20:53:15 +0200 Subject: [PATCH] feat(scroll) add scrollbar styling example + allow for the scrollbar using shadow --- examples/scroll/index.rst | 6 ++ examples/scroll/lv_example_scroll.h | 2 + examples/scroll/lv_example_scroll_4.c | 87 +++++++++++++++++++++++++++ src/core/lv_obj.c | 14 ++++- src/core/lv_obj_style.c | 3 +- 5 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 examples/scroll/lv_example_scroll_4.c diff --git a/examples/scroll/index.rst b/examples/scroll/index.rst index d39ccfd9c..48749c900 100644 --- a/examples/scroll/index.rst +++ b/examples/scroll/index.rst @@ -17,6 +17,12 @@ Floating button .. lv_example:: scroll/lv_example_scroll_3 :language: c +Styling the scrollbars +"""""""""""""""""""""""" +.. lv_example:: scroll/lv_example_scroll_4 + :language: c + + MicroPython ^^^^^^^^^^^ diff --git a/examples/scroll/lv_example_scroll.h b/examples/scroll/lv_example_scroll.h index ea8ae23c6..5df9c25f7 100644 --- a/examples/scroll/lv_example_scroll.h +++ b/examples/scroll/lv_example_scroll.h @@ -28,6 +28,8 @@ extern "C" { void lv_example_scroll_1(void); void lv_example_scroll_2(void); void lv_example_scroll_3(void); +void lv_example_scroll_4(void); + /********************** * MACROS diff --git a/examples/scroll/lv_example_scroll_4.c b/examples/scroll/lv_example_scroll_4.c new file mode 100644 index 000000000..d816b0b06 --- /dev/null +++ b/examples/scroll/lv_example_scroll_4.c @@ -0,0 +1,87 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_LIST + +static uint32_t btn_cnt = 1; + +static void float_btn_event_cb(lv_event_t * e) +{ + lv_event_code_t code = lv_event_get_code(e); + lv_obj_t * float_btn = lv_event_get_target(e); + + if(code == LV_EVENT_CLICKED) { + lv_obj_t * list = lv_event_get_user_data(e); + char buf[32]; + lv_snprintf(buf, sizeof(buf), "Track %d", btn_cnt); + lv_obj_t * list_btn = lv_list_add_btn(list, LV_SYMBOL_AUDIO, buf); + btn_cnt++; + + lv_obj_move_foreground(float_btn); + + lv_obj_scroll_to_view(list_btn, LV_ANIM_ON); + } +} + +/** + * Styling the scrollbars + */ +void lv_example_scroll_4(void) +{ + lv_obj_t * obj = lv_obj_create(lv_scr_act()); + lv_obj_set_size(obj, 200, 100); + lv_obj_center(obj); + + lv_obj_t * label = lv_label_create(obj); + lv_label_set_text(label, + "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n" + "Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula. \n" + "Sed vestibulum sapien nulla, id convallis ex porttitor nec. \n" + "Duis et massa eu libero accumsan faucibus a in arcu. \n" + "Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor. \n" + "Sed nisl augue, venenatis in blandit et, gravida ac tortor. \n" + "Etiam dapibus elementum suscipit. \n" + "Proin mollis sollicitudin convallis. \n" + "Integer dapibus tempus arcu nec viverra. \n" + "Donec molestie nulla enim, eu interdum velit placerat quis. \n" + "Donec id efficitur risus, at molestie turpis. \n" + "Suspendisse vestibulum consectetur nunc ut commodo. \n" + "Fusce molestie rhoncus nisi sit amet tincidunt. \n" + "Suspendisse a nunc ut magna ornare volutpat."); + + + /*Remove the style of scrollbar to have clean start*/ + lv_obj_remove_style(obj, NULL, LV_PART_SCROLLBAR | LV_STATE_ANY); + + /*Create a transition the animate the some properties on state change*/ + static const lv_style_prop_t props[] = {LV_STYLE_BG_OPA, LV_STYLE_WIDTH, 0}; + static lv_style_transition_dsc_t trans; + lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 200, 0, NULL); + + /*Create a style for the scrollbars*/ + static lv_style_t style; + lv_style_init(&style); + lv_style_set_width(&style, 4); /*Width of the scrollbar*/ + lv_style_set_pad_right(&style, 5); /*Space from the parallel side*/ + lv_style_set_pad_top(&style, 5); /*Space from the perpendicular side*/ + + lv_style_set_radius(&style, 2); + lv_style_set_bg_opa(&style, LV_OPA_70); + lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_border_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 3)); + lv_style_set_border_width(&style, 2); + lv_style_set_shadow_width(&style, 8); + lv_style_set_shadow_spread(&style, 2); + lv_style_set_shadow_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 1)); + + lv_style_set_transition(&style, &trans); + + /*Make the scrollbars wider and use 100% opacity when scrolled*/ + static lv_style_t style_scrolled; + lv_style_init(&style_scrolled); + lv_style_set_width(&style_scrolled, 8); + lv_style_set_bg_opa(&style_scrolled, LV_OPA_COVER); + + lv_obj_add_style(obj, &style, LV_PART_SCROLLBAR); + lv_obj_add_style(obj, &style_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED); +} + +#endif diff --git a/src/core/lv_obj.c b/src/core/lv_obj.c index a77816d45..e84ebaf16 100644 --- a/src/core/lv_obj.c +++ b/src/core/lv_obj.c @@ -555,13 +555,25 @@ static lv_res_t scrollbar_init_draw_dsc(lv_obj_t * obj, lv_draw_rect_dsc_t * dsc } #if LV_DRAW_COMPLEX + dsc->shadow_opa = lv_obj_get_style_shadow_opa(obj, LV_PART_SCROLLBAR); + if(dsc->shadow_opa > LV_OPA_MIN) { + dsc->shadow_width = lv_obj_get_style_shadow_width(obj, LV_PART_SCROLLBAR); + if(dsc->shadow_width > 0) { + dsc->shadow_spread = lv_obj_get_style_shadow_spread(obj, LV_PART_SCROLLBAR); + dsc->shadow_color = lv_obj_get_style_shadow_color(obj, LV_PART_SCROLLBAR); + } else { + dsc->shadow_opa = LV_OPA_TRANSP; + } + } + lv_opa_t opa = lv_obj_get_style_opa(obj, LV_PART_SCROLLBAR); if(opa < LV_OPA_MAX) { dsc->bg_opa = (dsc->bg_opa * opa) >> 8; dsc->border_opa = (dsc->bg_opa * opa) >> 8; + dsc->shadow_opa = (dsc->bg_opa * opa) >> 8; } - if(dsc->bg_opa != LV_OPA_TRANSP || dsc->border_opa != LV_OPA_TRANSP) { + if(dsc->bg_opa != LV_OPA_TRANSP || dsc->border_opa != LV_OPA_TRANSP || dsc->shadow_opa != LV_OPA_TRANSP ) { dsc->radius = lv_obj_get_style_radius(obj, LV_PART_SCROLLBAR); return LV_RES_OK; } else { diff --git a/src/core/lv_obj_style.c b/src/core/lv_obj_style.c index b8e1f2767..0870f8ce2 100644 --- a/src/core/lv_obj_style.c +++ b/src/core/lv_obj_style.c @@ -228,7 +228,7 @@ lv_style_value_t lv_obj_get_style_prop(const lv_obj_t * obj, lv_part_t part, lv_ } if(!found) { - if(prop == LV_STYLE_WIDTH || prop == LV_STYLE_HEIGHT) { + if(part == LV_PART_MAIN && (prop == LV_STYLE_WIDTH || prop == LV_STYLE_HEIGHT)) { const lv_obj_class_t * cls = obj->class_p; while(cls) { if(prop == LV_STYLE_WIDTH) { @@ -385,6 +385,7 @@ _lv_style_state_cmp_t _lv_obj_style_state_compare(lv_obj_t * obj, lv_state_t sta if(res_tmp == _LV_STYLE_STATE_CMP_DIFF_LAYOUT) { if(part_act == LV_PART_MAIN) return _LV_STYLE_STATE_CMP_DIFF_LAYOUT; + else if(part_act == LV_PART_SCROLLBAR) return _LV_STYLE_STATE_CMP_DIFF_REDRAW_MAIN; else { res = _LV_STYLE_STATE_CMP_DIFF_DRAW_PAD; continue;