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

feat(draw_sw): implemented radial gradient background (#6170)

Browse Source 
Co-authored-by: Zoltan Janosy <zjanosy@fishman.com>
Co-authored-by: Liam <30486941+liamHowatt@users.noreply.github.com>
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
This commit is contained in:
Zoltan Janosy
2024-05-26 17:17:16 +02:00
committed by GitHub
parent b8b7e29156
commit 48caa8d772
57 changed files with 1449 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/styles/lv_example_style.h
View File

@@ -1,4 +1,4 @@
/**
/**
* @file lv_example_style.h
*
*/
@@ -40,6 +40,9 @@ void lv_example_style_12(void);
void lv_example_style_13(void);
void lv_example_style_14(void);
void lv_example_style_15(void);
void lv_example_style_16(void);
void lv_example_style_17(void);
void lv_example_style_18(void);
/**********************
* MACROS

73
examples/styles/lv_example_style_16.c Normal file
View File

@@ -0,0 +1,73 @@
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
/**
* Simulate metallic knob using conical gradient
* For best effect set LV_GRADIENT_MAX_STOPS to 8 or at least 3
*/
void lv_example_style_16(void)
{
#if LV_GRADIENT_MAX_STOPS >= 8
static const lv_color_t grad_colors[8] = {
LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
LV_COLOR_MAKE(0xff, 0xff, 0xff),
LV_COLOR_MAKE(0xfa, 0xfa, 0xfa),
LV_COLOR_MAKE(0x79, 0x79, 0x79),
LV_COLOR_MAKE(0x48, 0x48, 0x48),
LV_COLOR_MAKE(0x4b, 0x4b, 0x4b),
LV_COLOR_MAKE(0x70, 0x70, 0x70),
LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
};
#elif LV_GRADIENT_MAX_STOPS >= 3
static const lv_color_t grad_colors[3] = {
LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
LV_COLOR_MAKE(0xff, 0xff, 0xff),
LV_COLOR_MAKE(0x79, 0x79, 0x79),
};
#else
static const lv_color_t grad_colors[2] = {
LV_COLOR_MAKE(0xe8, 0xe8, 0xe8),
LV_COLOR_MAKE(0x79, 0x79, 0x79),
};
#endif
/*Create a style with gradient background and shadow*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 500);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_shadow_color(&style, lv_color_black());
lv_style_set_shadow_width(&style, 50);
lv_style_set_shadow_offset_x(&style, 20);
lv_style_set_shadow_offset_y(&style, 20);
lv_style_set_shadow_opa(&style, LV_OPA_50);
/*First define a color gradient. In this example we use a gray color map with random values.*/
static lv_grad_dsc_t grad;
lv_gradient_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
/*Make a conical gradient with the center in the middle of the object*/
#if LV_GRADIENT_MAX_STOPS >= 8
lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 0, 120, LV_GRAD_EXTEND_REFLECT);
#elif LV_GRADIENT_MAX_STOPS >= 3
lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 45, 125, LV_GRAD_EXTEND_REFLECT);
#else
lv_grad_conical_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, 45, 110, LV_GRAD_EXTEND_REFLECT);
#endif
/*Set gradient as background*/
lv_style_set_bg_grad(&style, &grad);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
lv_obj_set_size(obj, 200, 200);
lv_obj_center(obj);
}
#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
#endif /*LV_BUILD_EXAMPLES*/

42
examples/styles/lv_example_style_17.c Normal file
View File

