From 28495b9eb942c973e6f93b2b3799ab16de7664e9 Mon Sep 17 00:00:00 2001 From: pete-pjb Date: Thu, 23 Jul 2020 14:15:34 +0100 Subject: [PATCH 1/4] Tidy up the edges of the colour picker widget. --- src/lv_widgets/lv_cpicker.c | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/lv_widgets/lv_cpicker.c b/src/lv_widgets/lv_cpicker.c index d80c9a56c..9ddc3b199 100644 --- a/src/lv_widgets/lv_cpicker.c +++ b/src/lv_widgets/lv_cpicker.c @@ -491,11 +491,14 @@ static void draw_disc_grad(lv_obj_t * cpicker, const lv_area_t * mask) line_dsc.color = angle_to_mode_color(cpicker, i); lv_point_t p[2]; - p[0].x = cx + (r * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); - p[0].y = cy + (r * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); - p[1].x = cx + ((r - cir_w_extra) * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); - p[1].y = cy + ((r - cir_w_extra) * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); + p[0].x = cx + ((r-2) * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); + p[0].y = cy + ((r-2) * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); + p[1].x = cx + ((r-2 - cir_w_extra) * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); + p[1].y = cy + ((r-2 - cir_w_extra) * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); + /* We use the r-2 value here to keep the lines inside the bounds of the circle as the integer based arithmetic + * is not a 100% using the trigonometric functions + */ lv_draw_line(&p[0], &p[1], mask, &line_dsc); } @@ -524,6 +527,13 @@ static void draw_disc_grad(lv_obj_t * cpicker, const lv_area_t * mask) area_mid.y2 -= inner; lv_draw_rect(&area_mid, mask, &bg_dsc); + + /*Tidy outside of colour picker, the way the outer ring has to be drawn it cannot mask well so this draws a clean edge around it */ + lv_draw_line_dsc_t tidy_dsc; + lv_draw_line_dsc_init(&tidy_dsc); + tidy_dsc.width = 3; + tidy_dsc.color = lv_obj_get_style_bg_color(cpicker, LV_CPICKER_PART_MAIN); + lv_draw_arc(cx, cy, r, 0, 360, mask, &tidy_dsc); } static void draw_rect_grad(lv_obj_t * cpicker, const lv_area_t * mask) From d125472e81fec67096dc7d017f215bb25cb57932 Mon Sep 17 00:00:00 2001 From: pete-pjb Date: Thu, 23 Jul 2020 14:24:28 +0100 Subject: [PATCH 2/4] Update change log. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f4e05e163..7b9c0cebc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ ### Bugfixes - Do not print warning for missing glyph if its height OR width is zero. - Prevent duplicated sending of `LV_EVENT_INSERT` from text area +- Tidy outer edges of cpicker widget. ## v7.2.0 (21.07.2020) From 89adfbc816eebfbb582e1b73236a835e3b5778e4 Mon Sep 17 00:00:00 2001 From: pete-pjb Date: Fri, 24 Jul 2020 10:15:29 +0100 Subject: [PATCH 3/4] Fix ragged edge of Colour Picker. --- src/lv_widgets/lv_cpicker.c | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/lv_widgets/lv_cpicker.c b/src/lv_widgets/lv_cpicker.c index 9ddc3b199..128f4e480 100644 --- a/src/lv_widgets/lv_cpicker.c +++ b/src/lv_widgets/lv_cpicker.c @@ -483,6 +483,17 @@ static void draw_disc_grad(lv_obj_t * cpicker, const lv_area_t * mask) uint16_t i; lv_coord_t cir_w = lv_obj_get_style_scale_width(cpicker, LV_CPICKER_PART_MAIN); + /* Mask outer ring of widget to tidy up ragged edges of lines while drawing outer ring */ + lv_area_t mask_area_out; + lv_area_copy( &mask_area_out, &cpicker->coords); + mask_area_out.x1 += 3; + mask_area_out.x2 -= 3; + mask_area_out.y1 += 3; + mask_area_out.y2 -= 3; + lv_draw_mask_radius_param_t mask_out_param; + lv_draw_mask_radius_init(&mask_out_param, &mask_area_out, LV_RADIUS_CIRCLE, false); + int16_t mask_out_id = lv_draw_mask_add(&mask_out_param, 0); + /* The inner line ends will be masked out. * So make lines a little bit longer because the masking makes a more even result */ lv_coord_t cir_w_extra = cir_w + line_dsc.width; @@ -491,17 +502,15 @@ static void draw_disc_grad(lv_obj_t * cpicker, const lv_area_t * mask) line_dsc.color = angle_to_mode_color(cpicker, i); lv_point_t p[2]; - p[0].x = cx + ((r-2) * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); - p[0].y = cy + ((r-2) * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); - p[1].x = cx + ((r-2 - cir_w_extra) * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); - p[1].y = cy + ((r-2 - cir_w_extra) * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); + p[0].x = cx + (r * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); + p[0].y = cy + (r * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); + p[1].x = cx + ((r - cir_w_extra) * _lv_trigo_sin(i) >> LV_TRIGO_SHIFT); + p[1].y = cy + ((r - cir_w_extra) * _lv_trigo_sin(i + 90) >> LV_TRIGO_SHIFT); - /* We use the r-2 value here to keep the lines inside the bounds of the circle as the integer based arithmetic - * is not a 100% using the trigonometric functions - */ lv_draw_line(&p[0], &p[1], mask, &line_dsc); } - + /* Now remove mask to continue with inner part */ + lv_draw_mask_remove_id(mask_out_id); /*Mask out the inner area*/ lv_draw_rect_dsc_t bg_dsc; @@ -527,13 +536,6 @@ static void draw_disc_grad(lv_obj_t * cpicker, const lv_area_t * mask) area_mid.y2 -= inner; lv_draw_rect(&area_mid, mask, &bg_dsc); - - /*Tidy outside of colour picker, the way the outer ring has to be drawn it cannot mask well so this draws a clean edge around it */ - lv_draw_line_dsc_t tidy_dsc; - lv_draw_line_dsc_init(&tidy_dsc); - tidy_dsc.width = 3; - tidy_dsc.color = lv_obj_get_style_bg_color(cpicker, LV_CPICKER_PART_MAIN); - lv_draw_arc(cx, cy, r, 0, 360, mask, &tidy_dsc); } static void draw_rect_grad(lv_obj_t * cpicker, const lv_area_t * mask) From da5c9dd424c7059ab9486e4d0c0be396c414fee1 Mon Sep 17 00:00:00 2001 From: pete-pjb Date: Fri, 24 Jul 2020 13:50:35 +0100 Subject: [PATCH 4/4] Add define and comment to explain magic number used in previous fix. --- src/lv_widgets/lv_cpicker.c | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/lv_widgets/lv_cpicker.c b/src/lv_widgets/lv_cpicker.c index 128f4e480..db682092a 100644 --- a/src/lv_widgets/lv_cpicker.c +++ b/src/lv_widgets/lv_cpicker.c @@ -48,6 +48,13 @@ #define TRI_OFFSET 2 +/* The OUTER_MASK_WIDTH define is required to assist with the placing of a mask over the outer ring of the widget as when the + * multicoloured radial lines are calculated for the outer ring of the widget their lengths are jittering because of the + * integer based arithmetic. From tests the maximum delta was found to be 2 so the current value is set to 3 to achieve + * appropriate masking. + */ +#define OUTER_MASK_WIDTH 3 + /********************** * TYPEDEFS **********************/ @@ -486,10 +493,10 @@ static void draw_disc_grad(lv_obj_t * cpicker, const lv_area_t * mask) /* Mask outer ring of widget to tidy up ragged edges of lines while drawing outer ring */ lv_area_t mask_area_out; lv_area_copy( &mask_area_out, &cpicker->coords); - mask_area_out.x1 += 3; - mask_area_out.x2 -= 3; - mask_area_out.y1 += 3; - mask_area_out.y2 -= 3; + mask_area_out.x1 += OUTER_MASK_WIDTH; + mask_area_out.x2 -= OUTER_MASK_WIDTH; + mask_area_out.y1 += OUTER_MASK_WIDTH; + mask_area_out.y2 -= OUTER_MASK_WIDTH; lv_draw_mask_radius_param_t mask_out_param; lv_draw_mask_radius_init(&mask_out_param, &mask_area_out, LV_RADIUS_CIRCLE, false); int16_t mask_out_id = lv_draw_mask_add(&mask_out_param, 0);