github-code/lvgl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scroll) add scrollbar styling example + allow for the scrollbar using shadow

Browse Source
This commit is contained in:
Gabor Kiss-Vamosi
2021-05-26 20:53:15 +02:00
parent ce936b8839
commit 0a70280177
5 changed files with 110 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/scroll/index.rst
View File

@@ -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
^^^^^^^^^^^

2
examples/scroll/lv_example_scroll.h
View File

@@ -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

87
examples/scroll/lv_example_scroll_4.c Normal file
View File

@@ -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

14
src/core/lv_obj.c
View File

@@ -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 {

3
src/core/lv_obj_style.c
View File

@@ -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;