feat(scale): add additional style properties (#6649)

Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>

docs/overview/style-props.rst

@@ -194,6 +194,20 @@ translate_y
 
 Move the object with this value in Y direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height.
 
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+translate_radial
+~~~~~~~~~~~~~~~~
+
+Move the object around the centre of the parent object (e.g. around the circumference of a scale)
+
 .. raw:: html
 
   <ul>
@@ -390,6 +404,20 @@ Sets the padding between the columns. Used by the layouts.
   <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
   </ul>
 
+pad_radial
+~~~~~~~~~~
+
+Pad the text labels away from the scale ticks/remainder of the LV_PART_
+
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
 Margin
 ------
 
@@ -1201,6 +1229,20 @@ radius
 
 Set the radius on every corner. The value is interpreted in pixel (>= 0) or `LV_RADIUS_CIRCLE` for max. radius
 
+.. raw:: html
+
+  <ul>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+  <li style='display:inline-block; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+  </ul>
+
+radial_offset
+~~~~~~~~~~~~~
+
+Move the start point of the object (e.g. scale tick) radially
+
 .. raw:: html
 
   <ul>

docs/widgets/scale.rst

@@ -18,7 +18,7 @@ The scale widget is divided in the following three parts:
 
 - :cpp:enumerator:`LV_PART_MAIN` Main line. See blue line in the example image.
 - :cpp:enumerator:`LV_PART_ITEMS` Minor ticks. See red minor ticks in the example image.
-- :cpp:enumerator:`LV_PART_INDICATOR` Major ticks and its labels (if enabled). 
+- :cpp:enumerator:`LV_PART_INDICATOR` Major ticks and its labels (if enabled).
   See pink labels and green major ticks in the example image.
 
 .. image:: /misc/scale.png
@@ -49,14 +49,26 @@ This is an scale with the ticks being drawn at the top of the main line:
 Configure ticks
 ---------------
 
-Set the number of total ticks with :cpp:expr:`lv_scale_set_total_tick_count(scale, total_tick_count)` 
+Set the number of total ticks with :cpp:expr:`lv_scale_set_total_tick_count(scale, total_tick_count)`
 and then configure the major tick being every Nth ticks with :cpp:expr:`lv_scale_set_major_tick_every(scale, nth_tick)`.
 
 Labels on major ticks can be configured with :cpp:expr:`lv_scale_set_label_show(scale, show_label)`,
 set `show_label` to true if labels should be drawn, :cpp:expr:`false` to hide them.
 If instead of a numerical value in the major ticks a text is required they can be set
 with :cpp:expr:`lv_scale_set_text_src(scale, custom_labels)` using ``NULL`` as the last element,
-i.e. :cpp:expr:`static char * custom_labels[3] = {"One", "Two", NULL}`.
+i.e. :cpp:expr:`static char * custom_labels[3] = {"One", "Two", NULL};`.
+It's possible to have the labels automatically rotated to match the ticks (only for RADIAL scales) using
+:cpp:expr:`lv_obj_set_style_transform_rotation(scale, LV_SCALE_LABEL_ROTATE_MATCH_TICKS, LV_PART_INDICATOR);`
+Or rotated a fixed amount (on any scale type) - here for 20 degrees:
+:cpp:expr:`lv_obj_set_style_transform_rotation(scale, 20, LV_PART_INDICATOR);`
+Or both at the same time
+:cpp:expr:`lv_obj_set_style_transform_rotation(scale, LV_SCALE_LABEL_ROTATE_MATCH_TICKS + 200, LV_PART_INDICATOR);`
+Some labels of the scale might be drawn upside down (to match the tick) if the scale includes a certain angle range.
+If you don't want this, to automatically rotate the labels to keep them upright, an additional flag can be used.
+Labels that would be upside down are then rotated 180
+:cpp:expr:`lv_obj_set_style_transform_rotation(scale, LV_SCALE_LABEL_ROTATE_MATCH_TICKS | LV_SCALE_LABEL_ROTATE_KEEP_UPRIGHT, LV_PART_INDICATOR);`
+Labels can also be moved a fixed distance in X and Y using e.g.
+:cpp:expr:`lv_obj_set_style_translate_x(scale, 10, LV_PART_INDICATOR);`
 
 **NOTE:** The major tick value is calculated with the :cpp:expr:`lv_map` API (when not setting the custom labels),
 this calculation takes into consideration the total tick number and the scale range, so the label drawn can present rounding errors
@@ -64,23 +76,30 @@ when the calculated value is a float number.
 
 The length of the ticks can be configured with the length style property on the :cpp:enumerator:`LV_PART_INDICATOR`
 for major ticks and :cpp:enumerator:`LV_PART_ITEMS` for minor ticks, for example with local style:
-:cpp:expr:`lv_obj_set_style_length(scale, 5, LV_PART_INDICATOR)` for major ticks
+:cpp:expr:`lv_obj_set_style_length(scale, 5, LV_PART_INDICATOR);` for major ticks
-and :cpp:expr:`lv_obj_set_style_length(scale, 5, LV_PART_ITEMS)` for minor ticks.
+and :cpp:expr:`lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);` for minor ticks. The ticks can be
+padded in either direction (outwards or inwards) for RADIAL scales only with:
+:cpp:expr:`lv_obj_set_style_radial_offset(scale, 5, LV_PART_INDICATOR);` for major ticks and
+:cpp:expr:`lv_obj_set_style_radial_offset(scale, 5, LV_PART_ITEMS);` for minor .
+Using length and radial offset together allows total control of the tick position.
+i.e. :cpp:expr:`static char * custom_labels[3] = {"One", "Two", NULL}`.
+It is also possible to offset the labels from the major ticks (either positive or negative) using 
+:cpp:expr:`lv_obj_set_style_pad_radial(scale, 5, LV_PART_INDICATOR);`
 
 Sections
 --------
 
-A section is the space between a minor and a major range. They can be created with :cpp:expr:`lv_scale_add_section(scale)` 
+A section is the space between a minor and a major range. They can be created with :cpp:expr:`lv_scale_add_section(scale)`
 and it handles back an :cpp:type:`lv_scale_section_t` pointer.
 
-The range of the section is configured with :cpp:expr:`lv_scale_section_set_range(section, minor_range, major_range)`. 
+The range of the section is configured with :cpp:expr:`lv_scale_section_set_range(section, minor_range, major_range)`.
-The style of each of the three parts of the scale section can be set with 
+The style of each of the three parts of the scale section can be set with
-:cpp:expr:`lv_scale_section_set_style(section, PART, style_pointer)`, where `PART` can be 
+:cpp:expr:`lv_scale_section_set_style(section, PART, style_pointer)`, where `PART` can be
-:cpp:enumerator:`LV_PART_MAIN`, :cpp:enumerator:`LV_PART_ITEMS` or :cpp:enumerator:`LV_PART_INDICATOR`, 
+:cpp:enumerator:`LV_PART_MAIN`, :cpp:enumerator:`LV_PART_ITEMS` or :cpp:enumerator:`LV_PART_INDICATOR`,
 :cpp:expr:`style_pointer` should point to a global or static :cpp:type:`lv_style_t` variable.
 
 For labels the following properties can be configured:
-:cpp:func:`lv_style_set_text_font`, :cpp:func:`lv_style_set_text_color`, 
+:cpp:func:`lv_style_set_text_font`, :cpp:func:`lv_style_set_text_color`,
 :cpp:func:`lv_style_set_text_letter_space`, :cpp:func:`lv_style_set_text_opa`.
 
 For lines (main line, major and minor ticks) the following properties can be configured:

examples/widgets/lv_example_widgets.h

@@ -123,6 +123,8 @@ void lv_example_scale_4(void);
 void lv_example_scale_5(void);
 void lv_example_scale_6(void);
 void lv_example_scale_7(void);
+void lv_example_scale_8(void);
+void lv_example_scale_9(void);
 
 void lv_example_slider_1(void);
 void lv_example_slider_2(void);

examples/widgets/scale/index.rst

@@ -22,8 +22,8 @@ A round scale with section and custom styling
 .. lv_example:: widgets/scale/lv_example_scale_4
   :language: c
 
-An scale with section and custom styling
+A scale with section and custom styling
-----------------------------------------
+"""""""""""""""""""""""""""""""""""""""
 
 .. lv_example:: widgets/scale/lv_example_scale_5
   :language: c
@@ -40,3 +40,14 @@ Customizing scale major tick label color with `LV_EVENT_DRAW_TASK_ADDED` event
 .. lv_example:: widgets/scale/lv_example_scale_7
   :language: c
 
+A round scale with labels rotated and translated
+""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/scale/lv_example_scale_8
+  :language: c
+
+A horizontal scale with labels rotated and translated
+"""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/scale/lv_example_scale_9
+  :language: c

examples/widgets/scale/lv_example_scale_8.c

@@ -0,0 +1,47 @@
+#include "../../lv_examples.h"
+#if LV_USE_SCALE && LV_BUILD_EXAMPLES
+
+
+/**
+ * A simple round scale with label/tick translation
+ */
+void lv_example_scale_8(void)
+{
+    lv_obj_t * scale_line = lv_scale_create(lv_screen_active());
+    lv_obj_set_size(scale_line, 150, 150);
+    lv_scale_set_mode(scale_line, LV_SCALE_MODE_ROUND_INNER);
+    lv_obj_set_style_bg_opa(scale_line, LV_OPA_COVER, 0);
+    lv_obj_set_style_bg_color(scale_line, lv_palette_lighten(LV_PALETTE_RED, 5), 0);
+    lv_obj_set_style_radius(scale_line, LV_RADIUS_CIRCLE, 0);
+    lv_obj_align(scale_line, LV_ALIGN_LEFT_MID, LV_PCT(2), 0);
+
+    /*Set the texts' and major ticks' style (make the texts rotated)*/
+    lv_obj_set_style_transform_rotation(scale_line, LV_SCALE_LABEL_ROTATE_MATCH_TICKS | LV_SCALE_LABEL_ROTATE_KEEP_UPRIGHT,
+                                        LV_PART_INDICATOR);
+    lv_obj_set_style_translate_x(scale_line, 10, LV_PART_INDICATOR);
+    lv_obj_set_style_length(scale_line, 15, LV_PART_INDICATOR);
+    lv_obj_set_style_radial_offset(scale_line, 10, LV_PART_INDICATOR);
+
+    /*Set the style of the minor ticks*/
+    lv_obj_set_style_length(scale_line, 10, LV_PART_ITEMS);
+    lv_obj_set_style_radial_offset(scale_line, 5, LV_PART_ITEMS);
+    lv_obj_set_style_line_opa(scale_line, LV_OPA_50, LV_PART_ITEMS);
+
+    lv_scale_set_label_show(scale_line, true);
+
+    lv_scale_set_total_tick_count(scale_line, 31);
+    lv_scale_set_major_tick_every(scale_line, 5);
+
+    lv_scale_set_range(scale_line, 10, 40);
+
+    lv_scale_set_angle_range(scale_line, 270);
+    lv_scale_set_rotation(scale_line, 135);
+
+    lv_obj_t * needle_line = lv_line_create(scale_line);
+
+    lv_obj_set_style_line_width(needle_line, 3, LV_PART_MAIN);
+    lv_obj_set_style_line_rounded(needle_line, true, LV_PART_MAIN);
+    lv_scale_set_line_needle_value(scale_line, needle_line, 60, 33);
+}
+
+#endif

examples/widgets/scale/lv_example_scale_9.c

@@ -0,0 +1,27 @@
+#include "../../lv_examples.h"
+#if LV_USE_SCALE && LV_BUILD_EXAMPLES
+
+/**
+ * A simple horizontal scale with transforms
+ */
+void lv_example_scale_9(void)
+{
+    lv_obj_t * scale = lv_scale_create(lv_screen_active());
+    lv_obj_set_size(scale, 200, 100);
+    lv_scale_set_mode(scale, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
+    lv_obj_center(scale);
+
+    lv_scale_set_label_show(scale, true);
+    lv_obj_set_style_transform_rotation(scale, 450, LV_PART_INDICATOR);
+    lv_obj_set_style_length(scale, 30, LV_PART_INDICATOR);
+    lv_obj_set_style_translate_x(scale, 5, LV_PART_INDICATOR);
+
+    lv_scale_set_total_tick_count(scale, 31);
+    lv_scale_set_major_tick_every(scale, 5);
+
+    lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);
+    lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);
+    lv_scale_set_range(scale, 10, 40);
+}
+
+#endif