@@ -0,0 +1,42 @@
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
/**
* Using radial gradient as background
*/
void lv_example_style_17(void)
{
static const lv_color_t grad_colors[2] = {
LV_COLOR_MAKE(0x9B, 0x18, 0x42),
LV_COLOR_MAKE(0x00, 0x00, 0x00),
};
int32_t width = lv_display_get_horizontal_resolution(NULL);
int32_t height = lv_display_get_vertical_resolution(NULL);
static lv_style_t style;
lv_style_init(&style);
/*First define a color gradient. In this example we use a purple to black color map.*/
static lv_grad_dsc_t grad;
lv_gradient_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
/*Make a radial gradient with the center in the middle of the object, extending to the farthest corner*/
lv_grad_radial_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, LV_GRAD_RIGHT, LV_GRAD_BOTTOM, LV_GRAD_EXTEND_PAD);
/*Set gradient as background*/
lv_style_set_bg_grad(&style, &grad);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
lv_obj_set_size(obj, width, height);
lv_obj_center(obj);
}
#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
#endif /*LV_BUILD_EXAMPLES*/

88
examples/styles/lv_example_style_18.c Normal file
View File

@@ -0,0 +1,88 @@
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
/**
* Using various gradients for button background
*/
void lv_example_style_18(void)
{
static const lv_color_t grad_colors[2] = {
LV_COLOR_MAKE(0x26, 0xa0, 0xda),
LV_COLOR_MAKE(0x31, 0x47, 0x55),
};
/*Create a linear gradient going from the top left corner to the bottom at an angle, with reflected color map*/
static lv_style_t style_with_linear_gradient_bg;
static lv_grad_dsc_t linear_gradient_dsc; /*NOTE: the gradient descriptor must be static or global variable!*/
lv_style_init(&style_with_linear_gradient_bg);
lv_gradient_init_stops(&linear_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
lv_grad_linear_init(&linear_gradient_dsc, lv_pct(0), lv_pct(0), lv_pct(20), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
lv_style_set_bg_grad(&style_with_linear_gradient_bg, &linear_gradient_dsc);
lv_style_set_bg_opa(&style_with_linear_gradient_bg, LV_OPA_COVER);
/*Create a radial gradient with the center in the top left 1/3rd of the object, extending to the bottom right corner, with reflected color map*/
static lv_style_t style_with_radial_gradient_bg;
static lv_grad_dsc_t radial_gradient_dsc; /*NOTE: the gradient descriptor must be static or global variable!*/
lv_style_init(&style_with_radial_gradient_bg);
lv_gradient_init_stops(&radial_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
lv_grad_radial_init(&radial_gradient_dsc, lv_pct(30), lv_pct(30), lv_pct(100), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
lv_style_set_bg_grad(&style_with_radial_gradient_bg, &radial_gradient_dsc);
lv_style_set_bg_opa(&style_with_radial_gradient_bg, LV_OPA_COVER);
/*Create buttons with different gradient styles*/
lv_obj_t * btn;
lv_obj_t * label;
/*Simple horizontal gradient*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_style_bg_color(btn, grad_colors[0], 0);
lv_obj_set_style_bg_grad_color(btn, grad_colors[1], 0);
lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_HOR, 0);
lv_obj_set_size(btn, 150, 50);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, -100);
label = lv_label_create(btn);
lv_label_set_text(label, "Horizontal");
lv_obj_center(label);
/*Simple vertical gradient*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_style_bg_color(btn, grad_colors[0], 0);
lv_obj_set_style_bg_grad_color(btn, grad_colors[1], 0);
lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_VER, 0);
lv_obj_set_size(btn, 150, 50);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, -40);
label = lv_label_create(btn);
lv_label_set_text(label, "Vertical");
lv_obj_center(label);
/*Complex linear gradient*/
btn = lv_button_create(lv_screen_active());
lv_obj_add_style(btn, &style_with_linear_gradient_bg, 0);
lv_obj_set_size(btn, 150, 50);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 20);
label = lv_label_create(btn);
lv_label_set_text(label, "Linear");
lv_obj_center(label);
/*Complex radial gradient*/
btn = lv_button_create(lv_screen_active());
lv_obj_add_style(btn, &style_with_radial_gradient_bg, 0);
lv_obj_set_size(btn, 150, 50);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 80);
label = lv_label_create(btn);
lv_label_set_text(label, "Radial");
lv_obj_center(label);
}
#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
#endif /*LV_BUILD_EXAMPLES*/