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

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

Browse Source 
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
This commit is contained in:
lorddevereux
2024-10-23 07:28:25 +01:00
committed by GitHub
parent dc8d956562
commit c61ca42a2a
17 changed files with 348 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/overview/style-props.rst
View File

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

25
docs/widgets/scale.rst
View File

@@ -56,7 +56,19 @@ Labels on major ticks can be configured with :cpp:expr:`lv_scale_set_label_show(
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,8 +76,15 @@ 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
and :cpp:expr:`lv_obj_set_style_length(scale, 5, LV_PART_ITEMS)` for minor 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. 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
--------

2
examples/widgets/lv_example_widgets.h
View File

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

15
examples/widgets/scale/index.rst
View File

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

47
examples/widgets/scale/lv_example_scale_8.c Normal file
View File

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

27
examples/widgets/scale/lv_example_scale_9.c Normal file
View File

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

12
scripts/style_api_gen.py
View File

@@ -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`." },

24
src/core/lv_obj_style_gen.c
View File

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

39
src/core/lv_obj_style_gen.h
View File

@@ -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_BG_GRAD_COLOR));
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));
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_BG_IMAGE_RECOLOR));
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));
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_BORDER_COLOR));
lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, 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_OUTLINE_COLOR));
lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, 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_SHADOW_COLOR));
lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, 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_IMAGE_RECOLOR));
lv_style_value_t v = lv_obj_style_apply_color_filter(obj, part, lv_obj_get_style_prop(obj, part, 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);

3
src/misc/lv_style.h
View File

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

24
src/misc/lv_style_gen.c
View File

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

18
src/misc/lv_style_gen.h
View File

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

2
src/widgets/property/lv_obj_property_names.h
View File

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

5
src/widgets/property/lv_style_properties.c
View File

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

3
src/widgets/property/lv_style_properties.h
View File

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

70
src/widgets/scale/lv_scale.c
View File

@@ -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.y = center_point.y;
point.x = center_point.x + radius_text + translate_x;
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);
}

9
src/widgets/scale/lv_scale.h
View File

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