scripts/style_api_gen.py

@@ -62,6 +62,10 @@ props = [
  'style_type': 'num',   'var_type': 'int32_t',  'default':0, 'inherited': 0, 'layout': 1, 'ext_draw': 0,
  'dsc': "Move the object with this value in Y direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height." },
 
+{'name': 'TRANSLATE_RADIAL',
+'style_type': 'num',   'var_type': 'int32_t' ,  'default':0, 'inherited': 0, 'layout': 1, 'ext_draw': 0,
+ 'dsc': "Move the object around the centre of the parent object (e.g. around the circumference of a scale)"},
+
 {'name': 'TRANSFORM_SCALE_X',
  'style_type': 'num',   'var_type': 'int32_t',  'default':0, 'inherited': 0, 'layout': 1, 'ext_draw': 1,
  'dsc': "Zoom an objects horizontally. The value 256 (or `LV_SCALE_NONE`) means normal size, 128 half size, 512 double size, and so on" },
@@ -115,6 +119,10 @@ props = [
  'style_type': 'num',   'var_type': 'int32_t', 'default':0, 'inherited': 0, 'layout': 1, 'ext_draw': 0,
  'dsc': "Sets the padding between the columns. Used by the layouts."},
 
+{'name': 'PAD_RADIAL',
+'style_type': 'num',   'var_type': 'int32_t' ,  'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "Pad the text labels away from the scale ticks/remainder of the LV_PART_"},
+
 {'section': 'Margin', 'dsc' : "Properties to describe spacing around an object. Very similar to the margin properties in HTML."},
 {'name': 'MARGIN_TOP',
  'style_type': 'num',   'var_type': 'int32_t',  'default':0, 'inherited': 0, 'layout': 1, 'ext_draw': 0,
@@ -345,6 +353,10 @@ props = [
  'style_type': 'num', 'var_type': 'int32_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
  'dsc': "Set the radius on every corner. The value is interpreted in pixel (>= 0) or `LV_RADIUS_CIRCLE` for max. radius"},
 
+{'name': 'RADIAL_OFFSET',
+'style_type': 'num',   'var_type': 'int32_t' ,  'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
+ 'dsc': "Move the start point of the object (e.g. scale tick) radially"},
+
 {'name': 'CLIP_CORNER',
  'style_type': 'num',   'var_type': 'bool',  'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
  'dsc': "Enable to clip the overflowed content on the rounded corner. Can be `true` or `false`." },

src/core/lv_obj_style_gen.c

@@ -122,6 +122,14 @@ void lv_obj_set_style_translate_y(lv_obj_t * obj, int32_t value, lv_style_select
     lv_obj_set_local_style_prop(obj, LV_STYLE_TRANSLATE_Y, v, selector);
 }
 
+void lv_obj_set_style_translate_radial(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_TRANSLATE_RADIAL, v, selector);
+}
+
 void lv_obj_set_style_transform_scale_x(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
 {
     lv_style_value_t v = {
@@ -226,6 +234,14 @@ void lv_obj_set_style_pad_column(lv_obj_t * obj, int32_t value, lv_style_selecto
     lv_obj_set_local_style_prop(obj, LV_STYLE_PAD_COLUMN, v, selector);
 }
 
+void lv_obj_set_style_pad_radial(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_PAD_RADIAL, v, selector);
+}
+
 void lv_obj_set_style_margin_top(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
 {
     lv_style_value_t v = {
@@ -666,6 +682,14 @@ void lv_obj_set_style_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t
     lv_obj_set_local_style_prop(obj, LV_STYLE_RADIUS, v, selector);
 }
 
+void lv_obj_set_style_radial_offset(lv_obj_t * obj, int32_t value, lv_style_selector_t selector)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_obj_set_local_style_prop(obj, LV_STYLE_RADIAL_OFFSET, v, selector);
+}
+
 void lv_obj_set_style_clip_corner(lv_obj_t * obj, bool value, lv_style_selector_t selector)
 {
     lv_style_value_t v = {

src/core/lv_obj_style_gen.h

@@ -103,6 +103,12 @@ static inline int32_t lv_obj_get_style_translate_y(const lv_obj_t * obj, lv_part
     return (int32_t)v.num;
 }
 
+static inline int32_t lv_obj_get_style_translate_radial(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_TRANSLATE_RADIAL);
+    return (int32_t)v.num;
+}
+
 static inline int32_t lv_obj_get_style_transform_scale_x(const lv_obj_t * obj, lv_part_t part)
 {
     lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_TRANSFORM_SCALE_X);
@@ -181,6 +187,12 @@ static inline int32_t lv_obj_get_style_pad_column(const lv_obj_t * obj, lv_part_
     return (int32_t)v.num;
 }
 
+static inline int32_t lv_obj_get_style_pad_radial(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_PAD_RADIAL);
+    return (int32_t)v.num;
+}
+
 static inline int32_t lv_obj_get_style_margin_top(const lv_obj_t * obj, lv_part_t part)
 {
     lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_MARGIN_TOP);
@@ -231,8 +243,7 @@ static inline lv_color_t lv_obj_get_style_bg_grad_color(const lv_obj_t * obj, lv
 
 static inline lv_color_t lv_obj_get_style_bg_grad_color_filtered(const lv_obj_t * obj, lv_part_t part)
 {
-    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, LV_STYLE_BG_GRAD_COLOR));
-                                                                                          LV_STYLE_BG_GRAD_COLOR));
     return v.color;
 }
 
@@ -292,8 +303,7 @@ static inline lv_color_t lv_obj_get_style_bg_image_recolor(const lv_obj_t * obj,
 
 static inline lv_color_t lv_obj_get_style_bg_image_recolor_filtered(const lv_obj_t * obj, lv_part_t part)
 {
-    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, LV_STYLE_BG_IMAGE_RECOLOR));
-                                                                                          LV_STYLE_BG_IMAGE_RECOLOR));
     return v.color;
 }
 
