feat(example) add style examples

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.
+`lv_theme_set_parent(new_theme, base_theme)` extends the `base_theme` with the `new_theme`.
-```c
-/*Declare the style used in the theme*/
-static lv_style_t style_btn;
-...
 
-/*Initialize the styles*/
+There is an example for it below.
-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);
-    }
-}
-```
 
 ## Examples
 
+```eval_rst
+
+.. include:: ../../examples/styles/index.rst
+
+```
 
 ## API
 ```eval_rst

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
 

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

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.

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_5(void);
-//void lv_example_style_6(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

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;
+     static lv_style_t style;
-    lv_style_init(&style);
+     lv_style_init(&style);
-    lv_style_set_radius(&style, 5);
+     lv_style_set_radius(&style, 5);
 
-    /*Make a gradient*/
+     /*Make a gradient*/
-    lv_style_set_bg_opa(&style, LV_OPA_COVER);
+     lv_style_set_width(&style, 150);
-    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3));
+     lv_style_set_height(&style, LV_SIZE_CONTENT);
-    lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE));
-    lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);
 
-    /*Shift the gradient to the bottom*/
+     lv_style_set_pad_ver(&style, 20);
-    lv_style_set_bg_main_stop(&style, 128);
+     lv_style_set_pad_left(&style, 5);
-    lv_style_set_bg_grad_stop(&style, 192);
 
-    /*Create an object with the new style*/
+     lv_style_set_x(&style, lv_pct(50));
-    lv_obj_t * obj = lv_obj_create(lv_scr_act());
+     lv_style_set_y(&style, 80);
-    lv_obj_add_style(obj, &style, 0);
+
-    lv_obj_center(obj);
+     /*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

examples/styles/lv_example_style_10.c

@@ -1,36 +1,40 @@
-typedef int _keep_pedantic_happy;
+#include "../lv_examples.h"
-//#include "../../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_IMG
-//
+
-///**
+/**
-// * Using the transitions style properties
+ * Creating a transition
-// */
+ */
-//void lv_example_style_10(void)
+void lv_example_style_10(void)
-//{
+{
-//    static lv_style_t style;
+    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};
-//    lv_style_init(&style);
+
-//
+    /* A default transition
-//    /*Set a background color and a radius*/
+     * Make it fast (100ms) and start with some delay (200 ms)*/
-//    lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
+    static lv_style_transition_dsc_t trans_def;
-//    lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
+    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);
-//    lv_style_set_bg_color(&style, LV_STATE_DEFAULT, lv_color_grey_lighten_3());
+
-//
+    /* A special transition when going to pressed state
-//    /*Set different background color in pressed state*/
+     * Make it slow (500 ms) but start  without delay*/
-//    lv_style_set_bg_color(&style, LV_STATE_PRESSED, lv_palette_main(LV_PALETTE_GREY));
+    static lv_style_transition_dsc_t trans_pr;
-//
+    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);
-//    /*Set different transition time in default and pressed state
+
-//     *fast press, slower revert to default*/
+    static lv_style_t style_def;
-//    lv_style_set_transition_time(&style, LV_STATE_DEFAULT, 500);
+    lv_style_init(&style_def);
-//    lv_style_set_transition_time(&style, LV_STATE_PRESSED, 200);
+    lv_style_set_transition(&style_def, &trans_def);
-//
+
-//    /*Small delay to make transition more visible*/
+    static lv_style_t style_pr;
-//    lv_style_set_transition_delay(&style, LV_STATE_DEFAULT, 100);
+    lv_style_init(&style_pr);
-//
+    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
-//    /*Add `bg_color` to transitioned properties*/
+    lv_style_set_border_width(&style_pr, 6);
-//    lv_style_set_transition_prop_1(&style, LV_STATE_DEFAULT, LV_STYLE_BG_COLOR);
+    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*/
+
-//    lv_obj_t * obj = lv_obj_create(lv_scr_act());
+    /*Create an object with the new style_pr*/
-//    lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
+    lv_obj_t * obj = lv_obj_create(lv_scr_act());
-//    lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
+    lv_obj_add_style(obj, &style_def, 0);
-//}
+    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
-//
+
+    lv_obj_center(obj);
+}
+
+#endif

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;
+    /*A base style*/
-    lv_style_init(&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));
+    /*Set only the properties that should be different*/
-    lv_style_set_arc_width(&style, 4);
+    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 * label = lv_label_create(obj_base);
-    lv_obj_t * obj = lv_arc_create(lv_scr_act());
+    lv_label_set_text(label, "Base");
-    lv_obj_add_style(obj, &style, 0);
+    lv_obj_center(label);
-    lv_obj_center(obj);
+
+    /*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

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

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

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

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*/
+    /*Make a gradient*/
-    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));
+    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*/
+    /*Shift the gradient to the bottom*/
-    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_bg_main_stop(&style, 128);
-    lv_style_set_border_width(&style, 5);
+    lv_style_set_bg_grad_stop(&style, 192);
-    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());

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*/
+    /*Add border to the bottom+right*/
-    lv_style_set_outline_width(&style, 2);
+    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
-    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_border_width(&style, 5);
-    lv_style_set_outline_pad(&style, 8);
+    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
-

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*/
+    /*Add outline*/
-    lv_style_set_shadow_width(&style, 8);
+    lv_style_set_outline_width(&style, 2);
-    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
-    lv_style_set_shadow_ofs_x(&style, 10);
+    lv_style_set_outline_pad(&style, 8);
-    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());
@@ -27,3 +26,4 @@ void lv_example_style_4(void)
 }
 
 #endif
+

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

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

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_arc_color(&style, lv_palette_main(LV_PALETTE_RED));
-    lv_style_set_bg_opa(&style, LV_OPA_COVER);
+    lv_style_set_arc_width(&style, 4);
-    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);
 
     /*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
+

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_radius(&style, 5);
-    lv_style_set_line_width(&style, 6);
+    lv_style_set_bg_opa(&style, LV_OPA_COVER);
-    lv_style_set_line_rounded(&style, true);
+    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);
-
+    lv_label_set_text(obj, "Text of\n"
-    static lv_point_t p[] = {{10, 30}, {30, 50}, {100, 0}};
+                            "a label");
-    lv_line_set_points(obj, p, 3);
 
     lv_obj_center(obj);
 }

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_line_color(&style, lv_palette_main(LV_PALETTE_GREY));
-    lv_style_set_radius(&style, 5);
+    lv_style_set_line_width(&style, 6);
-    lv_style_set_bg_opa(&style, LV_OPA_COVER);
+    lv_style_set_line_rounded(&style, true);
-    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_t * obj = lv_line_create(lv_scr_act());
     lv_obj_add_style(obj, &style, 0);
 
-    LV_IMG_DECLARE(img_cogwheel_argb);
+    static lv_point_t p[] = {{10, 30}, {30, 50}, {100, 0}};
-    lv_img_set_src(obj, &img_cogwheel_argb);
+    lv_line_set_points(obj, p, 3);
 
     lv_obj_center(obj);
 }

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

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 border_width = lv_obj_get_style_border_width(obj, LV_PART_MAIN);
-        lv_coord_t pright = lv_obj_get_style_pad_right(obj, LV_PART_MAIN);
+        lv_coord_t pleft = lv_obj_get_style_pad_left(obj, LV_PART_MAIN) + border_width;
-        lv_coord_t ptop = lv_obj_get_style_pad_top(obj, LV_PART_MAIN);
+        lv_coord_t pright = lv_obj_get_style_pad_right(obj, LV_PART_MAIN) + border_width;
-        lv_coord_t pbottom = lv_obj_get_style_pad_bottom(obj, LV_PART_MAIN);
+        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;

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);
+        lv_obj_invalidate(obj);
-        if(slider->bar.mode == LV_SLIDER_MODE_SYMMETRICAL) lv_obj_invalidate_area(obj, &slider->left_knob_area);
 
         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);
+        lv_obj_invalidate(obj);
-        if(slider->bar.mode == LV_SLIDER_MODE_SYMMETRICAL) lv_obj_invalidate_area(obj, &slider->left_knob_area);
 
         /*Leave edit mode if released. (No need to wait for LONG_PRESS)*/
         lv_group_t * g   = lv_obj_get_group(obj);