diff --git a/docs/overview/style.md b/docs/overview/style.md index d49c528db..b1da96309 100644 --- a/docs/overview/style.md +++ b/docs/overview/style.md @@ -287,42 +287,17 @@ Built-in themes can be extended. If a custom theme is created a parent theme can be selected. The parent theme's styles will be added before the custom theme's styles. Any number of themes can be chained this way. E.g. default theme -> custom theme -> dark theme. -Here is an example about creating a custom theme based on the currently active theme. -```c -/*Declare the style used in the theme*/ -static lv_style_t style_btn; -... +`lv_theme_set_parent(new_theme, base_theme)` extends the `base_theme` with the `new_theme`. -/*Initialize the styles*/ -lv_style_init(&style_btn); -lv_style_set_bg_color(&style_btn, lv_color_green()); - -/*Initialize the new theme from the current theme*/ -lv_theme_t * th_act = lv_disp_get_theme(NULL); -static lv_theme_t th_new; -th_new = *th_act; - -/*Set the parent theme ans the style applay callback for the new theme*/ -lv_theme_set_parent(&th_new, th_act); -lv_theme_set_apply_cb(&th_new, new_theme_apply_cb); - -/*Assign the new theme the the current display*/ -lv_disp_set_theme(NULL, &th_new); - -... - -/*Will be called when the styles of the base theme are already added - to add new styles*/ -void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj) -{ - if(lv_obj_check_type(obj, &lv_btn_class)) { - lv_obj_add_style(obj, &style_btn, 0); - } -} -``` +There is an example for it below. ## Examples +```eval_rst + +.. include:: ../../examples/styles/index.rst + +``` ## API ```eval_rst diff --git a/docs/widgets/extra/chart.md b/docs/widgets/extra/chart.md index 94223c949..9188731bd 100644 --- a/docs/widgets/extra/chart.md +++ b/docs/widgets/extra/chart.md @@ -22,6 +22,7 @@ Charts also support: - `LV_PART_ITEMS` Refers to the line or bar series. - Line chart: The *line* properties are used by the lines. `width`, `height`, `bg_color` and `radius` is used to set the appearance of points. - Bar chart: The typical background properties are used to style the bars. +- `LV_PART_INDICATOR` Refers to the points on line and scatter chart (small circles or squares). - `LV_PART_CURSOR` *Line* properties are used to style the cursors. `width`, `height`, `bg_color` and `radius` is used to set the appearance of points. - `LV_PART_TICKS` *Line* and *Text* style properties are used to style the ticks diff --git a/examples/lv_examples.h b/examples/lv_examples.h index 462bb5855..1e8c8b842 100644 --- a/examples/lv_examples.h +++ b/examples/lv_examples.h @@ -22,6 +22,7 @@ extern "C" { #include "scroll/lv_example_scroll.h" #include "anim/lv_example_anim.h" #include "event/lv_example_event.h" +#include "styles/lv_example_style.h" /********************* * DEFINES diff --git a/examples/styles/index.rst b/examples/styles/index.rst new file mode 100644 index 000000000..bfcb230f5 --- /dev/null +++ b/examples/styles/index.rst @@ -0,0 +1,97 @@ +C +^ + +Size styles +""""""""""""""""""" + +.. lv_example:: style/lv_example_style_1 + :language: c + +Background styles +""""""""""""""""""" + +.. lv_example:: style/lv_example_style_2 + :language: c + +Border styles +"""""""""""""""" + +.. lv_example:: style/lv_example_style_3 + :language: c + +Outline styles +"""""""""""""""" + +.. lv_example:: style/lv_example_style_4 + :language: c + +Shadow styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_5 + :language: c + +Image styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_6 + :language: c + +Arc styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_7 + :language: c + +Text styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_8 + :language: c + +Line styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_9 + :language: c + + +Transition +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_10 + :language: c + + +Using multiple styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_11 + :language: c + + +Local styles +"""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_12 + :language: c + + +Add styles to parts and states +""""""""""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_13 + :language: c + + +Extending the current theme +""""""""""""""""""""""""""""""""""""""""""""" + +.. lv_example:: style/lv_example_style_14 + :language: c + + +MicroPython +^^^^^^^^^^^ + +No examples yet. diff --git a/examples/styles/lv_example_style.h b/examples/styles/lv_example_style.h index 39b007dca..40d106b05 100644 --- a/examples/styles/lv_example_style.h +++ b/examples/styles/lv_example_style.h @@ -29,13 +29,16 @@ void lv_example_style_1(void); void lv_example_style_2(void); void lv_example_style_3(void); void lv_example_style_4(void); -//void lv_example_style_5(void); -//void lv_example_style_6(void); +void lv_example_style_5(void); +void lv_example_style_6(void); void lv_example_style_7(void); void lv_example_style_8(void); void lv_example_style_9(void); -//void lv_example_style_10(void); +void lv_example_style_10(void); void lv_example_style_11(void); +void lv_example_style_12(void); +void lv_example_style_13(void); +void lv_example_style_14(void); /********************** * MACROS diff --git a/examples/styles/lv_example_style_1.c b/examples/styles/lv_example_style_1.c index 108946b3f..ccfe3af0d 100644 --- a/examples/styles/lv_example_style_1.c +++ b/examples/styles/lv_example_style_1.c @@ -1,29 +1,31 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES +#if LV_BUILD_EXAMPLES && LV_USE_IMG /** - * Using the background style properties + * Using the Size, Position and Padding style properties */ void lv_example_style_1(void) { - static lv_style_t style; - lv_style_init(&style); - lv_style_set_radius(&style, 5); + static lv_style_t style; + lv_style_init(&style); + lv_style_set_radius(&style, 5); - /*Make a gradient*/ - lv_style_set_bg_opa(&style, LV_OPA_COVER); - lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); - lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER); + /*Make a gradient*/ + lv_style_set_width(&style, 150); + lv_style_set_height(&style, LV_SIZE_CONTENT); - /*Shift the gradient to the bottom*/ - lv_style_set_bg_main_stop(&style, 128); - lv_style_set_bg_grad_stop(&style, 192); + lv_style_set_pad_ver(&style, 20); + lv_style_set_pad_left(&style, 5); - /*Create an object with the new style*/ - lv_obj_t * obj = lv_obj_create(lv_scr_act()); - lv_obj_add_style(obj, &style, 0); - lv_obj_center(obj); + lv_style_set_x(&style, lv_pct(50)); + lv_style_set_y(&style, 80); + + /*Create an object with the new style*/ + lv_obj_t * obj = lv_obj_create(lv_scr_act()); + lv_obj_add_style(obj, &style, 0); + + lv_obj_t * label = lv_label_create(obj); + lv_label_set_text(label, "Hello"); } #endif diff --git a/examples/styles/lv_example_style_10.c b/examples/styles/lv_example_style_10.c index 1e53bb2b8..f005af6f0 100644 --- a/examples/styles/lv_example_style_10.c +++ b/examples/styles/lv_example_style_10.c @@ -1,36 +1,40 @@ -typedef int _keep_pedantic_happy; -//#include "../../lv_examples.h" -// -///** -// * Using the transitions style properties -// */ -//void lv_example_style_10(void) -//{ -// static lv_style_t style; -// lv_style_init(&style); -// -// /*Set a background color and a radius*/ -// lv_style_set_radius(&style, LV_STATE_DEFAULT, 5); -// lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER); -// lv_style_set_bg_color(&style, LV_STATE_DEFAULT, lv_color_grey_lighten_3()); -// -// /*Set different background color in pressed state*/ -// lv_style_set_bg_color(&style, LV_STATE_PRESSED, lv_palette_main(LV_PALETTE_GREY)); -// -// /*Set different transition time in default and pressed state -// *fast press, slower revert to default*/ -// lv_style_set_transition_time(&style, LV_STATE_DEFAULT, 500); -// lv_style_set_transition_time(&style, LV_STATE_PRESSED, 200); -// -// /*Small delay to make transition more visible*/ -// lv_style_set_transition_delay(&style, LV_STATE_DEFAULT, 100); -// -// /*Add `bg_color` to transitioned properties*/ -// lv_style_set_transition_prop_1(&style, LV_STATE_DEFAULT, LV_STYLE_BG_COLOR); -// -// /*Create an object with the new style*/ -// lv_obj_t * obj = lv_obj_create(lv_scr_act()); -// lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style); -// lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0); -//} -// +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_IMG + +/** + * Creating a transition + */ +void lv_example_style_10(void) +{ + static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0}; + + /* A default transition + * Make it fast (100ms) and start with some delay (200 ms)*/ + static lv_style_transition_dsc_t trans_def; + lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL); + + /* A special transition when going to pressed state + * Make it slow (500 ms) but start without delay*/ + static lv_style_transition_dsc_t trans_pr; + lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL); + + static lv_style_t style_def; + lv_style_init(&style_def); + lv_style_set_transition(&style_def, &trans_def); + + static lv_style_t style_pr; + lv_style_init(&style_pr); + lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED)); + lv_style_set_border_width(&style_pr, 6); + lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3)); + lv_style_set_transition(&style_pr, &trans_pr); + + /*Create an object with the new style_pr*/ + lv_obj_t * obj = lv_obj_create(lv_scr_act()); + lv_obj_add_style(obj, &style_def, 0); + lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED); + + lv_obj_center(obj); +} + +#endif diff --git a/examples/styles/lv_example_style_11.c b/examples/styles/lv_example_style_11.c index c6267c2cf..ccf002ee9 100644 --- a/examples/styles/lv_example_style_11.c +++ b/examples/styles/lv_example_style_11.c @@ -1,22 +1,50 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES && LV_USE_ARC +#if LV_BUILD_EXAMPLES && LV_USE_IMG /** - * Using the Arc style properties + * Using multiple styles */ void lv_example_style_11(void) { - static lv_style_t style; - lv_style_init(&style); + /*A base style*/ + static lv_style_t style_base; + lv_style_init(&style_base); + lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE)); + lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3)); + lv_style_set_border_width(&style_base, 2); + lv_style_set_radius(&style_base, 10); + lv_style_set_shadow_width(&style_base, 10); + lv_style_set_shadow_ofs_y(&style_base, 5); + lv_style_set_shadow_opa(&style_base, LV_OPA_50); + lv_style_set_text_color(&style_base, lv_color_white()); + lv_style_set_width(&style_base, 100); + lv_style_set_height(&style_base, LV_SIZE_CONTENT); - lv_style_set_arc_color(&style, lv_palette_main(LV_PALETTE_RED)); - lv_style_set_arc_width(&style, 4); + /*Set only the properties that should be different*/ + static lv_style_t style_warning; + lv_style_init(&style_warning); + lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW)); + lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3)); + lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4)); + /*Create an object with the base style only*/ + lv_obj_t * obj_base = lv_obj_create(lv_scr_act()); + lv_obj_add_style(obj_base, &style_base, 0); + lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0); - /*Create an object with the new style*/ - lv_obj_t * obj = lv_arc_create(lv_scr_act()); - lv_obj_add_style(obj, &style, 0); - lv_obj_center(obj); + lv_obj_t * label = lv_label_create(obj_base); + lv_label_set_text(label, "Base"); + lv_obj_center(label); + + /*Create an other object with the base style and earnings style too*/ + lv_obj_t * obj_warning = lv_obj_create(lv_scr_act()); + lv_obj_add_style(obj_warning, &style_base, 0); + lv_obj_add_style(obj_warning, &style_warning, 0); + lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0); + + label = lv_label_create(obj_warning); + lv_label_set_text(label, "Warning"); + lv_obj_center(label); } -#endif +#endif diff --git a/examples/styles/lv_example_style_12.c b/examples/styles/lv_example_style_12.c new file mode 100644 index 000000000..a925d657b --- /dev/null +++ b/examples/styles/lv_example_style_12.c @@ -0,0 +1,24 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_IMG + +/** + * Local styles + */ +void lv_example_style_12(void) +{ + static lv_style_t style; + lv_style_init(&style); + lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN)); + lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3)); + lv_style_set_border_width(&style, 3); + + lv_obj_t * obj = lv_obj_create(lv_scr_act()); + lv_obj_add_style(obj, &style, 0); + + /*Overwrite the background color locally*/ + lv_obj_set_style_bg_color(obj,lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN); + + lv_obj_center(obj); +} + +#endif diff --git a/examples/styles/lv_example_style_13.c b/examples/styles/lv_example_style_13.c new file mode 100644 index 000000000..ca5ca8573 --- /dev/null +++ b/examples/styles/lv_example_style_13.c @@ -0,0 +1,29 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_IMG + +/** + * Add styles to parts and states + */ +void lv_example_style_13(void) +{ + static lv_style_t style_indic; + lv_style_init(&style_indic); + lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3)); + lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED)); + lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR); + + static lv_style_t style_indic_pr; + lv_style_init(&style_indic_pr); + lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED)); + lv_style_set_shadow_width(&style_indic_pr, 10); + lv_style_set_shadow_spread(&style_indic_pr, 3); + + /*Create an object with the new style_pr*/ + lv_obj_t * obj = lv_slider_create(lv_scr_act()); + lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR); + lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED); + lv_slider_set_value(obj, 70, LV_ANIM_OFF); + lv_obj_center(obj); +} + +#endif diff --git a/examples/styles/lv_example_style_14.c b/examples/styles/lv_example_style_14.c new file mode 100644 index 000000000..55145cad0 --- /dev/null +++ b/examples/styles/lv_example_style_14.c @@ -0,0 +1,64 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_IMG + + +static lv_style_t style_btn; + +/*Will be called when the styles of the base theme are already added + to add new styles*/ +static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj) +{ + if(lv_obj_check_type(obj, &lv_btn_class)) { + lv_obj_add_style(obj, &style_btn, 0); + } +} + +static void new_theme_init_and_set(void) +{ + /*Initialize the styles*/ + lv_style_init(&style_btn); + lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN)); + lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3)); + lv_style_set_border_width(&style_btn, 3); + + /*Initialize the new theme from the current theme*/ + lv_theme_t * th_act = lv_disp_get_theme(NULL); + static lv_theme_t th_new; + th_new = *th_act; + + /*Set the parent theme ans the style applay callback for the new theme*/ + lv_theme_set_parent(&th_new, th_act); + lv_theme_set_apply_cb(&th_new, new_theme_apply_cb); + + /*Assign the new theme the the current display*/ + lv_disp_set_theme(NULL, &th_new); +} + + + +/** + * Extending the current theme + */ +void lv_example_style_14(void) +{ + lv_obj_t * btn; + lv_obj_t * label; + + btn = lv_btn_create(lv_scr_act()); + lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20); + + label = lv_label_create(btn); + lv_label_set_text(label, "Original theme"); + + new_theme_init_and_set(); + + btn = lv_btn_create(lv_scr_act()); + lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20); + + label = lv_label_create(btn); + lv_label_set_text(label, "New theme"); + + +} + +#endif diff --git a/examples/styles/lv_example_style_2.c b/examples/styles/lv_example_style_2.c index 3ef34b389..356711506 100644 --- a/examples/styles/lv_example_style_2.c +++ b/examples/styles/lv_example_style_2.c @@ -2,23 +2,23 @@ #if LV_BUILD_EXAMPLES /** - * Using the border style properties + * Using the background style properties */ void lv_example_style_2(void) { static lv_style_t style; lv_style_init(&style); + lv_style_set_radius(&style, 5); - /*Set a background color and a radius*/ - lv_style_set_radius(&style, 10); + /*Make a gradient*/ lv_style_set_bg_opa(&style, LV_OPA_COVER); - lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); + lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1)); + lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER); - /*Add border to the bottom+right*/ - lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_border_width(&style, 5); - lv_style_set_border_opa(&style, LV_OPA_50); - lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT); + /*Shift the gradient to the bottom*/ + lv_style_set_bg_main_stop(&style, 128); + lv_style_set_bg_grad_stop(&style, 192); /*Create an object with the new style*/ lv_obj_t * obj = lv_obj_create(lv_scr_act()); diff --git a/examples/styles/lv_example_style_3.c b/examples/styles/lv_example_style_3.c index 4df900a67..a05bc3c3d 100644 --- a/examples/styles/lv_example_style_3.c +++ b/examples/styles/lv_example_style_3.c @@ -2,7 +2,7 @@ #if LV_BUILD_EXAMPLES /** - * Using the outline style properties + * Using the border style properties */ void lv_example_style_3(void) { @@ -10,14 +10,15 @@ void lv_example_style_3(void) lv_style_init(&style); /*Set a background color and a radius*/ - lv_style_set_radius(&style, 5); + lv_style_set_radius(&style, 10); lv_style_set_bg_opa(&style, LV_OPA_COVER); - lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); + lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1)); - /*Add outline*/ - lv_style_set_outline_width(&style, 2); - lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_outline_pad(&style, 8); + /*Add border to the bottom+right*/ + lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_border_width(&style, 5); + lv_style_set_border_opa(&style, LV_OPA_50); + lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT); /*Create an object with the new style*/ lv_obj_t * obj = lv_obj_create(lv_scr_act()); @@ -26,4 +27,3 @@ void lv_example_style_3(void) } #endif - diff --git a/examples/styles/lv_example_style_4.c b/examples/styles/lv_example_style_4.c index 1a8d5451b..5f5b8d369 100644 --- a/examples/styles/lv_example_style_4.c +++ b/examples/styles/lv_example_style_4.c @@ -2,7 +2,7 @@ #if LV_BUILD_EXAMPLES /** - * Using the Shadow style properties + * Using the outline style properties */ void lv_example_style_4(void) { @@ -12,13 +12,12 @@ void lv_example_style_4(void) /*Set a background color and a radius*/ lv_style_set_radius(&style, 5); lv_style_set_bg_opa(&style, LV_OPA_COVER); - lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); + lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1)); - /*Add a shadow*/ - lv_style_set_shadow_width(&style, 8); - lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_shadow_ofs_x(&style, 10); - lv_style_set_shadow_ofs_y(&style, 20); + /*Add outline*/ + lv_style_set_outline_width(&style, 2); + lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_outline_pad(&style, 8); /*Create an object with the new style*/ lv_obj_t * obj = lv_obj_create(lv_scr_act()); @@ -27,3 +26,4 @@ void lv_example_style_4(void) } #endif + diff --git a/examples/styles/lv_example_style_5.c b/examples/styles/lv_example_style_5.c new file mode 100644 index 000000000..663d03d3e --- /dev/null +++ b/examples/styles/lv_example_style_5.c @@ -0,0 +1,29 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES + +/** + * Using the Shadow style properties + */ +void lv_example_style_5(void) +{ + static lv_style_t style; + lv_style_init(&style); + + /*Set a background color and a radius*/ + lv_style_set_radius(&style, 5); + lv_style_set_bg_opa(&style, LV_OPA_COVER); + lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1)); + + /*Add a shadow*/ + lv_style_set_shadow_width(&style, 25); + lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_shadow_ofs_x(&style, 10); + lv_style_set_shadow_ofs_y(&style, 20); + + /*Create an object with the new style*/ + lv_obj_t * obj = lv_obj_create(lv_scr_act()); + lv_obj_add_style(obj, &style, 0); + lv_obj_center(obj); +} + +#endif diff --git a/examples/styles/lv_example_style_6.c b/examples/styles/lv_example_style_6.c index 9f03bd30d..3c6fdb947 100644 --- a/examples/styles/lv_example_style_6.c +++ b/examples/styles/lv_example_style_6.c @@ -1 +1,33 @@ -typedef int _keep_pedantic_happy; +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_IMG + +/** + * Using the Image style properties + */ +void lv_example_style_6(void) +{ + static lv_style_t style; + lv_style_init(&style); + + /*Set a background color and a radius*/ + lv_style_set_radius(&style, 5); + lv_style_set_bg_opa(&style, LV_OPA_COVER); + lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); + lv_style_set_border_width(&style, 2); + lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + + lv_style_set_img_recolor(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_img_recolor_opa(&style, LV_OPA_50); + lv_style_set_transform_angle(&style, 300); + + /*Create an object with the new style*/ + lv_obj_t * obj = lv_img_create(lv_scr_act()); + lv_obj_add_style(obj, &style, 0); + + LV_IMG_DECLARE(img_cogwheel_argb); + lv_img_set_src(obj, &img_cogwheel_argb); + + lv_obj_center(obj); +} + +#endif diff --git a/examples/styles/lv_example_style_7.c b/examples/styles/lv_example_style_7.c index 97d551a47..dfd77ea67 100644 --- a/examples/styles/lv_example_style_7.c +++ b/examples/styles/lv_example_style_7.c @@ -1,33 +1,21 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES && LV_USE_LABEL +#if LV_BUILD_EXAMPLES && LV_USE_ARC /** - * Using the text style properties + * Using the Arc style properties */ void lv_example_style_7(void) { static lv_style_t style; lv_style_init(&style); - lv_style_set_radius(&style, 5); - lv_style_set_bg_opa(&style, LV_OPA_COVER); - lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); - lv_style_set_border_width(&style, 2); - lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_pad_all(&style, 10); - - lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_text_letter_space(&style, 5); - lv_style_set_text_line_space(&style, 20); - lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE); + lv_style_set_arc_color(&style, lv_palette_main(LV_PALETTE_RED)); + lv_style_set_arc_width(&style, 4); /*Create an object with the new style*/ - lv_obj_t * obj = lv_label_create(lv_scr_act()); + lv_obj_t * obj = lv_arc_create(lv_scr_act()); lv_obj_add_style(obj, &style, 0); - lv_label_set_text(obj, "Text of\n" - "a label"); - lv_obj_center(obj); } - #endif + diff --git a/examples/styles/lv_example_style_8.c b/examples/styles/lv_example_style_8.c index 5eefef9b3..14bf89270 100644 --- a/examples/styles/lv_example_style_8.c +++ b/examples/styles/lv_example_style_8.c @@ -1,24 +1,31 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES && LV_USE_LINE +#if LV_BUILD_EXAMPLES && LV_USE_LABEL /** - * Using the line style properties + * Using the text style properties */ void lv_example_style_8(void) { static lv_style_t style; lv_style_init(&style); - lv_style_set_line_color(&style, lv_palette_main(LV_PALETTE_GREY)); - lv_style_set_line_width(&style, 6); - lv_style_set_line_rounded(&style, true); + lv_style_set_radius(&style, 5); + lv_style_set_bg_opa(&style, LV_OPA_COVER); + lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2)); + lv_style_set_border_width(&style, 2); + lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_pad_all(&style, 10); + + lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE)); + lv_style_set_text_letter_space(&style, 5); + lv_style_set_text_line_space(&style, 20); + lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE); /*Create an object with the new style*/ - lv_obj_t * obj = lv_line_create(lv_scr_act()); + lv_obj_t * obj = lv_label_create(lv_scr_act()); lv_obj_add_style(obj, &style, 0); - - static lv_point_t p[] = {{10, 30}, {30, 50}, {100, 0}}; - lv_line_set_points(obj, p, 3); + lv_label_set_text(obj, "Text of\n" + "a label"); lv_obj_center(obj); } diff --git a/examples/styles/lv_example_style_9.c b/examples/styles/lv_example_style_9.c index 40c1181c8..00141b4b6 100644 --- a/examples/styles/lv_example_style_9.c +++ b/examples/styles/lv_example_style_9.c @@ -1,31 +1,24 @@ #include "../lv_examples.h" -#if LV_BUILD_EXAMPLES && LV_USE_IMG +#if LV_BUILD_EXAMPLES && LV_USE_LINE /** - * Using the Image style properties + * Using the line style properties */ void lv_example_style_9(void) { static lv_style_t style; lv_style_init(&style); - /*Set a background color and a radius*/ - lv_style_set_radius(&style, 5); - lv_style_set_bg_opa(&style, LV_OPA_COVER); - lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3)); - lv_style_set_border_width(&style, 2); - lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); - - lv_style_set_img_recolor(&style, lv_palette_main(LV_PALETTE_BLUE)); - lv_style_set_img_recolor_opa(&style, LV_OPA_50); - lv_style_set_transform_angle(&style, 300); + lv_style_set_line_color(&style, lv_palette_main(LV_PALETTE_GREY)); + lv_style_set_line_width(&style, 6); + lv_style_set_line_rounded(&style, true); /*Create an object with the new style*/ - lv_obj_t * obj = lv_img_create(lv_scr_act()); + lv_obj_t * obj = lv_line_create(lv_scr_act()); lv_obj_add_style(obj, &style, 0); - LV_IMG_DECLARE(img_cogwheel_argb); - lv_img_set_src(obj, &img_cogwheel_argb); + static lv_point_t p[] = {{10, 30}, {30, 50}, {100, 0}}; + lv_line_set_points(obj, p, 3); lv_obj_center(obj); } diff --git a/examples/widgets/chart/index.rst b/examples/widgets/chart/index.rst index 99c5e78b4..eb28f2c06 100644 --- a/examples/widgets/chart/index.rst +++ b/examples/widgets/chart/index.rst @@ -27,16 +27,22 @@ Show the value of the pressed points :language: c Display 1000 data points with zooming and scrolling -""""""""""""""""""""""""""""""""""""""""""""""""""" +"""""""""""""""""""""""""""""""""""""""""""""""""""" .. lv_example:: widgets/chart/lv_example_chart_5 :language: c - Show cursor on the clicked point +Show cursor on the clicked point """"""""""""""""""""""""""""""""""" .. lv_example:: widgets/chart/lv_example_chart_6 :language: c + +Scatter chart +""""""""""""""""""""""""""""""""""" + +.. lv_example:: widgets/chart/lv_example_chart_7 + :language: c MicroPython diff --git a/src/widgets/lv_img.c b/src/widgets/lv_img.c index 5d7386af2..950a58769 100644 --- a/src/widgets/lv_img.c +++ b/src/widgets/lv_img.c @@ -419,6 +419,9 @@ static void lv_img_event(const lv_obj_class_t * class_p, lv_event_t * e) /*Refresh the file name to refresh the symbol text size*/ if(img->src_type == LV_IMG_SRC_SYMBOL) { lv_img_set_src(obj, img->src); + } else { + /*With transformation it might change*/ + lv_obj_refresh_ext_draw_size(obj); } } else if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) { @@ -519,7 +522,6 @@ static void draw_img(lv_event_t * e) int32_t zoom_final = lv_obj_get_style_transform_zoom(obj, LV_PART_MAIN); zoom_final = (zoom_final * img->zoom) >> 8; - const lv_area_t * clip_area = lv_event_get_param(e); if(zoom_final == LV_IMG_ZOOM_NONE) { if(_lv_area_is_in(clip_area, &obj->coords, 0) == false) { @@ -552,10 +554,11 @@ static void draw_img(lv_event_t * e) lv_coord_t obj_w = lv_obj_get_width(obj); lv_coord_t obj_h = lv_obj_get_height(obj); - lv_coord_t pleft = lv_obj_get_style_pad_left(obj, LV_PART_MAIN); - lv_coord_t pright = lv_obj_get_style_pad_right(obj, LV_PART_MAIN); - lv_coord_t ptop = lv_obj_get_style_pad_top(obj, LV_PART_MAIN); - lv_coord_t pbottom = lv_obj_get_style_pad_bottom(obj, LV_PART_MAIN); + lv_coord_t border_width = lv_obj_get_style_border_width(obj, LV_PART_MAIN); + lv_coord_t pleft = lv_obj_get_style_pad_left(obj, LV_PART_MAIN) + border_width; + lv_coord_t pright = lv_obj_get_style_pad_right(obj, LV_PART_MAIN) + border_width; + lv_coord_t ptop = lv_obj_get_style_pad_top(obj, LV_PART_MAIN) + border_width; + lv_coord_t pbottom = lv_obj_get_style_pad_bottom(obj, LV_PART_MAIN) + border_width; lv_point_t bg_pivot; bg_pivot.x = img->pivot.x + pleft; diff --git a/src/widgets/lv_slider.c b/src/widgets/lv_slider.c index 415850445..327fbb2ef 100644 --- a/src/widgets/lv_slider.c +++ b/src/widgets/lv_slider.c @@ -119,8 +119,7 @@ static void lv_slider_event(const lv_obj_class_t * class_p, lv_event_t * e) } } else if(code == LV_EVENT_PRESSED) { - lv_obj_invalidate_area(obj, &slider->right_knob_area); - if(slider->bar.mode == LV_SLIDER_MODE_SYMMETRICAL) lv_obj_invalidate_area(obj, &slider->left_knob_area); + lv_obj_invalidate(obj); lv_point_t p; slider->dragging = true; @@ -245,8 +244,7 @@ static void lv_slider_event(const lv_obj_class_t * class_p, lv_event_t * e) slider->dragging = false; slider->value_to_set = NULL; - lv_obj_invalidate_area(obj, &slider->right_knob_area); - if(slider->bar.mode == LV_SLIDER_MODE_SYMMETRICAL) lv_obj_invalidate_area(obj, &slider->left_knob_area); + lv_obj_invalidate(obj); /*Leave edit mode if released. (No need to wait for LONG_PRESS)*/ lv_group_t * g = lv_obj_get_group(obj);