@@ -317,8 +327,7 @@ static inline lv_color_t lv_obj_get_style_border_color(const lv_obj_t * obj, lv_
 
 static inline lv_color_t lv_obj_get_style_border_color_filtered(const lv_obj_t * obj, lv_part_t part)
 {
-    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, LV_STYLE_BORDER_COLOR));
-                                                                                          LV_STYLE_BORDER_COLOR));
     return v.color;
 }
 
@@ -360,8 +369,7 @@ static inline lv_color_t lv_obj_get_style_outline_color(const lv_obj_t * obj, lv
 
 static inline lv_color_t lv_obj_get_style_outline_color_filtered(const lv_obj_t * obj, lv_part_t part)
 {
-    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, LV_STYLE_OUTLINE_COLOR));
-                                                                                          LV_STYLE_OUTLINE_COLOR));
     return v.color;
 }
 
@@ -409,8 +417,7 @@ static inline lv_color_t lv_obj_get_style_shadow_color(const lv_obj_t * obj, lv_
 
 static inline lv_color_t lv_obj_get_style_shadow_color_filtered(const lv_obj_t * obj, lv_part_t part)
 {
-    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, LV_STYLE_SHADOW_COLOR));
-                                                                                          LV_STYLE_SHADOW_COLOR));
     return v.color;
 }
 
