Mirrors_UI_SDK/lvgl
1
0
Fork 0
mirror of https://github.com/lvgl/lvgl.git synced 2026-05-26 11:07:34 +08:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

feat: add new lvgl examples (#8225)

Browse Source 
Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>
Co-authored-by: André Costa <andre_miguel_costa@hotmail.com>
This commit is contained in:
Giovanni Bauermeister
2025-05-25 06:41:46 -03:00
committed by GitHub
parent 5c68b7a8e7
commit 93dacfdb8f
13 changed files with 656 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/widgets/scale/index.rst
+17
View File
@@ -51,3 +51,20 @@ A horizontal scale with labels rotated and translated
.. lv_example:: widgets/scale/lv_example_scale_9
:language: c
A round scale style simulating a Heart Rate monitor
---------------------------------------------------
.. lv_example:: widgets/scale/lv_example_scale_10
:language: c
A round scale style simulating a sunset/sunrise widget
------------------------------------------------------
.. lv_example:: widgets/scale/lv_example_scale_11
:language: c
Axis ticks and labels with scrolling on a chart
-----------------------------------------------
.. lv_example:: widgets/chart/lv_example_chart_2
:language: c
examples/widgets/scale/lv_example_scale_10.c
+175
View File
@@ -0,0 +1,175 @@
#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES && LV_FONT_MONTSERRAT_40 && LV_FONT_MONTSERRAT_18
static int32_t hr_value = 98;
static int8_t hr_step = 1;
static lv_obj_t * needle_line = NULL;
static lv_obj_t * hr_value_label = NULL;
static lv_obj_t * bpm_label = NULL;
static lv_obj_t * scale = NULL;
typedef struct {
lv_style_t items;
lv_style_t indicator;
lv_style_t main;
} section_styles_t;
static section_styles_t zone1_styles;
static section_styles_t zone2_styles;
static section_styles_t zone3_styles;
static section_styles_t zone4_styles;
static section_styles_t zone5_styles;
static lv_color_t get_hr_zone_color(int32_t hr)
{
if(hr < 117) return lv_palette_main(LV_PALETTE_GREY); /* Zone 1 */
else if(hr < 135) return lv_palette_main(LV_PALETTE_BLUE); /* Zone 2 */
else if(hr < 158) return lv_palette_main(LV_PALETTE_GREEN); /* Zone 3 */
else if(hr < 176) return lv_palette_main(LV_PALETTE_ORANGE); /* Zone 4 */
else return lv_palette_main(LV_PALETTE_RED); /* Zone 5 */
}
static void hr_anim_timer_cb(lv_timer_t * timer)
{
LV_UNUSED(timer);
hr_value += hr_step;
if(hr_value >= 195) {
hr_value = 195;
hr_step = -1;
}
else if(hr_value <= 98) {
hr_value = 98;
hr_step = 1;
}
/* Update needle */
lv_scale_set_line_needle_value(scale, needle_line, -8, hr_value);
/* Update HR text */
lv_label_set_text_fmt(hr_value_label, "%d", hr_value);
/* Update text color based on zone */
lv_color_t zone_color = get_hr_zone_color(hr_value);
lv_obj_set_style_text_color(hr_value_label, zone_color, 0);
lv_obj_set_style_text_color(bpm_label, zone_color, 0);
}
static void init_section_styles(section_styles_t * styles, lv_color_t color)
{
lv_style_init(&styles->items);
lv_style_set_line_color(&styles->items, color);
lv_style_set_line_width(&styles->items, 0);
lv_style_init(&styles->indicator);
lv_style_set_line_color(&styles->indicator, color);
lv_style_set_line_width(&styles->indicator, 0);
lv_style_init(&styles->main);
lv_style_set_arc_color(&styles->main, color);
lv_style_set_arc_width(&styles->main, 20);
}
static void add_section(lv_obj_t * target_scale,
int32_t from,
int32_t to,
const section_styles_t * styles)
{
lv_scale_section_t * sec = lv_scale_add_section(target_scale);
lv_scale_set_section_range(target_scale, sec, from, to);
lv_scale_set_section_style_items(target_scale, sec, &styles->items);
lv_scale_set_section_style_indicator(target_scale, sec, &styles->indicator);
lv_scale_set_section_style_main(target_scale, sec, &styles->main);
}
void lv_example_scale_10(void)
{
scale = lv_scale_create(lv_screen_active());
lv_obj_center(scale);
lv_obj_set_size(scale, 200, 200);
lv_scale_set_mode(scale, LV_SCALE_MODE_ROUND_INNER);
lv_scale_set_range(scale, 98, 195);
lv_scale_set_total_tick_count(scale, 15);
lv_scale_set_major_tick_every(scale, 3);
lv_scale_set_angle_range(scale, 280);
lv_scale_set_rotation(scale, 130);
lv_scale_set_label_show(scale, false);
lv_obj_set_style_length(scale, 6, LV_PART_ITEMS);
lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);
lv_obj_set_style_arc_width(scale, 0, LV_PART_MAIN);
/* Zone 1: (Grey) */
init_section_styles(&zone1_styles, lv_palette_main(LV_PALETTE_GREY));
add_section(scale, 98, 117, &zone1_styles);
/* Zone 2: (Blue) */
init_section_styles(&zone2_styles, lv_palette_main(LV_PALETTE_BLUE));
add_section(scale, 117, 135, &zone2_styles);
/* Zone 3: (Green) */
init_section_styles(&zone3_styles, lv_palette_main(LV_PALETTE_GREEN));
add_section(scale, 135, 158, &zone3_styles);
/* Zone 4: (Orange) */
init_section_styles(&zone4_styles, lv_palette_main(LV_PALETTE_ORANGE));
add_section(scale, 158, 176, &zone4_styles);
/* Zone 5: (Red) */
init_section_styles(&zone5_styles, lv_palette_main(LV_PALETTE_RED));
add_section(scale, 176, 195, &zone5_styles);
needle_line = lv_line_create(scale);
/* Optional styling */
lv_obj_set_style_line_color(needle_line, lv_color_black(), LV_PART_MAIN);
lv_obj_set_style_line_width(needle_line, 12, LV_PART_MAIN);
lv_obj_set_style_length(needle_line, 20, LV_PART_MAIN);
lv_obj_set_style_line_rounded(needle_line, false, LV_PART_MAIN);
lv_obj_set_style_pad_right(needle_line, 50, LV_PART_MAIN);
int32_t current_hr = 145;
lv_scale_set_line_needle_value(scale, needle_line, 0, current_hr);
lv_obj_t * circle = lv_obj_create(lv_scr_act());
lv_obj_set_size(circle, 130, 130);
lv_obj_center(circle);
lv_obj_set_style_radius(circle, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_bg_color(circle, lv_obj_get_style_bg_color(lv_scr_act(), LV_PART_MAIN), 0);
lv_obj_set_style_bg_opa(circle, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(circle, 0, LV_PART_MAIN);
lv_obj_t * hr_container = lv_obj_create(circle);
lv_obj_center(hr_container);
lv_obj_set_size(hr_container, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_set_style_bg_opa(hr_container, LV_OPA_TRANSP, 0);
lv_obj_set_style_border_width(hr_container, 0, 0);
lv_obj_set_layout(hr_container, LV_LAYOUT_FLEX);
lv_obj_set_flex_flow(hr_container, LV_FLEX_FLOW_COLUMN);
lv_obj_set_style_pad_all(hr_container, 0, LV_PART_MAIN);
lv_obj_set_style_pad_row(hr_container, 0, 0);
lv_obj_set_flex_align(hr_container, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
hr_value_label = lv_label_create(hr_container);
lv_label_set_text_fmt(hr_value_label, "%d", current_hr);
lv_obj_set_style_text_font(hr_value_label, &lv_font_montserrat_40, 0);
lv_obj_set_style_text_align(hr_value_label, LV_TEXT_ALIGN_CENTER, 0);
bpm_label = lv_label_create(hr_container);
lv_label_set_text(bpm_label, "bpm");
lv_obj_set_style_text_font(bpm_label, &lv_font_montserrat_18, 0);
lv_obj_set_style_text_align(bpm_label, LV_TEXT_ALIGN_CENTER, 0);
lv_color_t zone_color = get_hr_zone_color(current_hr);
lv_obj_set_style_text_color(hr_value_label, zone_color, 0);
lv_obj_set_style_text_color(bpm_label, zone_color, 0);
lv_timer_create(hr_anim_timer_cb, 80, NULL);
}
#endif
examples/widgets/scale/lv_example_scale_11.c
+129
View File
@@ -0,0 +1,129 @@
#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES && LV_FONT_MONTSERRAT_12 && LV_FONT_MONTSERRAT_14 && LV_FONT_MONTSERRAT_16 && LV_FONT_MONTSERRAT_20
static void label_color_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
if(!draw_task) return;
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
if(!base_dsc || base_dsc->part != LV_PART_INDICATOR) return;
lv_draw_label_dsc_t * label_dsc = lv_draw_task_get_label_dsc(draw_task);
if(!label_dsc || !label_dsc->text) return;
const char * txt = label_dsc->text;
if(lv_strcmp(txt, "06") == 0 || lv_strcmp(txt, "12") == 0 ||
lv_strcmp(txt, "18") == 0 || lv_strcmp(txt, "24") == 0) {
label_dsc->color = lv_color_white();
}
else {
label_dsc->color = lv_palette_darken(LV_PALETTE_GREY, 1);
}
}
void lv_example_scale_11(void)
{
lv_obj_t * bg = lv_obj_create(lv_screen_active());
lv_obj_set_size(bg, 210, 210);
lv_obj_center(bg);
lv_obj_set_style_radius(bg, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_bg_color(bg, lv_palette_darken(LV_PALETTE_GREY, 4), 0);
lv_obj_set_style_bg_opa(bg, LV_OPA_COVER, 0);
lv_obj_remove_flag(bg, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_set_style_pad_all(bg, 0, LV_PART_MAIN);
lv_obj_t * scale = lv_scale_create(bg);
lv_obj_center(scale);
lv_obj_set_size(scale, 150, 150);
lv_obj_set_style_arc_width(scale, 5, LV_PART_MAIN);
lv_scale_set_mode(scale, LV_SCALE_MODE_ROUND_OUTER);
lv_scale_set_range(scale, 0, 24);
lv_scale_set_total_tick_count(scale, 25);
lv_scale_set_major_tick_every(scale, 1);
lv_scale_set_angle_range(scale, 360);
lv_scale_set_rotation(scale, 105);
lv_scale_set_label_show(scale, true);
lv_obj_set_style_text_font(scale, &lv_font_montserrat_12, LV_PART_INDICATOR);
lv_obj_set_style_pad_radial(scale, -6, LV_PART_INDICATOR);
/*Rotate the labels of the ticks*/
lv_obj_set_style_transform_rotation(scale, LV_SCALE_LABEL_ROTATE_MATCH_TICKS | LV_SCALE_LABEL_ROTATE_KEEP_UPRIGHT,
LV_PART_INDICATOR);
/* Style for major ticks */
static lv_style_t style_ticks;
lv_style_init(&style_ticks);
lv_style_set_line_color(&style_ticks, lv_palette_darken(LV_PALETTE_GREY, 1));
lv_style_set_line_width(&style_ticks, 2);
lv_style_set_width(&style_ticks, 10);
lv_obj_add_style(scale, &style_ticks, LV_PART_INDICATOR);
/* Style for NIGHT — blue */
static lv_style_t style_night;
lv_style_init(&style_night);
lv_style_set_arc_color(&style_night, lv_palette_main(LV_PALETTE_BLUE));
/* Style for DAY — dark yellow */
static lv_style_t style_day;
lv_style_init(&style_day);
lv_style_set_arc_color(&style_day, lv_palette_darken(LV_PALETTE_YELLOW, 3));
/* NIGHT section */
lv_scale_section_t * section_night1 = lv_scale_add_section(scale);
lv_scale_set_section_range(scale, section_night1, 17, 5);
lv_scale_set_section_style_main(scale, section_night1, &style_night);
/* DAY section */
lv_scale_section_t * section_day = lv_scale_add_section(scale);
lv_scale_set_section_range(scale, section_day, 5, 17);
lv_scale_set_section_style_main(scale, section_day, &style_day);
static const char * hour_labels[] = {
"01", "02", "03", "04", "05",
"06", "07", "08", "09", "10",
"11", "12", "13", "14", "15",
"16", "17", "18", "19", "20",
"21", "22", "23", "24",
NULL
};
lv_scale_set_text_src(scale, hour_labels);
lv_obj_add_flag(scale, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_obj_add_event_cb(scale, label_color_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_t * today = lv_label_create(bg);
lv_label_set_text(today, "TODAY");
lv_obj_set_style_text_font(today, &lv_font_montserrat_16, 0);
lv_obj_set_style_text_color(today, lv_color_white(), 0);
lv_obj_align(today, LV_ALIGN_TOP_MID, 0, 60);
lv_obj_t * sunrise_lbl = lv_label_create(bg);
lv_label_set_text(sunrise_lbl, "SUNRISE");
lv_obj_set_style_text_font(sunrise_lbl, &lv_font_montserrat_14, 0);
lv_obj_set_style_text_color(sunrise_lbl, lv_palette_main(LV_PALETTE_GREY), 0);
lv_obj_align(sunrise_lbl, LV_ALIGN_LEFT_MID, 37, -10);
lv_obj_t * sunrise_time = lv_label_create(bg);
lv_label_set_text(sunrise_time, "6:43");
lv_obj_set_style_text_font(sunrise_time, &lv_font_montserrat_20, 0);
lv_obj_set_style_text_color(sunrise_time, lv_color_white(), 0);
lv_obj_align_to(sunrise_time, sunrise_lbl, LV_ALIGN_OUT_BOTTOM_MID, 0, 2);
lv_obj_t * sunset_lbl = lv_label_create(bg);
lv_label_set_text(sunset_lbl, "SUNSET");
lv_obj_set_style_text_font(sunset_lbl, &lv_font_montserrat_14, 0);
lv_obj_set_style_text_color(sunset_lbl, lv_palette_main(LV_PALETTE_GREY), 0);
lv_obj_align(sunset_lbl, LV_ALIGN_RIGHT_MID, -37, -10);
lv_obj_t * sunset_time = lv_label_create(bg);
lv_label_set_text(sunset_time, "17:37");
lv_obj_set_style_text_font(sunset_time, &lv_font_montserrat_20, 0);
lv_obj_set_style_text_color(sunset_time, lv_color_white(), 0);
lv_obj_align_to(sunset_time, sunset_lbl, LV_ALIGN_OUT_BOTTOM_MID, 0, 2);
}
#endif