@@ -434,8 +441,7 @@ static inline lv_color_t lv_obj_get_style_image_recolor(const lv_obj_t * obj, lv
 
 static inline lv_color_t lv_obj_get_style_image_recolor_filtered(const lv_obj_t * obj, lv_part_t part)
 {
-    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part,
+    lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, LV_STYLE_IMAGE_RECOLOR));
-                                                                                          LV_STYLE_IMAGE_RECOLOR));
     return v.color;
 }
 
@@ -577,6 +583,12 @@ static inline int32_t lv_obj_get_style_radius(const lv_obj_t * obj, lv_part_t pa
     return (int32_t)v.num;
 }
 
+static inline int32_t lv_obj_get_style_radial_offset(const lv_obj_t * obj, lv_part_t part)
+{
+    lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_RADIAL_OFFSET);
+    return (int32_t)v.num;
+}
+
 static inline bool lv_obj_get_style_clip_corner(const lv_obj_t * obj, lv_part_t part)
 {
     lv_style_value_t v = lv_obj_get_style_prop(obj, part, LV_STYLE_CLIP_CORNER);
@@ -765,6 +777,7 @@ void lv_obj_set_style_transform_width(lv_obj_t * obj, int32_t value, lv_style_se
 void lv_obj_set_style_transform_height(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_translate_x(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_translate_y(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_translate_radial(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_transform_scale_x(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_transform_scale_y(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_transform_rotation(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
@@ -778,6 +791,7 @@ void lv_obj_set_style_pad_left(lv_obj_t * obj, int32_t value, lv_style_selector_
 void lv_obj_set_style_pad_right(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_pad_row(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_pad_column(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_pad_radial(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_margin_top(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_margin_bottom(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_margin_left(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
@@ -833,6 +847,7 @@ void lv_obj_set_style_text_line_space(lv_obj_t * obj, int32_t value, lv_style_se
 void lv_obj_set_style_text_decor(lv_obj_t * obj, lv_text_decor_t value, lv_style_selector_t selector);
 void lv_obj_set_style_text_align(lv_obj_t * obj, lv_text_align_t value, lv_style_selector_t selector);
 void lv_obj_set_style_radius(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
+void lv_obj_set_style_radial_offset(lv_obj_t * obj, int32_t value, lv_style_selector_t selector);
 void lv_obj_set_style_clip_corner(lv_obj_t * obj, bool value, lv_style_selector_t selector);
 void lv_obj_set_style_opa(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
 void lv_obj_set_style_opa_layered(lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

src/misc/lv_style.h

@@ -203,6 +203,8 @@ enum {
     LV_STYLE_ALIGN                  = 10,
 
     LV_STYLE_RADIUS                 = 12,
+    LV_STYLE_RADIAL_OFFSET          = 13,
+    LV_STYLE_PAD_RADIAL             = 14,
 
     /*Group 1*/
     LV_STYLE_PAD_TOP                = 16,
@@ -311,6 +313,7 @@ enum {
     LV_STYLE_TRANSFORM_SKEW_Y       = 114,
     LV_STYLE_BITMAP_MASK_SRC        = 115,
     LV_STYLE_ROTARY_SENSITIVITY     = 116,
+    LV_STYLE_TRANSLATE_RADIAL       = 117,
 
     LV_STYLE_FLEX_FLOW              = 125,
     LV_STYLE_FLEX_MAIN_PLACE        = 126,

src/misc/lv_style_gen.c

@@ -122,6 +122,14 @@ void lv_style_set_translate_y(lv_style_t * style, int32_t value)
     lv_style_set_prop(style, LV_STYLE_TRANSLATE_Y, v);
 }
 
+void lv_style_set_translate_radial(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_TRANSLATE_RADIAL, v);
+}
+
 void lv_style_set_transform_scale_x(lv_style_t * style, int32_t value)
 {
     lv_style_value_t v = {
@@ -226,6 +234,14 @@ void lv_style_set_pad_column(lv_style_t * style, int32_t value)
     lv_style_set_prop(style, LV_STYLE_PAD_COLUMN, v);
 }
 
+void lv_style_set_pad_radial(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_PAD_RADIAL, v);
+}
+
 void lv_style_set_margin_top(lv_style_t * style, int32_t value)
 {
     lv_style_value_t v = {
@@ -666,6 +682,14 @@ void lv_style_set_radius(lv_style_t * style, int32_t value)
     lv_style_set_prop(style, LV_STYLE_RADIUS, v);
 }
 
+void lv_style_set_radial_offset(lv_style_t * style, int32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_RADIAL_OFFSET, v);
+}
+
 void lv_style_set_clip_corner(lv_style_t * style, bool value)
 {
     lv_style_value_t v = {

src/misc/lv_style_gen.h

@@ -28,6 +28,7 @@ void lv_style_set_transform_width(lv_style_t * style, int32_t value);
 void lv_style_set_transform_height(lv_style_t * style, int32_t value);
 void lv_style_set_translate_x(lv_style_t * style, int32_t value);
 void lv_style_set_translate_y(lv_style_t * style, int32_t value);
+void lv_style_set_translate_radial(lv_style_t * style, int32_t value);
 void lv_style_set_transform_scale_x(lv_style_t * style, int32_t value);
 void lv_style_set_transform_scale_y(lv_style_t * style, int32_t value);
 void lv_style_set_transform_rotation(lv_style_t * style, int32_t value);
@@ -41,6 +42,7 @@ void lv_style_set_pad_left(lv_style_t * style, int32_t value);
 void lv_style_set_pad_right(lv_style_t * style, int32_t value);
 void lv_style_set_pad_row(lv_style_t * style, int32_t value);
 void lv_style_set_pad_column(lv_style_t * style, int32_t value);
+void lv_style_set_pad_radial(lv_style_t * style, int32_t value);
 void lv_style_set_margin_top(lv_style_t * style, int32_t value);
 void lv_style_set_margin_bottom(lv_style_t * style, int32_t value);
 void lv_style_set_margin_left(lv_style_t * style, int32_t value);
@@ -96,6 +98,7 @@ void lv_style_set_text_line_space(lv_style_t * style, int32_t value);
 void lv_style_set_text_decor(lv_style_t * style, lv_text_decor_t value);
 void lv_style_set_text_align(lv_style_t * style, lv_text_align_t value);
 void lv_style_set_radius(lv_style_t * style, int32_t value);
+void lv_style_set_radial_offset(lv_style_t * style, int32_t value);
 void lv_style_set_clip_corner(lv_style_t * style, bool value);
 void lv_style_set_opa(lv_style_t * style, lv_opa_t value);
 void lv_style_set_opa_layered(lv_style_t * style, lv_opa_t value);
@@ -201,6 +204,11 @@ void lv_style_set_grid_cell_row_span(lv_style_t * style, int32_t value);
         .prop = LV_STYLE_TRANSLATE_Y, .value = { .num = (int32_t)val } \
     }
 
+#define LV_STYLE_CONST_TRANSLATE_RADIAL(val) \
+    { \
+        .prop = LV_STYLE_TRANSLATE_RADIAL, .value = { .num = (int32_t)val } \
+    }
+
 #define LV_STYLE_CONST_TRANSFORM_SCALE_X(val) \
     { \
         .prop = LV_STYLE_TRANSFORM_SCALE_X, .value = { .num = (int32_t)val } \
@@ -266,6 +274,11 @@ void lv_style_set_grid_cell_row_span(lv_style_t * style, int32_t value);
         .prop = LV_STYLE_PAD_COLUMN, .value = { .num = (int32_t)val } \
     }
 
+#define LV_STYLE_CONST_PAD_RADIAL(val) \
+    { \
+        .prop = LV_STYLE_PAD_RADIAL, .value = { .num = (int32_t)val } \
+    }
+
 #define LV_STYLE_CONST_MARGIN_TOP(val) \
     { \
         .prop = LV_STYLE_MARGIN_TOP, .value = { .num = (int32_t)val } \
@@ -541,6 +554,11 @@ void lv_style_set_grid_cell_row_span(lv_style_t * style, int32_t value);
         .prop = LV_STYLE_RADIUS, .value = { .num = (int32_t)val } \
     }
 
+#define LV_STYLE_CONST_RADIAL_OFFSET(val) \
+    { \
+        .prop = LV_STYLE_RADIAL_OFFSET, .value = { .num = (int32_t)val } \
+    }
+
 #define LV_STYLE_CONST_CLIP_CORNER(val) \
     { \
         .prop = LV_STYLE_CLIP_CORNER, .value = { .num = (int32_t)val } \

src/widgets/property/lv_obj_property_names.h

@@ -16,7 +16,7 @@
     extern const lv_property_name_t lv_label_property_names[4];
     extern const lv_property_name_t lv_obj_property_names[73];
     extern const lv_property_name_t lv_roller_property_names[3];
-    extern const lv_property_name_t lv_style_property_names[112];
+    extern const lv_property_name_t lv_style_property_names[115];
     extern const lv_property_name_t lv_textarea_property_names[15];
 #endif
 #endif

src/widgets/property/lv_style_properties.c

@@ -14,7 +14,7 @@
  * Generated code from properties.py
  */
 /* *INDENT-OFF* */
-const lv_property_name_t lv_style_property_names[112] = {
+const lv_property_name_t lv_style_property_names[115] = {
     {"align",                  LV_PROPERTY_STYLE_ALIGN,},
     {"anim",                   LV_PROPERTY_STYLE_ANIM,},
     {"anim_duration",          LV_PROPERTY_STYLE_ANIM_DURATION,},
@@ -93,10 +93,12 @@ const lv_property_name_t lv_style_property_names[112] = {
     {"pad_bottom",             LV_PROPERTY_STYLE_PAD_BOTTOM,},
     {"pad_column",             LV_PROPERTY_STYLE_PAD_COLUMN,},
     {"pad_left",               LV_PROPERTY_STYLE_PAD_LEFT,},
+    {"pad_radial",             LV_PROPERTY_STYLE_PAD_RADIAL,},
     {"pad_right",              LV_PROPERTY_STYLE_PAD_RIGHT,},
     {"pad_row",                LV_PROPERTY_STYLE_PAD_ROW,},
     {"pad_top",                LV_PROPERTY_STYLE_PAD_TOP,},
     {"prop_inv",               LV_PROPERTY_STYLE_PROP_INV,},
+    {"radial_offset",          LV_PROPERTY_STYLE_RADIAL_OFFSET,},
     {"radius",                 LV_PROPERTY_STYLE_RADIUS,},
     {"rotary_sensitivity",     LV_PROPERTY_STYLE_ROTARY_SENSITIVITY,},
     {"shadow_color",           LV_PROPERTY_STYLE_SHADOW_COLOR,},
@@ -122,6 +124,7 @@ const lv_property_name_t lv_style_property_names[112] = {
     {"transform_skew_y",       LV_PROPERTY_STYLE_TRANSFORM_SKEW_Y,},
     {"transform_width",        LV_PROPERTY_STYLE_TRANSFORM_WIDTH,},
     {"transition",             LV_PROPERTY_STYLE_TRANSITION,},
+    {"translate_radial",       LV_PROPERTY_STYLE_TRANSLATE_RADIAL,},
     {"translate_x",            LV_PROPERTY_STYLE_TRANSLATE_X,},
     {"translate_y",            LV_PROPERTY_STYLE_TRANSLATE_Y,},
     {"width",                  LV_PROPERTY_STYLE_WIDTH,},

src/widgets/property/lv_style_properties.h

@@ -90,10 +90,12 @@ enum {
     LV_PROPERTY_ID(STYLE, PAD_BOTTOM,               LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_BOTTOM),
     LV_PROPERTY_ID(STYLE, PAD_COLUMN,               LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_COLUMN),
     LV_PROPERTY_ID(STYLE, PAD_LEFT,                 LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_LEFT),
+    LV_PROPERTY_ID(STYLE, PAD_RADIAL,               LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_RADIAL),
     LV_PROPERTY_ID(STYLE, PAD_RIGHT,                LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_RIGHT),
     LV_PROPERTY_ID(STYLE, PAD_ROW,                  LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_ROW),
     LV_PROPERTY_ID(STYLE, PAD_TOP,                  LV_PROPERTY_TYPE_INT,        LV_STYLE_PAD_TOP),
     LV_PROPERTY_ID(STYLE, PROP_INV,                 LV_PROPERTY_TYPE_INT,        LV_STYLE_PROP_INV),
+    LV_PROPERTY_ID(STYLE, RADIAL_OFFSET,            LV_PROPERTY_TYPE_INT,        LV_STYLE_RADIAL_OFFSET),
     LV_PROPERTY_ID(STYLE, RADIUS,                   LV_PROPERTY_TYPE_INT,        LV_STYLE_RADIUS),
     LV_PROPERTY_ID(STYLE, ROTARY_SENSITIVITY,       LV_PROPERTY_TYPE_INT,        LV_STYLE_ROTARY_SENSITIVITY),
     LV_PROPERTY_ID(STYLE, SHADOW_COLOR,             LV_PROPERTY_TYPE_COLOR,      LV_STYLE_SHADOW_COLOR),
@@ -119,6 +121,7 @@ enum {
     LV_PROPERTY_ID(STYLE, TRANSFORM_SKEW_Y,         LV_PROPERTY_TYPE_INT,        LV_STYLE_TRANSFORM_SKEW_Y),
     LV_PROPERTY_ID(STYLE, TRANSFORM_WIDTH,          LV_PROPERTY_TYPE_INT,        LV_STYLE_TRANSFORM_WIDTH),
     LV_PROPERTY_ID(STYLE, TRANSITION,               LV_PROPERTY_TYPE_INT,        LV_STYLE_TRANSITION),
+    LV_PROPERTY_ID(STYLE, TRANSLATE_RADIAL,         LV_PROPERTY_TYPE_INT,        LV_STYLE_TRANSLATE_RADIAL),
     LV_PROPERTY_ID(STYLE, TRANSLATE_X,              LV_PROPERTY_TYPE_INT,        LV_STYLE_TRANSLATE_X),
     LV_PROPERTY_ID(STYLE, TRANSLATE_Y,              LV_PROPERTY_TYPE_INT,        LV_STYLE_TRANSLATE_Y),
     LV_PROPERTY_ID(STYLE, WIDTH,                    LV_PROPERTY_TYPE_INT,        LV_STYLE_WIDTH),

src/widgets/scale/lv_scale.c

@@ -636,11 +636,23 @@ static void scale_draw_label(lv_obj_t * obj, lv_event_t * event, lv_draw_label_d
         label_dsc->text_local = 1;
     }
 
+    int32_t translate_x = lv_obj_get_style_translate_x(obj, LV_PART_INDICATOR);
+    int32_t translate_y = lv_obj_get_style_translate_y(obj, LV_PART_INDICATOR);
+    int32_t label_rotation = lv_obj_get_style_transform_rotation(obj, LV_PART_INDICATOR);
+    int32_t translate_rotation = 0;
+
     if((LV_SCALE_MODE_VERTICAL_LEFT == scale->mode || LV_SCALE_MODE_VERTICAL_RIGHT == scale->mode)
        || (LV_SCALE_MODE_HORIZONTAL_BOTTOM == scale->mode || LV_SCALE_MODE_HORIZONTAL_TOP == scale->mode)) {
-        scale_get_label_coords(obj, label_dsc, tick_point_b, &label_coords);
+        lv_point_t label_origin;
+        label_origin.x = tick_point_b->x + translate_x;
+        label_origin.y = tick_point_b->y + translate_y;
+        scale_get_label_coords(obj, label_dsc, &label_origin, &label_coords);
+        label_rotation = (label_rotation & LV_SCALE_ROTATION_ANGLE_MASK);
     }
     else if(LV_SCALE_MODE_ROUND_OUTER == scale->mode || LV_SCALE_MODE_ROUND_INNER == scale->mode) {
+        translate_rotation = lv_obj_get_style_translate_radial(obj, LV_PART_INDICATOR);
+        uint32_t label_gap = lv_obj_get_style_pad_radial(obj, LV_PART_INDICATOR) + LV_SCALE_DEFAULT_LABEL_GAP;
+
         lv_area_t scale_area;
         lv_obj_get_content_coords(obj, &scale_area);
 
@@ -651,10 +663,10 @@ static void scale_draw_label(lv_obj_t * obj, lv_event_t * event, lv_draw_label_d
         center_point.y = scale_area.y1 + radius_edge;
 
         const int32_t major_len = lv_obj_get_style_length(obj, LV_PART_INDICATOR);
-        uint32_t label_gap = LV_SCALE_DEFAULT_LABEL_GAP; /* TODO: Add to style properties */
 
         /* Also take into consideration the letter space of the style */
-        int32_t angle_upscale = ((tick_idx * scale->angle_range) * 10U) / (scale->total_tick_count - 1);
+        int32_t angle_upscale = ((tick_idx * scale->angle_range) * 10U) / (scale->total_tick_count - 1) +
+                                (translate_rotation * 10U);
         angle_upscale += scale->rotation * 10U;
 
         uint32_t radius_text = 0;
@@ -667,8 +679,28 @@ static void scale_draw_label(lv_obj_t * obj, lv_event_t * event, lv_draw_label_d
         else { /* Nothing to do */ }
 
         lv_point_t point;
-        point.x = center_point.x + radius_text;
+        point.x = center_point.x + radius_text + translate_x;
-        point.y = center_point.y;
+        point.y = center_point.y + translate_y;
+        int32_t label_rotation_temp = 0;
+
+        if(label_rotation & LV_SCALE_LABEL_ROTATE_MATCH_TICKS) {
+            label_rotation_temp = (label_rotation & LV_SCALE_ROTATION_ANGLE_MASK) + angle_upscale;
+
+            /* keep text upright if the user asked for it, otherwise it will be upside-down on half the dial */
+            if(label_rotation & LV_SCALE_LABEL_ROTATE_KEEP_UPRIGHT) {
+                while(label_rotation_temp > 3600) {
+                    label_rotation_temp -= 3600;
+                }
+                if(label_rotation_temp > 900 && label_rotation_temp < 2400) {
+                    label_rotation_temp += 1800;
+                }
+            }
+            label_rotation = label_rotation_temp;
+        }
+        else {
+            label_rotation = label_rotation & LV_SCALE_ROTATION_ANGLE_MASK;
+        }
+
         lv_point_transform(&point, angle_upscale, LV_SCALE_NONE, LV_SCALE_NONE, &center_point, false);
         scale_get_label_coords(obj, label_dsc, &point, &label_coords);
     }
@@ -677,7 +709,26 @@ static void scale_draw_label(lv_obj_t * obj, lv_event_t * event, lv_draw_label_d
         return;
     }
 
-    lv_draw_label(layer, label_dsc, &label_coords);
+    if(label_rotation > 0) {
+        /*Draw the label to a new layer and draw the layer rotated*/
+        lv_layer_t * layer_label = lv_draw_layer_create(layer, LV_COLOR_FORMAT_ARGB8888, &label_coords);
+        lv_draw_label(layer_label, label_dsc, &label_coords);
+
+        lv_point_t pivot_point;
+        /* Set pivot point to the center of the label so it matches the scale curve */
+        pivot_point.x = lv_area_get_width(&label_coords) / 2;
+        pivot_point.y = lv_area_get_height(&label_coords) / 2;
+
+        lv_draw_image_dsc_t layer_draw_dsc;
+        lv_draw_image_dsc_init(&layer_draw_dsc);
+        layer_draw_dsc.src = layer_label;
+        layer_draw_dsc.rotation = label_rotation;
+        layer_draw_dsc.pivot = pivot_point;
+        lv_draw_layer(layer, &layer_draw_dsc, &label_coords);
+    }
+    else {
+        lv_draw_label(layer, label_dsc, &label_coords);
+    }
 }
 
 static void scale_calculate_main_compensation(lv_obj_t * obj)
@@ -950,12 +1001,15 @@ static void scale_get_tick_points(lv_obj_t * obj, const uint32_t tick_idx, bool
 
     int32_t minor_len = 0;
     int32_t major_len = 0;
+    int32_t radial_offset = 0;
 
     if(is_major_tick) {
         major_len = lv_obj_get_style_length(obj, LV_PART_INDICATOR);
+        radial_offset = lv_obj_get_style_radial_offset(obj, LV_PART_INDICATOR);
     }
     else {
         minor_len = lv_obj_get_style_length(obj, LV_PART_ITEMS);
+        radial_offset = lv_obj_get_style_radial_offset(obj, LV_PART_ITEMS);
     }
 
     if((LV_SCALE_MODE_VERTICAL_LEFT == scale->mode || LV_SCALE_MODE_VERTICAL_RIGHT == scale->mode)
@@ -1083,11 +1137,11 @@ static void scale_get_tick_points(lv_obj_t * obj, const uint32_t tick_idx, bool
             adjusted_radio_with_tick_len = point_closer_to_arc + (is_major_tick ? major_len : minor_len);
         }
 
-        tick_point_a->x = center_point.x + point_closer_to_arc;
+        tick_point_a->x = center_point.x + point_closer_to_arc + radial_offset;
         tick_point_a->y = center_point.y;
         lv_point_transform(tick_point_a, angle_upscale, LV_SCALE_NONE, LV_SCALE_NONE, &center_point, false);
 
-        tick_point_b->x = center_point.x + adjusted_radio_with_tick_len;
+        tick_point_b->x = center_point.x + adjusted_radio_with_tick_len + radial_offset;
         tick_point_b->y = center_point.y;
         lv_point_transform(tick_point_b, angle_upscale, LV_SCALE_NONE, LV_SCALE_NONE, &center_point, false);
     }

src/widgets/scale/lv_scale.h

@@ -54,6 +54,15 @@ typedef enum {
     LV_SCALE_MODE_LAST
 } lv_scale_mode_t;
 
+#define LV_SCALE_LABEL_ROTATE_MATCH_TICKS  0x100000
+LV_EXPORT_CONST_INT(LV_SCALE_LABEL_ROTATE_MATCH_TICKS);
+
+#define LV_SCALE_LABEL_ROTATE_KEEP_UPRIGHT 0x80000
+LV_EXPORT_CONST_INT(LV_SCALE_LABEL_ROTATE_KEEP_UPRIGHT);
+
+#define LV_SCALE_ROTATION_ANGLE_MASK 0x7FFFF
+LV_EXPORT_CONST_INT(LV_SCALE_ROTATION_ANGLE_MASK);
+
 LV_ATTRIBUTE_EXTERN_DATA extern const lv_obj_class_t lv_scale_class;
 
 /**********************