Examples¶
Get Started¶
A very simple hello world label¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LABEL
/**
* Basic example to create a "Hello world" label
*/
void lv_example_get_started_1(void)
{
/*Change the active screen's background color*/
lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN);
/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello world");
lv_obj_set_style_text_color(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN);
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}
#endif
Create a slider and write its value on a label¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SLIDER
static lv_obj_t * label;
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target_obj(e);
/*Refresh the text*/
lv_label_set_text_fmt(label, "%" LV_PRId32, lv_slider_get_value(slider));
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/
}
/**
* Create a slider and write its value on a label.
*/
void lv_example_get_started_4(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, 200); /*Set the width*/
lv_obj_center(slider); /*Align to the center of the parent (screen)*/
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); /*Assign an event function*/
/*Create a label above the slider*/
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "0");
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align top of the slider*/
}
#endif
Styles¶
Size styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
/**
* Using the Size, Position and Padding style properties
*/
void lv_example_style_1(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 5);
/*Make a gradient*/
lv_style_set_width(&style, 150);
lv_style_set_height(&style, LV_SIZE_CONTENT);
lv_style_set_pad_ver(&style, 20);
lv_style_set_pad_left(&style, 5);
lv_style_set_x(&style, lv_pct(50));
lv_style_set_y(&style, 80);
/*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_t * label = lv_label_create(obj);
lv_label_set_text(label, "Hello");
}
#endif
Background styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
/**
* Using the background style properties
*/
void lv_example_style_2(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 5);
/*Make a gradient*/
lv_style_set_bg_opa(&style, LV_OPA_COVER);
static lv_grad_dsc_t grad;
grad.dir = LV_GRAD_DIR_VER;
grad.stops_count = 2;
grad.stops[0].color = lv_palette_lighten(LV_PALETTE_GREY, 1);
grad.stops[0].opa = LV_OPA_COVER;
grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
grad.stops[1].opa = LV_OPA_COVER;
/*Shift the gradient to the bottom*/
grad.stops[0].frac = 128;
grad.stops[1].frac = 192;
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_center(obj);
}
#endif
Border styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
/**
* Using the border style properties
*/
void lv_example_style_3(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 10);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));
/*Add border to the bottom+right*/
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_width(&style, 5);
lv_style_set_border_opa(&style, LV_OPA_50);
lv_style_set_border_side(&style, (lv_border_side_t)(LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT));
/*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_center(obj);
}
#endif
Outline styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
/**
* Using the outline style properties
*/
void lv_example_style_4(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 5);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));
/*Add outline*/
lv_style_set_outline_width(&style, 2);
lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_outline_pad(&style, 8);
/*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_center(obj);
}
#endif
Shadow styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
/**
* Using the Shadow style properties
*/
void lv_example_style_5(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 5);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));
/*Add a shadow*/
lv_style_set_shadow_width(&style, 55);
lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
/*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_center(obj);
}
#endif
Image styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
/**
* Using the Image style properties
*/
void lv_example_style_6(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 5);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3));
lv_style_set_border_width(&style, 2);
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_image_recolor(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_image_recolor_opa(&style, LV_OPA_50);
lv_style_set_transform_rotation(&style, 300);
/*Create an object with the new style*/
lv_obj_t * obj = lv_image_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
LV_IMAGE_DECLARE(img_cogwheel_argb);
lv_image_set_src(obj, &img_cogwheel_argb);
lv_obj_center(obj);
}
#endif
Arc styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_ARC
/**
* Using the Arc style properties
*/
void lv_example_style_7(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_arc_color(&style, lv_palette_main(LV_PALETTE_RED));
lv_style_set_arc_width(&style, 4);
/*Create an object with the new style*/
lv_obj_t * obj = lv_arc_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
lv_obj_center(obj);
}
#endif
Text styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LABEL
/**
* Using the text style properties
*/
void lv_example_style_8(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 5);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));
lv_style_set_border_width(&style, 2);
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_pad_all(&style, 10);
lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_text_letter_space(&style, 5);
lv_style_set_text_line_space(&style, 20);
lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE);
/*Create an object with the new style*/
lv_obj_t * obj = lv_label_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
lv_label_set_text(obj, "Text of\n"
"a label");
lv_obj_center(obj);
}
#endif
Line styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LINE
/**
* Using the line style properties
*/
void lv_example_style_9(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_line_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_style_set_line_width(&style, 6);
lv_style_set_line_rounded(&style, true);
/*Create an object with the new style*/
lv_obj_t * obj = lv_line_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
static lv_point_precise_t p[] = {{10, 30}, {30, 50}, {100, 0}};
lv_line_set_points(obj, p, 3);
lv_obj_center(obj);
}
#endif
Transition¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
/**
* Creating a transition
*/
void lv_example_style_10(void)
{
static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};
/* A default transition
* Make it fast (100ms) and start with some delay (200 ms)*/
static lv_style_transition_dsc_t trans_def;
lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);
/* A special transition when going to pressed state
* Make it slow (500 ms) but start without delay*/
static lv_style_transition_dsc_t trans_pr;
lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);
static lv_style_t style_def;
lv_style_init(&style_def);
lv_style_set_transition(&style_def, &trans_def);
static lv_style_t style_pr;
lv_style_init(&style_pr);
lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
lv_style_set_border_width(&style_pr, 6);
lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_transition(&style_pr, &trans_pr);
/*Create an object with the new style_pr*/
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj, &style_def, 0);
lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
lv_obj_center(obj);
}
#endif
Using multiple styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
/**
* Using multiple styles
*/
void lv_example_style_11(void)
{
/*A base style*/
static lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
lv_style_set_border_width(&style_base, 2);
lv_style_set_radius(&style_base, 10);
lv_style_set_shadow_width(&style_base, 10);
lv_style_set_shadow_offset_y(&style_base, 5);
lv_style_set_shadow_opa(&style_base, LV_OPA_50);
lv_style_set_text_color(&style_base, lv_color_white());
lv_style_set_width(&style_base, 100);
lv_style_set_height(&style_base, LV_SIZE_CONTENT);
/*Set only the properties that should be different*/
static lv_style_t style_warning;
lv_style_init(&style_warning);
lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));
/*Create an object with the base style only*/
lv_obj_t * obj_base = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj_base, &style_base, 0);
lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
lv_obj_t * label = lv_label_create(obj_base);
lv_label_set_text(label, "Base");
lv_obj_center(label);
/*Create another object with the base style and earnings style too*/
lv_obj_t * obj_warning = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj_warning, &style_base, 0);
lv_obj_add_style(obj_warning, &style_warning, 0);
lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
label = lv_label_create(obj_warning);
lv_label_set_text(label, "Warning");
lv_obj_center(label);
}
#endif
Local styles¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
/**
* Local styles
*/
void lv_example_style_12(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3));
lv_style_set_border_width(&style, 3);
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj, &style, 0);
/*Overwrite the background color locally*/
lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN);
lv_obj_center(obj);
}
#endif
Add styles to parts and states¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
/**
* Add styles to parts and states
*/
void lv_example_style_13(void)
{
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3));
lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);
static lv_style_t style_indic_pr;
lv_style_init(&style_indic_pr);
lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED));
lv_style_set_shadow_width(&style_indic_pr, 10);
lv_style_set_shadow_spread(&style_indic_pr, 3);
/*Create an object with the new style_pr*/
lv_obj_t * obj = lv_slider_create(lv_screen_active());
lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR);
lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED);
lv_slider_set_value(obj, 70, LV_ANIM_OFF);
lv_obj_center(obj);
}
#endif
Extending the current theme¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE
#include "../../lvgl_private.h"
static lv_style_t style_btn;
/*Will be called when the styles of the base theme are already added
to add new styles*/
static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
LV_UNUSED(th);
if(lv_obj_check_type(obj, &lv_button_class)) {
lv_obj_add_style(obj, &style_btn, 0);
}
}
static void on_display_delete(lv_event_t * e)
{
lv_display_t * display = (lv_display_t *) lv_event_get_target(e);
lv_theme_t * display_theme = lv_display_get_theme(display);
lv_theme_delete(display_theme);
}
static void new_theme_init_and_set(void)
{
lv_display_t * display = lv_display_get_default();
/*Initialize the styles*/
lv_style_init(&style_btn);
lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN));
lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3));
lv_style_set_border_width(&style_btn, 3);
/* Initialize the new theme with the current theme as its parent
* The user is responsible for freeing the theme when it's no longer needed */
lv_theme_t * th_act = lv_display_get_theme(NULL);
lv_theme_t * th_new = lv_theme_create();
lv_theme_copy(th_new, th_act);
lv_theme_set_parent(th_new, th_act);
/*Set the style apply callback for the new theme*/
lv_theme_set_apply_cb(th_new, new_theme_apply_cb);
/*Assign the new theme to the current display*/
lv_display_set_theme(display, th_new);
/* Assign a delete event callback so that we can delete the theme when the display is deleted*/
lv_display_add_event_cb(display, on_display_delete, LV_EVENT_DELETE, NULL);
}
/**
* Extending the current theme
*/
void lv_example_style_14(void)
{
lv_obj_t * btn;
lv_obj_t * label;
btn = lv_button_create(lv_screen_active());
lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);
label = lv_label_create(btn);
lv_label_set_text(label, "Original theme");
new_theme_init_and_set();
btn = lv_button_create(lv_screen_active());
lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20);
label = lv_label_create(btn);
lv_label_set_text(label, "New theme");
}
#endif
Opacity and Transformations¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_BUTTON && LV_USE_LABEL
/**
* Opacity and Transformations
*/
void lv_example_style_15(void)
{
lv_obj_t * btn;
lv_obj_t * label;
/*Normal button*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, 100, 40);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, -70);
label = lv_label_create(btn);
lv_label_set_text(label, "Normal");
lv_obj_center(label);
/*Set opacity
*The button and the label is rendered to a layer first and that layer is blended*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, 100, 40);
lv_obj_set_style_opa(btn, LV_OPA_50, 0);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
label = lv_label_create(btn);
lv_label_set_text(label, "Opa:50%");
lv_obj_center(label);
/*Set transformations
*The button and the label is rendered to a layer first and that layer is transformed*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, 100, 40);
lv_obj_set_style_transform_rotation(btn, 150, 0); /*15 deg*/
lv_obj_set_style_transform_scale(btn, 256 + 64, 0); /*1.25x*/
lv_obj_set_style_transform_pivot_x(btn, 50, 0);
lv_obj_set_style_transform_pivot_y(btn, 20, 0);
lv_obj_set_style_opa(btn, LV_OPA_50, 0);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 70);
label = lv_label_create(btn);
lv_label_set_text(label, "Transf.");
lv_obj_center(label);
}
#endif
Metallic knob with conic gradient¶
C code
View on GitHub#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_grad_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);
}
#else
void lv_example_style_16(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_set_width(label, LV_PCT(80));
lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS is not enabled");
lv_label_set_long_mode(label, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR);
lv_obj_center(label);
}
#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
#endif /*LV_BUILD_EXAMPLES*/
Radial gradient as background¶
C code
View on GitHub#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_grad_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);
}
#else
void lv_example_style_17(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_set_width(label, LV_PCT(80));
lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS is not enabled");
lv_label_set_long_mode(label, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR);
lv_obj_center(label);
}
#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
#endif /*LV_BUILD_EXAMPLES*/
Test between recolor style or full background modal¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_LOG
/**
* Test between a full background modal and a recolor modal
*/
void lv_example_style_19(void)
{
/*Add lv_example_style_11 as background*/
lv_example_style_11();
/* Set to 1 to enable recolor overlay instead of solid background */
#if 0
/* Apply a screen-wide tint using recolor (efficient overlay).
* This modifies the visual appearance by blending a semi-transparent color
* over existing content without creating additional objects.
* It’s lighter on performance compared to a full-size background object. */
lv_obj_set_style_recolor(lv_screen_active(), lv_color_black(), 0);
lv_obj_set_style_recolor_opa(lv_screen_active(), LV_OPA_50, 0);
#else
/* Simulate a modal background by setting a semi-transparent black background
* on lv_layer_top(), the highest built-in layer.
* This method creates a new full-screen object and can consume more resources
* compared to recolor, especially when using images or gradients. */
lv_obj_set_style_bg_color(lv_layer_top(), lv_color_black(), 0);
lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_50, 0);
#endif
lv_obj_t * obj = lv_slider_create(lv_layer_top());
lv_obj_center(obj);
lv_refr_now(NULL); /*Update layouts and render*/
lv_obj_invalidate(lv_screen_active());
uint32_t t = lv_tick_get();
lv_refr_now(NULL); /*Render only*/
LV_LOG_USER("%" LV_PRIu32 " ms\n", lv_tick_elaps(t));
}
#endif
Transform style¶
C code
View on GitHub/**
* @file lv_example_style_20.c
*/
/*********************
* INCLUDES
*********************/
#include "lv_example_style.h"
#if LV_BUILD_EXAMPLES
/*********************
* DEFINES
*********************/
/**********************
* TYPEDEFS
**********************/
typedef struct {
const void * image;
const char * name;
const char * description;
} card_info_t;
/**********************
* STATIC PROTOTYPES
**********************/
static void arc_event_cb(lv_event_t * e);
static void slider_event_cb(lv_event_t * e);
static lv_obj_t * card_create(void);
/**********************
* STATIC VARIABLES
**********************/
static lv_style_t style_card;
static lv_style_t style_avatar;
static lv_style_t style_btn;
static lv_obj_t * card_to_transform;
LV_IMAGE_DECLARE(img_transform_avatar_15);
/**********************
* MACROS
**********************/
/**********************
* GLOBAL FUNCTIONS
**********************/
void lv_example_style_20(void)
{
static const int32_t grid_cols[] = {LV_GRID_CONTENT, 4, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
static const int32_t grid_rows[] = {LV_GRID_CONTENT, -10, LV_GRID_FR(1), LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
lv_style_init(&style_card);
lv_style_set_width(&style_card, 300);
lv_style_set_height(&style_card, 120);
lv_style_set_layout(&style_card, LV_LAYOUT_GRID);
lv_style_set_grid_column_dsc_array(&style_card, grid_cols);
lv_style_set_grid_row_dsc_array(&style_card, grid_rows);
lv_style_set_shadow_width(&style_card, 20);
lv_style_set_shadow_offset_y(&style_card, 5);
lv_style_set_shadow_color(&style_card, lv_color_hex3(0xccc));
lv_style_set_border_width(&style_card, 0);
lv_style_set_radius(&style_card, 12);
lv_style_set_base_dir(&style_card, LV_BASE_DIR_AUTO);
lv_style_init(&style_avatar);
lv_style_set_shadow_width(&style_avatar, 20);
lv_style_set_shadow_offset_y(&style_avatar, 5);
lv_style_set_shadow_color(&style_avatar, lv_color_hex3(0xbbb));
lv_style_set_radius(&style_avatar, LV_RADIUS_CIRCLE);
lv_style_init(&style_btn);
lv_style_set_width(&style_btn, 140);
lv_style_set_height(&style_btn, 37);
lv_style_set_bg_color(&style_btn, lv_color_hex(0x759efe));
lv_style_set_bg_grad_color(&style_btn, lv_color_hex(0x4173ff));
lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_HOR);
lv_style_set_radius(&style_btn, LV_RADIUS_CIRCLE);
lv_style_set_shadow_width(&style_btn, 0);
lv_obj_t * card;
card = card_create();
lv_obj_set_style_opa(card, LV_OPA_50, 0);
lv_obj_center(card);
card_to_transform = card_create();
lv_obj_center(card_to_transform);
int32_t disp_w = lv_display_get_horizontal_resolution(NULL);
lv_obj_t * arc = lv_arc_create(lv_screen_active());
lv_obj_set_size(arc, disp_w - 20, disp_w - 20);
lv_arc_set_range(arc, 0, 270);
lv_arc_set_value(arc, 225);
lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST);
lv_obj_center(arc);
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, lv_pct(70));
lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, 0, -20);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_slider_set_range(slider, 128, 300);
lv_slider_set_value(slider, 256, LV_ANIM_OFF);
}
/**********************
* STATIC FUNCTIONS
**********************/
static lv_obj_t * card_create(void)
{
lv_obj_t * card = lv_obj_create(lv_screen_active());
lv_obj_add_style(card, &style_card, 0);
lv_obj_remove_flag(card, LV_OBJ_FLAG_CLICKABLE);
lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLL_CHAIN_HOR);
lv_obj_t * avatar = lv_image_create(card);
lv_image_set_src(avatar, &img_transform_avatar_15);
lv_obj_set_grid_cell(avatar, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 4);
lv_obj_add_style(avatar, &style_avatar, 0);
lv_obj_t * name = lv_label_create(card);
lv_label_set_text(name, "Pavel Svoboda");
lv_obj_set_grid_cell(name, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_style_text_font(name, &lv_font_montserrat_14, 0);
lv_obj_t * btn = lv_button_create(card);
lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLL_CHAIN_HOR);
lv_obj_set_grid_cell(btn, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 3, 1);
lv_obj_add_style(btn, &style_btn, 0);
LV_IMAGE_DECLARE(img_multilang_like);
lv_obj_t * btn_img = lv_image_create(btn);
lv_image_set_src(btn_img, &img_multilang_like);
lv_obj_align(btn_img, LV_ALIGN_LEFT_MID, 30, 0);
lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Like");
lv_obj_align(btn_label, LV_ALIGN_LEFT_MID, 60, 1);
lv_obj_scroll_to_view(card, LV_ANIM_OFF);
return card;
}
static void arc_event_cb(lv_event_t * e)
{
lv_obj_t * arc = lv_event_get_target_obj(e);
int32_t v = (int32_t)lv_arc_get_angle_end(arc);
lv_obj_set_style_transform_rotation(card_to_transform, v * 10, 0);
}
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target_obj(e);
int32_t v = lv_slider_get_value(slider);
lv_obj_set_style_transform_scale_x(card_to_transform, v, 0);
lv_obj_set_style_transform_scale_y(card_to_transform, v, 0);
}
#endif
Animations¶
Start animation on an event¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SWITCH
static void anim_x_cb(void * var, int32_t v)
{
lv_obj_set_x((lv_obj_t *) var, v);
}
static void sw_event_cb(lv_event_t * e)
{
lv_obj_t * sw = lv_event_get_target_obj(e);
lv_obj_t * label = (lv_obj_t *) lv_event_get_user_data(e);
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) {
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, label);
lv_anim_set_values(&a, lv_obj_get_x(label), 100);
lv_anim_set_duration(&a, 500);
lv_anim_set_exec_cb(&a, anim_x_cb);
lv_anim_set_path_cb(&a, lv_anim_path_overshoot);
lv_anim_start(&a);
}
else {
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, label);
lv_anim_set_values(&a, lv_obj_get_x(label), -lv_obj_get_width(label));
lv_anim_set_duration(&a, 500);
lv_anim_set_exec_cb(&a, anim_x_cb);
lv_anim_set_path_cb(&a, lv_anim_path_ease_in);
lv_anim_start(&a);
}
}
/**
* Start animation on an event
*/
void lv_example_anim_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello animations!");
lv_obj_set_pos(label, 100, 10);
lv_obj_t * sw = lv_switch_create(lv_screen_active());
lv_obj_center(sw);
lv_obj_add_state(sw, LV_STATE_CHECKED);
lv_obj_add_event_cb(sw, sw_event_cb, LV_EVENT_VALUE_CHANGED, label);
}
#endif
Playback animation¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SWITCH
static void anim_x_cb(void * var, int32_t v)
{
lv_obj_set_x((lv_obj_t *) var, v);
}
static void anim_size_cb(void * var, int32_t v)
{
lv_obj_set_size((lv_obj_t *) var, v, v);
}
/**
* Create a playback animation
*/
void lv_example_anim_2(void)
{
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_remove_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, 0);
lv_obj_align(obj, LV_ALIGN_LEFT_MID, 10, 0);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, obj);
lv_anim_set_values(&a, 10, 50);
lv_anim_set_duration(&a, 1000);
lv_anim_set_reverse_delay(&a, 100);
lv_anim_set_reverse_duration(&a, 300);
lv_anim_set_repeat_delay(&a, 500);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);
lv_anim_set_exec_cb(&a, anim_size_cb);
lv_anim_start(&a);
lv_anim_set_exec_cb(&a, anim_x_cb);
lv_anim_set_values(&a, 10, 240);
lv_anim_start(&a);
}
#endif
Cubic Bezier animation¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_CHART && LV_USE_BUTTON && LV_USE_GRID
/**
* the example show the use of cubic-bezier3 in animation.
* the control point P1,P2 of cubic-bezier3 can be adjusted by slider.
* and the chart shows the cubic-bezier3 in real time. you can click
* run button see animation in current point of cubic-bezier3.
*/
#define CHART_POINTS_NUM 256
struct {
lv_obj_t * anim_obj;
lv_obj_t * chart;
lv_chart_series_t * ser1;
lv_obj_t * p1_slider;
lv_obj_t * p1_label;
lv_obj_t * p2_slider;
lv_obj_t * p2_label;
lv_obj_t * run_btn;
int32_t p1;
int32_t p2;
lv_anim_t a;
} ginfo;
static int32_t anim_path_bezier3_cb(const lv_anim_t * a);
static void refer_chart_cubic_bezier(void);
static void run_button_event_handler(lv_event_t * e);
static void slider_event_cb(lv_event_t * e);
static void page_obj_init(lv_obj_t * par);
static void anim_x_cb(void * var, int32_t v);
/**
* create an animation
*/
void lv_example_anim_3(void)
{
static int32_t col_dsc[] = {LV_GRID_FR(1), 200, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {30, 10, 10, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_style_pad_all(cont, 2, LV_PART_MAIN);
lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);
lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
lv_obj_set_size(cont, 320, 240);
lv_obj_center(cont);
page_obj_init(cont);
lv_anim_init(&ginfo.a);
lv_anim_set_var(&ginfo.a, ginfo.anim_obj);
int32_t end = lv_obj_get_style_width(cont, LV_PART_MAIN) -
lv_obj_get_style_width(ginfo.anim_obj, LV_PART_MAIN) - 10;
lv_anim_set_values(&ginfo.a, 5, end);
lv_anim_set_duration(&ginfo.a, 2000);
lv_anim_set_exec_cb(&ginfo.a, anim_x_cb);
lv_anim_set_path_cb(&ginfo.a, anim_path_bezier3_cb);
refer_chart_cubic_bezier();
}
static int32_t anim_path_bezier3_cb(const lv_anim_t * a)
{
int32_t t = lv_map(a->act_time, 0, a->duration, 0, 1024);
int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024);
int32_t new_value;
new_value = step * (a->end_value - a->start_value);
new_value = new_value >> 10;
new_value += a->start_value;
return new_value;
}
static void refer_chart_cubic_bezier(void)
{
for(uint16_t i = 0; i <= CHART_POINTS_NUM; i ++) {
int32_t t = i * (1024 / CHART_POINTS_NUM);
int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024);
lv_chart_set_series_value_by_id2(ginfo.chart, ginfo.ser1, i, t, step);
}
lv_chart_refresh(ginfo.chart);
}
static void anim_x_cb(void * var, int32_t v)
{
lv_obj_set_style_translate_x((lv_obj_t *)var, v, LV_PART_MAIN);
}
static void run_button_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED) {
lv_anim_start(&ginfo.a);
}
}
static void slider_event_cb(lv_event_t * e)
{
char buf[16];
lv_obj_t * label;
lv_obj_t * slider = lv_event_get_target_obj(e);
if(slider == ginfo.p1_slider) {
label = ginfo.p1_label;
ginfo.p1 = lv_slider_get_value(slider);
lv_snprintf(buf, sizeof(buf), "p1:%d", ginfo.p1);
}
else {
label = ginfo.p2_label;
ginfo.p2 = lv_slider_get_value(slider);
lv_snprintf(buf, sizeof(buf), "p2:%d", ginfo.p2);
}
lv_label_set_text(label, buf);
refer_chart_cubic_bezier();
}
static void page_obj_init(lv_obj_t * par)
{
ginfo.anim_obj = lv_obj_create(par);
lv_obj_set_size(ginfo.anim_obj, 30, 30);
lv_obj_set_align(ginfo.anim_obj, LV_ALIGN_TOP_LEFT);
lv_obj_remove_flag(ginfo.anim_obj, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_set_style_bg_color(ginfo.anim_obj, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN);
lv_obj_set_grid_cell(ginfo.anim_obj, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 0, 1);
ginfo.p1_label = lv_label_create(par);
ginfo.p2_label = lv_label_create(par);
lv_label_set_text(ginfo.p1_label, "p1:0");
lv_label_set_text(ginfo.p2_label, "p2:0");
lv_obj_set_grid_cell(ginfo.p1_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 1, 1);
lv_obj_set_grid_cell(ginfo.p2_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
ginfo.p1_slider = lv_slider_create(par);
ginfo.p2_slider = lv_slider_create(par);
lv_slider_set_range(ginfo.p1_slider, 0, 1024);
lv_slider_set_range(ginfo.p2_slider, 0, 1024);
lv_obj_set_style_pad_all(ginfo.p1_slider, 2, LV_PART_KNOB);
lv_obj_set_style_pad_all(ginfo.p2_slider, 2, LV_PART_KNOB);
lv_obj_add_event_cb(ginfo.p1_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_add_event_cb(ginfo.p2_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_set_grid_cell(ginfo.p1_slider, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 1, 1);
lv_obj_set_grid_cell(ginfo.p2_slider, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 2, 1);
ginfo.run_btn = lv_button_create(par);
lv_obj_add_event_cb(ginfo.run_btn, run_button_event_handler, LV_EVENT_CLICKED, NULL);
lv_obj_t * btn_label = lv_label_create(ginfo.run_btn);
lv_label_set_text(btn_label, LV_SYMBOL_PLAY);
lv_obj_center(btn_label);
lv_obj_set_grid_cell(ginfo.run_btn, LV_GRID_ALIGN_STRETCH, 2, 1, LV_GRID_ALIGN_STRETCH, 1, 2);
ginfo.chart = lv_chart_create(par);
lv_obj_set_style_pad_all(ginfo.chart, 0, LV_PART_MAIN);
lv_obj_set_style_size(ginfo.chart, 0, 0, LV_PART_INDICATOR);
lv_chart_set_type(ginfo.chart, LV_CHART_TYPE_SCATTER);
ginfo.ser1 = lv_chart_add_series(ginfo.chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_set_axis_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1024);
lv_chart_set_axis_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_X, 0, 1024);
lv_chart_set_point_count(ginfo.chart, CHART_POINTS_NUM);
lv_obj_set_grid_cell(ginfo.chart, LV_GRID_ALIGN_STRETCH, 0, 3, LV_GRID_ALIGN_STRETCH, 3, 1);
}
#endif
Pause animation¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SWITCH
static void anim_x_cb(void * var, int32_t v)
{
lv_obj_set_x((lv_obj_t *) var, v);
}
static void timer_cb(lv_timer_t * timer)
{
lv_anim_t * anim = (lv_anim_t *) lv_timer_get_user_data(timer);
lv_anim_pause_for(anim, 1000);
lv_timer_delete(timer);
}
static void sw_event_cb(lv_event_t * e)
{
lv_obj_t * sw = lv_event_get_target_obj(e);
lv_obj_t * label = (lv_obj_t *) lv_event_get_user_data(e);
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) {
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, label);
lv_anim_set_values(&a, lv_obj_get_x(label), 100);
lv_anim_set_duration(&a, 500);
lv_anim_set_exec_cb(&a, anim_x_cb);
lv_anim_set_path_cb(&a, lv_anim_path_overshoot);
lv_timer_create(timer_cb, 200, lv_anim_start(&a));
}
else {
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, label);
lv_anim_set_values(&a, lv_obj_get_x(label), -lv_obj_get_width(label));
lv_anim_set_duration(&a, 500);
lv_anim_set_exec_cb(&a, anim_x_cb);
lv_anim_set_path_cb(&a, lv_anim_path_ease_in);
lv_timer_create(timer_cb, 200, lv_anim_start(&a));
}
}
/**
* Start animation on an event
*/
void lv_example_anim_4(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello animations!");
lv_obj_set_pos(label, 100, 10);
lv_obj_t * sw = lv_switch_create(lv_screen_active());
lv_obj_center(sw);
lv_obj_add_state(sw, LV_STATE_CHECKED);
lv_obj_add_event_cb(sw, sw_event_cb, LV_EVENT_VALUE_CHANGED, label);
}
#endif
Animation timeline¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
static const int32_t obj_width = 90;
static const int32_t obj_height = 70;
static void set_width(lv_anim_t * var, int32_t v)
{
lv_obj_set_width((lv_obj_t *) var->var, v);
}
static void set_height(lv_anim_t * var, int32_t v)
{
lv_obj_set_height((lv_obj_t *) var->var, v);
}
static void set_slider_value(lv_anim_t * var, int32_t v)
{
lv_slider_set_value((lv_obj_t *) var->var, v, LV_ANIM_OFF);
}
static void btn_start_event_handler(lv_event_t * e)
{
lv_obj_t * btn = lv_event_get_current_target_obj(e);
lv_anim_timeline_t * anim_timeline = (lv_anim_timeline_t *) lv_event_get_user_data(e);
bool reverse = lv_obj_has_state(btn, LV_STATE_CHECKED);
lv_anim_timeline_set_reverse(anim_timeline, reverse);
lv_anim_timeline_start(anim_timeline);
}
static void btn_pause_event_handler(lv_event_t * e)
{
lv_anim_timeline_t * anim_timeline = (lv_anim_timeline_t *) lv_event_get_user_data(e);
lv_anim_timeline_pause(anim_timeline);
}
static void slider_prg_event_handler(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_current_target_obj(e);
lv_anim_timeline_t * anim_timeline = (lv_anim_timeline_t *) lv_event_get_user_data(e);
int32_t progress = lv_slider_get_value(slider);
lv_anim_timeline_set_progress(anim_timeline, (uint16_t) progress);
}
/**
* Create an animation timeline
*/
void lv_example_anim_timeline_1(void)
{
/* Create anim timeline */
lv_anim_timeline_t * anim_timeline = lv_anim_timeline_create();
lv_obj_t * par = lv_screen_active();
lv_obj_set_flex_flow(par, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(par, LV_FLEX_ALIGN_SPACE_AROUND, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
/* create btn_start */
lv_obj_t * btn_start = lv_button_create(par);
lv_obj_add_event_cb(btn_start, btn_start_event_handler, LV_EVENT_VALUE_CHANGED, anim_timeline);
lv_obj_add_flag(btn_start, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_add_flag(btn_start, LV_OBJ_FLAG_CHECKABLE);
lv_obj_align(btn_start, LV_ALIGN_TOP_MID, -100, 20);
lv_obj_t * label_start = lv_label_create(btn_start);
lv_label_set_text(label_start, "Start");
lv_obj_center(label_start);
/* create btn_pause */
lv_obj_t * btn_pause = lv_button_create(par);
lv_obj_add_event_cb(btn_pause, btn_pause_event_handler, LV_EVENT_CLICKED, anim_timeline);
lv_obj_add_flag(btn_pause, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_align(btn_pause, LV_ALIGN_TOP_MID, 100, 20);
lv_obj_t * label_pause = lv_label_create(btn_pause);
lv_label_set_text(label_pause, "Pause");
lv_obj_center(label_pause);
/* create slider_prg */
lv_obj_t * slider_prg = lv_slider_create(par);
lv_obj_add_event_cb(slider_prg, slider_prg_event_handler, LV_EVENT_VALUE_CHANGED, anim_timeline);
lv_obj_add_flag(slider_prg, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_align(slider_prg, LV_ALIGN_BOTTOM_MID, 0, -20);
lv_slider_set_range(slider_prg, 0, LV_ANIM_TIMELINE_PROGRESS_MAX);
/* create 3 objects */
lv_obj_t * obj1 = lv_obj_create(par);
lv_obj_set_size(obj1, obj_width, obj_height);
lv_obj_set_scrollbar_mode(obj1, LV_SCROLLBAR_MODE_OFF);
lv_obj_t * obj2 = lv_obj_create(par);
lv_obj_set_size(obj2, obj_width, obj_height);
lv_obj_set_scrollbar_mode(obj2, LV_SCROLLBAR_MODE_OFF);
lv_obj_t * obj3 = lv_obj_create(par);
lv_obj_set_size(obj3, obj_width, obj_height);
lv_obj_set_scrollbar_mode(obj3, LV_SCROLLBAR_MODE_OFF);
/* anim-slider */
lv_anim_t a_slider;
lv_anim_init(&a_slider);
lv_anim_set_var(&a_slider, slider_prg);
lv_anim_set_values(&a_slider, 0, LV_ANIM_TIMELINE_PROGRESS_MAX);
lv_anim_set_custom_exec_cb(&a_slider, set_slider_value);
lv_anim_set_path_cb(&a_slider, lv_anim_path_linear);
lv_anim_set_duration(&a_slider, 700);
/* anim-obj1 */
lv_anim_t a1;
lv_anim_init(&a1);
lv_anim_set_var(&a1, obj1);
lv_anim_set_values(&a1, 0, obj_width);
lv_anim_set_custom_exec_cb(&a1, set_width);
lv_anim_set_path_cb(&a1, lv_anim_path_overshoot);
lv_anim_set_duration(&a1, 300);
lv_anim_t a2;
lv_anim_init(&a2);
lv_anim_set_var(&a2, obj1);
lv_anim_set_values(&a2, 0, obj_height);
lv_anim_set_custom_exec_cb(&a2, set_height);
lv_anim_set_path_cb(&a2, lv_anim_path_ease_out);
lv_anim_set_duration(&a2, 300);
/* anim-obj2 */
lv_anim_t a3;
lv_anim_init(&a3);
lv_anim_set_var(&a3, obj2);
lv_anim_set_values(&a3, 0, obj_width);
lv_anim_set_custom_exec_cb(&a3, set_width);
lv_anim_set_path_cb(&a3, lv_anim_path_overshoot);
lv_anim_set_duration(&a3, 300);
lv_anim_t a4;
lv_anim_init(&a4);
lv_anim_set_var(&a4, obj2);
lv_anim_set_values(&a4, 0, obj_height);
lv_anim_set_custom_exec_cb(&a4, set_height);
lv_anim_set_path_cb(&a4, lv_anim_path_ease_out);
lv_anim_set_duration(&a4, 300);
/* anim-obj3 */
lv_anim_t a5;
lv_anim_init(&a5);
lv_anim_set_var(&a5, obj3);
lv_anim_set_values(&a5, 0, obj_width);
lv_anim_set_custom_exec_cb(&a5, set_width);
lv_anim_set_path_cb(&a5, lv_anim_path_overshoot);
lv_anim_set_duration(&a5, 300);
lv_anim_t a6;
lv_anim_init(&a6);
lv_anim_set_var(&a6, obj3);
lv_anim_set_values(&a6, 0, obj_height);
lv_anim_set_custom_exec_cb(&a6, set_height);
lv_anim_set_path_cb(&a6, lv_anim_path_ease_out);
lv_anim_set_duration(&a6, 300);
/* add animations to timeline */
lv_anim_timeline_add(anim_timeline, 0, &a_slider);
lv_anim_timeline_add(anim_timeline, 0, &a1);
lv_anim_timeline_add(anim_timeline, 0, &a2);
lv_anim_timeline_add(anim_timeline, 200, &a3);
lv_anim_timeline_add(anim_timeline, 200, &a4);
lv_anim_timeline_add(anim_timeline, 400, &a5);
lv_anim_timeline_add(anim_timeline, 400, &a6);
lv_anim_timeline_set_progress(anim_timeline, LV_ANIM_TIMELINE_PROGRESS_MAX);
}
#endif
Events¶
Click streaks¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LABEL
static void short_click_event_cb(lv_event_t * e)
{
LV_LOG_USER("Short clicked");
lv_obj_t * info_label = (lv_obj_t *) lv_event_get_user_data(e);
lv_indev_t * indev = (lv_indev_t *) lv_event_get_param(e);
uint8_t cnt = lv_indev_get_short_click_streak(indev);
lv_label_set_text_fmt(info_label, "Short click streak: %u", cnt);
}
static void streak_event_cb(lv_event_t * e)
{
lv_obj_t * btn = lv_event_get_target_obj(e);
lv_obj_t * label = lv_obj_get_child(btn, 0);
const char * text = (const char *) lv_event_get_user_data(e);
lv_label_set_text(label, text);
}
void lv_example_event_streak(void)
{
lv_obj_t * info_label = lv_label_create(lv_screen_active());
lv_label_set_text(info_label, "No events yet");
lv_obj_t * btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, 100, 50);
lv_obj_center(btn);
lv_obj_add_event_cb(btn, short_click_event_cb, LV_EVENT_SHORT_CLICKED, info_label);
lv_obj_add_event_cb(btn, streak_event_cb, LV_EVENT_SINGLE_CLICKED, (void *) "Single clicked");
lv_obj_add_event_cb(btn, streak_event_cb, LV_EVENT_DOUBLE_CLICKED, (void *) "Double clicked");
lv_obj_add_event_cb(btn, streak_event_cb, LV_EVENT_TRIPLE_CLICKED, (void *) "Triple clicked");
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, "Click me!");
lv_obj_center(label);
}
#endif
Handle multiple events¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_SWITCH
static void event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * label = (lv_obj_t *) lv_event_get_user_data(e);
switch(code) {
case LV_EVENT_PRESSED:
lv_label_set_text(label, "The last button event:\nLV_EVENT_PRESSED");
break;
case LV_EVENT_CLICKED:
lv_label_set_text(label, "The last button event:\nLV_EVENT_CLICKED");
break;
case LV_EVENT_LONG_PRESSED:
lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED");
break;
case LV_EVENT_LONG_PRESSED_REPEAT:
lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED_REPEAT");
break;
default:
break;
}
}
/**
* Handle multiple events
*/
void lv_example_event_button(void)
{
lv_obj_t * btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, 100, 50);
lv_obj_center(btn);
lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Click me!");
lv_obj_center(btn_label);
lv_obj_t * info_label = lv_label_create(lv_screen_active());
lv_label_set_text(info_label, "The last button event:\nNone");
lv_obj_add_event_cb(btn, event_cb, LV_EVENT_ALL, info_label);
}
#endif
Event bubbling¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static void event_cb(lv_event_t * e)
{
/*The original target of the event. Can be the buttons or the container*/
lv_obj_t * target = lv_event_get_target_obj(e);
/*The current target is always the container as the event is added to it*/
lv_obj_t * cont = lv_event_get_current_target_obj(e);
/*If container was clicked do nothing*/
if(target == cont) return;
/*Make the clicked buttons red*/
lv_obj_set_style_bg_color(target, lv_palette_main(LV_PALETTE_RED), 0);
}
/**
* Demonstrate event bubbling
*/
void lv_example_event_bubble(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 290, 200);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
uint32_t i;
for(i = 0; i < 30; i++) {
lv_obj_t * btn = lv_button_create(cont);
lv_obj_set_size(btn, 70, 50);
lv_obj_add_flag(btn, LV_OBJ_FLAG_EVENT_BUBBLE);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text_fmt(label, "%" LV_PRIu32, i);
lv_obj_center(label);
}
lv_obj_add_event_cb(cont, event_cb, LV_EVENT_CLICKED, NULL);
}
#endif
Event trickle-down¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
/**
* Demonstrate event trickle
*/
void lv_example_event_trickle(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 290, 200);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
static lv_style_t style_black;
lv_style_init(&style_black);
lv_style_set_text_color(&style_black, lv_color_white());
lv_style_set_bg_color(&style_black, lv_color_black());
/*Enable event trickle-down on the container*/
lv_obj_add_flag(cont, LV_OBJ_FLAG_EVENT_TRICKLE);
lv_obj_add_style(cont, &style_black, LV_STATE_PRESSED);
uint32_t i;
for(i = 0; i < 9; i++) {
lv_obj_t * subcont = lv_obj_create(cont);
lv_obj_set_size(subcont, 70, 50);
lv_obj_t * label = lv_label_create(subcont);
lv_label_set_text_fmt(label, "%" LV_PRIu32, i);
/*Add style to the label when clicked*/
lv_obj_add_style(subcont, &style_black, LV_STATE_FOCUSED);
}
}
#endif
Draw event¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
static int32_t size = 0;
static bool size_dec = false;
static void timer_cb(lv_timer_t * timer)
{
lv_obj_invalidate((lv_obj_t *) lv_timer_get_user_data(timer));
if(size_dec) size--;
else size++;
if(size == 50) size_dec = true;
else if(size == 0) size_dec = false;
}
static void event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *) lv_draw_task_get_draw_dsc(draw_task);
if(base_dsc->part == LV_PART_MAIN) {
lv_draw_rect_dsc_t draw_dsc;
lv_draw_rect_dsc_init(&draw_dsc);
draw_dsc.bg_color = lv_color_hex(0xffaaaa);
draw_dsc.radius = LV_RADIUS_CIRCLE;
draw_dsc.border_color = lv_color_hex(0xff5555);
draw_dsc.border_width = 2;
draw_dsc.outline_color = lv_color_hex(0xff0000);
draw_dsc.outline_pad = 3;
draw_dsc.outline_width = 2;
lv_area_t a;
a.x1 = 0;
a.y1 = 0;
a.x2 = size;
a.y2 = size;
lv_area_t obj_coords;
lv_obj_get_coords(obj, &obj_coords);
lv_area_align(&obj_coords, &a, LV_ALIGN_CENTER, 0, 0);
lv_draw_rect(base_dsc->layer, &draw_dsc, &a);
}
}
/**
* Demonstrate the usage of draw event
*/
void lv_example_event_draw(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 200, 200);
lv_obj_center(cont);
lv_obj_add_event_cb(cont, event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(cont, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_timer_create(timer_cb, 30, cont);
}
#endif
Layouts¶
Flex¶
A simple row and a column layout with flexbox¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
/**
* A simple row and a column layout with flexbox
*/
void lv_example_flex_1(void)
{
/*Create a container with ROW flex direction*/
lv_obj_t * cont_row = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont_row, 300, 75);
lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);
lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);
/*Create a container with COLUMN flex direction*/
lv_obj_t * cont_col = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont_col, 200, 150);
lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_obj_t * obj;
lv_obj_t * label;
/*Add items to the row*/
obj = lv_button_create(cont_row);
lv_obj_set_size(obj, 100, LV_PCT(100));
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item: %" LV_PRIu32"", i);
lv_obj_center(label);
/*Add items to the column*/
obj = lv_button_create(cont_col);
lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item: %" LV_PRIu32, i);
lv_obj_center(label);
}
}
#endif
Arrange items in rows with wrap and even spacing¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
/**
* Arrange items in rows with wrap and place the items to get even space around them.
*/
void lv_example_flex_2(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_flex_flow(&style, LV_FLEX_FLOW_ROW_WRAP);
lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY);
lv_style_set_layout(&style, LV_LAYOUT_FLEX);
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_add_style(cont, &style, 0);
uint32_t i;
for(i = 0; i < 8; i++) {
lv_obj_t * obj = lv_obj_create(cont);
lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
lv_obj_add_flag(obj, LV_OBJ_FLAG_CHECKABLE);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%" LV_PRIu32, i);
lv_obj_center(label);
}
}
#endif
Demonstrate flex grow¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
/**
* Demonstrate flex grow.
*/
void lv_example_flex_3(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);
lv_obj_t * obj;
obj = lv_obj_create(cont);
lv_obj_set_size(obj, 40, 40); /*Fix size*/
obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40);
lv_obj_set_flex_grow(obj, 1); /*1 portion from the free space*/
obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40);
lv_obj_set_flex_grow(obj, 2); /*2 portion from the free space*/
obj = lv_obj_create(cont);
lv_obj_set_size(obj, 40, 40); /*Fix size. It is flushed to the right by the "grow" items*/
}
#endif
Demonstrate flex grow.¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
/**
* Reverse the order of flex items
*/
void lv_example_flex_4(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN_REVERSE);
uint32_t i;
for(i = 0; i < 6; i++) {
lv_obj_t * obj = lv_obj_create(cont);
lv_obj_set_size(obj, 100, 50);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item: %" LV_PRIu32, i);
lv_obj_center(label);
}
}
#endif
Demonstrate column and row gap style properties¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
static void row_gap_anim(void * obj, int32_t v)
{
lv_obj_set_style_pad_row((lv_obj_t *) obj, v, 0);
}
static void column_gap_anim(void * obj, int32_t v)
{
lv_obj_set_style_pad_column((lv_obj_t *) obj, v, 0);
}
/**
* Demonstrate the effect of column and row gap style properties
*/
void lv_example_flex_5(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
uint32_t i;
for(i = 0; i < 9; i++) {
lv_obj_t * obj = lv_obj_create(cont);
lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%" LV_PRIu32, i);
lv_obj_center(label);
}
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, cont);
lv_anim_set_values(&a, 0, 10);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_set_exec_cb(&a, row_gap_anim);
lv_anim_set_duration(&a, 500);
lv_anim_set_reverse_duration(&a, 500);
lv_anim_start(&a);
lv_anim_set_exec_cb(&a, column_gap_anim);
lv_anim_set_duration(&a, 3000);
lv_anim_set_reverse_duration(&a, 3000);
lv_anim_start(&a);
}
#endif
RTL base direction changes order of the items¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FLEX && LV_BUILD_EXAMPLES
/**
* RTL base direction changes order of the items.
* Also demonstrate how horizontal scrolling works with RTL.
*/
void lv_example_flex_6(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
uint32_t i;
for(i = 0; i < 20; i++) {
lv_obj_t * obj = lv_obj_create(cont);
lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%" LV_PRIu32, i);
lv_obj_center(label);
}
}
#endif
Grid¶
A simple grid¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES
/**
* A simple grid
*/
void lv_example_grid_1(void)
{
static int32_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_layout(cont, LV_LAYOUT_GRID);
lv_obj_t * label;
lv_obj_t * obj;
uint8_t i;
for(i = 0; i < 9; i++) {
uint8_t col = i % 3;
uint8_t row = i / 3;
obj = lv_button_create(cont);
/*Stretch the cell horizontally and vertically too
*Set span to 1 to make the cell 1 column/row sized*/
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
LV_GRID_ALIGN_STRETCH, row, 1);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "c%d, r%d", col, row);
lv_obj_center(label);
}
}
#endif
Demonstrate cell placement and span¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES
/**
* Demonstrate cell placement and span
*/
void lv_example_grid_2(void)
{
static int32_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_t * label;
lv_obj_t * obj;
/*Cell to 0;0 and align to to the start (left/top) horizontally and vertically too*/
obj = lv_obj_create(cont);
lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 0, 1,
LV_GRID_ALIGN_START, 0, 1);
label = lv_label_create(obj);
lv_label_set_text(label, "c0, r0");
/*Cell to 1;0 and align to to the start (left) horizontally and center vertically too*/
obj = lv_obj_create(cont);
lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 1, 1,
LV_GRID_ALIGN_CENTER, 0, 1);
label = lv_label_create(obj);
lv_label_set_text(label, "c1, r0");
/*Cell to 2;0 and align to to the start (left) horizontally and end (bottom) vertically too*/
obj = lv_obj_create(cont);
lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 2, 1,
LV_GRID_ALIGN_END, 0, 1);
label = lv_label_create(obj);
lv_label_set_text(label, "c2, r0");
/*Cell to 1;1 but 2 column wide (span = 2).Set width and height to stretched.*/
obj = lv_obj_create(cont);
lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 2,
LV_GRID_ALIGN_STRETCH, 1, 1);
label = lv_label_create(obj);
lv_label_set_text(label, "c1-2, r1");
/*Cell to 0;1 but 2 rows tall (span = 2).Set width and height to stretched.*/
obj = lv_obj_create(cont);
lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1,
LV_GRID_ALIGN_STRETCH, 1, 2);
label = lv_label_create(obj);
lv_label_set_text(label, "c0\nr1-2");
}
#endif
Demonstrate grid's -free unit-¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES
/**
* Demonstrate grid's "free unit"
*/
void lv_example_grid_3(void)
{
/*Column 1: fix width 60 px
*Column 2: 1 unit from the remaining free space
*Column 3: 2 unit from the remaining free space*/
static int32_t col_dsc[] = {60, LV_GRID_FR(1), LV_GRID_FR(2), LV_GRID_TEMPLATE_LAST};
/*Row 1: fix width 50 px
*Row 2: 1 unit from the remaining free space
*Row 3: fix width 50 px*/
static int32_t row_dsc[] = {50, LV_GRID_FR(1), 50, LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
lv_obj_t * label;
lv_obj_t * obj;
uint8_t i;
for(i = 0; i < 9; i++) {
uint8_t col = i % 3;
uint8_t row = i / 3;
obj = lv_obj_create(cont);
/*Stretch the cell horizontally and vertically too
*Set span to 1 to make the cell 1 column/row sized*/
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
LV_GRID_ALIGN_STRETCH, row, 1);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%d,%d", col, row);
lv_obj_center(label);
}
}
#endif
Demonstrate track placement¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES
/**
* Demonstrate track placement
*/
void lv_example_grid_4(void)
{
static int32_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};
/*Add space between the columns and move the rows to the bottom (end)*/
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_grid_align(cont, LV_GRID_ALIGN_SPACE_BETWEEN, LV_GRID_ALIGN_END);
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_t * label;
lv_obj_t * obj;
uint8_t i;
for(i = 0; i < 9; i++) {
uint8_t col = i % 3;
uint8_t row = i / 3;
obj = lv_obj_create(cont);
/*Stretch the cell horizontally and vertically too
*Set span to 1 to make the cell 1 column/row sized*/
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
LV_GRID_ALIGN_STRETCH, row, 1);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%d,%d", col, row);
lv_obj_center(label);
}
}
#endif
Demonstrate column and row gap¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES
static void row_gap_anim(void * obj, int32_t v)
{
lv_obj_set_style_pad_row((lv_obj_t *) obj, v, 0);
}
static void column_gap_anim(void * obj, int32_t v)
{
lv_obj_set_style_pad_column((lv_obj_t *) obj, v, 0);
}
/**
* Demonstrate column and row gap
*/
void lv_example_grid_5(void)
{
/*60x60 cells*/
static int32_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
lv_obj_t * label;
lv_obj_t * obj;
uint8_t i;
for(i = 0; i < 9; i++) {
uint8_t col = i % 3;
uint8_t row = i / 3;
obj = lv_obj_create(cont);
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
LV_GRID_ALIGN_STRETCH, row, 1);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%d,%d", col, row);
lv_obj_center(label);
}
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, cont);
lv_anim_set_values(&a, 0, 10);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_set_exec_cb(&a, row_gap_anim);
lv_anim_set_duration(&a, 500);
lv_anim_set_reverse_duration(&a, 500);
lv_anim_start(&a);
lv_anim_set_exec_cb(&a, column_gap_anim);
lv_anim_set_duration(&a, 3000);
lv_anim_set_reverse_duration(&a, 3000);
lv_anim_start(&a);
}
#endif
Demonstrate RTL direction on grid¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GRID && LV_BUILD_EXAMPLES
/**
* Demonstrate RTL direction on grid
*/
void lv_example_grid_6(void)
{
static int32_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
static int32_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);
lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
lv_obj_t * label;
lv_obj_t * obj;
uint8_t i;
for(i = 0; i < 9; i++) {
uint8_t col = i % 3;
uint8_t row = i / 3;
obj = lv_obj_create(cont);
/*Stretch the cell horizontally and vertically too
*Set span to 1 to make the cell 1 column/row sized*/
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
LV_GRID_ALIGN_STRETCH, row, 1);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%d,%d", col, row);
lv_obj_center(label);
}
}
#endif
Scrolling¶
Nested scrolling¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES
static lv_obj_t * panel;
static lv_obj_t * save_button;
static lv_obj_t * restore_button;
static int saved_scroll_x;
static int saved_scroll_y;
static void scroll_update_cb(lv_event_t * e);
static void button_event_cb(lv_event_t * e);
static void scroll_update_cb(lv_event_t * e)
{
LV_UNUSED(e);
LV_LOG("scroll info: x:%3" LV_PRId32", y:%3" LV_PRId32", top:%3" LV_PRId32", "
"bottom:%3" LV_PRId32", left:%3" LV_PRId32", right:%3" LV_PRId32"\n",
lv_obj_get_scroll_x(panel),
lv_obj_get_scroll_y(panel),
lv_obj_get_scroll_top(panel),
lv_obj_get_scroll_bottom(panel),
lv_obj_get_scroll_left(panel),
lv_obj_get_scroll_right(panel)
);
}
static void button_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
if(obj == save_button) {
saved_scroll_x = lv_obj_get_scroll_x(panel);
saved_scroll_y = lv_obj_get_scroll_y(panel);
}
else {
lv_obj_scroll_to(panel, saved_scroll_x, saved_scroll_y, LV_ANIM_ON);
}
}
/**
* Demonstrate how scrolling appears automatically
*/
void lv_example_scroll_1(void)
{
/*Create an object with the new style*/
lv_obj_t * scr;
scr = lv_screen_active();
panel = lv_obj_create(scr);
lv_obj_set_size(panel, 200, 200);
lv_obj_align(panel, LV_ALIGN_CENTER, 44, 0);
lv_obj_t * child;
lv_obj_t * label;
child = lv_obj_create(panel);
lv_obj_set_pos(child, 0, 0);
lv_obj_set_size(child, 70, 70);
label = lv_label_create(child);
lv_label_set_text(label, "Zero");
lv_obj_center(label);
child = lv_obj_create(panel);
lv_obj_set_pos(child, 160, 80);
lv_obj_set_size(child, 80, 80);
lv_obj_t * child2 = lv_button_create(child);
lv_obj_set_size(child2, 100, 50);
label = lv_label_create(child2);
lv_label_set_text(label, "Right");
lv_obj_center(label);
child = lv_obj_create(panel);
lv_obj_set_pos(child, 40, 160);
lv_obj_set_size(child, 100, 70);
label = lv_label_create(child);
lv_label_set_text(label, "Bottom");
lv_obj_center(label);
/* When LV_OBJ_FLAG_SCROLL_ELASTIC is cleared, scrolling does not go past edge boundaries. */
/* lv_obj_remove_flag(panel, LV_OBJ_FLAG_SCROLL_ELASTIC); */
/* Call `scroll_update_cb` while panel is being scrolled. */
lv_obj_add_event_cb(panel, scroll_update_cb, LV_EVENT_SCROLL, NULL);
/* Set up buttons that save and restore scroll position. */
save_button = lv_button_create(scr);
restore_button = lv_button_create(scr);
lv_obj_t * lbl;
lbl = lv_label_create(save_button);
lv_label_set_text_static(lbl, "Save");
lbl = lv_label_create(restore_button);
lv_label_set_text_static(lbl, "Restore");
lv_obj_align_to(save_button, panel, LV_ALIGN_OUT_LEFT_MID, -10, -20);
lv_obj_align_to(restore_button, panel, LV_ALIGN_OUT_LEFT_MID, -10, 20);
lv_obj_add_event_cb(save_button, button_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(restore_button, button_event_cb, LV_EVENT_CLICKED, NULL);
}
#endif
Snapping¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static void sw_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * sw = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
lv_obj_t * list = (lv_obj_t *) lv_event_get_user_data(e);
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) lv_obj_add_flag(list, LV_OBJ_FLAG_SCROLL_ONE);
else lv_obj_remove_flag(list, LV_OBJ_FLAG_SCROLL_ONE);
}
}
/**
* Show an example to scroll snap
*/
void lv_example_scroll_2(void)
{
lv_obj_t * panel = lv_obj_create(lv_screen_active());
lv_obj_set_size(panel, 280, 120);
lv_obj_set_scroll_snap_x(panel, LV_SCROLL_SNAP_CENTER);
lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_ROW);
lv_obj_align(panel, LV_ALIGN_CENTER, 0, 20);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_obj_t * btn = lv_button_create(panel);
lv_obj_set_size(btn, 150, lv_pct(100));
lv_obj_t * label = lv_label_create(btn);
if(i == 3) {
lv_label_set_text_fmt(label, "Panel %" LV_PRIu32"\nno snap", i);
lv_obj_remove_flag(btn, LV_OBJ_FLAG_SNAPPABLE);
}
else {
lv_label_set_text_fmt(label, "Panel %" LV_PRIu32, i);
}
lv_obj_center(label);
}
lv_obj_update_snap(panel, LV_ANIM_ON);
#if LV_USE_SWITCH
/*Switch between "One scroll" and "Normal scroll" mode*/
lv_obj_t * sw = lv_switch_create(lv_screen_active());
lv_obj_align(sw, LV_ALIGN_TOP_RIGHT, -20, 10);
lv_obj_add_event_cb(sw, sw_event_cb, LV_EVENT_ALL, panel);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "One scroll");
lv_obj_align_to(label, sw, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
#endif
}
#endif
Styling the scrollbars¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LIST
/**
* Styling the scrollbars
*/
void lv_example_scroll_4(void)
{
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_set_size(obj, 200, 100);
lv_obj_center(obj);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n"
"Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula. \n"
"Sed vestibulum sapien nulla, id convallis ex porttitor nec. \n"
"Duis et massa eu libero accumsan faucibus a in arcu. \n"
"Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor. \n"
"Sed nisl augue, venenatis in blandit et, gravida ac tortor. \n"
"Etiam dapibus elementum suscipit. \n"
"Proin mollis sollicitudin convallis. \n"
"Integer dapibus tempus arcu nec viverra. \n"
"Donec molestie nulla enim, eu interdum velit placerat quis. \n"
"Donec id efficitur risus, at molestie turpis. \n"
"Suspendisse vestibulum consectetur nunc ut commodo. \n"
"Fusce molestie rhoncus nisi sit amet tincidunt. \n"
"Suspendisse a nunc ut magna ornare volutpat.");
/*Remove the style of scrollbar to have clean start*/
lv_obj_remove_style(obj, NULL, LV_PART_SCROLLBAR | LV_STATE_ANY);
/*Create a transition the animate the some properties on state change*/
static const lv_style_prop_t props[] = {LV_STYLE_BG_OPA, LV_STYLE_WIDTH, 0};
static lv_style_transition_dsc_t trans;
lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 200, 0, NULL);
/*Create a style for the scrollbars*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style, 4); /*Width of the scrollbar*/
lv_style_set_length(&style, 20); /*Length of the scrollbar*/
lv_style_set_pad_right(&style, 5); /*Space from the parallel side*/
lv_style_set_pad_top(&style, 5); /*Space from the perpendicular side*/
lv_style_set_radius(&style, 2);
lv_style_set_bg_opa(&style, LV_OPA_70);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_border_width(&style, 2);
lv_style_set_shadow_width(&style, 8);
lv_style_set_shadow_spread(&style, 2);
lv_style_set_shadow_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 1));
lv_style_set_transition(&style, &trans);
/*Make the scrollbars wider and use 100% opacity when scrolled*/
static lv_style_t style_scrolled;
lv_style_init(&style_scrolled);
lv_style_set_width(&style_scrolled, 8);
lv_style_set_bg_opa(&style_scrolled, LV_OPA_COVER);
lv_obj_add_style(obj, &style, LV_PART_SCROLLBAR);
lv_obj_add_style(obj, &style_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
}
#endif
Right to left scrolling¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW
/**
* Scrolling with Right To Left base direction
*/
void lv_example_scroll_5(void)
{
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_set_style_base_dir(obj, LV_BASE_DIR_RTL, 0);
lv_obj_set_size(obj, 200, 100);
lv_obj_center(obj);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label,
"میکروکُنترولر (به انگلیسی: Microcontroller) گونهای ریزپردازنده است که دارای حافظهٔ دسترسی تصادفی (RAM) و حافظهٔ فقطخواندنی (ROM)، تایمر، پورتهای ورودی و خروجی (I/O) و درگاه ترتیبی (Serial Port پورت سریال)، درون خود تراشه است، و میتواند به تنهایی ابزارهای دیگر را کنترل کند. به عبارت دیگر یک میکروکنترلر، مدار مجتمع کوچکی است که از یک CPU کوچک و اجزای دیگری مانند تایمر، درگاههای ورودی و خروجی آنالوگ و دیجیتال و حافظه تشکیل شدهاست.");
lv_obj_set_width(label, 400);
lv_obj_set_style_text_font(label, &lv_font_dejavu_16_persian_hebrew, 0);
}
#endif
Translate on scroll¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static void scroll_event_cb(lv_event_t * e)
{
lv_obj_t * cont = lv_event_get_target_obj(e);
lv_area_t cont_a;
lv_obj_get_coords(cont, &cont_a);
int32_t cont_y_center = cont_a.y1 + lv_area_get_height(&cont_a) / 2;
int32_t r = lv_obj_get_height(cont) * 7 / 10;
int32_t i;
int32_t child_cnt = (int32_t)lv_obj_get_child_count(cont);
for(i = 0; i < child_cnt; i++) {
lv_obj_t * child = lv_obj_get_child(cont, i);
lv_area_t child_a;
lv_obj_get_coords(child, &child_a);
int32_t child_y_center = child_a.y1 + lv_area_get_height(&child_a) / 2;
int32_t diff_y = child_y_center - cont_y_center;
diff_y = LV_ABS(diff_y);
/*Get the x of diff_y on a circle.*/
int32_t x;
/*If diff_y is out of the circle use the last point of the circle (the radius)*/
if(diff_y >= r) {
x = r;
}
else {
/*Use Pythagoras theorem to get x from radius and y*/
uint32_t x_sqr = r * r - diff_y * diff_y;
lv_sqrt_res_t res;
lv_sqrt(x_sqr, &res, 0x8000); /*Use lvgl's built in sqrt root function*/
x = r - res.i;
}
/*Translate the item by the calculated X coordinate*/
lv_obj_set_style_translate_x(child, x, 0);
/*Use some opacity with larger translations*/
lv_opa_t opa = (lv_opa_t)lv_map(x, 0, r, LV_OPA_TRANSP, LV_OPA_COVER);
lv_obj_set_style_opa(child, LV_OPA_COVER - opa, 0);
}
}
/**
* Translate the object as they scroll
*/
void lv_example_scroll_6(void)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, 200, 200);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
lv_obj_add_event_cb(cont, scroll_event_cb, LV_EVENT_SCROLL, NULL);
lv_obj_set_style_radius(cont, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_clip_corner(cont, true, 0);
lv_obj_set_scroll_dir(cont, LV_DIR_VER);
lv_obj_set_scroll_snap_y(cont, LV_SCROLL_SNAP_CENTER);
lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF);
uint32_t i;
for(i = 0; i < 20; i++) {
lv_obj_t * btn = lv_button_create(cont);
lv_obj_set_width(btn, lv_pct(100));
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text_fmt(label, "Button %" LV_PRIu32, i);
}
/*Update the buttons position manually for first*/
lv_obj_send_event(cont, LV_EVENT_SCROLL, NULL);
/*Be sure the fist button is in the middle*/
lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF);
}
#endif
Infinite scrolling¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static lv_obj_t * high_label;
static lv_obj_t * low_label;
static int32_t top_num;
static int32_t bottom_num;
static bool update_scroll_running = false;
static lv_obj_t * load_item(lv_obj_t * parent, int32_t num)
{
lv_obj_t * obj = (lv_obj_t *) lv_obj_create(parent);
lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text_fmt(label, "%" PRId32, num);
return obj;
}
static void update_scroll(lv_obj_t * obj)
{
/* do not re-enter this function when `lv_obj_scroll_by`
* triggers this callback again.
*/
if(update_scroll_running) return;
update_scroll_running = true;
int32_t top_num_original = top_num;
int32_t bottom_num_original = bottom_num;
/* load items we're getting close to */
while(bottom_num > -30 && lv_obj_get_scroll_bottom(obj) < 200) {
bottom_num -= 1;
load_item(obj, bottom_num);
lv_obj_update_layout(obj);
LV_LOG_USER("loaded bottom num: %" PRId32, bottom_num);
}
while(top_num < 30 && lv_obj_get_scroll_top(obj) < 200) {
top_num += 1;
int32_t bottom_before = lv_obj_get_scroll_bottom(obj);
lv_obj_t * new_item = load_item(obj, top_num);
lv_obj_move_to_index(new_item, 0);
lv_obj_update_layout(obj);
int32_t bottom_after = lv_obj_get_scroll_bottom(obj);
lv_obj_scroll_by(obj, 0, bottom_before - bottom_after, LV_ANIM_OFF);
LV_LOG_USER("loaded top num: %" PRId32, top_num);
}
/* delete far-away items */
while(lv_obj_get_scroll_bottom(obj) > 600) {
bottom_num += 1;
lv_obj_t * child = lv_obj_get_child(obj, -1);
lv_obj_delete(child);
lv_obj_update_layout(obj);
LV_LOG_USER("deleted bottom num: %" PRId32, bottom_num);
}
while(lv_obj_get_scroll_top(obj) > 600) {
top_num -= 1;
int32_t bottom_before = lv_obj_get_scroll_bottom(obj);
lv_obj_t * child = lv_obj_get_child(obj, 0);
lv_obj_delete(child);
lv_obj_update_layout(obj);
int32_t bottom_after = lv_obj_get_scroll_bottom(obj);
lv_obj_scroll_by(obj, 0, bottom_before - bottom_after, LV_ANIM_OFF);
LV_LOG_USER("deleted top num: %" PRId32, top_num);
}
if(top_num != top_num_original) {
lv_label_set_text_fmt(high_label, "current largest\nloaded value:\n%" PRId32, top_num);
}
if(bottom_num != bottom_num_original) {
lv_label_set_text_fmt(low_label, "current smallest\nloaded value:\n%" PRId32, bottom_num);
}
update_scroll_running = false;
}
static void scroll_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
update_scroll(obj);
}
static void checkbox_cb(lv_event_t * e)
{
lv_obj_t * checkbox = lv_event_get_target_obj(e);
lv_obj_t * obj = (lv_obj_t *) lv_event_get_user_data(e);
bool checked = lv_obj_has_state(checkbox, LV_STATE_CHECKED);
lv_obj_set_style_opa(obj, checked ? LV_OPA_COVER : LV_OPA_TRANSP, LV_PART_SCROLLBAR);
}
/**
* Dynamically load widgets while scrolling
*/
void lv_example_scroll_7(void)
{
lv_obj_t * scr = lv_screen_active();
lv_obj_t * obj = lv_obj_create(scr);
lv_obj_set_size(obj, 160, 220);
lv_obj_align(obj, LV_ALIGN_RIGHT_MID, -10, 0);
lv_obj_set_flex_flow(obj, LV_FLEX_FLOW_COLUMN);
lv_obj_set_style_opa(obj, LV_OPA_TRANSP, LV_PART_SCROLLBAR);
high_label = lv_label_create(scr);
lv_label_set_text_static(high_label, "current largest\nloaded value:");
lv_obj_align(high_label, LV_ALIGN_TOP_LEFT, 10, 10);
lv_obj_t * checkbox = lv_checkbox_create(scr);
lv_checkbox_set_text_static(checkbox, "show\nscrollbar");
lv_obj_align(checkbox, LV_ALIGN_LEFT_MID, 10, 0);
lv_obj_add_event_cb(checkbox, checkbox_cb, LV_EVENT_VALUE_CHANGED, obj);
low_label = lv_label_create(scr);
lv_label_set_text_static(low_label, "current smallest\nloaded value:");
lv_obj_align(low_label, LV_ALIGN_BOTTOM_LEFT, 10, -10);
load_item(obj, 3);
/* These counters hold the highest/lowest number currently loaded. */
top_num = 3;
bottom_num = 3;
lv_obj_update_layout(obj);
update_scroll(obj);
lv_obj_add_event_cb(obj, scroll_cb, LV_EVENT_SCROLL, NULL);
}
#endif
Circular scrolling¶
C code
View on GitHub#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
/*
* Circular list implementation based on:
* Reference: https://blog.csdn.net/TQW4321/article/details/145434819
*/
/* Applies to both width (for row items) and height (for column items) */
#define ITEM_SIZE 80
/* Function to calculate the total content width of the container */
static int32_t get_content_width(lv_obj_t * cont)
{
int32_t w = 0;
int32_t pad_column = lv_obj_get_style_pad_column(cont, LV_PART_MAIN);
int32_t total = (int32_t)lv_obj_get_child_count(cont);
for(int32_t i = 0; i < total; i++) {
w += lv_obj_get_width(lv_obj_get_child(cont, i));
if(i < total - 1) w += pad_column;
}
return w + lv_obj_get_style_pad_left(cont, LV_PART_MAIN)
+ lv_obj_get_style_pad_right(cont, LV_PART_MAIN);
}
/* Scroll event callback for row layout */
static void cont_row_scroll_event_cb(lv_event_t * e)
{
static bool is_adjusting = false;
lv_obj_t * cont = lv_event_get_current_target_obj(e);
if(!is_adjusting) {
is_adjusting = true;
int32_t scroll_x = lv_obj_get_scroll_x(cont);
int32_t cont_w = lv_obj_get_width(cont);
int32_t content_w = get_content_width(cont);
/* Use ITEM_SIZE as horizontal item width */
const int32_t item_width = ITEM_SIZE;
if(scroll_x <= 0) {
lv_obj_t * last_child = lv_obj_get_child(cont, (int32_t)(lv_obj_get_child_count(cont) - 1));
lv_obj_move_to_index(last_child, 0);
lv_obj_scroll_to_x(cont, scroll_x + item_width, LV_ANIM_OFF);
}
else if(scroll_x > content_w - cont_w) {
lv_obj_t * first_child = lv_obj_get_child(cont, 0);
lv_obj_move_to_index(first_child, (int32_t)(lv_obj_get_child_count(cont) - 1));
lv_obj_scroll_to_x(cont, scroll_x - item_width, LV_ANIM_OFF);
}
is_adjusting = false;
}
}
/* Function to calculate the total content height of the container */
static int32_t get_content_height(lv_obj_t * cont)
{
int32_t h = 0;
int32_t pad_row = lv_obj_get_style_pad_row(cont, LV_PART_MAIN);
int32_t total = (int32_t)lv_obj_get_child_count(cont);
for(int i = 0; i < total; i++) {
h += lv_obj_get_height(lv_obj_get_child(cont, i));
if(i < total - 1) h += pad_row;
}
return h + lv_obj_get_style_pad_top(cont, LV_PART_MAIN)
+ lv_obj_get_style_pad_bottom(cont, LV_PART_MAIN);
}
/* Scroll event callback for column layout */
static void cont_col_scroll_event_cb(lv_event_t * e)
{
static bool is_adjusting = false;
lv_obj_t * cont = lv_event_get_current_target_obj(e);
if(!is_adjusting) {
is_adjusting = true;
int32_t scroll_y = lv_obj_get_scroll_y(cont);
int32_t cont_h = lv_obj_get_height(cont);
int32_t content_h = get_content_height(cont);
/* Use ITEM_SIZE as vertical item height */
const int32_t item_height = ITEM_SIZE;
if(scroll_y <= 0) {
lv_obj_t * last_child = lv_obj_get_child(cont, (int32_t)(lv_obj_get_child_count(cont) - 1));
lv_obj_move_to_index(last_child, 0);
lv_obj_scroll_to_y(cont, scroll_y + item_height, LV_ANIM_OFF);
}
else if(scroll_y > content_h - cont_h) {
lv_obj_t * first_child = lv_obj_get_child(cont, 0);
lv_obj_move_to_index(first_child, (int32_t)(lv_obj_get_child_count(cont) - 1));
lv_obj_scroll_to_y(cont, scroll_y - item_height, LV_ANIM_OFF);
}
is_adjusting = false;
}
}
void lv_example_scroll_8(void)
{
/* Create a scroll container with ROW flex direction */
lv_obj_t * cont_row = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont_row, 300, 75);
lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);
lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);
lv_obj_add_event_cb(cont_row, cont_row_scroll_event_cb, LV_EVENT_SCROLL, NULL);
/* Hide scrollbar visuals */
lv_obj_set_scrollbar_mode(cont_row, LV_SCROLLBAR_MODE_OFF);
/* Create a scroll container with COLUMN flex direction */
lv_obj_t * cont_col = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont_col, 200, 150);
lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
lv_obj_add_event_cb(cont_col, cont_col_scroll_event_cb, LV_EVENT_SCROLL, NULL);
/* Hide scrollbar visuals */
lv_obj_set_scrollbar_mode(cont_col, LV_SCROLLBAR_MODE_OFF);
/* If the number of items is less than 3, scrolling may not be needed or may cause unexpected behavior. */
uint32_t i;
for(i = 0; i < 10; i++) {
lv_obj_t * obj;
lv_obj_t * label;
/*Add items to the row*/
obj = lv_button_create(cont_row);
lv_obj_set_size(obj, ITEM_SIZE, LV_PCT(100));
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item %" LV_PRIu32, i + 1);
lv_obj_center(label);
/*Add items to the column*/
obj = lv_button_create(cont_col);
lv_obj_set_size(obj, LV_PCT(100), ITEM_SIZE);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item %" LV_PRIu32, i + 1);
lv_obj_center(label);
}
}
#endif
Scrolling Properties¶
C code
View on GitHub/**
* @file lv_example_scroll_9.c
*/
#include "lv_example_scroll.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
static lv_obj_t * switch_create(lv_obj_t * parent, const char * title, lv_obj_flag_t flag, bool en);
static void generic_switch_event_cb(lv_event_t * e);
static lv_obj_t * list;
void lv_example_scroll_9(void)
{
lv_obj_t * panel = lv_obj_create(lv_screen_active());
lv_obj_set_style_shadow_width(panel, 16, 0);
lv_obj_set_style_shadow_offset_y(panel, 8, 0);
lv_obj_set_style_shadow_offset_x(panel, 4, 0);
lv_obj_set_style_shadow_opa(panel, LV_OPA_40, 0);
lv_obj_set_size(panel, lv_pct(70), lv_pct(90));
lv_obj_center(panel);
lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(panel, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
list = lv_list_create(panel);
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image1.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image2.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image3.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image4.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image5.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image6.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image7.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image8.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image9.png");
lv_list_add_button(list, LV_SYMBOL_IMAGE, "Image10.png");
switch_create(panel, "Scrollable", LV_OBJ_FLAG_SCROLLABLE, true);
switch_create(panel, "Scroll chain", LV_OBJ_FLAG_SCROLL_CHAIN, true);
switch_create(panel, "Elastic scroll", LV_OBJ_FLAG_SCROLL_ELASTIC, true);
switch_create(panel, "Add scroll momentum", LV_OBJ_FLAG_SCROLL_MOMENTUM, true);
/*Show the switches first*/
lv_obj_move_to_index(list, -1);
}
static lv_obj_t * switch_create(lv_obj_t * parent, const char * title, lv_obj_flag_t flag, bool en)
{
lv_obj_t * cont = lv_obj_create(parent);
lv_obj_remove_style_all(cont);
lv_obj_set_size(cont, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START);
lv_obj_t * label = lv_label_create(cont);
lv_label_set_text(label, title);
lv_obj_set_flex_grow(label, 1);
lv_obj_t * sw = lv_switch_create(cont);
lv_obj_add_event_cb(sw, generic_switch_event_cb, LV_EVENT_VALUE_CHANGED, (void *)((lv_uintptr_t) flag));
if(en) {
lv_obj_add_state(sw, LV_STATE_CHECKED);
lv_obj_add_flag(list, flag);
}
else {
lv_obj_remove_state(sw, LV_STATE_CHECKED);
lv_obj_remove_flag(list, flag);
}
return cont;
}
static void generic_switch_event_cb(lv_event_t * e)
{
lv_obj_t * sw = lv_event_get_target_obj(e);
lv_obj_flag_t flag = (lv_obj_flag_t)((lv_uintptr_t)lv_event_get_user_data(e));
if(lv_obj_has_state(sw, LV_STATE_CHECKED)) lv_obj_add_flag(list, flag);
else lv_obj_remove_flag(list, flag);
}
#endif
Widgets¶
Base Widget¶
Base objects with custom styles¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
void lv_example_obj_1(void)
{
lv_obj_t * obj1;
obj1 = lv_obj_create(lv_screen_active());
lv_obj_set_size(obj1, 100, 50);
lv_obj_align(obj1, LV_ALIGN_CENTER, -60, -30);
static lv_style_t style_shadow;
lv_style_init(&style_shadow);
lv_style_set_shadow_width(&style_shadow, 10);
lv_style_set_shadow_spread(&style_shadow, 5);
lv_style_set_shadow_color(&style_shadow, lv_palette_main(LV_PALETTE_BLUE));
lv_obj_t * obj2;
obj2 = lv_obj_create(lv_screen_active());
lv_obj_add_style(obj2, &style_shadow, 0);
lv_obj_align(obj2, LV_ALIGN_CENTER, 60, 30);
}
#endif
Make an object draggable¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
static void drag_event_handler(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_indev_t * indev = lv_indev_active();
if(indev == NULL) return;
lv_point_t vect;
lv_indev_get_vect(indev, &vect);
int32_t x = lv_obj_get_x_aligned(obj) + vect.x;
int32_t y = lv_obj_get_y_aligned(obj) + vect.y;
lv_obj_set_pos(obj, x, y);
}
/**
* Make an object draggable.
*/
void lv_example_obj_2(void)
{
lv_obj_t * obj;
obj = lv_obj_create(lv_screen_active());
lv_obj_set_size(obj, 150, 100);
lv_obj_add_event_cb(obj, drag_event_handler, LV_EVENT_PRESSING, NULL);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label, "Drag me");
lv_obj_center(label);
}
#endif
Transform object using a 3x3 matrix¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_DRAW_TRANSFORM_USE_MATRIX
static void timer_cb(lv_timer_t * timer)
{
lv_obj_t * obj = (lv_obj_t *) lv_timer_get_user_data(timer);
static float value = 0.1f;
lv_matrix_t matrix;
lv_matrix_identity(&matrix);
lv_matrix_scale(&matrix, value, 1);
lv_matrix_rotate(&matrix, value * 360);
lv_obj_set_transform(obj, &matrix);
value += 0.01f;
if(value > 2.0f) {
lv_obj_reset_transform(obj);
value = 0.1f;
}
}
void lv_example_obj_3(void)
{
lv_obj_t * obj = lv_obj_create(lv_screen_active());
lv_obj_center(obj);
lv_timer_create(timer_cb, 20, obj);
}
#else
void lv_example_obj_3(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text_static(label, "LV_DRAW_TRANSFORM_USE_MATRIX is not enabled");
lv_obj_center(label);
}
#endif /*LV_DRAW_TRANSFORM_USE_MATRIX*/
#endif /*LV_BUILD_EXAMPLES*/
Animation Image¶
Simple Animation Image¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ANIMIMG && LV_BUILD_EXAMPLES
LV_IMAGE_DECLARE(animimg001);
LV_IMAGE_DECLARE(animimg002);
LV_IMAGE_DECLARE(animimg003);
static const lv_image_dsc_t * anim_imgs[3] = {
&animimg001,
& animimg002,
& animimg003,
};
void lv_example_animimg_1(void)
{
lv_obj_t * animimg0 = lv_animimg_create(lv_screen_active());
lv_obj_center(animimg0);
lv_animimg_set_src(animimg0, (const void **) anim_imgs, 3);
lv_animimg_set_duration(animimg0, 1000);
lv_animimg_set_repeat_count(animimg0, LV_ANIM_REPEAT_INFINITE);
lv_animimg_start(animimg0);
}
#endif
Arc¶
Simple Arc¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ARC && LV_BUILD_EXAMPLES
static void value_changed_event_cb(lv_event_t * e);
void lv_example_arc_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
/*Create an Arc*/
lv_obj_t * arc = lv_arc_create(lv_screen_active());
lv_obj_set_size(arc, 150, 150);
lv_arc_set_rotation(arc, 135);
lv_arc_set_bg_angles(arc, 0, 270);
lv_arc_set_value(arc, 10);
lv_obj_center(arc);
lv_obj_add_event_cb(arc, value_changed_event_cb, LV_EVENT_VALUE_CHANGED, label);
/*Manually update the label for the first time*/
lv_obj_send_event(arc, LV_EVENT_VALUE_CHANGED, NULL);
}
static void value_changed_event_cb(lv_event_t * e)
{
lv_obj_t * arc = lv_event_get_target_obj(e);
lv_obj_t * label = (lv_obj_t *)lv_event_get_user_data(e);
lv_label_set_text_fmt(label, "%" LV_PRId32 "%%", lv_arc_get_value(arc));
/*Rotate the label to the current position of the arc*/
lv_arc_rotate_obj_to_angle(arc, label, 25);
}
#endif
Loader with Arc¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ARC && LV_BUILD_EXAMPLES
static void set_angle(void * obj, int32_t v)
{
lv_arc_set_value((lv_obj_t *)obj, v);
}
/**
* Create an arc which acts as a loader.
*/
void lv_example_arc_2(void)
{
/*Create an Arc*/
lv_obj_t * arc = lv_arc_create(lv_screen_active());
lv_arc_set_rotation(arc, 270);
lv_arc_set_bg_angles(arc, 0, 360);
lv_obj_remove_style(arc, NULL, LV_PART_KNOB); /*Be sure the knob is not displayed*/
lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE); /*To not allow adjusting by click*/
lv_obj_center(arc);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, arc);
lv_anim_set_exec_cb(&a, set_angle);
lv_anim_set_duration(&a, 1000);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE); /*Just for the demo*/
lv_anim_set_repeat_delay(&a, 500);
lv_anim_set_values(&a, 0, 100);
lv_anim_start(&a);
}
#endif
Pie Chart with clickable slices using Arcs¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ARC && LV_BUILD_EXAMPLES
#define CHART_SIZE 150
#define SLICE_OFFSET 20
typedef struct {
int start_angle;
int end_angle;
int mid_angle;
lv_point_t home;
bool out;
} slice_info_t;
typedef struct {
lv_obj_t * obj;
int start_x;
int start_y;
int end_x;
int end_y;
} slice_anim_data_t;
static float angle_accum = 0.0f;
static slice_info_t * active_info = NULL;
static lv_obj_t * active_arc = NULL;
static void anim_move_cb(void * var, int32_t v)
{
slice_anim_data_t * d = (slice_anim_data_t *) var;
int32_t x = d->start_x + ((d->end_x - d->start_x) * v) / 100;
int32_t y = d->start_y + ((d->end_y - d->start_y) * v) / 100;
lv_obj_set_pos(d->obj, x, y);
}
static void anim_cleanup_cb(lv_anim_t * a)
{
lv_free(a->var);
}
static void arc_click_cb(lv_event_t * e)
{
lv_obj_t * arc = lv_event_get_target_obj(e);
slice_info_t * info = (slice_info_t *)lv_event_get_user_data(e);
int32_t x_off = (SLICE_OFFSET * lv_trigo_cos(info->mid_angle)) >> LV_TRIGO_SHIFT;
int32_t y_off = (SLICE_OFFSET * lv_trigo_sin(info->mid_angle)) >> LV_TRIGO_SHIFT;
if(active_info && active_info != info && active_info->out) {
slice_anim_data_t * anim_back = (slice_anim_data_t *) lv_malloc(sizeof(slice_anim_data_t));
anim_back->obj = active_arc;
anim_back->start_x = lv_obj_get_x(active_arc) - SLICE_OFFSET;
anim_back->start_y = lv_obj_get_y(active_arc) - SLICE_OFFSET;
anim_back->end_x = active_info->home.x;
anim_back->end_y = active_info->home.y;
active_info->out = false;
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, anim_back);
lv_anim_set_exec_cb(&a, anim_move_cb);
lv_anim_set_duration(&a, 200);
lv_anim_set_values(&a, 0, 100);
lv_anim_set_deleted_cb(&a, anim_cleanup_cb);
lv_anim_start(&a);
}
int target_x, target_y;
if(info->out) {
target_x = info->home.x;
target_y = info->home.y;
info->out = false;
active_info = NULL;
active_arc = NULL;
}
else {
target_x = info->home.x + x_off;
target_y = info->home.y + y_off;
info->out = true;
active_info = info;
active_arc = arc;
}
slice_anim_data_t * anim_data = (slice_anim_data_t *) lv_malloc(sizeof(slice_anim_data_t));
anim_data->obj = arc;
anim_data->start_x = lv_obj_get_x(arc) - SLICE_OFFSET;
anim_data->start_y = lv_obj_get_y(arc) - SLICE_OFFSET;
anim_data->end_x = target_x;
anim_data->end_y = target_y;
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, anim_data);
lv_anim_set_exec_cb(&a, anim_move_cb);
lv_anim_set_duration(&a, 200);
lv_anim_set_values(&a, 0, 100);
lv_anim_set_deleted_cb(&a, anim_cleanup_cb);
lv_anim_start(&a);
}
static void create_slice(lv_obj_t * parent, int percentage, lv_color_t color)
{
if(percentage <= 0) return;
float slice_angle = (percentage * 360.0f) / 100.0f;
int start = (int)(angle_accum + 0.5f);
angle_accum += slice_angle;
int end = (int)(angle_accum + 0.5f);
if(end > 360) end = 360;
lv_obj_t * arc = lv_arc_create(parent);
lv_obj_set_size(arc, CHART_SIZE, CHART_SIZE);
lv_obj_center(arc);
lv_arc_set_mode(arc, LV_ARC_MODE_NORMAL);
lv_arc_set_bg_start_angle(arc, start);
lv_arc_set_bg_end_angle(arc, end);
lv_obj_set_style_arc_width(arc, CHART_SIZE / 2, LV_PART_MAIN);
lv_obj_set_style_arc_width(arc, 0, LV_PART_INDICATOR);
lv_obj_set_style_arc_color(arc, color, LV_PART_MAIN);
lv_obj_set_style_arc_rounded(arc, false, LV_PART_MAIN);
lv_obj_remove_style(arc, NULL, LV_PART_KNOB);
lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST);
lv_obj_t * label = lv_label_create(arc);
lv_label_set_text_fmt(label, "%d%%", percentage);
int mid_angle = start + ((end - start) / 2);
int radius = CHART_SIZE / 4;
int x_offset = (radius * lv_trigo_cos(mid_angle)) >> LV_TRIGO_SHIFT;
int y_offset = (radius * lv_trigo_sin(mid_angle)) >> LV_TRIGO_SHIFT;
lv_obj_align(label, LV_ALIGN_CENTER, x_offset, y_offset);
slice_info_t * info = (slice_info_t *) lv_malloc(sizeof(slice_info_t));
info->start_angle = start;
info->end_angle = end;
info->mid_angle = mid_angle;
info->out = false;
info->home.x = lv_obj_get_x(arc);
info->home.y = lv_obj_get_y(arc);
lv_obj_add_event_cb(arc, arc_click_cb, LV_EVENT_CLICKED, info);
}
void lv_example_arc_3(void)
{
/* Root container: flex row */
lv_obj_t * root = lv_obj_create(lv_screen_active());
lv_obj_set_size(root, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(root);
lv_obj_set_flex_flow(root, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(root, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_all(root, 0, LV_PART_MAIN);
lv_obj_set_style_border_width(root, 0, LV_PART_MAIN);
lv_obj_set_style_border_color(root, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN);
lv_obj_set_style_bg_opa(root, LV_OPA_TRANSP, LV_PART_MAIN);
lv_obj_remove_flag(root, LV_OBJ_FLAG_SCROLLABLE);
/* Slices container */
lv_obj_t * slices_container = lv_obj_create(root);
lv_obj_set_size(slices_container, CHART_SIZE + 2 * SLICE_OFFSET, CHART_SIZE + 2 * SLICE_OFFSET);
lv_obj_set_style_pad_all(slices_container, 0, LV_PART_MAIN);
lv_obj_set_style_margin_all(slices_container, 0, LV_PART_MAIN);
lv_obj_set_style_border_width(slices_container, 0, LV_PART_MAIN);
lv_obj_set_style_border_color(slices_container, lv_palette_main(LV_PALETTE_BLUE), LV_PART_MAIN);
lv_obj_set_style_bg_opa(slices_container, LV_OPA_TRANSP, LV_PART_MAIN);
lv_obj_remove_flag(slices_container, LV_OBJ_FLAG_SCROLLABLE);
/* Create slices */
angle_accum = 0.0f;
create_slice(slices_container, 12, lv_palette_main(LV_PALETTE_RED));
create_slice(slices_container, 18, lv_palette_main(LV_PALETTE_BLUE));
create_slice(slices_container, 26, lv_palette_main(LV_PALETTE_GREEN));
create_slice(slices_container, 24, lv_palette_main(LV_PALETTE_ORANGE));
create_slice(slices_container, 20, lv_palette_main(LV_PALETTE_BLUE_GREY));
}
#endif
Arc Label¶
Simple Arc Label¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ARCLABEL && LV_BUILD_EXAMPLES
static const char * ARCLABEL_TEXT =
"I'm on an #FA7C45 ARC#! Centered with #12c2E9 C##8B68E8 O##c471ed L##B654E5 O##C84AB2 R##DB417A F##f64659 U##ff8888 L# feature!\n";
void lv_example_arclabel_1(void)
{
lv_obj_t * arclabel_inner = NULL;
lv_obj_t * arclabel_outer = NULL;
lv_obj_t * arclabel_slogan_1 = NULL;
lv_obj_t * arclabel_slogan_2 = NULL;
lv_obj_set_style_bg_color(lv_screen_active(), lv_color_black(), LV_PART_MAIN);
arclabel_inner = lv_arclabel_create(lv_screen_active());
lv_obj_set_size(arclabel_inner, 200, 200);
lv_obj_set_style_text_color(arclabel_inner, lv_color_white(), LV_PART_MAIN);
lv_arclabel_set_text_static(arclabel_inner, ARCLABEL_TEXT);
lv_arclabel_set_angle_start(arclabel_inner, 180);
lv_arclabel_set_radius(arclabel_inner, LV_PCT(80));
lv_arclabel_set_recolor(arclabel_inner, true);
lv_arclabel_set_text_vertical_align(arclabel_inner, LV_ARCLABEL_TEXT_ALIGN_TRAILING);
lv_arclabel_set_dir(arclabel_inner, LV_ARCLABEL_DIR_COUNTER_CLOCKWISE);
lv_arclabel_set_text_horizontal_align(arclabel_inner, LV_ARCLABEL_TEXT_ALIGN_CENTER);
lv_obj_center(arclabel_inner);
arclabel_outer = lv_arclabel_create(lv_screen_active());
lv_obj_set_size(arclabel_outer, 200, 200);
lv_obj_set_style_text_letter_space(arclabel_outer, 2, LV_PART_MAIN);
lv_obj_set_style_text_color(arclabel_outer, lv_color_hex(0x888888), LV_PART_MAIN);
lv_arclabel_set_angle_start(arclabel_outer, -180);
lv_arclabel_set_text_static(arclabel_outer, ARCLABEL_TEXT);
lv_arclabel_set_radius(arclabel_outer, LV_PCT(100));
lv_arclabel_set_recolor(arclabel_outer, true);
lv_arclabel_set_text_vertical_align(arclabel_outer, LV_ARCLABEL_TEXT_ALIGN_LEADING);
lv_arclabel_set_dir(arclabel_outer, LV_ARCLABEL_DIR_CLOCKWISE);
lv_arclabel_set_text_horizontal_align(arclabel_outer, LV_ARCLABEL_TEXT_ALIGN_CENTER);
lv_obj_center(arclabel_outer);
arclabel_slogan_1 = lv_arclabel_create(lv_screen_active());
lv_obj_set_size(arclabel_slogan_1, 300, 200);
lv_obj_set_style_text_letter_space(arclabel_slogan_1, 2, LV_PART_MAIN);
lv_obj_set_style_text_color(arclabel_slogan_1, lv_palette_main(LV_PALETTE_AMBER), LV_PART_MAIN);
lv_arclabel_set_text_static(arclabel_slogan_1, "STAY HUNGRY");
lv_arclabel_set_offset(arclabel_slogan_1, 30);
lv_arclabel_set_radius(arclabel_slogan_1, 150);
lv_arclabel_set_recolor(arclabel_slogan_1, true);
lv_arclabel_set_text_vertical_align(arclabel_slogan_1, LV_ARCLABEL_TEXT_ALIGN_TRAILING);
lv_arclabel_set_text_horizontal_align(arclabel_slogan_1, LV_ARCLABEL_TEXT_ALIGN_CENTER);
lv_arclabel_set_dir(arclabel_slogan_1, LV_ARCLABEL_DIR_COUNTER_CLOCKWISE);
lv_obj_center(arclabel_slogan_1);
arclabel_slogan_2 = lv_arclabel_create(lv_screen_active());
lv_obj_set_size(arclabel_slogan_2, 300, 200);
lv_obj_set_style_text_letter_space(arclabel_slogan_2, 2, LV_PART_MAIN);
lv_obj_set_style_text_color(arclabel_slogan_2, lv_palette_main(LV_PALETTE_AMBER), LV_PART_MAIN);
lv_arclabel_set_text_static(arclabel_slogan_2, "STAY FOOLISH");
lv_arclabel_set_offset(arclabel_slogan_2, 30);
lv_arclabel_set_radius(arclabel_slogan_2, 150);
lv_arclabel_set_angle_start(arclabel_slogan_2, 180);
lv_arclabel_set_recolor(arclabel_slogan_2, true);
lv_arclabel_set_text_vertical_align(arclabel_slogan_2, LV_ARCLABEL_TEXT_ALIGN_TRAILING);
lv_arclabel_set_text_horizontal_align(arclabel_slogan_2, LV_ARCLABEL_TEXT_ALIGN_CENTER);
lv_arclabel_set_dir(arclabel_slogan_2, LV_ARCLABEL_DIR_COUNTER_CLOCKWISE);
lv_obj_center(arclabel_slogan_2);
#if LV_FONT_MONTSERRAT_18
lv_obj_set_style_text_font(arclabel_inner, &lv_font_montserrat_18, LV_PART_MAIN);
lv_obj_set_style_text_font(arclabel_outer, &lv_font_montserrat_18, LV_PART_MAIN);
#endif
#if LV_FONT_MONTSERRAT_24
lv_obj_set_style_text_font(arclabel_slogan_1, &lv_font_montserrat_24, LV_PART_MAIN);
lv_obj_set_style_text_font(arclabel_slogan_2, &lv_font_montserrat_24, LV_PART_MAIN);
#endif
}
#endif
Bar¶
Simple Bar¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
void lv_example_bar_1(void)
{
lv_obj_t * bar1 = lv_bar_create(lv_screen_active());
lv_obj_set_size(bar1, 200, 20);
lv_obj_center(bar1);
lv_bar_set_value(bar1, 70, LV_ANIM_OFF);
}
#endif
Styling a bar¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Example of styling the bar
*/
void lv_example_bar_2(void)
{
static lv_style_t style_bg;
static lv_style_t style_indic;
lv_style_init(&style_bg);
lv_style_set_border_color(&style_bg, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_width(&style_bg, 2);
lv_style_set_pad_all(&style_bg, 6); /*To make the indicator smaller*/
lv_style_set_radius(&style_bg, 6);
lv_style_set_anim_duration(&style_bg, 1000);
lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&style_indic, 3);
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_obj_remove_style_all(bar); /*To have a clean start*/
lv_obj_add_style(bar, &style_bg, 0);
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
lv_obj_set_size(bar, 200, 20);
lv_obj_center(bar);
lv_bar_set_value(bar, 100, LV_ANIM_ON);
}
#endif
Temperature meter¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
static void set_temp(void * bar, int32_t temp)
{
lv_bar_set_value((lv_obj_t *)bar, temp, LV_ANIM_ON);
}
/**
* A temperature meter example
*/
void lv_example_bar_3(void)
{
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_VER);
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
lv_obj_set_size(bar, 20, 200);
lv_obj_center(bar);
lv_bar_set_range(bar, -20, 40);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_exec_cb(&a, set_temp);
lv_anim_set_duration(&a, 3000);
lv_anim_set_reverse_duration(&a, 3000);
lv_anim_set_var(&a, bar);
lv_anim_set_values(&a, -20, 40);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a);
}
#endif
Stripe pattern and range value¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Bar with stripe pattern and ranged value
*/
void lv_example_bar_4(void)
{
LV_IMAGE_DECLARE(img_skew_strip);
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_image_src(&style_indic, &img_skew_strip);
lv_style_set_bg_image_tiled(&style_indic, true);
lv_style_set_bg_image_opa(&style_indic, LV_OPA_30);
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
lv_obj_set_size(bar, 260, 20);
lv_obj_center(bar);
lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);
lv_bar_set_value(bar, 90, LV_ANIM_OFF);
lv_bar_set_start_value(bar, 20, LV_ANIM_OFF);
}
#endif
Bar with LTR and RTL base direction¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Bar with LTR and RTL base direction
*/
void lv_example_bar_5(void)
{
lv_obj_t * label;
lv_obj_t * bar_ltr = lv_bar_create(lv_screen_active());
lv_obj_set_size(bar_ltr, 200, 20);
lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);
lv_obj_align(bar_ltr, LV_ALIGN_CENTER, 0, -30);
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Left to Right base direction");
lv_obj_align_to(label, bar_ltr, LV_ALIGN_OUT_TOP_MID, 0, -5);
lv_obj_t * bar_rtl = lv_bar_create(lv_screen_active());
lv_obj_set_style_base_dir(bar_rtl, LV_BASE_DIR_RTL, 0);
lv_obj_set_size(bar_rtl, 200, 20);
lv_bar_set_value(bar_rtl, 70, LV_ANIM_OFF);
lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 0, 30);
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Right to Left base direction");
lv_obj_align_to(label, bar_rtl, LV_ALIGN_OUT_TOP_MID, 0, -5);
}
#endif
Custom drawer to show the current value¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
#define MAX_VALUE 100
#define MIN_VALUE 0
static void set_value(void * bar, int32_t v)
{
lv_bar_set_value((lv_obj_t *)bar, v, LV_ANIM_OFF);
}
static void event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.font = LV_FONT_DEFAULT;
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d", (int)lv_bar_get_value(obj));
lv_point_t txt_size;
lv_text_get_size(&txt_size, buf, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, LV_COORD_MAX,
label_dsc.flag);
lv_area_t txt_area;
txt_area.x1 = 0;
txt_area.x2 = txt_size.x - 1;
txt_area.y1 = 0;
txt_area.y2 = txt_size.y - 1;
lv_area_t indic_area;
lv_obj_get_coords(obj, &indic_area);
lv_area_set_width(&indic_area, lv_area_get_width(&indic_area) * lv_bar_get_value(obj) / MAX_VALUE);
/*If the indicator is long enough put the text inside on the right*/
if(lv_area_get_width(&indic_area) > txt_size.x + 20) {
lv_area_align(&indic_area, &txt_area, LV_ALIGN_RIGHT_MID, -10, 0);
label_dsc.color = lv_color_white();
}
/*If the indicator is still short put the text out of it on the right*/
else {
lv_area_align(&indic_area, &txt_area, LV_ALIGN_OUT_RIGHT_MID, 10, 0);
label_dsc.color = lv_color_black();
}
label_dsc.text = buf;
label_dsc.text_local = true;
lv_layer_t * layer = lv_event_get_layer(e);
lv_draw_label(layer, &label_dsc, &txt_area);
}
/**
* Custom drawer on the bar to display the current value
*/
void lv_example_bar_6(void)
{
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_bar_set_range(bar, MIN_VALUE, MAX_VALUE);
lv_obj_set_size(bar, 200, 20);
lv_obj_center(bar);
lv_obj_add_event_cb(bar, event_cb, LV_EVENT_DRAW_MAIN_END, NULL);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, bar);
lv_anim_set_values(&a, 0, 100);
lv_anim_set_exec_cb(&a, set_value);
lv_anim_set_duration(&a, 4000);
lv_anim_set_reverse_duration(&a, 4000);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a);
}
#endif
Bar with opposite direction¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Bar with opposite direction
*/
void lv_example_bar_7(void)
{
lv_obj_t * bar_tob = lv_bar_create(lv_screen_active());
lv_obj_set_size(bar_tob, 20, 180);
lv_bar_set_range(bar_tob, 100, 0);
lv_bar_set_value(bar_tob, 70, LV_ANIM_OFF);
lv_obj_align(bar_tob, LV_ALIGN_CENTER, 0, 10);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "From top to bottom");
lv_obj_align_to(label, bar_tob, LV_ALIGN_OUT_TOP_MID, 0, -5);
}
#endif
Calendar¶
Calendar with header¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CALENDAR && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = (lv_obj_t *)lv_event_get_current_target(e);
if(code == LV_EVENT_VALUE_CHANGED) {
lv_calendar_date_t date;
if(lv_calendar_get_pressed_date(obj, &date)) {
LV_LOG_USER("Clicked date: %02d.%02d.%d", date.day, date.month, date.year);
}
}
}
void lv_example_calendar_1(void)
{
lv_obj_t * calendar = lv_calendar_create(lv_screen_active());
lv_obj_set_size(calendar, 185, 230);
lv_obj_align(calendar, LV_ALIGN_CENTER, 0, 27);
lv_obj_add_event_cb(calendar, event_handler, LV_EVENT_ALL, NULL);
lv_calendar_set_today_date(calendar, 2021, 02, 23);
lv_calendar_set_month_shown(calendar, 2021, 02);
/*Highlight a few days*/
static lv_calendar_date_t highlighted_days[3]; /*Only its pointer will be saved so should be static*/
highlighted_days[0].year = 2021;
highlighted_days[0].month = 02;
highlighted_days[0].day = 6;
highlighted_days[1].year = 2021;
highlighted_days[1].month = 02;
highlighted_days[1].day = 11;
highlighted_days[2].year = 2022;
highlighted_days[2].month = 02;
highlighted_days[2].day = 22;
lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);
#if LV_USE_CALENDAR_HEADER_DROPDOWN
lv_calendar_add_header_dropdown(calendar);
#elif LV_USE_CALENDAR_HEADER_ARROW
lv_calendar_add_header_arrow(calendar);
#endif
}
#endif
Chinese calendar¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CALENDAR && LV_USE_CALENDAR_CHINESE && LV_BUILD_EXAMPLES
void lv_example_calendar_2(void)
{
lv_obj_t * calendar = lv_calendar_create(lv_screen_active());
lv_obj_set_size(calendar, 300, 300);
lv_obj_align(calendar, LV_ALIGN_TOP_MID, 0, 0);
lv_calendar_set_today_date(calendar, 2024, 03, 22);
lv_calendar_set_month_shown(calendar, 2024, 03);
#if LV_USE_CALENDAR_HEADER_DROPDOWN
lv_calendar_add_header_dropdown(calendar);
#elif LV_USE_CALENDAR_HEADER_ARROW
lv_calendar_add_header_arrow(calendar);
#endif
lv_calendar_set_chinese_mode(calendar, true);
lv_obj_set_style_text_font(calendar, &lv_font_source_han_sans_sc_14_cjk, LV_PART_MAIN);
}
#else
void lv_example_calendar_2(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "chinese calendar is not enabled");
lv_obj_center(label);
}
#endif
Canvas¶
Drawing on the Canvas and rotate¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 200
#define CANVAS_HEIGHT 150
void lv_example_canvas_1(void)
{
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.radius = 10;
rect_dsc.bg_opa = LV_OPA_COVER;
rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
rect_dsc.bg_grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);
rect_dsc.bg_grad.stops[0].opa = LV_OPA_100;
rect_dsc.bg_grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
rect_dsc.bg_grad.stops[1].opa = LV_OPA_50;
rect_dsc.border_width = 2;
rect_dsc.border_opa = LV_OPA_90;
rect_dsc.border_color = lv_color_white();
rect_dsc.shadow_width = 5;
rect_dsc.shadow_offset_x = 5;
rect_dsc.shadow_offset_y = 5;
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = lv_palette_main(LV_PALETTE_ORANGE);
label_dsc.text = "Some text on text canvas";
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf_16bpp, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565);
LV_DRAW_BUF_INIT_STATIC(draw_buf_16bpp);
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf_16bpp);
lv_obj_center(canvas);
lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_area_t coords_rect = {30, 20, 100, 70};
lv_draw_rect(&layer, &rect_dsc, &coords_rect);
lv_area_t coords_text = {40, 80, 100, 120};
lv_draw_label(&layer, &label_dsc, &coords_text);
lv_canvas_finish_layer(canvas, &layer);
/*Test the rotation. It requires another buffer where the original image is stored.
*So use previous canvas as image and rotate it to the new canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf_32bpp, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf_32bpp);
/*Create a canvas and initialize its palette*/
canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf_32bpp);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 1), LV_OPA_COVER);
lv_canvas_init_layer(canvas, &layer);
lv_image_dsc_t img;
lv_draw_buf_to_image(&draw_buf_16bpp, &img);
lv_draw_image_dsc_t img_dsc;
lv_draw_image_dsc_init(&img_dsc);
img_dsc.rotation = 120;
img_dsc.src = &img;
img_dsc.pivot.x = CANVAS_WIDTH / 2;
img_dsc.pivot.y = CANVAS_HEIGHT / 2;
lv_area_t coords_img = {0, 0, CANVAS_WIDTH - 1, CANVAS_HEIGHT - 1};
lv_draw_image(&layer, &img_dsc, &coords_img);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Transparent Canvas with chroma keying¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 80
#define CANVAS_HEIGHT 40
/**
* Create a transparent canvas with transparency
*/
void lv_example_canvas_2(void)
{
lv_obj_set_style_bg_color(lv_screen_active(), lv_palette_lighten(LV_PALETTE_RED, 5), 0);
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_obj_center(canvas);
/*Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)*/
lv_canvas_fill_bg(canvas, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_COVER);
/*Create hole on the canvas*/
int32_t x;
int32_t y;
for(y = 10; y < 20; y++) {
for(x = 5; x < 75; x++) {
lv_canvas_set_px(canvas, x, y, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_50);
}
}
for(y = 20; y < 30; y++) {
for(x = 5; x < 75; x++) {
lv_canvas_set_px(canvas, x, y, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_20);
}
}
for(y = 30; y < 40; y++) {
for(x = 5; x < 75; x++) {
lv_canvas_set_px(canvas, x, y, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_0);
}
}
}
#endif
Draw a rectangle to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Draw a rectangle to the canvas
*/
void lv_example_canvas_3(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_rect_dsc_t dsc;
lv_draw_rect_dsc_init(&dsc);
dsc.bg_color = lv_palette_main(LV_PALETTE_RED);
dsc.border_color = lv_palette_main(LV_PALETTE_BLUE);
dsc.border_width = 3;
dsc.outline_color = lv_palette_main(LV_PALETTE_GREEN);
dsc.outline_width = 2;
dsc.outline_pad = 2;
dsc.outline_opa = LV_OPA_50;
dsc.radius = 5;
dsc.border_width = 3;
lv_area_t coords = {10, 10, 40, 30};
lv_draw_rect(&layer, &dsc, &coords);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Draw a label to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_FONT_MONTSERRAT_18 && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Draw a text to the canvas
*/
void lv_example_canvas_4(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_label_dsc_t dsc;
lv_draw_label_dsc_init(&dsc);
dsc.color = lv_palette_main(LV_PALETTE_RED);
dsc.font = &lv_font_montserrat_18;
dsc.decor = LV_TEXT_DECOR_UNDERLINE;
dsc.text = "Hello";
lv_area_t coords = {10, 10, 30, 60};
lv_draw_label(&layer, &dsc, &coords);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Draw an arc to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Draw an arc to the canvas
*/
void lv_example_canvas_5(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_arc_dsc_t dsc;
lv_draw_arc_dsc_init(&dsc);
dsc.color = lv_palette_main(LV_PALETTE_RED);
dsc.center.x = 25;
dsc.center.y = 25;
dsc.width = 10;
dsc.radius = 15;
dsc.start_angle = 0;
dsc.end_angle = 220;
lv_draw_arc(&layer, &dsc);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Draw an image to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Draw an image to the canvas
*/
void lv_example_canvas_6(void)
{
/*Create a buffer for the canvas*/
static uint8_t cbuf[LV_CANVAS_BUF_SIZE(CANVAS_WIDTH, CANVAS_HEIGHT, 32, LV_DRAW_BUF_STRIDE_ALIGN)];
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
LV_IMAGE_DECLARE(img_star);
lv_draw_image_dsc_t dsc;
lv_draw_image_dsc_init(&dsc);
dsc.src = &img_star;
lv_area_t coords = {10, 10, 10 + img_star.header.w - 1, 10 + img_star.header.h - 1};
lv_draw_image(&layer, &dsc, &coords);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Draw a line to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS&& LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Draw a line to the canvas
*/
void lv_example_canvas_7(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_line_dsc_t dsc;
lv_draw_line_dsc_init(&dsc);
dsc.color = lv_palette_main(LV_PALETTE_RED);
dsc.width = 4;
dsc.round_end = 1;
dsc.round_start = 1;
dsc.p1.x = 15;
dsc.p1.y = 15;
dsc.p2.x = 35;
dsc.p2.y = 10;
lv_draw_line(&layer, &dsc);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Draw a vector graphic to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#if LV_USE_VECTOR_GRAPHIC
#define CANVAS_WIDTH 150
#define CANVAS_HEIGHT 150
/**
* Draw a path to the canvas
*/
void lv_example_canvas_8(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_vector_dsc_t * dsc = lv_draw_vector_dsc_create(&layer);
lv_vector_path_t * path = lv_vector_path_create(LV_VECTOR_PATH_QUALITY_MEDIUM);
lv_fpoint_t pts[] = {{10, 10}, {130, 130}, {10, 130}};
lv_vector_path_move_to(path, &pts[0]);
lv_vector_path_line_to(path, &pts[1]);
lv_vector_path_line_to(path, &pts[2]);
lv_vector_path_close(path);
lv_draw_vector_dsc_set_fill_color(dsc, lv_color_make(0x00, 0x80, 0xff));
lv_draw_vector_dsc_add_path(dsc, path);
lv_draw_vector(dsc);
lv_vector_path_delete(path);
lv_draw_vector_dsc_delete(dsc);
lv_canvas_finish_layer(canvas, &layer);
}
#else
void lv_example_canvas_8(void)
{
/*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Vector graphics is not enabled");
lv_obj_center(label);
}
#endif /*LV_USE_VECTOR_GRAPHIC*/
#endif
Draw a triangle to the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 150
#define CANVAS_HEIGHT 150
/**
* Draw a triangle to the canvas
*/
void lv_example_canvas_9(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_triangle_dsc_t tri_dsc;
lv_draw_triangle_dsc_init(&tri_dsc);
tri_dsc.p[0].x = 10;
tri_dsc.p[0].y = 10;
tri_dsc.p[1].x = 100;
tri_dsc.p[1].y = 30;
tri_dsc.p[2].x = 50;
tri_dsc.p[2].y = 100;
tri_dsc.grad.stops_count = 2;
tri_dsc.grad.dir = LV_GRAD_DIR_VER;
tri_dsc.grad.stops[0].color = lv_color_hex(0xff0000);
tri_dsc.grad.stops[0].frac = 64; /*Start at 25%*/
tri_dsc.grad.stops[0].opa = LV_OPA_COVER;
tri_dsc.grad.stops[1].color = lv_color_hex(0x0000ff);
tri_dsc.grad.stops[1].opa = LV_OPA_TRANSP;
tri_dsc.grad.stops[1].frac = 3 * 64; /*End at 75%*/
tri_dsc.opa = 128; /*Set the overall opacity to 50%*/
lv_draw_triangle(&layer, &tri_dsc);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Blur an area on the canvas¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_FONT_MONTSERRAT_18 && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 100
#define CANVAS_HEIGHT 100
/**
*Blur an area on the canvas
*/
void lv_example_canvas_10(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
/*A label in the background*/
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = lv_palette_main(LV_PALETTE_RED);
label_dsc.font = &lv_font_montserrat_14;
label_dsc.decor = LV_TEXT_DECOR_UNDERLINE;
label_dsc.align = LV_TEXT_ALIGN_CENTER;
label_dsc.text = "Some parts of\nthis canvas is blurred";
lv_area_t label1_coords = {10, 10, 90, 90};
lv_draw_label(&layer, &label_dsc, &label1_coords);
/*Blur the middle of the canvas*/
lv_draw_blur_dsc_t blur_dsc;
lv_draw_blur_dsc_init(&blur_dsc);
blur_dsc.corner_radius = 10;
blur_dsc.blur_radius = 8;
lv_area_t fill_coords = {20, 30, 80, 70};
lv_draw_blur(&layer, &blur_dsc, &fill_coords);
/*Draw a semi-transparent rectangle on the blurred area*/
lv_draw_fill_dsc_t fill_dsc;
lv_draw_fill_dsc_init(&fill_dsc);
fill_dsc.color = lv_palette_lighten(LV_PALETTE_BLUE, 1);
fill_dsc.radius = 10;
fill_dsc.opa = LV_OPA_30;
lv_draw_fill(&layer, &fill_dsc, &fill_coords);
/*Add label on the blurred area*/
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = lv_color_black();
label_dsc.font = &lv_font_montserrat_14;
label_dsc.align = LV_TEXT_ALIGN_CENTER;
label_dsc.text = "Hello world";
lv_area_t label2_coords = {20, 35, 80, 60};
lv_draw_label(&layer, &label_dsc, &label2_coords);
lv_canvas_finish_layer(canvas, &layer);
}
#endif
Draw Fancy Letter Effects¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 300
#define CANVAS_HEIGHT 200
static void timer_cb(lv_timer_t * timer)
{
static int32_t counter = 0;
const char * string = "lol~ I'm wavvvvvvving~>>>";
const int16_t string_len = lv_strlen(string);
lv_obj_t * canvas = (lv_obj_t *)lv_timer_get_user_data(timer);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_canvas_fill_bg(canvas, lv_color_white(), LV_OPA_COVER);
lv_draw_letter_dsc_t letter_dsc;
lv_draw_letter_dsc_init(&letter_dsc);
letter_dsc.color = lv_color_hex(0xff0000);
letter_dsc.font = lv_font_get_default();
{
#define CURVE2_X(t) (t * 2 + 10)
#define CURVE2_Y(t) (lv_trigo_sin((t) * 5) * 40 / 32767 + CANVAS_HEIGHT / 2)
int32_t pre_x = CURVE2_X(-1);
int32_t pre_y = CURVE2_Y(-1);
for(int16_t i = 0; i < string_len; i++) {
const int16_t angle = (int16_t)(i * 5);
const int32_t x = CURVE2_X(angle);
const int32_t y = CURVE2_Y(angle + counter / 2);
const lv_point_t point = { .x = x, .y = y };
letter_dsc.unicode = (uint32_t)string[i % string_len];
letter_dsc.rotation = lv_atan2(y - pre_y, x - pre_x) * 10;
letter_dsc.color = lv_color_hsv_to_rgb(i * 10, 100, 100);
lv_draw_letter(&layer, &letter_dsc, &point);
pre_x = x;
pre_y = y;
}
}
lv_canvas_finish_layer(canvas, &layer);
counter++;
}
void lv_example_canvas_11(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_obj_set_size(canvas, CANVAS_WIDTH, CANVAS_HEIGHT);
lv_obj_center(canvas);
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_timer_create(timer_cb, 16, canvas);
}
#endif
Draw Fancy Letter Effects 2¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
#define CANVAS_WIDTH 300
#define CANVAS_HEIGHT 200
static void timer_cb(lv_timer_t * timer)
{
static int32_t counter = 0;
const char * string = "windstorrrrrrrrrrrrrrrrm~>>>";
const int16_t string_len = lv_strlen(string);
lv_obj_t * canvas = (lv_obj_t *) lv_timer_get_user_data(timer);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_canvas_fill_bg(canvas, lv_color_white(), LV_OPA_COVER);
lv_draw_letter_dsc_t letter_dsc;
lv_draw_letter_dsc_init(&letter_dsc);
letter_dsc.color = lv_color_hex(0xff0000);
letter_dsc.font = lv_font_get_default();
{
#define CURVE2_X(t) ((t) * 2 + lv_trigo_cos((t) * 5) * 40 / 32767 - 10)
#define CURVE2_Y(t, T) ((t) * lv_trigo_sin(((t) + (T)) * 5) * 40 / 32767 / 80 + CANVAS_HEIGHT / 2)
int32_t pre_x = CURVE2_X(-1);
int32_t pre_y = CURVE2_Y(-1, 0);
for(int16_t i = 0; i < string_len; i++) {
const int32_t angle = i * 5;
const int32_t x = CURVE2_X(angle);
const int32_t y = CURVE2_Y(angle + 30, counter / 2);
letter_dsc.unicode = (uint32_t)string[i % string_len];
letter_dsc.rotation = lv_atan2(y - pre_y, x - pre_x) * 10;
letter_dsc.color = lv_color_hsv_to_rgb(i * 10, 100, 100);
lv_point_t p = (lv_point_t) {
.x = x, .y = y
};
lv_draw_letter(&layer, &letter_dsc, &p);
pre_x = x;
pre_y = y;
}
}
lv_canvas_finish_layer(canvas, &layer);
counter++;
}
void lv_example_canvas_12(void)
{
/*Create a buffer for the canvas*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
LV_DRAW_BUF_INIT_STATIC(draw_buf);
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_obj_set_size(canvas, CANVAS_WIDTH, CANVAS_HEIGHT);
lv_obj_center(canvas);
lv_canvas_set_draw_buf(canvas, &draw_buf);
lv_timer_create(timer_cb, 16, canvas);
}
#endif
Chart¶
Line Chart¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES
/**
* A very basic line chart
*/
void lv_example_chart_1(void)
{
/*Create a chart*/
lv_obj_t * chart;
chart = lv_chart_create(lv_screen_active());
lv_obj_set_size(chart, 200, 150);
lv_obj_center(chart);
lv_chart_set_type(chart, LV_CHART_TYPE_LINE); /*Show lines and points too*/
/*Add two data series*/
lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_SECONDARY_Y);
int32_t * ser2_y_points = lv_chart_get_series_y_array(chart, ser2);
uint32_t i;
for(i = 0; i < 10; i++) {
/*Set the next points on 'ser1'*/
lv_chart_set_next_value(chart, ser1, (int32_t)lv_rand(10, 50));
/*Directly set points on 'ser2'*/
ser2_y_points[i] = (int32_t)lv_rand(50, 90);
}
lv_chart_refresh(chart); /*Required after direct set*/
}
#endif
Axis ticks and labels with scrolling on a chart¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES
/**
* Use lv_scale to add ticks to a scrollable chart
*/
void lv_example_chart_2(void)
{
/*Create a container*/
lv_obj_t * main_cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(main_cont, 200, 150);
lv_obj_center(main_cont);
/*Create a transparent wrapper for the chart and the scale.
*Set a large width, to make it scrollable on the main container*/
lv_obj_t * wrapper = lv_obj_create(main_cont);
lv_obj_remove_style_all(wrapper);
lv_obj_set_size(wrapper, lv_pct(300), lv_pct(100));
lv_obj_set_flex_flow(wrapper, LV_FLEX_FLOW_COLUMN);
/*Create a chart on the wrapper
*Set it's width to 100% to fill the large wrapper*/
lv_obj_t * chart = lv_chart_create(wrapper);
lv_obj_set_width(chart, lv_pct(100));
lv_obj_set_flex_grow(chart, 1);
lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
lv_chart_set_axis_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
lv_chart_set_axis_range(chart, LV_CHART_AXIS_SECONDARY_Y, 0, 400);
lv_chart_set_point_count(chart, 12);
lv_obj_set_style_radius(chart, 0, 0);
/*Create a scale also with 100% width*/
lv_obj_t * scale_bottom = lv_scale_create(wrapper);
lv_scale_set_mode(scale_bottom, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
lv_obj_set_size(scale_bottom, lv_pct(100), 25);
lv_scale_set_total_tick_count(scale_bottom, 12);
lv_scale_set_major_tick_every(scale_bottom, 1);
lv_obj_set_style_pad_hor(scale_bottom, lv_chart_get_first_point_center_offset(chart), 0);
static const char * month[] = {"Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec", NULL};
lv_scale_set_text_src(scale_bottom, month);
/*Add two data series*/
lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_lighten(LV_PALETTE_GREEN, 2), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_darken(LV_PALETTE_GREEN, 2), LV_CHART_AXIS_PRIMARY_Y);
/*Set the next points on 'ser1'*/
uint32_t i;
for(i = 0; i < 12; i++) {
lv_chart_set_next_value(chart, ser1, (int32_t)lv_rand(10, 60));
lv_chart_set_next_value(chart, ser2, (int32_t)lv_rand(50, 90));
}
lv_chart_refresh(chart); /*Required after direct set*/
}
#endif
Show the value of the pressed points¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES
static void event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * chart = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
lv_obj_invalidate(chart);
}
if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
int32_t * s = (int32_t *)lv_event_get_param(e);
*s = LV_MAX(*s, 20);
}
else if(code == LV_EVENT_DRAW_POST_END) {
uint32_t id = lv_chart_get_pressed_point(chart);
if(id == LV_CHART_POINT_NONE) return;
LV_LOG_USER("Selected point %d", (int)id);
lv_chart_series_t * ser = lv_chart_get_series_next(chart, NULL);
int32_t value = 0;
while(ser) {
lv_point_t p;
lv_chart_get_point_pos_by_id(chart, ser, id, &p);
int32_t * y_array = lv_chart_get_series_y_array(chart, ser);
if(y_array[id] != LV_CHART_POINT_NONE && y_array[id] >= 0) {
/*Accumulate the values to show the rectangles at the top of each segment*/
value += y_array[id];
/*Draw a rectangle above the clicked point*/
lv_layer_t * layer = lv_event_get_layer(e);
lv_draw_rect_dsc_t draw_rect_dsc;
lv_draw_rect_dsc_init(&draw_rect_dsc);
draw_rect_dsc.bg_color = lv_color_black();
draw_rect_dsc.bg_opa = LV_OPA_50;
draw_rect_dsc.radius = 3;
lv_area_t chart_obj_coords;
lv_obj_get_coords(chart, &chart_obj_coords);
lv_area_t rect_area;
rect_area.x1 = chart_obj_coords.x1 + p.x - 20;
rect_area.x2 = chart_obj_coords.x1 + p.x + 20;
rect_area.y1 = chart_obj_coords.y1 + p.y - 10;
rect_area.y2 = chart_obj_coords.y1 + p.y + 10;
lv_draw_rect(layer, &draw_rect_dsc, &rect_area);
/*Draw the value as label to the center of the rectangle*/
char buf[16];
lv_snprintf(buf, sizeof(buf), LV_SYMBOL_DUMMY"$%d", value);
lv_draw_label_dsc_t draw_label_dsc;
lv_draw_label_dsc_init(&draw_label_dsc);
draw_label_dsc.color = lv_color_white();
draw_label_dsc.text = buf;
draw_label_dsc.text_local = 1;
draw_label_dsc.align = LV_TEXT_ALIGN_CENTER;
lv_area_t label_area = rect_area;
lv_area_set_height(&label_area, lv_font_get_line_height(draw_label_dsc.font));
lv_area_align(&rect_area, &label_area, LV_ALIGN_CENTER, 0, 0);
lv_draw_label(layer, &draw_label_dsc, &label_area);
}
ser = lv_chart_get_series_next(chart, ser);
}
}
else if(code == LV_EVENT_RELEASED) {
lv_obj_invalidate(chart);
}
}
/**
* Show the value of the pressed points
*/
void lv_example_chart_3(void)
{
/*Create a chart*/
lv_obj_t * chart;
chart = lv_chart_create(lv_screen_active());
lv_obj_set_size(chart, 280, 180);
lv_obj_set_style_pad_column(chart, 4, 0);
lv_obj_center(chart);
lv_chart_set_type(chart, LV_CHART_TYPE_STACKED);
lv_obj_add_event_cb(chart, event_cb, LV_EVENT_ALL, NULL);
lv_obj_refresh_ext_draw_size(chart);
/*Add two data series*/
lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_series_t * ser3 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_BLUE), LV_CHART_AXIS_PRIMARY_Y);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_chart_set_next_value(chart, ser1, lv_rand(15, 30));
lv_chart_set_next_value(chart, ser2, lv_rand(15, 30));
lv_chart_set_next_value(chart, ser3, lv_rand(15, 30));
}
}
#endif
Recolor bars based on their value¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_DRAW_SW_COMPLEX && LV_BUILD_EXAMPLES
static void draw_event_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
if(base_dsc->part != LV_PART_ITEMS) {
return;
}
lv_draw_fill_dsc_t * fill_dsc = lv_draw_task_get_fill_dsc(draw_task);
if(fill_dsc) {
lv_obj_t * chart = lv_event_get_target_obj(e);
int32_t * y_array = lv_chart_get_series_y_array(chart, lv_chart_get_series_next(chart, NULL));
int32_t v = y_array[base_dsc->id2];
uint8_t ratio = (uint8_t)(v * 255 / 100);
fill_dsc->color = lv_color_mix(lv_palette_main(LV_PALETTE_GREEN), lv_palette_main(LV_PALETTE_RED), ratio);
}
}
/**
* Recolor the bars of a chart based on their value
*/
void lv_example_chart_4(void)
{
/*Create a chart1*/
lv_obj_t * chart = lv_chart_create(lv_screen_active());
lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
lv_chart_set_point_count(chart, 24);
lv_obj_set_style_pad_column(chart, 2, 0);
lv_obj_set_size(chart, 260, 160);
lv_obj_center(chart);
lv_chart_series_t * ser = lv_chart_add_series(chart, lv_color_hex(0xff0000), LV_CHART_AXIS_PRIMARY_Y);
lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(chart, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
uint32_t i;
for(i = 0; i < 24; i++) {
lv_chart_set_next_value(chart, ser, (int32_t)lv_rand(10, 90));
}
}
#endif
Faded area line chart with custom division lines¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_DRAW_SW_COMPLEX && LV_BUILD_EXAMPLES
#include "../../../lvgl_private.h"
static void hook_division_lines(lv_event_t * e);
static void add_faded_area(lv_event_t * e);
static void draw_event_cb(lv_event_t * e);
/**
* Add a faded area effect to the line chart and make some division lines ticker
*/
void lv_example_chart_5(void)
{
/*Create a chart*/
lv_obj_t * chart = lv_chart_create(lv_screen_active());
lv_chart_set_type(chart, LV_CHART_TYPE_LINE); /*Show lines and points too*/
lv_obj_set_size(chart, 200, 150);
lv_obj_set_style_pad_all(chart, 0, 0);
lv_obj_set_style_radius(chart, 0, 0);
lv_obj_center(chart);
lv_chart_set_div_line_count(chart, 5, 7);
lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(chart, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_chart_series_t * ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_chart_set_next_value(chart, ser, (int32_t)lv_rand(10, 80));
}
}
static void draw_event_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
if(base_dsc->part == LV_PART_ITEMS && lv_draw_task_get_type(draw_task) == LV_DRAW_TASK_TYPE_LINE) {
add_faded_area(e);
}
/*Hook the division lines too*/
if(base_dsc->part == LV_PART_MAIN && lv_draw_task_get_type(draw_task) == LV_DRAW_TASK_TYPE_LINE) {
hook_division_lines(e);
}
}
static void add_faded_area(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_area_t coords;
lv_obj_get_coords(obj, &coords);
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
const lv_chart_series_t * ser = lv_chart_get_series_next(obj, NULL);
lv_color_t ser_color = lv_chart_get_series_color(obj, ser);
/*Draw a triangle below the line witch some opacity gradient*/
lv_draw_line_dsc_t * draw_line_dsc = (lv_draw_line_dsc_t *)lv_draw_task_get_draw_dsc(draw_task);
lv_draw_triangle_dsc_t tri_dsc;
lv_draw_triangle_dsc_init(&tri_dsc);
tri_dsc.p[0].x = draw_line_dsc->p1.x;
tri_dsc.p[0].y = draw_line_dsc->p1.y;
tri_dsc.p[1].x = draw_line_dsc->p2.x;
tri_dsc.p[1].y = draw_line_dsc->p2.y;
tri_dsc.p[2].x = draw_line_dsc->p1.y < draw_line_dsc->p2.y ? draw_line_dsc->p1.x : draw_line_dsc->p2.x;
tri_dsc.p[2].y = LV_MAX(draw_line_dsc->p1.y, draw_line_dsc->p2.y);
tri_dsc.grad.dir = LV_GRAD_DIR_VER;
int32_t full_h = lv_obj_get_height(obj);
int32_t fract_uppter = (int32_t)(LV_MIN(draw_line_dsc->p1.y, draw_line_dsc->p2.y) - coords.y1) * 255 / full_h;
int32_t fract_lower = (int32_t)(LV_MAX(draw_line_dsc->p1.y, draw_line_dsc->p2.y) - coords.y1) * 255 / full_h;
tri_dsc.grad.stops[0].color = ser_color;
tri_dsc.grad.stops[0].opa = (lv_opa_t)(255 - fract_uppter);
tri_dsc.grad.stops[0].frac = 0;
tri_dsc.grad.stops[1].color = ser_color;
tri_dsc.grad.stops[1].opa = (lv_opa_t)(255 - fract_lower);
tri_dsc.grad.stops[1].frac = 255;
lv_draw_triangle(base_dsc->layer, &tri_dsc);
/*Draw rectangle below the triangle*/
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
rect_dsc.bg_grad.stops[0].color = ser_color;
rect_dsc.bg_grad.stops[0].frac = 0;
rect_dsc.bg_grad.stops[0].opa = (lv_opa_t)(255 - fract_lower);
rect_dsc.bg_grad.stops[1].color = ser_color;
rect_dsc.bg_grad.stops[1].frac = 255;
rect_dsc.bg_grad.stops[1].opa = 0;
lv_area_t rect_area;
rect_area.x1 = (int32_t)draw_line_dsc->p1.x;
rect_area.x2 = (int32_t)draw_line_dsc->p2.x - 1;
rect_area.y1 = (int32_t)LV_MAX(draw_line_dsc->p1.y, draw_line_dsc->p2.y);
rect_area.y2 = (int32_t)coords.y2;
lv_draw_rect(base_dsc->layer, &rect_dsc, &rect_area);
}
static void hook_division_lines(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
lv_draw_line_dsc_t * line_dsc = (lv_draw_line_dsc_t *)lv_draw_task_get_draw_dsc(draw_task);
/*Vertical line*/
if(line_dsc->p1.x == line_dsc->p2.x) {
line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1);
if(base_dsc->id1 == 3) {
line_dsc->width = 2;
line_dsc->dash_gap = 0;
line_dsc->dash_width = 0;
}
else {
line_dsc->width = 1;
line_dsc->dash_gap = 6;
line_dsc->dash_width = 6;
}
}
/*Horizontal line*/
else {
if(base_dsc->id1 == 2) {
line_dsc->width = 2;
line_dsc->dash_gap = 0;
line_dsc->dash_width = 0;
}
else {
line_dsc->width = 2;
line_dsc->dash_gap = 6;
line_dsc->dash_width = 6;
}
if(base_dsc->id1 == 1 || base_dsc->id1 == 3) {
line_dsc->color = lv_palette_main(LV_PALETTE_GREEN);
}
else {
line_dsc->color = lv_palette_lighten(LV_PALETTE_GREY, 1);
}
}
}
#endif
Show cursor on the clicked point¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES
static lv_obj_t * chart;
static lv_chart_series_t * ser;
static lv_chart_cursor_t * cursor;
static void value_changed_event_cb(lv_event_t * e)
{
uint32_t last_id;
lv_obj_t * obj = lv_event_get_target_obj(e);
last_id = lv_chart_get_pressed_point(obj);
if(last_id != LV_CHART_POINT_NONE) {
lv_chart_set_cursor_point(obj, cursor, NULL, last_id);
}
}
/**
* Show cursor on the clicked point
*/
void lv_example_chart_6(void)
{
chart = lv_chart_create(lv_screen_active());
lv_obj_set_size(chart, 200, 150);
lv_obj_align(chart, LV_ALIGN_CENTER, 0, -10);
// lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 5, true, 40);
// lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 10, 5, 10, 1, true, 30);
lv_obj_add_event_cb(chart, value_changed_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_refresh_ext_draw_size(chart);
cursor = lv_chart_add_cursor(chart, lv_palette_main(LV_PALETTE_BLUE), (lv_dir_t)(LV_DIR_LEFT | LV_DIR_BOTTOM));
ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_chart_set_next_value(chart, ser, (int32_t)lv_rand(10, 90));
}
// lv_chart_set_scale_x(chart, 500);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Click on a point");
lv_obj_align_to(label, chart, LV_ALIGN_OUT_TOP_MID, 0, -5);
}
#endif
Scatter chart¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES
static void draw_event_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
if(base_dsc->part == LV_PART_INDICATOR) {
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_chart_series_t * ser = lv_chart_get_series_next(obj, NULL);
lv_draw_rect_dsc_t * rect_draw_dsc = (lv_draw_rect_dsc_t *)lv_draw_task_get_draw_dsc(draw_task);
uint32_t cnt = lv_chart_get_point_count(obj);
/*Make older value more transparent*/
rect_draw_dsc->bg_opa = (lv_opa_t)((LV_OPA_COVER * base_dsc->id2) / (cnt - 1));
/*Make smaller values blue, higher values red*/
int32_t * x_array = lv_chart_get_series_x_array(obj, ser);
int32_t * y_array = lv_chart_get_series_y_array(obj, ser);
/*dsc->id is the tells drawing order, but we need the ID of the point being drawn.*/
uint32_t start_point = lv_chart_get_x_start_point(obj, ser);
uint32_t p_act = (start_point + base_dsc->id2) % cnt; /*Consider start point to get the index of the array*/
lv_opa_t x_opa = (lv_opa_t)((x_array[p_act] * LV_OPA_50) / 200);
lv_opa_t y_opa = (lv_opa_t)((y_array[p_act] * LV_OPA_50) / 1000);
rect_draw_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_RED),
lv_palette_main(LV_PALETTE_BLUE),
x_opa + y_opa);
}
}
static void add_data(lv_timer_t * timer)
{
lv_obj_t * chart = (lv_obj_t *)lv_timer_get_user_data(timer);
lv_chart_set_next_value2(chart, lv_chart_get_series_next(chart, NULL), (int32_t)lv_rand(0, 200),
(int32_t)lv_rand(0, 1000));
}
/**
* A scatter chart
*/
void lv_example_chart_7(void)
{
lv_obj_t * chart = lv_chart_create(lv_screen_active());
lv_obj_set_size(chart, 200, 150);
lv_obj_align(chart, LV_ALIGN_CENTER, 0, 0);
lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(chart, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_obj_set_style_line_width(chart, 0, LV_PART_ITEMS); /*Remove the lines*/
lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER);
lv_chart_set_axis_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
lv_chart_set_axis_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1000);
lv_chart_set_point_count(chart, 50);
lv_chart_series_t * ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
uint32_t i;
for(i = 0; i < 50; i++) {
lv_chart_set_next_value2(chart, ser, (int32_t)lv_rand(0, 200), (int32_t)lv_rand(0, 1000));
}
lv_timer_create(add_data, 100, chart);
}
#endif
Circular line chart with gap¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHART && LV_DRAW_SW_COMPLEX && LV_BUILD_EXAMPLES
static void add_data(lv_timer_t * t)
{
lv_obj_t * chart = (lv_obj_t *)lv_timer_get_user_data(t);
lv_chart_series_t * ser = lv_chart_get_series_next(chart, NULL);
lv_chart_set_next_value(chart, ser, (int32_t)lv_rand(10, 90));
uint32_t p = lv_chart_get_point_count(chart);
uint32_t s = lv_chart_get_x_start_point(chart, ser);
int32_t * a = lv_chart_get_series_y_array(chart, ser);
a[(s + 1) % p] = LV_CHART_POINT_NONE;
a[(s + 2) % p] = LV_CHART_POINT_NONE;
a[(s + 2) % p] = LV_CHART_POINT_NONE;
lv_chart_refresh(chart);
}
/**
* Circular line chart with gap
*/
void lv_example_chart_8(void)
{
/*Create a stacked_area_chart.obj*/
lv_obj_t * chart = lv_chart_create(lv_screen_active());
lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR);
lv_obj_set_style_size(chart, 0, 0, LV_PART_INDICATOR);
lv_obj_set_size(chart, 280, 150);
lv_obj_center(chart);
lv_chart_set_point_count(chart, 80);
lv_chart_series_t * ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
/*Prefill with data*/
uint32_t i;
for(i = 0; i < 80; i++) {
lv_chart_set_next_value(chart, ser, (int32_t)lv_rand(10, 90));
}
lv_timer_create(add_data, 300, chart);
}
#endif
Checkbox¶
Simple Checkboxes¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_CHECKBOX && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
LV_UNUSED(obj);
const char * txt = lv_checkbox_get_text(obj);
const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
LV_UNUSED(txt);
LV_UNUSED(state);
LV_LOG_USER("%s: %s", txt, state);
}
}
void lv_example_checkbox_1(void)
{
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
lv_obj_t * cb;
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Apple");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Banana");
lv_obj_add_state(cb, LV_STATE_CHECKED);
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
cb = lv_checkbox_create(lv_screen_active());
lv_checkbox_set_text(cb, "Lemon");
lv_obj_add_state(cb, LV_STATE_DISABLED);
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
cb = lv_checkbox_create(lv_screen_active());
lv_obj_add_state(cb, LV_STATE_CHECKED);
lv_obj_add_state(cb, LV_STATE_DISABLED);
lv_checkbox_set_text(cb, "Melon\nand a new line");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
lv_obj_update_layout(cb);
}
#endif
Dropdown¶
Simple Drop down list¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_DROPDOWN && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
char buf[32];
lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
LV_LOG_USER("Option: %s", buf);
}
}
void lv_example_dropdown_1(void)
{
/*Create a normal drop down list*/
lv_obj_t * dd = lv_dropdown_create(lv_screen_active());
lv_dropdown_set_options(dd, "Apple\n"
"Banana\n"
"Orange\n"
"Cherry\n"
"Grape\n"
"Raspberry\n"
"Melon\n"
"Orange\n"
"Lemon\n"
"Nuts");
lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 20);
lv_obj_add_event_cb(dd, event_handler, LV_EVENT_ALL, NULL);
}
#endif
Drop down in four directions¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_DROPDOWN && LV_BUILD_EXAMPLES
/**
* Create a drop down, up, left and right menus
*/
void lv_example_dropdown_2(void)
{
static const char * opts = "Apple\n"
"Banana\n"
"Orange\n"
"Melon";
lv_obj_t * dd;
dd = lv_dropdown_create(lv_screen_active());
lv_dropdown_set_options_static(dd, opts);
lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 10);
dd = lv_dropdown_create(lv_screen_active());
lv_dropdown_set_options_static(dd, opts);
lv_dropdown_set_dir(dd, LV_DIR_BOTTOM);
lv_dropdown_set_symbol(dd, LV_SYMBOL_UP);
lv_obj_align(dd, LV_ALIGN_BOTTOM_MID, 0, -10);
dd = lv_dropdown_create(lv_screen_active());
lv_dropdown_set_options_static(dd, opts);
lv_dropdown_set_dir(dd, LV_DIR_RIGHT);
lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);
lv_obj_align(dd, LV_ALIGN_LEFT_MID, 10, 0);
dd = lv_dropdown_create(lv_screen_active());
lv_dropdown_set_options_static(dd, opts);
lv_dropdown_set_dir(dd, LV_DIR_LEFT);
lv_dropdown_set_symbol(dd, LV_SYMBOL_LEFT);
lv_obj_align(dd, LV_ALIGN_RIGHT_MID, -10, 0);
}
#endif
Image¶
Image from variable and symbol¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_IMAGE && LV_BUILD_EXAMPLES
void lv_example_image_1(void)
{
LV_IMAGE_DECLARE(img_cogwheel_argb);
lv_obj_t * img1 = lv_image_create(lv_screen_active());
lv_image_set_src(img1, &img_cogwheel_argb);
lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
lv_obj_t * img2 = lv_image_create(lv_screen_active());
lv_image_set_src(img2, LV_SYMBOL_OK "Accept");
lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
}
#endif
Image recoloring¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_IMAGE && LV_USE_SLIDER && LV_BUILD_EXAMPLES
static lv_obj_t * create_slider(lv_color_t color);
static void slider_event_cb(lv_event_t * e);
static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
static lv_obj_t * img1;
/**
* Demonstrate runtime image re-coloring
*/
void lv_example_image_2(void)
{
/*Create 4 sliders to adjust RGB color and re-color intensity*/
red_slider = create_slider(lv_palette_main(LV_PALETTE_RED));
green_slider = create_slider(lv_palette_main(LV_PALETTE_GREEN));
blue_slider = create_slider(lv_palette_main(LV_PALETTE_BLUE));
intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY));
lv_slider_set_value(red_slider, LV_OPA_20, LV_ANIM_OFF);
lv_slider_set_value(green_slider, LV_OPA_90, LV_ANIM_OFF);
lv_slider_set_value(blue_slider, LV_OPA_60, LV_ANIM_OFF);
lv_slider_set_value(intense_slider, LV_OPA_50, LV_ANIM_OFF);
lv_obj_align(red_slider, LV_ALIGN_LEFT_MID, 25, 0);
lv_obj_align_to(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
lv_obj_align_to(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
lv_obj_align_to(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
/*Now create the actual image*/
LV_IMAGE_DECLARE(img_cogwheel_argb);
img1 = lv_image_create(lv_screen_active());
lv_image_set_src(img1, &img_cogwheel_argb);
lv_obj_align(img1, LV_ALIGN_RIGHT_MID, -20, 0);
lv_obj_send_event(intense_slider, LV_EVENT_VALUE_CHANGED, NULL);
}
static void slider_event_cb(lv_event_t * e)
{
LV_UNUSED(e);
/*Recolor the image based on the sliders' values*/
lv_color_t color = lv_color_make((uint8_t)lv_slider_get_value(red_slider),
(uint8_t)lv_slider_get_value(green_slider),
(uint8_t)lv_slider_get_value(blue_slider));
lv_opa_t intense = (lv_opa_t)lv_slider_get_value(intense_slider);
lv_obj_set_style_image_recolor_opa(img1, intense, 0);
lv_obj_set_style_image_recolor(img1, color, 0);
}
static lv_obj_t * create_slider(lv_color_t color)
{
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_slider_set_range(slider, 0, 255);
lv_obj_set_size(slider, 10, 200);
lv_obj_set_style_bg_color(slider, color, LV_PART_KNOB);
lv_obj_set_style_bg_color(slider, lv_color_darken(color, LV_OPA_40), LV_PART_INDICATOR);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
return slider;
}
#endif
Rotate and zoom¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_IMAGE && LV_BUILD_EXAMPLES
static void set_angle(void * img, int32_t v)
{
lv_image_set_rotation((lv_obj_t *)img, v);
}
static void set_scale(void * img, int32_t v)
{
lv_image_set_scale((lv_obj_t *)img, v);
}
/**
* Show transformations (zoom and rotation) using a pivot point.
*/
void lv_example_image_3(void)
{
LV_IMAGE_DECLARE(img_cogwheel_argb);
/*Now create the actual image*/
lv_obj_t * img = lv_image_create(lv_screen_active());
lv_image_set_src(img, &img_cogwheel_argb);
lv_obj_align(img, LV_ALIGN_CENTER, 50, 50);
lv_image_set_pivot(img, 0, 0); /*Rotate around the top left corner*/
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, img);
lv_anim_set_exec_cb(&a, set_angle);
lv_anim_set_values(&a, 0, 3600);
lv_anim_set_duration(&a, 5000);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a);
lv_anim_set_exec_cb(&a, set_scale);
lv_anim_set_values(&a, 128, 256);
lv_anim_set_reverse_duration(&a, 3000);
lv_anim_start(&a);
}
#endif
Image offset and styling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_IMAGE && LV_BUILD_EXAMPLES
static void ofs_y_anim(void * img, int32_t v)
{
lv_image_set_offset_y((lv_obj_t *)img, v);
}
/**
* Image styling and offset
*/
void lv_example_image_4(void)
{
LV_IMAGE_DECLARE(img_skew_strip);
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_image_recolor_opa(&style, LV_OPA_COVER);
lv_style_set_image_recolor(&style, lv_color_black());
lv_obj_t * img = lv_image_create(lv_screen_active());
lv_obj_add_style(img, &style, 0);
lv_image_set_src(img, &img_skew_strip);
lv_obj_set_size(img, 150, 100);
lv_obj_center(img);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, img);
lv_anim_set_exec_cb(&a, ofs_y_anim);
lv_anim_set_values(&a, 0, 100);
lv_anim_set_duration(&a, 3000);
lv_anim_set_reverse_duration(&a, 500);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a);
}
#endif
Keyboard¶
Keyboard with text area¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
static void ta_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * ta = lv_event_get_target_obj(e);
lv_obj_t * kb = (lv_obj_t *)lv_event_get_user_data(e);
if(code == LV_EVENT_FOCUSED) {
lv_keyboard_set_textarea(kb, ta);
lv_obj_remove_flag(kb, LV_OBJ_FLAG_HIDDEN);
}
if(code == LV_EVENT_DEFOCUSED) {
lv_keyboard_set_textarea(kb, NULL);
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
}
}
void lv_example_keyboard_1(void)
{
/*Create a keyboard to use it with an of the text areas*/
lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
/*Create a text area. The keyboard will write here*/
lv_obj_t * ta1;
ta1 = lv_textarea_create(lv_screen_active());
lv_obj_align(ta1, LV_ALIGN_TOP_LEFT, 10, 10);
lv_obj_add_event_cb(ta1, ta_event_cb, LV_EVENT_ALL, kb);
lv_textarea_set_placeholder_text(ta1, "Hello");
lv_obj_set_size(ta1, 140, 80);
lv_obj_t * ta2;
ta2 = lv_textarea_create(lv_screen_active());
lv_obj_align(ta2, LV_ALIGN_TOP_RIGHT, -10, 10);
lv_obj_add_event_cb(ta2, ta_event_cb, LV_EVENT_ALL, kb);
lv_obj_set_size(ta2, 140, 80);
lv_keyboard_set_textarea(kb, ta1);
/*The keyboard will show Arabic characters if they are enabled */
#if LV_USE_ARABIC_PERSIAN_CHARS && LV_FONT_DEJAVU_16_PERSIAN_HEBREW
lv_obj_set_style_text_font(kb, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_style_text_font(ta1, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_style_text_font(ta2, &lv_font_dejavu_16_persian_hebrew, 0);
#endif
}
#endif
Keyboard with custom map¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
void lv_example_keyboard_2(void)
{
/*Create an AZERTY keyboard map*/
static const char * kb_map[] = {"A", "Z", "E", "R", "T", "Y", "U", "I", "O", "P", LV_SYMBOL_BACKSPACE, "\n",
"Q", "S", "D", "F", "G", "J", "K", "L", "M", LV_SYMBOL_NEW_LINE, "\n",
"W", "X", "C", "V", "B", "N", ",", ".", ":", "!", "?", "\n",
LV_SYMBOL_CLOSE, " ", " ", " ", LV_SYMBOL_OK, NULL
};
/*Set the relative width of the buttons and other controls*/
static const lv_buttonmatrix_ctrl_t kb_ctrl[] = {LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6,
LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6,
LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4,
LV_BUTTONMATRIX_CTRL_WIDTH_2, (lv_buttonmatrix_ctrl_t)(LV_BUTTONMATRIX_CTRL_HIDDEN | LV_BUTTONMATRIX_CTRL_WIDTH_2), LV_BUTTONMATRIX_CTRL_WIDTH_6, (lv_buttonmatrix_ctrl_t)(LV_BUTTONMATRIX_CTRL_HIDDEN | LV_BUTTONMATRIX_CTRL_WIDTH_2), LV_BUTTONMATRIX_CTRL_WIDTH_2
};
/*Create a keyboard and add the new map as USER_1 mode*/
lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_USER_1, kb_map, kb_ctrl);
lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_USER_1);
/*Create a text area. The keyboard will write here*/
lv_obj_t * ta;
ta = lv_textarea_create(lv_screen_active());
lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);
lv_obj_set_size(ta, lv_pct(90), 80);
lv_obj_add_state(ta, LV_STATE_FOCUSED);
lv_keyboard_set_textarea(kb, ta);
}
#endif
Keyboard with drawing¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
static void event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
bool pressed = false;
if(lv_keyboard_get_selected_button(obj) == base_dsc->id1 && lv_obj_has_state(obj, LV_STATE_PRESSED)) {
pressed = true;
}
/*When the keyboard draws the buttons...*/
if(base_dsc->part == LV_PART_ITEMS) {
/*Get a color based on the button's index*/
lv_palette_t palette = (lv_palette_t)(base_dsc->id1 % LV_PALETTE_LAST);
lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
if(fill_draw_dsc) {
fill_draw_dsc->color = pressed ? lv_palette_darken(palette, 3) : lv_palette_main(palette);
}
lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
if(label_draw_dsc) {
/*For the OK symbol, draw a star instead*/
if(lv_strcmp(label_draw_dsc->text, LV_SYMBOL_OK) == 0) {
label_draw_dsc->opa = 0; /*Hide the label*/
LV_IMAGE_DECLARE(img_star);
lv_image_header_t header;
lv_result_t res = lv_image_decoder_get_info(&img_star, &header);
if(res != LV_RESULT_OK) return;
lv_area_t a;
lv_area_set(&a, 0, 0, header.w - 1, header.h - 1);
lv_area_t draw_task_area;
lv_draw_task_get_area(draw_task, &draw_task_area);
lv_area_align(&draw_task_area, &a, LV_ALIGN_CENTER, 0, 0);
lv_draw_image_dsc_t img_draw_dsc;
lv_draw_image_dsc_init(&img_draw_dsc);
img_draw_dsc.src = &img_star;
lv_draw_image(base_dsc->layer, &img_draw_dsc, &a);
}
else {
/*For the other labels just pick an lighter color*/
label_draw_dsc->color = lv_palette_lighten(palette, 4);
}
}
}
}
/**
* Add custom drawer to the keyboard to customize the buttons one by one
*/
void lv_example_keyboard_3(void)
{
lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
lv_obj_add_event_cb(kb, event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(kb, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_obj_center(kb);
}
#endif
Label¶
Line wrap, recoloring and scrolling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES
/**
* Show line wrap, re-color, line align and text scrolling.
*/
void lv_example_label_1(void)
{
lv_obj_t * label1 = lv_label_create(lv_screen_active());
lv_label_set_long_mode(label1, LV_LABEL_LONG_MODE_WRAP); /*Break the long lines*/
lv_label_set_recolor(label1, true); /*Enable re-coloring by commands in the text*/
lv_label_set_text(label1, "#0000ff Re-color# #ff00ff words# #ff0000 of a# label, align the lines to the center "
"and wrap long text automatically.");
lv_obj_set_width(label1, 150); /*Set smaller width to make the lines wrap*/
lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_align(label1, LV_ALIGN_CENTER, 0, -40);
lv_obj_t * label2 = lv_label_create(lv_screen_active());
lv_label_set_long_mode(label2, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR); /*Circular scroll*/
lv_obj_set_width(label2, 150);
lv_label_set_text(label2, "It is a circularly scrolling text. ");
lv_obj_align(label2, LV_ALIGN_CENTER, 0, 40);
}
#endif
Text shadow¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES
/**
* Create a fake text shadow
*/
void lv_example_label_2(void)
{
/*Create a style for the shadow*/
static lv_style_t style_shadow;
lv_style_init(&style_shadow);
lv_style_set_text_opa(&style_shadow, LV_OPA_30);
lv_style_set_text_color(&style_shadow, lv_color_black());
/*Create a label for the shadow first (it's in the background)*/
lv_obj_t * shadow_label = lv_label_create(lv_screen_active());
lv_obj_add_style(shadow_label, &style_shadow, 0);
/*Create the main label*/
lv_obj_t * main_label = lv_label_create(lv_screen_active());
lv_label_set_text(main_label, "A simple method to create\n"
"shadows on a text.\n"
"It even works with\n\n"
"newlines and spaces.");
/*Set the same text for the shadow label*/
lv_label_set_text(shadow_label, lv_label_get_text(main_label));
/*Position the main label*/
lv_obj_align(main_label, LV_ALIGN_CENTER, 0, 0);
/*Shift the second label down and to the right by 2 pixel*/
lv_obj_align_to(shadow_label, main_label, LV_ALIGN_TOP_LEFT, 2, 2);
}
#endif
Show LTR, RTL and Chinese texts¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW && LV_FONT_SOURCE_HAN_SANS_SC_16_CJK && LV_USE_BIDI
/**
* Show mixed LTR, RTL and Chinese label
*/
void lv_example_label_3(void)
{
lv_obj_t * ltr_label = lv_label_create(lv_screen_active());
lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
lv_obj_set_width(ltr_label, 310);
lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);
lv_obj_t * rtl_label = lv_label_create(lv_screen_active());
lv_label_set_text(rtl_label,
"מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_width(rtl_label, 310);
lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);
lv_obj_t * cz_label = lv_label_create(lv_screen_active());
lv_label_set_text(cz_label,
"嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
lv_obj_set_style_text_font(cz_label, &lv_font_source_han_sans_sc_16_cjk, 0);
lv_obj_set_width(cz_label, 310);
lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
}
#endif
Draw label with gradient color¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_FONT_MONTSERRAT_24 && LV_USE_CANVAS && LV_BUILD_EXAMPLES && LV_DRAW_SW_COMPLEX
#define MASK_WIDTH 150
#define MASK_HEIGHT 60
static void generate_mask(lv_draw_buf_t * mask, int32_t w, int32_t h, const char * txt)
{
/*Create a "8 bit alpha" canvas and clear it*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, mask);
lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
/*Draw a label to the canvas. The result "image" will be used as mask*/
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = lv_color_white();
label_dsc.align = LV_TEXT_ALIGN_CENTER;
label_dsc.text = txt;
label_dsc.font = &lv_font_montserrat_24;
lv_area_t a = {0, 0, w - 1, h - 1};
lv_draw_label(&layer, &label_dsc, &a);
lv_canvas_finish_layer(canvas, &layer);
lv_obj_delete(canvas);
}
/**
* Draw label with gradient color
*/
void lv_example_label_4(void)
{
/* Create the mask of a text by drawing it to a canvas*/
LV_DRAW_BUF_DEFINE_STATIC(mask, MASK_WIDTH, MASK_HEIGHT, LV_COLOR_FORMAT_L8);
LV_DRAW_BUF_INIT_STATIC(mask);
generate_mask(&mask, MASK_WIDTH, MASK_HEIGHT, "Text with gradient");
/* Create an object from where the text will be masked out.
* Now it's a rectangle with a gradient but it could be an image too*/
lv_obj_t * grad = lv_obj_create(lv_screen_active());
lv_obj_set_size(grad, MASK_WIDTH, MASK_HEIGHT);
lv_obj_center(grad);
lv_obj_set_style_bg_color(grad, lv_color_hex(0xff0000), 0);
lv_obj_set_style_bg_grad_color(grad, lv_color_hex(0x0000ff), 0);
lv_obj_set_style_bg_grad_dir(grad, LV_GRAD_DIR_HOR, 0);
lv_obj_set_style_bitmap_mask_src(grad, &mask, 0);
}
#endif
Customize circular scrolling animation¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES
/**
* Show customizing the circular scrolling animation of a label with `LV_LABEL_LONG_MODE_SCROLL_CIRCULAR`
* long mode.
*/
void lv_example_label_5(void)
{
static lv_anim_t animation_template;
static lv_style_t label_style;
lv_anim_init(&animation_template);
lv_anim_set_delay(&animation_template, 1000); /*Wait 1 second to start the first scroll*/
lv_anim_set_repeat_delay(&animation_template,
3000); /*Repeat the scroll 3 seconds after the label scrolls back to the initial position*/
lv_anim_set_repeat_count(&animation_template, LV_ANIM_REPEAT_INFINITE);
/*Initialize the label style with the animation template*/
lv_style_init(&label_style);
lv_style_set_anim(&label_style, &animation_template);
lv_obj_t * label1 = lv_label_create(lv_screen_active());
lv_label_set_long_mode(label1, LV_LABEL_LONG_MODE_SCROLL_CIRCULAR); /*Circular scroll*/
lv_obj_set_width(label1, 150);
lv_label_set_text(label1, "It is a circularly scrolling text. ");
lv_obj_align(label1, LV_ALIGN_CENTER, 0, 40);
lv_obj_add_style(label1, &label_style, LV_STATE_DEFAULT); /*Add the style to the label*/
}
#endif
Monospace font¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_MONTSERRAT_20
static bool fix_w_get_glyph_dsc(const lv_font_t * font, lv_font_glyph_dsc_t * dsc, uint32_t letter,
uint32_t letter_next)
{
bool ret = lv_font_get_glyph_dsc_fmt_txt(font, dsc, letter, letter_next);
if(!ret) return false;
/* Set a fixed width */
dsc->adv_w = 20;
dsc->ofs_x = (dsc->adv_w - dsc->box_w) / 2;
return true;
}
void lv_example_label_6(void)
{
/* Clone the original font and override its behavior */
static lv_font_t mono_font;
mono_font = lv_font_montserrat_20;
mono_font.get_glyph_dsc = fix_w_get_glyph_dsc;
/* Create a label with normal font */
lv_obj_t * label1 = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(label1, &lv_font_montserrat_20, 0);
lv_label_set_text(label1, "0123.Wabc");
/* Create a label with fixed-width glyph descriptor override */
lv_obj_t * label2 = lv_label_create(lv_screen_active());
lv_obj_set_y(label2, 30);
lv_obj_set_style_text_font(label2, &mono_font, 0);
lv_label_set_text(label2, "0123.Wabc");
}
#endif
Assign a translation tag to a label¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TRANSLATION && LV_USE_DROPDOWN && LV_USE_LABEL && LV_BUILD_EXAMPLES
/* Arrays are defined `const` to place them in program space instead of RAM. */
static const char * const tags[] = {"tiger", "lion", "rabbit", "elephant", NULL};
static const char * const languages[] = {"English", "Deutsch", "Español", NULL};
static void add_static_translations(void)
{
static const char * const translations[] = {
"The Tiger", "Der Tiger", "El Tigre",
"The Lion", "Der Löwe", "El León",
"The Rabbit", "Das Kaninchen", "El Conejo",
"The Elephant", "Der Elefant", "El Elefante",
};
lv_translation_add_static(languages, tags, translations);
}
static void language_change_cb(lv_event_t * e)
{
static char selected_lang[20];
lv_obj_t * dropdown = lv_event_get_target_obj(e);
lv_dropdown_get_selected_str(dropdown, selected_lang, sizeof(selected_lang));
lv_translation_set_language(selected_lang);
}
/**
* Use a translation tag in labels
*/
void lv_example_label_7(void)
{
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
add_static_translations();
const size_t tag_count = sizeof(tags) / sizeof(tags[0]) - 1;
const size_t lang_count = sizeof(languages) / sizeof(languages[0]) - 1;
/* Create a dropdown to be able to select the language */
lv_obj_t * language_dropdown = lv_dropdown_create(lv_screen_active());
lv_dropdown_clear_options(language_dropdown);
for(size_t i = 0; i < lang_count; ++i) {
lv_dropdown_add_option(language_dropdown, languages[i], i);
}
lv_obj_add_event_cb(language_dropdown, language_change_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_translation_set_language("English");
/* Create a label for each tag */
for(size_t i = 0; i < tag_count; ++i) {
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_translation_tag(label, tags[i]);
}
}
#endif /*LV_USE_TRANSLATION && LV_USE_DROPDOWN && LV_USE_LABEL && LV_BUILD_EXAMPLES*/
LED¶
LED with custom style¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LED && LV_BUILD_EXAMPLES
/**
* Create LED's with different brightness and color
*/
void lv_example_led_1(void)
{
/*Create a LED and switch it OFF*/
lv_obj_t * led1 = lv_led_create(lv_screen_active());
lv_obj_align(led1, LV_ALIGN_CENTER, -80, 0);
lv_led_off(led1);
/*Copy the previous LED and set a brightness*/
lv_obj_t * led2 = lv_led_create(lv_screen_active());
lv_obj_align(led2, LV_ALIGN_CENTER, 0, 0);
lv_led_set_brightness(led2, 150);
lv_led_set_color(led2, lv_palette_main(LV_PALETTE_RED));
/*Copy the previous LED and switch it ON*/
lv_obj_t * led3 = lv_led_create(lv_screen_active());
lv_obj_align(led3, LV_ALIGN_CENTER, 80, 0);
lv_led_on(led3);
}
#endif
Line¶
Simple Line¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LINE && LV_BUILD_EXAMPLES
void lv_example_line_1(void)
{
/*Create an array for the points of the line*/
static lv_point_precise_t line_points[] = { {5, 5}, {70, 70}, {120, 10}, {180, 60}, {240, 10} };
/*Create style*/
static lv_style_t style_line;
lv_style_init(&style_line);
lv_style_set_line_width(&style_line, 8);
lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_line_rounded(&style_line, true);
/*Create a line and apply the new style*/
lv_obj_t * line1;
line1 = lv_line_create(lv_screen_active());
lv_line_set_points(line1, line_points, 5); /*Set the points*/
lv_obj_add_style(line1, &style_line, 0);
lv_obj_center(line1);
}
#endif
List¶
Simple List¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LIST && LV_BUILD_EXAMPLES
static lv_obj_t * list1;
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_CLICKED) {
LV_UNUSED(obj);
LV_LOG_USER("Clicked: %s", lv_list_get_button_text(list1, obj));
}
}
void lv_example_list_1(void)
{
/*Create a list*/
list1 = lv_list_create(lv_screen_active());
lv_obj_set_size(list1, 180, 220);
lv_obj_center(list1);
/*Add buttons to the list*/
lv_obj_t * btn;
lv_list_add_text(list1, "File");
btn = lv_list_add_button(list1, LV_SYMBOL_FILE, "New");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_DIRECTORY, "Open");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_SAVE, "Save");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_CLOSE, "Delete");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_EDIT, "Edit");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
lv_list_add_text(list1, "Connectivity");
btn = lv_list_add_button(list1, LV_SYMBOL_BLUETOOTH, "Bluetooth");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_GPS, "Navigation");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_USB, "USB");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_BATTERY_FULL, "Battery");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
lv_list_add_text(list1, "Exit");
btn = lv_list_add_button(list1, LV_SYMBOL_OK, "Apply");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_list_add_button(list1, LV_SYMBOL_CLOSE, "Close");
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
}
#endif
Lottie¶
Load a Lottie animation from an array¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_LOTTIE
/**
* Load an lottie animation from data
*/
void lv_example_lottie_1(void)
{
extern const uint8_t lv_example_lottie_approve[];
extern const size_t lv_example_lottie_approve_size;
lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
lv_lottie_set_src_data(lottie, lv_example_lottie_approve, lv_example_lottie_approve_size);
#if LV_DRAW_BUF_ALIGN == 4 && LV_DRAW_BUF_STRIDE_ALIGN == 1
/*If there are no special requirements, just declare a buffer
x4 because the Lottie is rendered in ARGB8888_PREMULTIPLIED format*/
static uint8_t buf[64 * 64 * 4];
lv_lottie_set_buffer(lottie, 64, 64, buf);
#else
/*For GPUs and special alignment/strid setting use a draw_buf instead*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
lv_lottie_set_draw_buf(lottie, &draw_buf);
#endif
lv_obj_center(lottie);
}
#else
void lv_example_lottie_1(void)
{
/*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Lottie cannot be previewed online");
lv_obj_center(label);
}
#endif /*LV_USE_LOTTIE*/
#endif /*LV_BUILD_EXAMPLES*/
Load a Lottie animation from file¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_LOTTIE
/**
* Load an lottie animation from file
*/
void lv_example_lottie_2(void)
{
lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
lv_lottie_set_src_file(lottie, "lvgl/examples/widgets/lottie/lv_example_lottie_approve.json");
#if LV_DRAW_BUF_ALIGN == 4 && LV_DRAW_BUF_STRIDE_ALIGN == 1
/*If there are no special requirements, just declare a buffer
x4 because the Lottie is rendered in ARGB8888_PREMULTIPLIED format*/
static uint8_t buf[64 * 64 * 4];
lv_lottie_set_buffer(lottie, 64, 64, buf);
#else
/*For GPUs and special alignment/strid setting use a draw_buf instead*/
LV_DRAW_BUF_DEFINE_STATIC(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
lv_lottie_set_draw_buf(lottie, &draw_buf);
#endif
lv_obj_center(lottie);
}
#else
void lv_example_lottie_2(void)
{
/*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Lottie cannot be previewed online");
lv_obj_center(label);
}
#endif /*LV_USE_LOTTIE*/
#endif /*LV_BUILD_EXAMPLES*/
Menu¶
Message Box¶
Simple Message box¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_MSGBOX && LV_BUILD_EXAMPLES
static void event_cb(lv_event_t * e)
{
lv_obj_t * btn = lv_event_get_target_obj(e);
lv_obj_t * label = lv_obj_get_child(btn, 0);
LV_UNUSED(label);
LV_LOG_USER("Button %s clicked", lv_label_get_text(label));
}
void lv_example_msgbox_1(void)
{
lv_obj_t * mbox1 = lv_msgbox_create(NULL);
lv_msgbox_add_title(mbox1, "Hello");
lv_msgbox_add_text(mbox1, "This is a message box with two buttons.");
lv_msgbox_add_close_button(mbox1);
lv_obj_t * btn;
btn = lv_msgbox_add_footer_button(mbox1, "Apply");
lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);
btn = lv_msgbox_add_footer_button(mbox1, "Cancel");
lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);
return;
}
#endif
Scrolling and styled Message box¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_MSGBOX && LV_BUILD_EXAMPLES
static void minimize_button_event_cb(lv_event_t * e)
{
lv_obj_t * mbox = (lv_obj_t *) lv_event_get_user_data(e);
lv_obj_add_flag(mbox, LV_OBJ_FLAG_HIDDEN);
}
void lv_example_msgbox_2(void)
{
lv_obj_t * setting = lv_msgbox_create(lv_screen_active());
lv_obj_set_style_clip_corner(setting, true, 0);
/* setting fixed size */
lv_obj_set_size(setting, 300, 200);
/* setting's titlebar/header */
lv_msgbox_add_title(setting, "Setting");
lv_obj_t * minimize_button = lv_msgbox_add_header_button(setting, LV_SYMBOL_MINUS);
lv_obj_add_event_cb(minimize_button, minimize_button_event_cb, LV_EVENT_CLICKED, setting);
lv_msgbox_add_close_button(setting);
/* setting's content*/
lv_obj_t * content = lv_msgbox_get_content(setting);
lv_obj_set_flex_flow(content, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(content, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_pad_right(content, -1, LV_PART_SCROLLBAR);
lv_obj_t * cont_brightness = lv_obj_create(content);
lv_obj_set_size(cont_brightness, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_set_flex_flow(cont_brightness, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(cont_brightness, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
lv_obj_t * lb_brightness = lv_label_create(cont_brightness);
lv_label_set_text(lb_brightness, "Brightness : ");
lv_obj_t * slider_brightness = lv_slider_create(cont_brightness);
lv_obj_set_width(slider_brightness, lv_pct(100));
lv_slider_set_value(slider_brightness, 50, LV_ANIM_OFF);
lv_obj_t * cont_speed = lv_obj_create(content);
lv_obj_set_size(cont_speed, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_set_flex_flow(cont_speed, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(cont_speed, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
lv_obj_t * lb_speed = lv_label_create(cont_speed);
lv_label_set_text(lb_speed, "Speed : ");
lv_obj_t * slider_speed = lv_slider_create(cont_speed);
lv_obj_set_width(slider_speed, lv_pct(100));
lv_slider_set_value(slider_speed, 80, LV_ANIM_OFF);
/* footer */
lv_obj_t * apply_button = lv_msgbox_add_footer_button(setting, "Apply");
lv_obj_set_flex_grow(apply_button, 1);
lv_obj_t * cancel_button = lv_msgbox_add_footer_button(setting, "Cancel");
lv_obj_set_flex_grow(cancel_button, 1);
lv_obj_t * footer = lv_msgbox_get_footer(setting);
lv_obj_set_style_bg_color(footer, lv_palette_main(LV_PALETTE_INDIGO), 0);
lv_obj_set_style_bg_opa(footer, LV_OPA_100, 0);
}
#endif
Message box with blurred background¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_MSGBOX && LV_BUILD_EXAMPLES
static void dropdown_value_changed_event_cb(lv_event_t * e)
{
lv_obj_t * dropdown = lv_event_get_target_obj(e);
lv_obj_t * msgbox = (lv_obj_t *)lv_event_get_user_data(e);
lv_obj_t * top_layer = lv_layer_top();
uint32_t opt = lv_dropdown_get_selected(dropdown);
/*Blur screen*/
if(opt == 0) {
lv_obj_set_style_blur_radius(msgbox, 0, 0);
lv_obj_set_style_blur_radius(top_layer, 24, 0);
}
/*Blur Message box*/
else {
lv_obj_set_style_blur_radius(msgbox, 24, 0);
lv_obj_set_style_blur_radius(top_layer, 0, 0);
}
}
void lv_example_msgbox_3(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
" Ut orci mauris, placerat et euismod eu, ullamcorper eget massa. "
"Suspendisse sodales vitae augue ut vestibulum. "
"Nunc fringilla leo ut tellus consectetur tincidunt. "
"Quisque eu tortor semper odio aliquet congue egestas ac massa. "
"Phasellus elit lectus, finibus tempor augue in, elementum lobortis nisl. "
"Donec tristique lorem et tincidunt faucibus.\n\n"
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
" Ut orci mauris, placerat et euismod eu, ullamcorper eget massa. "
"Suspendisse sodales vitae augue ut vestibulum. "
"Nunc fringilla leo ut tellus consectetur tincidunt. "
"Quisque eu tortor semper odio aliquet congue egestas ac massa. "
"Phasellus elit lectus, finibus tempor augue in, elementum lobortis nisl. "
"Donec tristique lorem et tincidunt faucibus.");
lv_obj_set_width(label, lv_pct(60));
lv_obj_center(label);
lv_obj_set_style_text_color(label, lv_palette_main(LV_PALETTE_BLUE), 0);
lv_obj_t * msgbox1 = lv_msgbox_create(lv_layer_top());
lv_msgbox_add_title(msgbox1, "Setting");
lv_msgbox_add_text(msgbox1, "Hello!\n\n"
"Scroll the text in the background to see how it behaves.");
/*Just a little styling on the message box*/
lv_obj_set_style_bg_opa(msgbox1, LV_OPA_40, 0);
lv_obj_set_style_bg_opa(lv_msgbox_get_header(msgbox1), LV_OPA_50, 0);
lv_obj_set_style_bg_color(lv_msgbox_get_header(msgbox1), lv_color_black(), 0);
lv_obj_set_style_bg_color(msgbox1, lv_color_black(), 0);
lv_obj_set_style_text_color(msgbox1, lv_color_white(), 0);
lv_obj_set_style_text_color(lv_msgbox_get_header(msgbox1), lv_color_white(), 0);
lv_obj_set_style_blur_backdrop(msgbox1, true, 0);
/*A dropdown to select what to blur*/
lv_obj_t * dropdown = lv_dropdown_create(lv_layer_top());
lv_dropdown_set_options(dropdown, "Blur screen\nBlur msgbox");
lv_obj_set_pos(dropdown, 5, 5);
lv_obj_add_event_cb(dropdown, dropdown_value_changed_event_cb, LV_EVENT_VALUE_CHANGED, msgbox1);
/*Also make the list blurred*/
lv_obj_set_style_blur_radius(lv_dropdown_get_list(dropdown), 24, 0);
lv_obj_set_style_blur_backdrop(lv_dropdown_get_list(dropdown), true, 0);
lv_obj_set_style_bg_opa(lv_dropdown_get_list(dropdown), LV_OPA_50, 0);
/*Send a value changed event to set the initial state*/
lv_obj_send_event(dropdown, LV_EVENT_VALUE_CHANGED, NULL);
}
#endif
Roller¶
Simple Roller¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ROLLER && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
char buf[32];
lv_roller_get_selected_str(obj, buf, sizeof(buf));
LV_LOG_USER("Selected month: %s\n", buf);
}
}
/**
* An infinite roller with the name of the months
*/
void lv_example_roller_1(void)
{
lv_obj_t * roller1 = lv_roller_create(lv_screen_active());
lv_roller_set_options(roller1,
"January\n"
"February\n"
"March\n"
"April\n"
"May\n"
"June\n"
"July\n"
"August\n"
"September\n"
"October\n"
"November\n"
"December",
LV_ROLLER_MODE_INFINITE);
lv_roller_set_visible_row_count(roller1, 4);
lv_obj_center(roller1);
lv_obj_add_event_cb(roller1, event_handler, LV_EVENT_ALL, NULL);
}
#endif
Styling the roller¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ROLLER && LV_FONT_MONTSERRAT_22 && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
char buf[32];
lv_roller_get_selected_str(obj, buf, sizeof(buf));
LV_LOG_USER("Selected value: %s", buf);
}
}
/**
* Roller with various alignments and larger text in the selected area
*/
void lv_example_roller_2(void)
{
/*A style to make the selected option larger*/
static lv_style_t style_sel;
lv_style_init(&style_sel);
lv_style_set_text_font(&style_sel, &lv_font_montserrat_22);
lv_style_set_bg_color(&style_sel, lv_color_hex3(0xf88));
lv_style_set_border_width(&style_sel, 2);
lv_style_set_border_color(&style_sel, lv_color_hex3(0xf00));
const char * opts = "1\n2\n3\n4\n5\n6\n7\n8\n9\n10";
lv_obj_t * roller;
/*A roller on the left with left aligned text, and custom width*/
roller = lv_roller_create(lv_screen_active());
lv_roller_set_options(roller, opts, LV_ROLLER_MODE_NORMAL);
lv_roller_set_visible_row_count(roller, 2);
lv_obj_set_width(roller, 100);
lv_obj_add_style(roller, &style_sel, LV_PART_SELECTED);
lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_LEFT, 0);
lv_obj_set_style_bg_color(roller, lv_color_hex3(0x0f0), 0);
lv_obj_set_style_bg_grad_color(roller, lv_color_hex3(0xafa), 0);
lv_obj_set_style_bg_grad_dir(roller, LV_GRAD_DIR_VER, 0);
lv_obj_align(roller, LV_ALIGN_LEFT_MID, 10, 0);
lv_obj_add_event_cb(roller, event_handler, LV_EVENT_ALL, NULL);
lv_roller_set_selected(roller, 2, LV_ANIM_OFF);
/*A roller on the middle with center aligned text, and auto (default) width*/
roller = lv_roller_create(lv_screen_active());
lv_roller_set_options(roller, opts, LV_ROLLER_MODE_NORMAL);
lv_roller_set_visible_row_count(roller, 3);
lv_obj_add_style(roller, &style_sel, LV_PART_SELECTED);
lv_obj_align(roller, LV_ALIGN_CENTER, 0, 0);
lv_obj_add_event_cb(roller, event_handler, LV_EVENT_ALL, NULL);
lv_roller_set_selected(roller, 5, LV_ANIM_OFF);
/*A roller on the right with right aligned text, and custom width*/
roller = lv_roller_create(lv_screen_active());
lv_roller_set_options(roller, opts, LV_ROLLER_MODE_NORMAL);
lv_roller_set_visible_row_count(roller, 4);
lv_obj_set_width(roller, 80);
lv_obj_add_style(roller, &style_sel, LV_PART_SELECTED);
lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_RIGHT, 0);
lv_obj_align(roller, LV_ALIGN_RIGHT_MID, -10, 0);
lv_obj_add_event_cb(roller, event_handler, LV_EVENT_ALL, NULL);
lv_roller_set_selected(roller, 8, LV_ANIM_OFF);
}
#endif
add fade mask to roller¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_ROLLER && LV_DRAW_SW_COMPLEX && LV_BUILD_EXAMPLES && 1
static void generate_mask(lv_draw_buf_t * mask)
{
/*Create a "8 bit alpha" canvas and clear it*/
lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
lv_canvas_set_draw_buf(canvas, mask);
lv_canvas_fill_bg(canvas, lv_color_white(), LV_OPA_TRANSP);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
/*Draw a label to the canvas. The result "image" will be used as mask*/
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
rect_dsc.bg_grad.stops[0].color = lv_color_black();
rect_dsc.bg_grad.stops[1].color = lv_color_white();
rect_dsc.bg_grad.stops[0].opa = LV_OPA_COVER;
rect_dsc.bg_grad.stops[1].opa = LV_OPA_COVER;
lv_area_t a = {0, 0, mask->header.w - 1, mask->header.h / 2 - 10};
lv_draw_rect(&layer, &rect_dsc, &a);
a.y1 = mask->header.h / 2 + 10;
a.y2 = mask->header.h - 1;
rect_dsc.bg_grad.stops[0].color = lv_color_white();
rect_dsc.bg_grad.stops[1].color = lv_color_black();
lv_draw_rect(&layer, &rect_dsc, &a);
lv_canvas_finish_layer(canvas, &layer);
/*Comment it to make the mask visible*/
lv_obj_delete(canvas);
}
/**
* Add a fade mask to roller.
*/
void lv_example_roller_3(void)
{
lv_obj_set_style_bg_color(lv_screen_active(), lv_palette_main(LV_PALETTE_BLUE_GREY), 0);
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_black());
lv_style_set_text_color(&style, lv_color_white());
lv_style_set_border_width(&style, 0);
lv_style_set_radius(&style, 0);
lv_obj_t * roller1 = lv_roller_create(lv_screen_active());
lv_obj_add_style(roller1, &style, 0);
lv_obj_set_style_bg_opa(roller1, LV_OPA_50, LV_PART_SELECTED);
lv_roller_set_options(roller1,
"January\n"
"February\n"
"March\n"
"April\n"
"May\n"
"June\n"
"July\n"
"August\n"
"September\n"
"October\n"
"November\n"
"December",
LV_ROLLER_MODE_NORMAL);
lv_obj_center(roller1);
lv_roller_set_visible_row_count(roller1, 4);
/* Create the mask to make the top and bottom part of roller faded.
* The width and height are empirical values for simplicity*/
LV_DRAW_BUF_DEFINE_STATIC(mask, 130, 150, LV_COLOR_FORMAT_L8);
LV_DRAW_BUF_INIT_STATIC(mask);
generate_mask(&mask);
lv_obj_set_style_bitmap_mask_src(roller1, &mask, 0);
}
#endif
Scale¶
A simple horizontal scale¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
/**
* A simple horizontal scale
*/
void lv_example_scale_1(void)
{
lv_obj_t * scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, lv_pct(80), 100);
lv_scale_set_mode(scale, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
lv_obj_center(scale);
lv_scale_set_label_show(scale, true);
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
An vertical scale with section and custom styling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
/**
* An vertical scale with section and custom styling
*/
void lv_example_scale_2(void)
{
lv_obj_t * scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, 60, 200);
lv_scale_set_label_show(scale, true);
lv_scale_set_mode(scale, LV_SCALE_MODE_VERTICAL_RIGHT);
lv_obj_center(scale);
lv_scale_set_total_tick_count(scale, 21);
lv_scale_set_major_tick_every(scale, 5);
lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);
lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);
lv_scale_set_range(scale, 0, 100);
static const char * custom_labels[] = {"0 °C", "25 °C", "50 °C", "75 °C", "100 °C", NULL};
lv_scale_set_text_src(scale, custom_labels);
static lv_style_t indicator_style;
lv_style_init(&indicator_style);
/* Label style properties */
lv_style_set_text_font(&indicator_style, LV_FONT_DEFAULT);
lv_style_set_text_color(&indicator_style, lv_palette_darken(LV_PALETTE_BLUE, 3));
/* Major tick properties */
lv_style_set_line_color(&indicator_style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_width(&indicator_style, 10U); /*Tick length*/
lv_style_set_line_width(&indicator_style, 2U); /*Tick width*/
lv_obj_add_style(scale, &indicator_style, LV_PART_INDICATOR);
static lv_style_t minor_ticks_style;
lv_style_init(&minor_ticks_style);
lv_style_set_line_color(&minor_ticks_style, lv_palette_lighten(LV_PALETTE_BLUE, 2));
lv_style_set_width(&minor_ticks_style, 5U); /*Tick length*/
lv_style_set_line_width(&minor_ticks_style, 2U); /*Tick width*/
lv_obj_add_style(scale, &minor_ticks_style, LV_PART_ITEMS);
static lv_style_t main_line_style;
lv_style_init(&main_line_style);
/* Main line properties */
lv_style_set_line_color(&main_line_style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_line_width(&main_line_style, 2U); // Tick width
lv_obj_add_style(scale, &main_line_style, LV_PART_MAIN);
/* Add a section */
static lv_style_t section_minor_tick_style;
static lv_style_t section_label_style;
static lv_style_t section_main_line_style;
lv_style_init(§ion_label_style);
lv_style_init(§ion_minor_tick_style);
lv_style_init(§ion_main_line_style);
/* Label style properties */
lv_style_set_text_font(§ion_label_style, LV_FONT_DEFAULT);
lv_style_set_text_color(§ion_label_style, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_line_color(§ion_label_style, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_line_width(§ion_label_style, 5U); /*Tick width*/
lv_style_set_line_color(§ion_minor_tick_style, lv_palette_lighten(LV_PALETTE_RED, 2));
lv_style_set_line_width(§ion_minor_tick_style, 4U); /*Tick width*/
/* Main line properties */
lv_style_set_line_color(§ion_main_line_style, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_line_width(§ion_main_line_style, 4U); /*Tick width*/
/* Configure section styles */
lv_scale_section_t * section = lv_scale_add_section(scale);
lv_scale_set_section_range(scale, section, 75, 100);
lv_scale_set_section_style_indicator(scale, section, §ion_label_style);
lv_scale_set_section_style_items(scale, section, §ion_minor_tick_style);
lv_scale_set_section_style_main(scale, section, §ion_main_line_style);
lv_obj_set_style_bg_color(scale, lv_palette_main(LV_PALETTE_BLUE_GREY), 0);
lv_obj_set_style_bg_opa(scale, LV_OPA_50, 0);
lv_obj_set_style_pad_left(scale, 8, 0);
lv_obj_set_style_radius(scale, 8, 0);
lv_obj_set_style_pad_ver(scale, 20, 0);
}
#endif
A simple round scale¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
LV_IMAGE_DECLARE(img_hand);
static lv_obj_t * needle_line;
static lv_obj_t * needle_img;
static void set_needle_line_value(void * obj, int32_t v)
{
lv_scale_set_line_needle_value((lv_obj_t *)obj, needle_line, 60, v);
}
static void set_needle_img_value(void * obj, int32_t v)
{
lv_scale_set_image_needle_value((lv_obj_t *)obj, needle_img, v);
}
/**
* A simple round scale
*/
void lv_example_scale_3(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_set_style_clip_corner(scale_line, true, 0);
lv_obj_align(scale_line, LV_ALIGN_LEFT_MID, LV_PCT(2), 0);
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_obj_set_style_length(scale_line, 5, LV_PART_ITEMS);
lv_obj_set_style_length(scale_line, 10, LV_PART_INDICATOR);
lv_scale_set_range(scale_line, 10, 40);
lv_scale_set_angle_range(scale_line, 270);
lv_scale_set_rotation(scale_line, 135);
needle_line = lv_line_create(scale_line);
lv_obj_set_style_line_width(needle_line, 6, LV_PART_MAIN);
lv_obj_set_style_line_rounded(needle_line, true, LV_PART_MAIN);
lv_anim_t anim_scale_line;
lv_anim_init(&anim_scale_line);
lv_anim_set_var(&anim_scale_line, scale_line);
lv_anim_set_exec_cb(&anim_scale_line, set_needle_line_value);
lv_anim_set_duration(&anim_scale_line, 1000);
lv_anim_set_repeat_count(&anim_scale_line, LV_ANIM_REPEAT_INFINITE);
lv_anim_set_reverse_duration(&anim_scale_line, 1000);
lv_anim_set_values(&anim_scale_line, 10, 40);
lv_anim_start(&anim_scale_line);
lv_obj_t * scale_img = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale_img, 150, 150);
lv_scale_set_mode(scale_img, LV_SCALE_MODE_ROUND_INNER);
lv_obj_set_style_bg_opa(scale_img, LV_OPA_COVER, 0);
lv_obj_set_style_bg_color(scale_img, lv_palette_lighten(LV_PALETTE_RED, 5), 0);
lv_obj_set_style_radius(scale_img, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_clip_corner(scale_img, true, 0);
lv_obj_align(scale_img, LV_ALIGN_RIGHT_MID, LV_PCT(-2), 0);
lv_scale_set_label_show(scale_img, true);
lv_scale_set_total_tick_count(scale_img, 31);
lv_scale_set_major_tick_every(scale_img, 5);
lv_obj_set_style_length(scale_img, 5, LV_PART_ITEMS);
lv_obj_set_style_length(scale_img, 10, LV_PART_INDICATOR);
lv_scale_set_range(scale_img, 10, 40);
lv_scale_set_angle_range(scale_img, 270);
lv_scale_set_rotation(scale_img, 135);
/* image must point to the right. E.g. -O------>*/
needle_img = lv_image_create(scale_img);
lv_image_set_src(needle_img, &img_hand);
lv_obj_align(needle_img, LV_ALIGN_CENTER, 47, -2);
lv_image_set_pivot(needle_img, 3, 4);
lv_anim_t anim_scale_img;
lv_anim_init(&anim_scale_img);
lv_anim_set_var(&anim_scale_img, scale_img);
lv_anim_set_exec_cb(&anim_scale_img, set_needle_img_value);
lv_anim_set_duration(&anim_scale_img, 1000);
lv_anim_set_repeat_count(&anim_scale_img, LV_ANIM_REPEAT_INFINITE);
lv_anim_set_reverse_duration(&anim_scale_img, 1000);
lv_anim_set_values(&anim_scale_img, 10, 40);
lv_anim_start(&anim_scale_img);
}
#endif
A round scale with section and custom styling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
/**
* A round scale with section and custom styling
*/
void lv_example_scale_4(void)
{
lv_obj_t * scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, 150, 150);
lv_scale_set_label_show(scale, true);
lv_scale_set_mode(scale, LV_SCALE_MODE_ROUND_OUTER);
lv_obj_center(scale);
lv_scale_set_total_tick_count(scale, 21);
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, 0, 100);
static const char * custom_labels[] = {"0 °C", "25 °C", "50 °C", "75 °C", "100 °C", NULL};
lv_scale_set_text_src(scale, custom_labels);
static lv_style_t indicator_style;
lv_style_init(&indicator_style);
/* Label style properties */
lv_style_set_text_font(&indicator_style, LV_FONT_DEFAULT);
lv_style_set_text_color(&indicator_style, lv_palette_darken(LV_PALETTE_BLUE, 3));
/* Major tick properties */
lv_style_set_line_color(&indicator_style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_width(&indicator_style, 10U); /*Tick length*/
lv_style_set_line_width(&indicator_style, 2U); /*Tick width*/
lv_obj_add_style(scale, &indicator_style, LV_PART_INDICATOR);
static lv_style_t minor_ticks_style;
lv_style_init(&minor_ticks_style);
lv_style_set_line_color(&minor_ticks_style, lv_palette_lighten(LV_PALETTE_BLUE, 2));
lv_style_set_width(&minor_ticks_style, 5U); /*Tick length*/
lv_style_set_line_width(&minor_ticks_style, 2U); /*Tick width*/
lv_obj_add_style(scale, &minor_ticks_style, LV_PART_ITEMS);
static lv_style_t main_line_style;
lv_style_init(&main_line_style);
/* Main line properties */
lv_style_set_arc_color(&main_line_style, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_arc_width(&main_line_style, 2U); /*Tick width*/
lv_obj_add_style(scale, &main_line_style, LV_PART_MAIN);
/* Add a section */
static lv_style_t section_minor_tick_style;
static lv_style_t section_label_style;
static lv_style_t section_main_line_style;
lv_style_init(§ion_label_style);
lv_style_init(§ion_minor_tick_style);
lv_style_init(§ion_main_line_style);
/* Label style properties */
lv_style_set_text_font(§ion_label_style, LV_FONT_DEFAULT);
lv_style_set_text_color(§ion_label_style, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_line_color(§ion_label_style, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_line_width(§ion_label_style, 5U); /*Tick width*/
lv_style_set_line_color(§ion_minor_tick_style, lv_palette_lighten(LV_PALETTE_RED, 2));
lv_style_set_line_width(§ion_minor_tick_style, 4U); /*Tick width*/
/* Main line properties */
lv_style_set_arc_color(§ion_main_line_style, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_arc_width(§ion_main_line_style, 4U); /*Tick width*/
/* Configure section styles */
lv_scale_section_t * section = lv_scale_add_section(scale);
lv_scale_set_section_range(scale, section, 75, 100);
lv_scale_set_section_style_indicator(scale, section, §ion_label_style);
lv_scale_set_section_style_items(scale, section, §ion_minor_tick_style);
lv_scale_set_section_style_main(scale, section, §ion_main_line_style);
}
#endif
A scale with section and custom styling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
/**
* An scale with section and custom styling
*/
void lv_example_scale_5(void)
{
lv_obj_t * scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, lv_display_get_horizontal_resolution(NULL) / 2, lv_display_get_vertical_resolution(NULL) / 2);
lv_scale_set_label_show(scale, true);
lv_scale_set_total_tick_count(scale, 10);
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, 25, 35);
static const char * custom_labels[3] = {"One", "Two", NULL};
lv_scale_set_text_src(scale, custom_labels);
static lv_style_t indicator_style;
lv_style_init(&indicator_style);
/* Label style properties */
lv_style_set_text_font(&indicator_style, LV_FONT_DEFAULT);
lv_style_set_text_color(&indicator_style, lv_color_hex(0xff00ff));
/* Major tick properties */
lv_style_set_line_color(&indicator_style, lv_color_hex(0x00ff00));
lv_style_set_width(&indicator_style, 10U); // Tick length
lv_style_set_line_width(&indicator_style, 2U); // Tick width
lv_obj_add_style(scale, &indicator_style, LV_PART_INDICATOR);
static lv_style_t minor_ticks_style;
lv_style_init(&minor_ticks_style);
lv_style_set_line_color(&minor_ticks_style, lv_color_hex(0xff0000));
lv_style_set_width(&minor_ticks_style, 5U); // Tick length
lv_style_set_line_width(&minor_ticks_style, 2U); // Tick width
lv_obj_add_style(scale, &minor_ticks_style, LV_PART_ITEMS);
static lv_style_t main_line_style;
lv_style_init(&main_line_style);
/* Main line properties */
lv_style_set_line_color(&main_line_style, lv_color_hex(0x0000ff));
lv_style_set_line_width(&main_line_style, 2U); // Tick width
lv_obj_add_style(scale, &main_line_style, LV_PART_MAIN);
lv_obj_center(scale);
/* Add a section */
static lv_style_t section_minor_tick_style;
static lv_style_t section_label_style;
lv_style_init(§ion_label_style);
lv_style_init(§ion_minor_tick_style);
/* Label style properties */
lv_style_set_text_font(§ion_label_style, LV_FONT_DEFAULT);
lv_style_set_text_color(§ion_label_style, lv_color_hex(0xff0000));
lv_style_set_text_letter_space(§ion_label_style, 10);
lv_style_set_text_opa(§ion_label_style, LV_OPA_50);
lv_style_set_line_color(§ion_label_style, lv_color_hex(0xff0000));
// lv_style_set_width(§ion_label_style, 20U); // Tick length
lv_style_set_line_width(§ion_label_style, 5U); // Tick width
lv_style_set_line_color(§ion_minor_tick_style, lv_color_hex(0x0000ff));
// lv_style_set_width(§ion_label_style, 20U); // Tick length
lv_style_set_line_width(§ion_minor_tick_style, 4U); // Tick width
/* Configure section styles */
lv_scale_section_t * section = lv_scale_add_section(scale);
lv_scale_set_section_range(scale, section, 25, 30);
lv_scale_set_section_style_indicator(scale, section, §ion_label_style);
lv_scale_set_section_style_items(scale, section, §ion_minor_tick_style);
}
#endif
A round scale with multiple needles, resembling a clock¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
#if LV_USE_FLOAT
#define my_PRIprecise "f"
#else
#define my_PRIprecise LV_PRId32
#endif
static lv_obj_t * scale;
static lv_obj_t * minute_hand;
static lv_obj_t * hour_hand;
static lv_point_precise_t minute_hand_points[2];
static int32_t hour;
static int32_t minute;
static void timer_cb(lv_timer_t * timer)
{
LV_UNUSED(timer);
minute++;
if(minute > 59) {
minute = 0;
hour++;
if(hour > 11) {
hour = 0;
}
}
/**
* the scale will store the needle line points in the existing
* point array if one was set with `lv_line_set_points_mutable`.
* Otherwise, it will allocate the needle line points.
*/
/* the scale will store the minute hand line points in `minute_hand_points` */
lv_scale_set_line_needle_value(scale, minute_hand, 60, minute);
/* log the points that were stored in the array */
LV_LOG_USER(
"minute hand points - "
"0: (%" my_PRIprecise ", %" my_PRIprecise "), "
"1: (%" my_PRIprecise ", %" my_PRIprecise ")",
minute_hand_points[0].x, minute_hand_points[0].y,
minute_hand_points[1].x, minute_hand_points[1].y
);
/* the scale will allocate the hour hand line points */
lv_scale_set_line_needle_value(scale, hour_hand, 40, hour * 5 + (minute / 12));
}
/**
* A round scale with multiple needles, resembling a clock
*/
void lv_example_scale_6(void)
{
scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, 150, 150);
lv_scale_set_mode(scale, LV_SCALE_MODE_ROUND_INNER);
lv_obj_set_style_bg_opa(scale, LV_OPA_60, 0);
lv_obj_set_style_bg_color(scale, lv_color_black(), 0);
lv_obj_set_style_radius(scale, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_clip_corner(scale, true, 0);
lv_obj_center(scale);
lv_scale_set_label_show(scale, true);
lv_scale_set_total_tick_count(scale, 61);
lv_scale_set_major_tick_every(scale, 5);
static const char * hour_ticks[] = {"12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", NULL};
lv_scale_set_text_src(scale, hour_ticks);
static lv_style_t indicator_style;
lv_style_init(&indicator_style);
/* Label style properties */
lv_style_set_text_font(&indicator_style, LV_FONT_DEFAULT);
lv_style_set_text_color(&indicator_style, lv_palette_main(LV_PALETTE_YELLOW));
/* Major tick properties */
lv_style_set_line_color(&indicator_style, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_length(&indicator_style, 8); /* tick length */
lv_style_set_line_width(&indicator_style, 2); /* tick width */
lv_obj_add_style(scale, &indicator_style, LV_PART_INDICATOR);
/* Minor tick properties */
static lv_style_t minor_ticks_style;
lv_style_init(&minor_ticks_style);
lv_style_set_line_color(&minor_ticks_style, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_length(&minor_ticks_style, 6); /* tick length */
lv_style_set_line_width(&minor_ticks_style, 2); /* tick width */
lv_obj_add_style(scale, &minor_ticks_style, LV_PART_ITEMS);
/* Main line properties */
static lv_style_t main_line_style;
lv_style_init(&main_line_style);
lv_style_set_arc_color(&main_line_style, lv_color_black());
lv_style_set_arc_width(&main_line_style, 5);
lv_obj_add_style(scale, &main_line_style, LV_PART_MAIN);
lv_scale_set_range(scale, 0, 60);
lv_scale_set_angle_range(scale, 360);
lv_scale_set_rotation(scale, 270);
minute_hand = lv_line_create(scale);
lv_line_set_points_mutable(minute_hand, minute_hand_points, 2);
lv_obj_set_style_line_width(minute_hand, 3, 0);
lv_obj_set_style_line_rounded(minute_hand, true, 0);
lv_obj_set_style_line_color(minute_hand, lv_color_white(), 0);
hour_hand = lv_line_create(scale);
lv_obj_set_style_line_width(hour_hand, 5, 0);
lv_obj_set_style_line_rounded(hour_hand, true, 0);
lv_obj_set_style_line_color(hour_hand, lv_palette_main(LV_PALETTE_RED), 0);
hour = 11;
minute = 5;
lv_timer_t * timer = lv_timer_create(timer_cb, 250, NULL);
lv_timer_ready(timer);
}
#endif
Customizing scale major tick label color with LV_EVENT_DRAW_TASK_ADDED event¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
#include "../../../lvgl_private.h" /*To expose the fields of lv_draw_task_t*/
static void draw_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
if(base_dsc->part == LV_PART_INDICATOR) {
if(label_draw_dsc) {
const lv_color_t color_idx[7] = {
lv_palette_main(LV_PALETTE_RED),
lv_palette_main(LV_PALETTE_ORANGE),
lv_palette_main(LV_PALETTE_YELLOW),
lv_palette_main(LV_PALETTE_GREEN),
lv_palette_main(LV_PALETTE_CYAN),
lv_palette_main(LV_PALETTE_BLUE),
lv_palette_main(LV_PALETTE_PURPLE),
};
uint32_t major_tick = lv_scale_get_major_tick_every(obj);
label_draw_dsc->color = color_idx[base_dsc->id1 / major_tick];
/*Free the previously allocated text if needed*/
if(label_draw_dsc->text_local) lv_free((void *)label_draw_dsc->text);
/*Malloc the text and set text_local as 1 to make LVGL automatically free the text.
* (Local texts are malloc'd internally by LVGL. Mimic this behavior here too)*/
char tmp_buffer[20] = {0}; /* Big enough buffer */
lv_snprintf(tmp_buffer, sizeof(tmp_buffer), "%.1f", (double)base_dsc->id2);
label_draw_dsc->text = lv_strdup(tmp_buffer);
label_draw_dsc->text_local = 1;
lv_point_t size;
lv_text_get_size(&size, label_draw_dsc->text, label_draw_dsc->font, 0, 0, 1000, LV_TEXT_FLAG_NONE);
int32_t new_w = size.x;
int32_t old_w = lv_area_get_width(&draw_task->area);
/* Distribute the new size equally on both sides */
draw_task->area.x1 -= (new_w - old_w) / 2;
draw_task->area.x2 += ((new_w - old_w) + 1) / 2; /* +1 for rounding */
}
}
}
/**
* Customizing scale major tick label color with `LV_EVENT_DRAW_TASK_ADDED` event
*/
void lv_example_scale_7(void)
{
lv_obj_t * scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, lv_pct(80), 100);
lv_scale_set_mode(scale, LV_SCALE_MODE_HORIZONTAL_BOTTOM);
lv_obj_center(scale);
lv_scale_set_label_show(scale, true);
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);
lv_obj_add_event_cb(scale, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(scale, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
}
#endif
A round scale with labels rotated and translated¶
C code
View on GitHub#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
A horizontal scale with labels rotated and translated¶
C code
View on GitHub#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
A round scale style simulating a Heart Rate monitor¶
C code
View on GitHub#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_screen_active());
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_screen_active(), 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
A round scale style simulating a sunset/sunrise widget¶
C code
View on GitHub#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
A round scale style simulating a compass¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SCALE && LV_BUILD_EXAMPLES
static lv_obj_t * scale;
static lv_obj_t * label;
static const char * heading_to_cardinal(int32_t heading)
{
/* Normalize heading to range [0, 360) */
while(heading < 0) heading += 360;
while(heading >= 360) heading -= 360;
if(heading < 23) return "N";
else if(heading < 68) return "NE";
else if(heading < 113) return "E";
else if(heading < 158) return "SE";
else if(heading < 203) return "S";
else if(heading < 248) return "SW";
else if(heading < 293) return "W";
else if(heading < 338) return "NW";
return "N";
}
static void set_heading_value(void * obj, int32_t v)
{
LV_UNUSED(obj);
lv_scale_set_rotation(scale, 270 - v);
lv_label_set_text_fmt(label, "%d°\n%s", (int)v, heading_to_cardinal(v));
}
static void draw_event_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
lv_draw_line_dsc_t * line_draw_dsc = lv_draw_task_get_line_dsc(draw_task);
if(base_dsc->part == LV_PART_INDICATOR) {
if(label_draw_dsc) {
if(base_dsc->id1 == 0) {
label_draw_dsc->color = lv_palette_main(LV_PALETTE_RED);
}
}
if(line_draw_dsc) {
if(base_dsc->id1 == 60) {
line_draw_dsc->color = lv_palette_main(LV_PALETTE_RED);
}
}
}
}
/**
* A round scale style simulating a compass
*/
void lv_example_scale_12(void)
{
scale = lv_scale_create(lv_screen_active());
lv_obj_set_size(scale, 200, 200);
lv_scale_set_mode(scale, LV_SCALE_MODE_ROUND_INNER);
lv_obj_set_align(scale, LV_ALIGN_CENTER);
lv_scale_set_total_tick_count(scale, 61);
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_obj_set_style_line_width(scale, 3, LV_PART_INDICATOR);
lv_scale_set_range(scale, 0, 360);
static const char * custom_labels[] = {"N", "30", "60", "E", "120", "150", "S", "210", "240", "W", "300", "330", NULL};
lv_scale_set_text_src(scale, custom_labels);
lv_scale_set_angle_range(scale, 360);
lv_scale_set_rotation(scale, 270);
lv_obj_add_event_cb(scale, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(scale, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
label = lv_label_create(lv_screen_active());
lv_obj_set_width(label, 100);
lv_obj_set_align(label, LV_ALIGN_CENTER);
lv_label_set_text(label, "0°\nN");
lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);
set_heading_value(NULL, 0);
lv_obj_t * symbol = lv_label_create(scale);
lv_obj_set_align(symbol, LV_ALIGN_TOP_MID);
lv_obj_set_y(symbol, 5);
lv_label_set_text(symbol, LV_SYMBOL_UP);
lv_obj_set_style_text_align(symbol, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_style_text_color(symbol, lv_palette_main(LV_PALETTE_RED), 0);
lv_anim_t anim_scale;
lv_anim_init(&anim_scale);
lv_anim_set_var(&anim_scale, scale);
lv_anim_set_exec_cb(&anim_scale, set_heading_value);
lv_anim_set_duration(&anim_scale, 5000);
lv_anim_set_repeat_delay(&anim_scale, 500);
lv_anim_set_repeat_count(&anim_scale, LV_ANIM_REPEAT_INFINITE);
lv_anim_set_reverse_duration(&anim_scale, 5000);
lv_anim_set_reverse_delay(&anim_scale, 500);
lv_anim_set_values(&anim_scale, 0, 360);
lv_anim_start(&anim_scale);
}
#endif
Slider¶
Simple Slider¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;
/**
* A default slider with a label displaying the current value
*/
void lv_example_slider_1(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_set_style_anim_duration(slider, 2000, 0);
/*Create a label below the slider*/
slider_label = lv_label_create(lv_screen_active());
lv_label_set_text(slider_label, "0%");
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target_obj(e);
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
lv_label_set_text(slider_label, buf);
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
#endif
Slider with custom style¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
/**
* Show how to style a slider.
*/
void lv_example_slider_2(void)
{
/*Create a transition*/
static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
static lv_style_transition_dsc_t transition_dsc;
lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);
static lv_style_t style_main;
static lv_style_t style_indicator;
static lv_style_t style_knob;
static lv_style_t style_pressed_color;
lv_style_init(&style_main);
lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/
lv_style_init(&style_indicator);
lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
lv_style_set_transition(&style_indicator, &transition_dsc);
lv_style_init(&style_knob);
lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
lv_style_set_border_width(&style_knob, 2);
lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
lv_style_set_transition(&style_knob, &transition_dsc);
lv_style_init(&style_pressed_color);
lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));
/*Create a slider and add the style*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_remove_style_all(slider); /*Remove the styles coming from the theme*/
lv_obj_add_style(slider, &style_main, LV_PART_MAIN);
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);
lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);
lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);
lv_obj_center(slider);
}
#endif
Slider with extended drawer¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
#define MAX_VALUE 100
#define MIN_VALUE 0
static void slider_event_cb(lv_event_t * e);
/**
* Show the current value when the slider is pressed by extending the drawer
*
*/
void lv_example_slider_3(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider;
slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);
lv_slider_set_range(slider, MIN_VALUE, MAX_VALUE);
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
lv_slider_set_start_value(slider, 20, LV_ANIM_OFF);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);
lv_obj_refresh_ext_draw_size(slider);
}
static void slider_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
/*Provide some extra space for the value*/
if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
lv_event_set_ext_draw_size(e, 50);
}
else if(code == LV_EVENT_DRAW_MAIN_END) {
if(!lv_obj_has_state(obj, LV_STATE_PRESSED)) return;
lv_area_t slider_area;
lv_obj_get_coords(obj, &slider_area);
lv_area_t indic_area = slider_area;
lv_area_set_width(&indic_area, lv_area_get_width(&slider_area) * lv_slider_get_value(obj) / MAX_VALUE);
indic_area.x1 += lv_area_get_width(&slider_area) * lv_slider_get_left_value(obj) / MAX_VALUE;
char buf[16];
lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));
lv_point_t label_size;
lv_text_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);
lv_area_t label_area;
label_area.x1 = 0;
label_area.x2 = label_size.x - 1;
label_area.y1 = 0;
label_area.y2 = label_size.y - 1;
lv_area_align(&indic_area, &label_area, LV_ALIGN_OUT_TOP_MID, 0, -10);
lv_draw_label_dsc_t label_draw_dsc;
lv_draw_label_dsc_init(&label_draw_dsc);
label_draw_dsc.color = lv_color_hex3(0x888);
label_draw_dsc.text = buf;
label_draw_dsc.text_local = true;
lv_layer_t * layer = lv_event_get_layer(e);
lv_draw_label(layer, &label_draw_dsc, &label_area);
}
}
#endif
Slider with opposite direction¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;
/**
* Slider with opposite direction
*/
void lv_example_slider_4(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
/*Reverse the direction of the slider*/
lv_slider_set_range(slider, 100, 0);
/*Create a label below the slider*/
slider_label = lv_label_create(lv_screen_active());
lv_label_set_text(slider_label, "0%");
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target_obj(e);
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
lv_label_set_text(slider_label, buf);
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
#endif
Span¶
Span with custom styles¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SPAN && LV_BUILD_EXAMPLES
static void click_event_cb(lv_event_t * e)
{
lv_indev_t * indev = lv_event_get_indev(e);
lv_point_t point;
lv_indev_get_point(indev, &point);
#if LV_USE_LOG
lv_obj_t * spans = lv_event_get_target_obj(e);
lv_span_t * span = lv_spangroup_get_span_by_point(spans, &point);
LV_LOG_USER("%s", span ? lv_span_get_text(span) : "NULL");
#endif
}
/**
* Create spans and get clicked one
*/
void lv_example_span_1(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_border_width(&style, 1);
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_ORANGE));
lv_style_set_pad_all(&style, 2);
lv_obj_t * spans = lv_spangroup_create(lv_screen_active());
/* Setting a fixed width and height to LV_SIZE_CONTENT will make the text wrap */
lv_obj_set_width(spans, 300);
lv_obj_set_height(spans, LV_SIZE_CONTENT);
lv_obj_center(spans);
lv_obj_add_style(spans, &style, 0);
lv_obj_add_flag(spans, LV_OBJ_FLAG_CLICKABLE);
lv_spangroup_set_align(spans, LV_TEXT_ALIGN_LEFT);
lv_spangroup_set_overflow(spans, LV_SPAN_OVERFLOW_CLIP);
lv_spangroup_set_indent(spans, 20);
lv_span_t * span = lv_spangroup_add_span(spans);
lv_span_set_text(span, "China is a beautiful country.");
lv_style_set_text_color(lv_span_get_style(span), lv_palette_main(LV_PALETTE_RED));
lv_style_set_text_decor(lv_span_get_style(span), LV_TEXT_DECOR_UNDERLINE);
lv_style_set_text_opa(lv_span_get_style(span), LV_OPA_50);
span = lv_spangroup_add_span(spans);
lv_span_set_text_static(span, "good good study, day day up.");
#if LV_FONT_MONTSERRAT_24
lv_style_set_text_font(lv_span_get_style(span), &lv_font_montserrat_24);
#endif
lv_style_set_text_color(lv_span_get_style(span), lv_palette_main(LV_PALETTE_GREEN));
span = lv_spangroup_add_span(spans);
lv_span_set_text_static(span, "LVGL is an open-source graphics library.");
lv_style_set_text_color(lv_span_get_style(span), lv_palette_main(LV_PALETTE_BLUE));
span = lv_spangroup_add_span(spans);
lv_span_set_text_static(span, "the boy no name.");
lv_style_set_text_color(lv_span_get_style(span), lv_palette_main(LV_PALETTE_GREEN));
#if LV_FONT_MONTSERRAT_20
lv_style_set_text_font(lv_span_get_style(span), &lv_font_montserrat_20);
#endif
lv_style_set_text_decor(lv_span_get_style(span), LV_TEXT_DECOR_UNDERLINE);
span = lv_spangroup_add_span(spans);
lv_span_set_text(span, "I have a dream that hope to come true.");
lv_style_set_text_decor(lv_span_get_style(span), LV_TEXT_DECOR_STRIKETHROUGH);
lv_spangroup_refresh(spans);
lv_obj_add_event_cb(spans, click_event_cb, LV_EVENT_CLICKED, NULL);
}
#endif
Spinbox¶
Simple Spinbox¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SPINBOX && LV_BUILD_EXAMPLES
static lv_obj_t * spinbox;
static void lv_spinbox_increment_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_SHORT_CLICKED || code == LV_EVENT_LONG_PRESSED_REPEAT) {
lv_spinbox_increment(spinbox);
}
}
static void lv_spinbox_decrement_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_SHORT_CLICKED || code == LV_EVENT_LONG_PRESSED_REPEAT) {
lv_spinbox_decrement(spinbox);
}
}
void lv_example_spinbox_1(void)
{
spinbox = lv_spinbox_create(lv_screen_active());
lv_spinbox_set_range(spinbox, -1000, 25000);
lv_spinbox_set_digit_count(spinbox, 5);
lv_spinbox_set_dec_point_pos(spinbox, 2);
lv_spinbox_step_prev(spinbox);
lv_obj_set_width(spinbox, 100);
lv_obj_center(spinbox);
int32_t h = lv_obj_get_height(spinbox);
lv_obj_t * btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, h, h);
lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_RIGHT_MID, 5, 0);
lv_obj_set_style_bg_image_src(btn, LV_SYMBOL_PLUS, 0);
lv_obj_add_event_cb(btn, lv_spinbox_increment_event_cb, LV_EVENT_ALL, NULL);
btn = lv_button_create(lv_screen_active());
lv_obj_set_size(btn, h, h);
lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_LEFT_MID, -5, 0);
lv_obj_set_style_bg_image_src(btn, LV_SYMBOL_MINUS, 0);
lv_obj_add_event_cb(btn, lv_spinbox_decrement_event_cb, LV_EVENT_ALL, NULL);
}
#endif
Spinner¶
Simple spinner¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SPINNER && LV_BUILD_EXAMPLES
void lv_example_spinner_1(void)
{
/*Create a spinner*/
lv_obj_t * spinner = lv_spinner_create(lv_screen_active());
lv_obj_set_size(spinner, 100, 100);
lv_obj_center(spinner);
lv_spinner_set_anim_params(spinner, 10000, 200);
}
#endif
Switch¶
Simple Switch¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SWITCH && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
LV_UNUSED(obj);
LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");
}
}
void lv_example_switch_1(void)
{
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_t * sw;
sw = lv_switch_create(lv_screen_active());
lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
lv_obj_add_flag(sw, LV_OBJ_FLAG_EVENT_BUBBLE);
sw = lv_switch_create(lv_screen_active());
lv_obj_add_state(sw, LV_STATE_CHECKED);
lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
sw = lv_switch_create(lv_screen_active());
lv_obj_add_state(sw, LV_STATE_DISABLED);
lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
sw = lv_switch_create(lv_screen_active());
lv_obj_add_state(sw, LV_STATE_CHECKED);
lv_obj_add_state(sw, LV_STATE_DISABLED);
lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
}
#endif
Switch Orientation¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SWITCH && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
LV_UNUSED(obj);
LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");
}
}
void lv_example_switch_2(void)
{
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_t * sw;
sw = lv_switch_create(lv_screen_active());
lv_obj_set_size(sw, 30, 60);
lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
sw = lv_switch_create(lv_screen_active());
lv_obj_set_size(sw, 30, 60);
lv_switch_set_orientation(sw, LV_SWITCH_ORIENTATION_VERTICAL);
lv_obj_add_state(sw, LV_STATE_CHECKED);
lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
}
#endif
Table¶
Simple table¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_BUILD_EXAMPLES
static void draw_event_cb(lv_event_t * e)
{
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
/*If the cells are drawn...*/
if(base_dsc->part == LV_PART_ITEMS) {
uint32_t row = base_dsc->id1;
uint32_t col = base_dsc->id2;
/*Make the texts in the first cell center aligned*/
if(row == 0) {
lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
if(label_draw_dsc) {
label_draw_dsc->align = LV_TEXT_ALIGN_CENTER;
}
lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
if(fill_draw_dsc) {
fill_draw_dsc->color = lv_color_mix(lv_palette_main(LV_PALETTE_BLUE), fill_draw_dsc->color, LV_OPA_20);
fill_draw_dsc->opa = LV_OPA_COVER;
}
}
/*In the first column align the texts to the right*/
else if(col == 0) {
lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
if(label_draw_dsc) {
label_draw_dsc->align = LV_TEXT_ALIGN_RIGHT;
}
}
/*Make every 2nd row grayish*/
if((row != 0 && row % 2) == 0) {
lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
if(fill_draw_dsc) {
fill_draw_dsc->color = lv_color_mix(lv_palette_main(LV_PALETTE_GREY), fill_draw_dsc->color, LV_OPA_10);
fill_draw_dsc->opa = LV_OPA_COVER;
}
}
}
}
void lv_example_table_1(void)
{
lv_obj_t * table = lv_table_create(lv_screen_active());
/*Fill the first column*/
lv_table_set_cell_value(table, 0, 0, "Name");
lv_table_set_cell_value(table, 1, 0, "Apple");
lv_table_set_cell_value(table, 2, 0, "Banana");
lv_table_set_cell_value(table, 3, 0, "Lemon");
lv_table_set_cell_value(table, 4, 0, "Grape");
lv_table_set_cell_value(table, 5, 0, "Melon");
lv_table_set_cell_value(table, 6, 0, "Peach");
lv_table_set_cell_value(table, 7, 0, "Nuts");
/*Fill the second column*/
lv_table_set_cell_value(table, 0, 1, "Price");
lv_table_set_cell_value(table, 1, 1, "$7");
lv_table_set_cell_value(table, 2, 1, "$4");
lv_table_set_cell_value(table, 3, 1, "$6");
lv_table_set_cell_value(table, 4, 1, "$2");
lv_table_set_cell_value(table, 5, 1, "$5");
lv_table_set_cell_value(table, 6, 1, "$1");
lv_table_set_cell_value(table, 7, 1, "$9");
/*Set a smaller height to the table. It'll make it scrollable*/
lv_obj_set_height(table, 200);
lv_obj_center(table);
/*Add an event callback to to apply some custom drawing*/
lv_obj_add_event_cb(table, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
}
#endif
Lightweighted list from table¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_BUILD_EXAMPLES
#define ITEM_CNT 200
static void draw_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t *)lv_draw_task_get_draw_dsc(draw_task);
/*If the cells are drawn...*/
if(base_dsc->part == LV_PART_ITEMS && lv_draw_task_get_type(draw_task) == LV_DRAW_TASK_TYPE_FILL) {
/*Draw the background*/
bool chk = lv_table_has_cell_ctrl(obj, base_dsc->id1, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.bg_color = chk ? lv_theme_get_color_primary(obj) : lv_palette_lighten(LV_PALETTE_GREY, 2);
rect_dsc.radius = LV_RADIUS_CIRCLE;
lv_area_t sw_area;
sw_area.x1 = 0;
sw_area.x2 = 40;
sw_area.y1 = 0;
sw_area.y2 = 24;
lv_area_t draw_task_area;
lv_draw_task_get_area(draw_task, &draw_task_area);
lv_area_align(&draw_task_area, &sw_area, LV_ALIGN_RIGHT_MID, -15, 0);
lv_draw_rect(base_dsc->layer, &rect_dsc, &sw_area);
/*Draw the knob*/
rect_dsc.bg_color = lv_color_white();
lv_area_t knob_area;
knob_area.x1 = 0;
knob_area.x2 = 18;
knob_area.y1 = 0;
knob_area.y2 = 18;
if(chk) {
lv_area_align(&sw_area, &knob_area, LV_ALIGN_RIGHT_MID, -3, 0);
}
else {
lv_area_align(&sw_area, &knob_area, LV_ALIGN_LEFT_MID, 3, 0);
}
lv_draw_rect(base_dsc->layer, &rect_dsc, &knob_area);
}
}
static void change_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
uint32_t col;
uint32_t row;
lv_table_get_selected_cell(obj, &row, &col);
bool chk = lv_table_has_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
if(chk) lv_table_clear_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
else lv_table_set_cell_ctrl(obj, row, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
}
/**
* A very light-weighted list created from table
*/
void lv_example_table_2(void)
{
/*Measure memory usage*/
lv_mem_monitor_t mon1;
lv_mem_monitor(&mon1);
uint32_t t = lv_tick_get();
lv_obj_t * table = lv_table_create(lv_screen_active());
/*Set a smaller height to the table. It'll make it scrollable*/
lv_obj_set_size(table, LV_SIZE_CONTENT, 200);
lv_table_set_column_width(table, 0, 150);
lv_table_set_row_count(table, ITEM_CNT); /*Not required but avoids a lot of memory reallocation lv_table_set_set_value*/
lv_table_set_column_count(table, 1);
/*Don't make the cell pressed, we will draw something different in the event*/
lv_obj_remove_style(table, NULL, LV_PART_ITEMS | LV_STATE_PRESSED);
uint32_t i;
for(i = 0; i < ITEM_CNT; i++) {
lv_table_set_cell_value_fmt(table, i, 0, "Item %" LV_PRIu32, i + 1);
}
lv_obj_align(table, LV_ALIGN_CENTER, 0, -20);
/*Add an event callback to to apply some custom drawing*/
lv_obj_add_event_cb(table, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_event_cb(table, change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
lv_mem_monitor_t mon2;
lv_mem_monitor(&mon2);
size_t mem_used = mon1.free_size - mon2.free_size;
uint32_t elaps = lv_tick_elaps(t);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text_fmt(label, "%" LV_PRIu32" items were created in %" LV_PRIu32" ms\n"
"using %zu bytes of memory",
(uint32_t)ITEM_CNT, elaps, mem_used);
lv_obj_align(label, LV_ALIGN_BOTTOM_MID, 0, -10);
}
#endif
Tabview¶
Simple Tabview¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
void lv_example_tabview_1(void)
{
/*Create a Tab view object*/
lv_obj_t * tabview;
tabview = lv_tabview_create(lv_screen_active());
/*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");
lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3");
/*Add content to the tabs*/
lv_obj_t * label = lv_label_create(tab1);
lv_label_set_text(label, "This the first tab\n\n"
"If the content\n"
"of a tab\n"
"becomes too\n"
"longer\n"
"than the\n"
"container\n"
"then it\n"
"automatically\n"
"becomes\n"
"scrollable.\n"
"\n"
"\n"
"\n"
"Can you see it?");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON);
}
#endif
Tabs on the left, styling and no scrolling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
/*A vertical tab view with disabled scrolling and some styling*/
void lv_example_tabview_2(void)
{
/*Create a Tab view object*/
lv_obj_t * tabview;
uint32_t tab_count = 0;
uint32_t i = 0;
tabview = lv_tabview_create(lv_screen_active());
lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);
lv_tabview_set_tab_bar_size(tabview, 80);
lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);
lv_obj_t * tab_buttons = lv_tabview_get_tab_bar(tabview);
lv_obj_set_style_bg_color(tab_buttons, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
lv_obj_set_style_text_color(tab_buttons, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);
/*Add 5 tabs (the tabs are page (lv_page) and can be scrolled*/
lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");
lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3");
lv_obj_t * tab4 = lv_tabview_add_tab(tabview, "Tab 4");
lv_obj_t * tab5 = lv_tabview_add_tab(tabview, "Tab 5");
tab_count = lv_tabview_get_tab_count(tabview);
for(i = 0; i < tab_count; i++) {
lv_obj_t * button = lv_obj_get_child(tab_buttons, i);
lv_obj_set_style_border_side(button, LV_BORDER_SIDE_RIGHT, LV_PART_MAIN | LV_STATE_CHECKED);
}
lv_obj_set_style_bg_color(tab2, lv_palette_lighten(LV_PALETTE_AMBER, 3), 0);
lv_obj_set_style_bg_opa(tab2, LV_OPA_COVER, 0);
/*Add content to the tabs*/
lv_obj_t * label = lv_label_create(tab1);
lv_label_set_text(label, "First tab");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
label = lv_label_create(tab4);
lv_label_set_text(label, "Fourth tab");
label = lv_label_create(tab5);
lv_label_set_text(label, "Fifth tab");
lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}
#endif
Textarea¶
Simple Text area¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TEXTAREA && LV_BUILD_EXAMPLES
static void textarea_event_handler(lv_event_t * e)
{
lv_obj_t * ta = lv_event_get_target_obj(e);
LV_UNUSED(ta);
LV_LOG_USER("Enter was pressed. The current text is: %s", lv_textarea_get_text(ta));
}
static void btnm_event_handler(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
lv_obj_t * ta = (lv_obj_t *)lv_event_get_user_data(e);
const char * txt = lv_buttonmatrix_get_button_text(obj, lv_buttonmatrix_get_selected_button(obj));
if(lv_strcmp(txt, LV_SYMBOL_BACKSPACE) == 0) lv_textarea_delete_char(ta);
else if(lv_strcmp(txt, LV_SYMBOL_NEW_LINE) == 0) lv_obj_send_event(ta, LV_EVENT_READY, NULL);
else lv_textarea_add_text(ta, txt);
}
void lv_example_textarea_1(void)
{
lv_obj_t * ta = lv_textarea_create(lv_screen_active());
lv_textarea_set_one_line(ta, true);
lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);
lv_obj_add_event_cb(ta, textarea_event_handler, LV_EVENT_READY, ta);
lv_obj_add_state(ta, LV_STATE_FOCUSED); /*To be sure the cursor is visible*/
static const char * btnm_map[] = {"1", "2", "3", "\n",
"4", "5", "6", "\n",
"7", "8", "9", "\n",
LV_SYMBOL_BACKSPACE, "0", LV_SYMBOL_NEW_LINE, ""
};
lv_obj_t * btnm = lv_buttonmatrix_create(lv_screen_active());
lv_obj_set_size(btnm, 200, 150);
lv_obj_align(btnm, LV_ALIGN_BOTTOM_MID, 0, -10);
lv_obj_add_event_cb(btnm, btnm_event_handler, LV_EVENT_VALUE_CHANGED, ta);
lv_obj_remove_flag(btnm, LV_OBJ_FLAG_CLICK_FOCUSABLE); /*To keep the text area focused on button clicks*/
lv_buttonmatrix_set_map(btnm, btnm_map);
}
#endif
Text area with password field¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TEXTAREA && LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
static void ta_event_cb(lv_event_t * e);
static lv_obj_t * kb;
void lv_example_textarea_2(void)
{
/*Create the password box*/
lv_obj_t * pwd_ta = lv_textarea_create(lv_screen_active());
lv_textarea_set_text(pwd_ta, "");
lv_textarea_set_password_mode(pwd_ta, true);
lv_textarea_set_one_line(pwd_ta, true);
lv_obj_set_width(pwd_ta, lv_pct(40));
lv_obj_set_pos(pwd_ta, 5, 20);
lv_obj_add_event_cb(pwd_ta, ta_event_cb, LV_EVENT_ALL, NULL);
/*Create a label and position it above the text box*/
lv_obj_t * pwd_label = lv_label_create(lv_screen_active());
lv_label_set_text(pwd_label, "Password:");
lv_obj_align_to(pwd_label, pwd_ta, LV_ALIGN_OUT_TOP_LEFT, 0, 0);
/*Create the one-line mode text area*/
lv_obj_t * text_ta = lv_textarea_create(lv_screen_active());
lv_textarea_set_one_line(text_ta, true);
lv_textarea_set_password_mode(text_ta, false);
lv_obj_set_width(text_ta, lv_pct(40));
lv_obj_add_event_cb(text_ta, ta_event_cb, LV_EVENT_ALL, NULL);
lv_obj_align(text_ta, LV_ALIGN_TOP_RIGHT, -5, 20);
/*Create a label and position it above the text box*/
lv_obj_t * oneline_label = lv_label_create(lv_screen_active());
lv_label_set_text(oneline_label, "Text:");
lv_obj_align_to(oneline_label, text_ta, LV_ALIGN_OUT_TOP_LEFT, 0, 0);
/*Create a keyboard*/
kb = lv_keyboard_create(lv_screen_active());
lv_obj_set_size(kb, LV_HOR_RES, LV_VER_RES / 2);
lv_keyboard_set_textarea(kb, pwd_ta); /*Focus it on one of the text areas to start*/
/*The keyboard will show Arabic characters if they are enabled */
#if LV_USE_ARABIC_PERSIAN_CHARS && LV_FONT_DEJAVU_16_PERSIAN_HEBREW
lv_obj_set_style_text_font(kb, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_style_text_font(text_ta, &lv_font_dejavu_16_persian_hebrew, 0);
lv_obj_set_style_text_font(pwd_ta, &lv_font_dejavu_16_persian_hebrew, 0);
#endif
}
static void ta_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * ta = lv_event_get_target_obj(e);
if(code == LV_EVENT_CLICKED || code == LV_EVENT_FOCUSED) {
/*Focus on the clicked text area*/
if(kb != NULL) lv_keyboard_set_textarea(kb, ta);
}
else if(code == LV_EVENT_READY) {
LV_LOG_USER("Ready, current text: %s", lv_textarea_get_text(ta));
}
}
#endif
Text auto-formatting¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TEXTAREA && LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
static void ta_event_cb(lv_event_t * e);
static lv_obj_t * kb;
/**
* Automatically format text like a clock. E.g. "12:34"
* Add the ':' automatically.
*/
void lv_example_textarea_3(void)
{
/*Create the text area*/
lv_obj_t * ta = lv_textarea_create(lv_screen_active());
lv_obj_add_event_cb(ta, ta_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_textarea_set_accepted_chars(ta, "0123456789:");
lv_textarea_set_max_length(ta, 5);
lv_textarea_set_one_line(ta, true);
lv_textarea_set_text(ta, "");
/*Create a keyboard*/
kb = lv_keyboard_create(lv_screen_active());
lv_obj_set_size(kb, LV_HOR_RES, LV_VER_RES / 2);
lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);
lv_keyboard_set_textarea(kb, ta);
}
static void ta_event_cb(lv_event_t * e)
{
lv_obj_t * ta = lv_event_get_target_obj(e);
const char * txt = lv_textarea_get_text(ta);
if(txt[0] >= '0' && txt[0] <= '9' &&
txt[1] >= '0' && txt[1] <= '9' &&
txt[2] != ':') {
lv_textarea_set_cursor_pos(ta, 2);
lv_textarea_add_char(ta, ':');
}
}
#endif
Text area cursor styling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TEXTAREA && LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
static void create_styled_textarea_cursor(const char * txt, int32_t y_ofs, lv_style_t * cursor_style)
{
lv_obj_t * ta = lv_textarea_create(lv_screen_active());
lv_textarea_set_text(ta, txt);
lv_obj_set_width(ta, 280);
lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, y_ofs);
lv_textarea_set_one_line(ta, true);
lv_obj_add_state(ta, LV_STATE_FOCUSED);
lv_obj_add_style(ta, cursor_style, LV_PART_CURSOR | LV_STATE_FOCUSED);
lv_textarea_set_cursor_pos(ta, 0);
}
void lv_example_textarea_4(void)
{
static lv_style_t style_simple, style_block, style_underline;
/* Thin left bar cursor (simple) */
lv_style_init(&style_simple);
lv_style_set_border_color(&style_simple, lv_palette_main(LV_PALETTE_RED));
/* Underline cursor */
lv_style_init(&style_underline);
lv_style_set_bg_opa(&style_underline, LV_OPA_TRANSP);
lv_style_set_border_color(&style_underline, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_side(&style_underline, LV_BORDER_SIDE_BOTTOM);
lv_style_set_pad_hor(&style_underline, 1); /* set width of cursor using pad */
lv_style_set_border_width(&style_underline, 3); /* set thickness of underline cursor */
/* Full block cursor with many styles */
lv_style_init(&style_block);
lv_style_set_bg_opa(&style_block, LV_OPA_COVER);
lv_style_set_bg_color(&style_block, lv_palette_main(LV_PALETTE_ORANGE));
lv_style_set_bg_grad_color(&style_block, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_bg_grad_dir(&style_block, LV_GRAD_DIR_VER);
lv_style_set_border_color(&style_block, lv_palette_main(LV_PALETTE_RED));
lv_style_set_border_side(&style_block, LV_BORDER_SIDE_FULL);
lv_style_set_border_width(&style_block, 1);
lv_style_set_radius(&style_block, 4);
lv_style_set_text_color(&style_block, lv_color_white());
lv_style_set_pad_all(&style_block, 1); /* set width of cursor using pad */
/* Create 3 independent textareas, each with a unique styled cursor */
create_styled_textarea_cursor("This is a simple red cursor", 10, &style_simple);
create_styled_textarea_cursor("This is an underline blue cursor", 110, &style_underline);
create_styled_textarea_cursor("This is a complex block cursor", 60, &style_block);
}
#endif
Tileview¶
Tileview with content¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TILEVIEW && LV_BUILD_EXAMPLES
/**
* Create a 2x2 tile view and allow scrolling only in an "L" shape.
* Demonstrate scroll chaining with a long list that
* scrolls the tile view when it can't be scrolled further.
*/
void lv_example_tileview_1(void)
{
lv_obj_t * tv = lv_tileview_create(lv_screen_active());
/*Tile1: just a label*/
lv_obj_t * tile1 = lv_tileview_add_tile(tv, 0, 0, LV_DIR_BOTTOM);
lv_obj_t * label = lv_label_create(tile1);
lv_label_set_text(label, "Scroll down");
lv_obj_center(label);
/*Tile2: a button*/
lv_obj_t * tile2 = lv_tileview_add_tile(tv, 0, 1, (lv_dir_t)(LV_DIR_TOP | LV_DIR_RIGHT));
lv_obj_t * btn = lv_button_create(tile2);
label = lv_label_create(btn);
lv_label_set_text(label, "Scroll up or right");
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(btn);
/*Tile3: a list*/
lv_obj_t * tile3 = lv_tileview_add_tile(tv, 1, 1, LV_DIR_LEFT);
lv_obj_t * list = lv_list_create(tile3);
lv_obj_set_size(list, LV_PCT(100), LV_PCT(100));
lv_list_add_button(list, NULL, "One");
lv_list_add_button(list, NULL, "Two");
lv_list_add_button(list, NULL, "Three");
lv_list_add_button(list, NULL, "Four");
lv_list_add_button(list, NULL, "Five");
lv_list_add_button(list, NULL, "Six");
lv_list_add_button(list, NULL, "Seven");
lv_list_add_button(list, NULL, "Eight");
lv_list_add_button(list, NULL, "Nine");
lv_list_add_button(list, NULL, "Ten");
}
#endif
Window¶
Simple window¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_WIN && LV_BUILD_EXAMPLES
static void event_handler(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target_obj(e);
LV_UNUSED(obj);
LV_LOG_USER("Button %d clicked", (int)lv_obj_get_index(obj));
}
void lv_example_win_1(void)
{
lv_obj_t * win = lv_win_create(lv_screen_active());
lv_obj_t * btn;
btn = lv_win_add_button(win, LV_SYMBOL_LEFT, 40);
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
lv_win_add_title(win, "A title");
btn = lv_win_add_button(win, LV_SYMBOL_RIGHT, 40);
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
btn = lv_win_add_button(win, LV_SYMBOL_CLOSE, 60);
lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
lv_obj_t * cont = lv_win_get_content(win); /*Content can be added here*/
lv_obj_t * label = lv_label_create(cont);
lv_label_set_text(label, "This is\n"
"a pretty\n"
"long text\n"
"to see how\n"
"the window\n"
"becomes\n"
"scrollable.\n"
"\n"
"\n"
"Some more\n"
"text to be\n"
"sure it\n"
"overflows. :)");
}
#endif
3rd-Party Libraries¶
Barcode¶
Create a Barcode¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BARCODE && LV_BUILD_EXAMPLES
/**
* Create a Barcode
*/
void lv_example_barcode_1(void)
{
lv_color_t bg_color = lv_palette_lighten(LV_PALETTE_LIGHT_BLUE, 5);
lv_color_t fg_color = lv_palette_darken(LV_PALETTE_BLUE, 4);
lv_obj_t * barcode = lv_barcode_create(lv_screen_active());
lv_obj_set_height(barcode, 50);
lv_obj_center(barcode);
/*Set color*/
lv_barcode_set_dark_color(barcode, fg_color);
lv_barcode_set_light_color(barcode, bg_color);
/*Add a border with bg_color*/
lv_obj_set_style_border_color(barcode, bg_color, 0);
/*Set data*/
lv_barcode_update(barcode, "https://lvgl.io");
}
#endif
BMP¶
Open a BMP image from file¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BMP && LV_BUILD_EXAMPLES
/**
* Open a BMP file from a file
*/
void lv_example_bmp_1(void)
{
lv_obj_t * img = lv_image_create(lv_screen_active());
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_image_set_src(img, "A:lvgl/examples/libs/bmp/example_32bit.bmp");
lv_obj_center(img);
}
#endif
FFmpeg¶
Decode image¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_FFMPEG && LV_FFMPEG_PLAYER_USE_LV_FS
/**
* Open an image from a file
*/
void lv_example_ffmpeg_1(void)
{
/*It always uses the LVGL filesystem abstraction (not the OS filesystem)
*to open the image, unlike `lv_ffmpeg_player_set_src` which depends on
*the setting of `LV_FFMPEG_PLAYER_USE_LV_FS`.*/
lv_obj_t * img = lv_image_create(lv_screen_active());
lv_image_set_src(img, "A:lvgl/examples/libs/ffmpeg/ffmpeg.png");
lv_obj_center(img);
}
#else
void lv_example_ffmpeg_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "FFmpeg is not installed");
lv_obj_center(label);
}
#endif
#endif
Decode video¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_FFMPEG
#if LV_FFMPEG_PLAYER_USE_LV_FS
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
/**
* Open a video from a file
*/
void lv_example_ffmpeg_2(void)
{
/*birds.mp4 is downloaded from http://www.videezy.com (Free Stock Footage by Videezy!)
*https://www.videezy.com/abstract/44864-silhouettes-of-birds-over-the-sunset*/
/*It will use the LVGL filesystem abstraction (not the OS filesystem)
*if `LV_FFMPEG_PLAYER_USE_LV_FS` is set.*/
lv_obj_t * player = lv_ffmpeg_player_create(lv_screen_active());
/*Note: "h264_v4l2m2m" is a Linux-specific hardware decoder example, available only on Linux systems with V4L2 support.
*In the absence of support, it will fall back to software decoding.*/
lv_ffmpeg_player_set_decoder(player, "h264_v4l2m2m");
lv_ffmpeg_player_set_src(player, PATH_PREFIX "lvgl/examples/libs/ffmpeg/birds.mp4");
lv_ffmpeg_player_set_auto_restart(player, true);
lv_ffmpeg_player_set_cmd(player, LV_FFMPEG_PLAYER_CMD_START);
lv_obj_center(player);
}
#else
void lv_example_ffmpeg_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "FFmpeg is not installed");
lv_obj_center(label);
}
#endif
#endif
FreeType¶
Create a font with FreeType¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_FREETYPE
#if LV_FREETYPE_USE_LVGL_PORT
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
/**
* Load a font with FreeType
*/
void lv_example_freetype_1(void)
{
/*Create a font*/
lv_font_t * font = lv_freetype_font_create(PATH_PREFIX "lvgl/examples/libs/freetype/Lato-Regular.ttf",
LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
24,
LV_FREETYPE_FONT_STYLE_NORMAL);
if(!font) {
LV_LOG_ERROR("freetype font create failed.");
return;
}
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_font(&style, font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
/*Create a label with the new style*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_add_style(label, &style, 0);
lv_label_set_text(label, "Hello world\nI'm a font created with FreeType");
lv_obj_center(label);
}
#else
void lv_example_freetype_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "FreeType is not installed");
lv_obj_center(label);
}
#endif
#endif
Use a bitmap font to draw Emojis using FreeType¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_FREETYPE
#if LV_FREETYPE_USE_LVGL_PORT
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
/*
* Load a vector font
* ThorVG needs to be enabled, LV_USE_VECTOR_GRAPHICS=1
*/
void lv_example_freetype_2_vector_font(uint32_t font_size, uint32_t border_width)
{
lv_font_t * font = lv_freetype_font_create(PATH_PREFIX "lvgl/examples/libs/freetype/Lato-Regular.ttf",
LV_FREETYPE_FONT_RENDER_MODE_OUTLINE,
font_size,
LV_FREETYPE_FONT_STYLE_NORMAL);
if(!font) {
LV_LOG_ERROR("Freetype font create failed.");
return;
}
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_font(&style, font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
lv_style_set_text_color(&style, lv_color_hex(0xFF0000));
lv_style_set_text_opa(&style, LV_OPA_100);
lv_style_set_text_outline_stroke_opa(&style, LV_OPA_100);
lv_style_set_text_outline_stroke_color(&style, lv_color_hex(0x00FF00));
lv_style_set_text_outline_stroke_width(&style, border_width);
/*Avoid overlapping issue when using letter outlines*/
lv_style_set_text_letter_space(&style, border_width);
lv_style_set_text_line_space(&style, border_width);
/*Create a label with the new style*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_add_style(label, &style, 0);
lv_label_set_text(label,
"Hello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\n"
"I'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\nHello world\nI'm a font created with FreeType\n");
}
/**
* Load a font with FreeType
*/
void lv_example_freetype_2(void)
{
/*Create a font*/
lv_font_t * font = lv_freetype_font_create(PATH_PREFIX "lvgl/examples/libs/freetype/Lato-Regular.ttf",
LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
400,
LV_FREETYPE_FONT_STYLE_NORMAL);
/* this font is created from a downscaled NotoColorEmoji to 34x32px
* Subset containing only a single emoji was created using fonttools:
* Command: fonttools subset NotoColorEmoji.ttf --text=😀 */
lv_font_t * font_emoji = lv_freetype_font_create(PATH_PREFIX "lvgl/examples/libs/freetype/NotoColorEmoji-32.subset.ttf",
LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
200,
LV_FREETYPE_FONT_STYLE_NORMAL);
if(!font || !font_emoji) {
LV_LOG_ERROR("freetype font create failed.");
return;
}
font->fallback = font_emoji;
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_font(&style, font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
/*Create a label with the new style*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_add_style(label, &style, 0);
lv_label_set_text(label, "Hello world\nI'm a font created with FreeType 😀");
lv_obj_center(label);
}
#else
void lv_example_freetype_2_vector_font(uint32_t font_size, uint32_t border_width)
{
/*TODO
*fallback for online examples*/
LV_UNUSED(font_size);
LV_UNUSED(border_width);
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "FreeType is not installed");
lv_obj_center(label);
}
void lv_example_freetype_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "FreeType is not installed");
lv_obj_center(label);
}
#endif
#endif
Freetype font kerning¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_FREETYPE
#if LV_FREETYPE_USE_LVGL_PORT
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
#define KERNING_TEST_TEXT "AVAWAY,ToTaTe"
static void create_label(lv_font_kerning_t kerning, int32_t y_ofs, const char * text)
{
lv_font_info_t font_info;
lv_freetype_init_font_info(&font_info);
font_info.name = PATH_PREFIX "lvgl/examples/libs/freetype/Lato-Regular.ttf";
font_info.size = 32;
font_info.kerning = kerning;
lv_font_t * font = lv_freetype_font_create_with_info(&font_info);
if(!font) {
LV_LOG_ERROR("freetype font create failed.");
return;
}
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(label, font, 0);
lv_label_set_text(label, text);
lv_obj_align(label, LV_ALIGN_CENTER, 0, y_ofs);
}
/**
* FreeType kerning example
*/
void lv_example_freetype_3(void)
{
create_label(LV_FONT_KERNING_NONE, -32, "Kerning None: " KERNING_TEST_TEXT);
create_label(LV_FONT_KERNING_NORMAL, 32, "Kerning Normal: " KERNING_TEST_TEXT);
}
#else
void lv_example_freetype_3(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "FreeType is not installed");
lv_obj_center(label);
}
#endif
#endif
GIF¶
Open a GIF image from file and variable¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_GIF && LV_BUILD_EXAMPLES
/**
* Open a GIF image from a file and a variable
*/
void lv_example_gif_1(void)
{
LV_IMAGE_DECLARE(img_bulb_gif);
lv_obj_t * img;
img = lv_gif_create(lv_screen_active());
lv_gif_set_color_format(img, LV_COLOR_FORMAT_ARGB8888);
lv_gif_set_src(img, &img_bulb_gif);
lv_obj_align(img, LV_ALIGN_LEFT_MID, 20, 0);
img = lv_gif_create(lv_screen_active());
lv_gif_set_color_format(img, LV_COLOR_FORMAT_ARGB8888);
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_gif_set_src(img, "A:lvgl/examples/libs/gif/bulb.gif");
lv_obj_align(img, LV_ALIGN_RIGHT_MID, -20, 0);
}
#endif
glTF¶
Open a glTF from a file and make it spin forever like a platter¶
C code
View on GitHub#include "lv_example_gltf.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_GLTF
/**
* Timer callback to continuously rotate the model
*/
static void spin_timer_cb(lv_timer_t * timer)
{
lv_obj_t * gltf = lv_timer_get_user_data(timer);
float yaw = lv_gltf_get_yaw(gltf);
yaw += 1.0f;
if(yaw >= 360.0f) {
yaw = 0.0f;
}
lv_gltf_set_yaw(gltf, yaw);
}
/**
* Open a GLTF from a file and make it spin forever like a platter
*/
void lv_example_gltf_1(void)
{
lv_obj_t * gltf = lv_gltf_create(lv_screen_active());
lv_gltf_model_t * model = lv_gltf_load_model_from_file(gltf,
"A:lvgl/examples/libs/gltf/webp_diffuse_transmission_plant.glb");
lv_obj_set_size(gltf, LV_PCT(100), LV_PCT(100));
lv_gltf_model_play_animation(model, 0);
lv_gltf_set_pitch(gltf, -45.f);
lv_timer_create(spin_timer_cb, LV_DEF_REFR_PERIOD, gltf);
}
#else
void lv_example_gltf_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "glTF web support is coming soon");
lv_obj_center(label);
}
#endif
#endif
Open a glTF from a file and iterate through each camera¶
C code
View on GitHub#include "lv_example_gltf.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_GLTF
static size_t camera_count;
static size_t current_camera;
static uint32_t current_speed = LV_GLTF_ANIM_SPEED_HALF;
/**
* Timer callback that updates the current camera and the current animation speed
*/
static void timer_cb(lv_timer_t * timer)
{
lv_obj_t * gltf = (lv_obj_t *) lv_timer_get_user_data(timer);
current_camera = (current_camera + 1) % (camera_count + 1);
current_speed *= 2;
if(current_speed > LV_GLTF_ANIM_SPEED_4X) {
current_speed = LV_GLTF_ANIM_SPEED_HALF;
}
LV_LOG_USER("Setting camera %zu and animation speed %" PRIu32, current_camera, current_speed);
lv_gltf_set_camera(gltf, current_camera);
lv_gltf_set_animation_speed(gltf, current_speed);
}
/**
* Open a GLTF from a file and loop through the model cameras and multiple animation speeds
*/
void lv_example_gltf_2(void)
{
lv_obj_t * gltf = lv_gltf_create(lv_screen_active());
lv_gltf_model_t * model = lv_gltf_load_model_from_file(gltf,
"A:lvgl/examples/libs/gltf/webp_diffuse_transmission_plant.glb");
lv_gltf_set_animation_speed(gltf, current_speed);
lv_gltf_model_play_animation(model, 0);
lv_obj_set_size(gltf, LV_PCT(100), LV_PCT(100));
camera_count = lv_gltf_get_camera_count(gltf);
lv_gltf_set_pitch(gltf, -45.f);
lv_timer_create(timer_cb, 5000, gltf);
}
#else
void lv_example_gltf_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "glTF web support is coming soon");
lv_obj_center(label);
}
#endif
#endif
GStreamer¶
Loads a video from the internet using the gstreamer widget¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_GSTREAMER
typedef struct {
lv_obj_t * streamer;
lv_obj_t * pp_button;
lv_obj_t * button_label;
lv_obj_t * position_label;
lv_obj_t * duration_label;
lv_subject_t position_subject;
} event_data_t;
static void volume_setter_create(event_data_t * event_data);
static void control_bar_create(event_data_t * event_data);
static void update_duration_label(lv_obj_t * label, uint32_t duration);
static void volume_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static void update_position_slider(lv_timer_t * timer);
static void play_pause_pressed(lv_event_t * e);
static void streamer_ready(lv_event_t * e);
/**
* Loads a video from the internet using the gstreamer widget
*/
void lv_example_gstreamer_1(void)
{
static event_data_t event_data;
event_data.streamer = lv_gstreamer_create(lv_screen_active());
/* the gstreamer widget inherits the `lv_image` widget,
* meaning you can also provide it lv_image functions, like
lv_image_set_scale(event_data.streamer, 100);
lv_image_set_rotation(event_data.streamer, 100);
*/
/* Set the current src of the streamer.
* Using the `URI` "factory", we can
* specify various URI schemes as media sources including local files (file://),
* web streams (http://, https://), RTSP streams (rtsp://), UDP streams (udp://),
* and many others. GStreamer's uridecodebin automatically selects the appropriate
* source element and decoder based on the URI scheme and media format. */
lv_gstreamer_set_src(event_data.streamer, LV_GSTREAMER_FACTORY_URI_DECODE, LV_GSTREAMER_PROPERTY_URI_DECODE,
"https://gstreamer.freedesktop.org/data/media/sintel_trailer-480p.webm");
lv_obj_center(event_data.streamer);
/* The LV_EVENT_READY will fire when the stream is ready at that point you can query the stream
* information like its resolution and duration. See `streamer_ready` */
lv_obj_add_event_cb(event_data.streamer, streamer_ready, LV_EVENT_READY, &event_data);
/* Play the stream immediately */
lv_gstreamer_play(event_data.streamer);
/* Create a slider to modify the stream volume and a label to visualize the current value */
volume_setter_create(&event_data);
/* Create a slider to see the position in the stream with 2 text label on each side
* One for the current position in the stream and the other for the total duration of the stream
* Also add a pause/play button*/
control_bar_create(&event_data);
/* Create a timer that will update the slider position based on the stream position
* Make it 3 times faster than the refresh rate for a smoother effect */
lv_timer_create(update_position_slider, LV_DEF_REFR_PERIOD, &event_data);
}
static void volume_setter_create(event_data_t * event_data)
{
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_remove_style_all(cont);
lv_obj_set_style_pad_all(cont, 8, 0);
lv_obj_set_style_pad_gap(cont, 8, 0);
lv_obj_set_style_radius(cont, 8, 0);
lv_obj_set_style_bg_color(cont, lv_color_white(), 0);
lv_obj_set_style_bg_opa(cont, LV_OPA_70, 0);
lv_obj_set_size(cont, 40, lv_pct(60));
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_align(cont, LV_ALIGN_RIGHT_MID, -8, -40);
lv_obj_t * volume_slider = lv_slider_create(cont);
lv_obj_set_size(volume_slider, 13, LV_PCT(50));
lv_obj_set_flex_grow(volume_slider, 1);
lv_obj_t * volume_label = lv_label_create(cont);
lv_obj_set_style_text_align(volume_label, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_width(volume_label, 50);
/* We use `lv_subject` to simplify binding the data between multiple objects.
* Here the data is shared between the slider, the label and the gstreamer widgets */
static lv_subject_t volume_subject;
lv_subject_init_int(&volume_subject, 50);
lv_subject_add_observer_obj(&volume_subject, volume_observer_cb, event_data->streamer, NULL);
lv_slider_bind_value(volume_slider, &volume_subject);
lv_label_bind_text(volume_label, &volume_subject, LV_SYMBOL_VOLUME_MID "\n%3" LV_PRId32 "%%");
}
static void control_bar_create(event_data_t * event_data)
{
lv_subject_init_int(&event_data->position_subject, 0);
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_remove_style_all(cont);
lv_obj_set_style_pad_all(cont, 8, 0);
lv_obj_set_style_margin_hor(cont, 8, 0);
lv_obj_set_style_pad_gap(cont, 8, 0);
lv_obj_set_style_radius(cont, 8, 0);
lv_obj_set_style_bg_color(cont, lv_color_white(), 0);
lv_obj_set_style_bg_opa(cont, LV_OPA_70, 0);
lv_obj_set_size(cont, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_align(cont, LV_ALIGN_BOTTOM_MID, 0, -10);
event_data->position_label = lv_label_create(cont);
lv_obj_set_width(event_data->position_label, 80);
lv_label_set_text_static(event_data->position_label, "0:00:000");
/* Create a button a button to play/pause the stream */
event_data->pp_button = lv_button_create(cont);
lv_obj_center(event_data->pp_button);
lv_obj_add_event_cb(event_data->pp_button, play_pause_pressed, LV_EVENT_CLICKED, event_data);
event_data->button_label = lv_label_create(event_data->pp_button);
lv_label_set_text_static(event_data->button_label, LV_SYMBOL_PAUSE);
lv_obj_t * position_slider = lv_bar_create(cont);
lv_bar_set_range(position_slider, 0, 1000);
lv_obj_set_flex_grow(position_slider, 1);
lv_slider_bind_value(position_slider, &event_data->position_subject);
event_data->duration_label = lv_label_create(cont);
lv_obj_set_width(event_data->duration_label, 80);
lv_label_set_text_static(event_data->duration_label, "0:00:000");
lv_obj_set_style_text_align(event_data->duration_label, LV_TEXT_ALIGN_RIGHT, 0);
}
static void update_duration_label(lv_obj_t * label, uint32_t duration)
{
const uint32_t minutes = duration / 60000;
const uint32_t seconds = (duration / 1000) % 60;
const uint32_t milliseconds = duration % 1000;
lv_label_set_text_fmt(label, "%" LV_PRIu32 ":%02" LV_PRIu32 ":%03" LV_PRIu32, minutes, seconds, milliseconds);
}
static void volume_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
lv_obj_t * streamer = lv_observer_get_target_obj(observer);
int32_t volume = lv_subject_get_int(subject);
LV_LOG_USER("Setting volume %" PRId32, volume);
lv_gstreamer_set_volume(streamer, (uint8_t)volume);
}
static void update_position_slider(lv_timer_t * timer)
{
event_data_t * event_data = (event_data_t *)lv_timer_get_user_data(timer);
uint32_t duration = lv_gstreamer_get_duration(event_data->streamer);
uint32_t position = lv_gstreamer_get_position(event_data->streamer);
int32_t position_perc = lv_map(position, 0, duration, 0, 1000);
lv_subject_set_int(&event_data->position_subject, position_perc);
update_duration_label(event_data->position_label, position);
}
static void play_pause_pressed(lv_event_t * e)
{
event_data_t * event_data = (event_data_t *)lv_event_get_user_data(e);
if(lv_streq(lv_label_get_text(event_data->button_label), LV_SYMBOL_PLAY)) {
lv_label_set_text(event_data->button_label, LV_SYMBOL_PAUSE);
lv_gstreamer_play(event_data->streamer);
}
else {
lv_label_set_text(event_data->button_label, LV_SYMBOL_PLAY);
lv_gstreamer_pause(event_data->streamer);
}
}
static void streamer_ready(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
event_data_t * event_data = (event_data_t *)lv_event_get_user_data(e);
lv_obj_t * btn = event_data->pp_button;
lv_obj_t * streamer = event_data->streamer;
if(code == LV_EVENT_READY) {
lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, 0);
uint32_t duration = lv_gstreamer_get_duration(streamer);
LV_LOG_USER("Video is starting");
LV_LOG_USER("\tStream resolution %" LV_PRId32 "x%" LV_PRId32, lv_image_get_src_width(streamer),
lv_image_get_src_height(streamer));
LV_LOG_USER("\tStream duration %" LV_PRIu32, duration);
update_duration_label(event_data->duration_label, duration);
}
}
#else
void lv_example_gstreamer_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "GStreamer web support is coming soon");
lv_obj_center(label);
}
#endif
#endif
libjpeg-turbo¶
Load a JPG image¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_LIBJPEG_TURBO
/**
* Load a JPG image
*/
void lv_example_libjpeg_turbo_1(void)
{
lv_obj_t * wp;
wp = lv_image_create(lv_screen_active());
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_image_set_src(wp, "A:lvgl/examples/libs/libjpeg_turbo/flower.jpg");
lv_obj_center(wp);
}
#else
void lv_example_libjpeg_turbo_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "LibJPEG-Turbo is not installed");
lv_obj_center(label);
}
#endif
#endif
libpng¶
Open a PNG image from file and variable¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_LIBPNG
/**
* Open a PNG image from a file
*/
void lv_example_libpng_1(void)
{
LV_IMAGE_DECLARE(img_png_demo);
lv_obj_t * img;
img = lv_image_create(lv_screen_active());
lv_image_set_src(img, &img_png_demo);
lv_obj_align(img, LV_ALIGN_LEFT_MID, 10, 0);
img = lv_image_create(lv_screen_active());
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_image_set_src(img, "A:lvgl/examples/libs/libpng/png_demo.png");
lv_obj_align(img, LV_ALIGN_RIGHT_MID, -10, 0);
}
#else
void lv_example_libpng_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "LibPNG is not installed");
lv_obj_center(label);
}
#endif
#endif
LibWebP¶
Open a WEBP image from file and variable¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_LIBWEBP
/**
* Load a WEBP image
*/
void lv_example_libwebp_1(void)
{
lv_obj_t * img;
img = lv_image_create(lv_screen_active());
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_image_set_src(img, "A:lvgl/examples/libs/libwebp/rose.webp");
lv_obj_center(img);
}
#else
void lv_example_libwebp_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Libwebp is not installed");
lv_obj_center(label);
}
#endif
#endif
LodePNG¶
Open a PNG image from file and variable¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LODEPNG && LV_USE_IMAGE && LV_BUILD_EXAMPLES
/**
* Open a PNG image from a file and a variable
*/
void lv_example_lodepng_1(void)
{
LV_IMAGE_DECLARE(img_wink_png);
lv_obj_t * img;
img = lv_image_create(lv_screen_active());
lv_image_set_src(img, &img_wink_png);
lv_obj_align(img, LV_ALIGN_LEFT_MID, 20, 0);
img = lv_image_create(lv_screen_active());
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_image_set_src(img, "A:lvgl/examples/libs/lodepng/wink.png");
lv_obj_align(img, LV_ALIGN_RIGHT_MID, -20, 0);
}
#endif
QR-Code Generator¶
Create a QR Code¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_QRCODE && LV_BUILD_EXAMPLES
#include <string.h>
/**
* Create a QR Code
*/
void lv_example_qrcode_1(void)
{
lv_color_t bg_color = lv_palette_lighten(LV_PALETTE_LIGHT_BLUE, 5);
lv_color_t fg_color = lv_palette_darken(LV_PALETTE_BLUE, 4);
lv_obj_t * qr = lv_qrcode_create(lv_screen_active());
lv_qrcode_set_size(qr, 150);
lv_qrcode_set_dark_color(qr, fg_color);
lv_qrcode_set_light_color(qr, bg_color);
/*Set data*/
const char * data = "https://lvgl.io";
lv_qrcode_update(qr, data, strlen(data));
lv_obj_center(qr);
/*Add a border with bg_color*/
lv_obj_set_style_border_color(qr, bg_color, 0);
lv_obj_set_style_border_width(qr, 5, 0);
}
#endif
rlottie¶
Load a Lottie animation from raw data¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_RLOTTIE
/**
* Load an lottie animation from flash
*/
void lv_example_rlottie_1(void)
{
extern const uint8_t lv_example_rlottie_approve[];
lv_obj_t * lottie = lv_rlottie_create_from_raw(lv_screen_active(), 100, 100, (const char *)lv_example_rlottie_approve);
lv_obj_center(lottie);
}
#else
void lv_example_rlottie_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Rlottie is not installed");
lv_obj_center(label);
}
#endif
#endif
Load a Lottie animation from a file¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_RLOTTIE
/**
* Load an lottie animation from file
*/
void lv_example_rlottie_2(void)
{
/*The rlottie library uses STDIO file API, so there is no driver letter for LVGL*/
lv_obj_t * lottie = lv_rlottie_create_from_file(lv_screen_active(), 100, 100,
"lvgl/examples/libs/rlottie/lv_example_rlottie_approve.json");
lv_obj_center(lottie);
}
#else
void lv_example_rlottie_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Rlottie is not installed");
lv_obj_center(label);
}
#endif
#endif
SVG¶
Load and render SVG data¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_SVG && LV_USE_VECTOR_GRAPHIC
/**
* Load an SVG from data
*/
void lv_example_svg_1(void)
{
static const char svg_data[] = "<svg width=\"12cm\" height=\"4cm\" viewBox=\"0 0 1200 400\">"
"<circle cx=\"600\" cy=\"200\" r=\"100\" fill=\"red\" stroke=\"blue\" stroke-width=\"10\"/></svg>";
static lv_image_dsc_t svg_dsc;
svg_dsc.header.magic = LV_IMAGE_HEADER_MAGIC;
svg_dsc.header.w = 450;
svg_dsc.header.h = 150;
svg_dsc.data_size = sizeof(svg_data) - 1;
svg_dsc.data = (const uint8_t *) svg_data;
lv_obj_t * svg = lv_image_create(lv_screen_active());
lv_image_set_src(svg, &svg_dsc);
}
#else
void lv_example_svg_1(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "SVG is not enabled");
lv_obj_center(label);
}
#endif
#endif
Load and render SVG data from a file¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_SVG && LV_USE_VECTOR_GRAPHIC
/**
* Load an SVG from a file
*/
void lv_example_svg_2(void)
{
lv_obj_t * svg = lv_image_create(lv_screen_active());
lv_image_set_src(svg, "A:lvgl/examples/assets/circle.svg");
}
#else
void lv_example_svg_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "SVG is not enabled");
lv_obj_center(label);
}
#endif
#endif
Load and render SVG data in a draw event¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_SVG && LV_USE_VECTOR_GRAPHIC
/**
* Draw SVG data in a draw event
*/
static void event_cb(lv_event_t * e)
{
static const char svg_data[] = "<svg width=\"12cm\" height=\"4cm\" viewBox=\"0 0 1200 400\">"
"<circle cx=\"600\" cy=\"200\" r=\"100\" fill=\"red\" stroke=\"blue\" stroke-width=\"10\"/></svg>";
lv_layer_t * layer = lv_event_get_layer(e);
lv_svg_node_t * svg = lv_svg_load_data(svg_data, sizeof(svg_data) / sizeof(char));
lv_draw_svg(layer, svg);
lv_svg_node_delete(svg);
}
void lv_example_svg_3(void)
{
lv_obj_add_event_cb(lv_screen_active(), event_cb, LV_EVENT_DRAW_MAIN, NULL);
}
#else
void lv_example_svg_3(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "SVG is not enabled");
lv_obj_center(label);
}
#endif
#endif
Tiny TTF¶
Open a font with Tiny TTF from data array¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TINY_TTF && LV_BUILD_EXAMPLES
/**
* Load a font with Tiny_TTF
*/
void lv_example_tiny_ttf_1(void)
{
extern const uint8_t ubuntu_font[];
extern const int ubuntu_font_size;
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_font_t * font = lv_tiny_ttf_create_data(ubuntu_font, ubuntu_font_size, 30);
lv_style_set_text_font(&style, font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
/*Create a label with the new style*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_add_style(label, &style, 0);
lv_label_set_text(label, "Hello world\nI'm a font\ncreated\nwith Tiny TTF");
lv_obj_center(label);
}
#endif
Load a font with Tiny_TTF from file¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_TINY_TTF && LV_TINY_TTF_FILE_SUPPORT
/**
* Load a font with Tiny_TTF from file
*/
void lv_example_tiny_ttf_2(void)
{
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_font_t * font = lv_tiny_ttf_create_file("A:lvgl/examples/libs/tiny_ttf/Ubuntu-Medium.ttf", 30);
lv_style_set_text_font(&style, font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
/*Create a label with the new style*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_add_style(label, &style, 0);
lv_label_set_text(label, "Hello world\nI'm a font\ncreated\nwith Tiny TTF");
lv_obj_center(label);
}
#else
void lv_example_tiny_ttf_2(void)
{
/*TODO
*fallback for online examples*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "TinyTTF can't load files in the browser");
lv_obj_center(label);
}
#endif /*LV_USE_TINY_TTF && LV_TINY_TTF_FILE_SUPPORT*/
#endif /*LV_BUILD_EXAMPLES*/
Change font size with Tiny_TTF¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TINY_TTF && LV_BUILD_EXAMPLES && LV_USE_OBSERVER
static void font_size_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static lv_subject_t subject_font;
/**
* Change font size with Tiny_TTF
*/
void lv_example_tiny_ttf_3(void)
{
extern const uint8_t ubuntu_font[];
extern const int ubuntu_font_size;
lv_subject_init_int(&subject_font, 25);
/*Create style with the new font*/
static lv_style_t style;
lv_style_init(&style);
lv_font_t * font = lv_tiny_ttf_create_data(ubuntu_font, ubuntu_font_size, 25);
lv_style_set_text_font(&style, font);
lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_slider_set_range(slider, 5, 50);
lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, 0, -50);
lv_slider_bind_value(slider, &subject_font);
lv_obj_t * slider_label = lv_label_create(lv_screen_active());
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
lv_label_bind_text(slider_label, &subject_font, "%d");
/*Create a label with the new style*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_add_style(label, &style, 0);
lv_obj_set_size(label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_label_set_text(label, "Hello world!");
lv_obj_center(label);
lv_subject_add_observer(&subject_font, font_size_observer_cb, &style);
}
static void font_size_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
lv_style_t * style = (lv_style_t *) lv_observer_get_user_data(observer);
lv_style_value_t v;
lv_style_get_prop(style, LV_STYLE_TEXT_FONT, &v);
lv_font_t * font = (lv_font_t *) v.ptr;
int32_t size = lv_subject_get_int(subject);
lv_tiny_ttf_set_size(font, size);
lv_obj_report_style_change(style);
}
#endif
Tiny JPEG Decompressor (TJpgDec)¶
Load a JPG image¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TJPGD && LV_BUILD_EXAMPLES
/**
* Load a JPG image
*/
void lv_example_tjpgd_1(void)
{
lv_obj_t * wp;
wp = lv_image_create(lv_screen_active());
/* Assuming a File system is attached to letter 'A'
* E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
lv_image_set_src(wp, "A:test_img_lvgl_logo.jpg");
lv_obj_center(wp);
}
#endif
Others¶
File Explorer¶
Simple File Explorer¶
C code
View on GitHub
#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_USE_FILE_EXPLORER && (LV_USE_FS_STDIO || LV_USE_FS_POSIX || LV_USE_FS_WIN32 || LV_USE_FS_FATFS) && LV_BUILD_EXAMPLES
#include <stdlib.h>
#include <string.h>
static void file_explorer_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
const char * cur_path = lv_file_explorer_get_current_path(obj);
const char * sel_fn = lv_file_explorer_get_selected_file_name(obj);
LV_LOG_USER("%s%s", cur_path, sel_fn);
}
}
void lv_example_file_explorer_1(void)
{
lv_obj_t * file_explorer = lv_file_explorer_create(lv_screen_active());
lv_file_explorer_set_sort(file_explorer, LV_EXPLORER_SORT_KIND);
#if LV_USE_FS_WIN32
/* Note to Windows users: the initial "C:" on these paths corresponds to
* the value of `LV_FS_WIN32_LETTER` in `lv_conf.h`, and should not be
* confused with the Windows/DOS drive letter. It is an identifier that
* is used to enable LVGL to look up the appropriate driver from a list of
* registered file-system drivers. `lv_fs_win32_init()` happens to use the
* identifier letter 'C' so "C:" is the driver-identifier-prefix used here.
* The "C:" following that is indeed the Windows/DOS drive letter and is
* part of the actual path that gets passed to the OS-level functions.
*
* See https://docs.lvgl.io/master/main-modules/fs.html for details.
* File Explorer uses `lv_fs` internally, thus the required prefix in path strings.
*/
lv_file_explorer_open_dir(file_explorer, "C:C:/");
#if LV_FILE_EXPLORER_QUICK_ACCESS
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_HOME_DIR, "C:C:/Users/Public/Desktop");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_VIDEO_DIR, "C:C:/Users/Public/Videos");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_PICTURES_DIR, "C:C:/Users/Public/Pictures");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_MUSIC_DIR, "C:C:/Users/Public/Music");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_DOCS_DIR, "C:C:/Users/Public/Documents");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_FS_DIR, "C:C:/");
#endif
#else
/* linux */
lv_file_explorer_open_dir(file_explorer, "A:/");
#if LV_FILE_EXPLORER_QUICK_ACCESS
const char * envvar = "HOME";
char home_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(home_dir, "A:");
/* get the user's home directory from the HOME environment variable*/
strcat(home_dir, getenv(envvar));
LV_LOG_USER("home_dir: %s\n", home_dir);
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_HOME_DIR, home_dir);
char video_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(video_dir, home_dir);
strcat(video_dir, "/Videos");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_VIDEO_DIR, video_dir);
char picture_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(picture_dir, home_dir);
strcat(picture_dir, "/Pictures");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_PICTURES_DIR, picture_dir);
char music_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(music_dir, home_dir);
strcat(music_dir, "/Music");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_MUSIC_DIR, music_dir);
char document_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(document_dir, home_dir);
strcat(document_dir, "/Documents");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_DOCS_DIR, document_dir);
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_FS_DIR, "A:/");
#endif
#endif
lv_obj_add_event_cb(file_explorer, file_explorer_event_handler, LV_EVENT_ALL, NULL);
}
#endif
Control File Explorer¶
C code
View on GitHub
#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_USE_DROPDOWN && LV_USE_FILE_EXPLORER && (LV_USE_FS_STDIO || LV_USE_FS_POSIX || LV_USE_FS_WIN32 || LV_USE_FS_FATFS) && LV_BUILD_EXAMPLES
#include <stdlib.h>
#include <string.h>
static void file_explorer_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
const char * cur_path = lv_file_explorer_get_current_path(obj);
const char * sel_fn = lv_file_explorer_get_selected_file_name(obj);
LV_LOG_USER("%s%s", cur_path, sel_fn);
}
}
#if LV_FILE_EXPLORER_QUICK_ACCESS
static void btn_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * btn = lv_event_get_target_obj(e);
lv_obj_t * file_explorer = (lv_obj_t *) lv_event_get_user_data(e);
if(code == LV_EVENT_VALUE_CHANGED) {
if(lv_obj_has_state(btn, LV_STATE_CHECKED))
lv_obj_add_flag(file_explorer, LV_OBJ_FLAG_HIDDEN);
else
lv_obj_remove_flag(file_explorer, LV_OBJ_FLAG_HIDDEN);
}
}
static void dd_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * dd = lv_event_get_target_obj(e);
lv_obj_t * fe_quick_access_obj = (lv_obj_t *) lv_event_get_user_data(e);
if(code == LV_EVENT_VALUE_CHANGED) {
char buf[32];
lv_dropdown_get_selected_str(dd, buf, sizeof(buf));
if(strcmp(buf, "NONE") == 0) {
lv_file_explorer_set_sort(fe_quick_access_obj, LV_EXPLORER_SORT_NONE);
}
else if(strcmp(buf, "KIND") == 0) {
lv_file_explorer_set_sort(fe_quick_access_obj, LV_EXPLORER_SORT_KIND);
}
}
}
#endif
void lv_example_file_explorer_2(void)
{
lv_obj_t * file_explorer = lv_file_explorer_create(lv_screen_active());
#if LV_USE_FS_WIN32
/* Note to Windows users: the initial "C:" on these paths corresponds to
* the value of `LV_FS_WIN32_LETTER` in `lv_conf.h`, and should not be
* confused with the Windows/DOS drive letter. It is an identifier that
* is used to enable LVGL to look up the appropriate driver from a list of
* registered file-system drivers. `lv_fs_win32_init()` happens to use the
* identifier letter 'C' so "C:" is the driver-identifier-prefix used here.
* The "C:" following that is indeed the Windows/DOS drive letter and is
* part of the actual path that gets passed to the OS-level functions.
*
* See https://docs.lvgl.io/master/main-modules/fs.html for details.
* File Explorer uses `lv_fs` internally, thus the required prefix in path strings.
*/
lv_file_explorer_open_dir(file_explorer, "C:C:/");
#if LV_FILE_EXPLORER_QUICK_ACCESS
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_HOME_DIR, "C:C:/Users/Public/Desktop");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_VIDEO_DIR, "C:C:/Users/Public/Videos");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_PICTURES_DIR, "C:C:/Users/Public/Pictures");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_MUSIC_DIR, "C:C:/Users/Public/Music");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_DOCS_DIR, "C:C:/Users/Public/Documents");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_FS_DIR, "C:C:/");
#endif
#else
/* linux */
lv_file_explorer_open_dir(file_explorer, "A:/");
#if LV_FILE_EXPLORER_QUICK_ACCESS
const char * envvar = "HOME";
char home_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(home_dir, "A:");
/* get the user's home directory from the HOME environment variable*/
strcat(home_dir, getenv(envvar));
LV_LOG_USER("home_dir: %s\n", home_dir);
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_HOME_DIR, home_dir);
char video_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(video_dir, home_dir);
strcat(video_dir, "/Videos");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_VIDEO_DIR, video_dir);
char picture_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(picture_dir, home_dir);
strcat(picture_dir, "/Pictures");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_PICTURES_DIR, picture_dir);
char music_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(music_dir, home_dir);
strcat(music_dir, "/Music");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_MUSIC_DIR, music_dir);
char document_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(document_dir, home_dir);
strcat(document_dir, "/Documents");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_DOCS_DIR, document_dir);
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_FS_DIR, "A:/");
#endif
#endif
lv_obj_add_event_cb(file_explorer, file_explorer_event_handler, LV_EVENT_ALL, NULL);
#if LV_FILE_EXPLORER_QUICK_ACCESS
/*Quick access status control button*/
lv_obj_t * fe_quick_access_obj = lv_file_explorer_get_quick_access_area(file_explorer);
lv_obj_t * fe_header_obj = lv_file_explorer_get_header(file_explorer);
lv_obj_t * btn = lv_button_create(fe_header_obj);
lv_obj_set_style_radius(btn, 2, 0);
lv_obj_set_style_pad_all(btn, 4, 0);
lv_obj_align(btn, LV_ALIGN_LEFT_MID, 0, 0);
lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, LV_SYMBOL_LIST);
lv_obj_center(label);
lv_obj_add_event_cb(btn, btn_event_handler, LV_EVENT_VALUE_CHANGED, fe_quick_access_obj);
/*Sort control*/
static const char * opts = "NONE\n"
"KIND";
lv_obj_t * dd = lv_dropdown_create(fe_header_obj);
lv_obj_set_style_radius(dd, 4, 0);
lv_obj_set_style_pad_all(dd, 0, 0);
lv_obj_set_size(dd, LV_PCT(30), LV_SIZE_CONTENT);
lv_dropdown_set_options_static(dd, opts);
lv_obj_align(dd, LV_ALIGN_RIGHT_MID, 0, 0);
lv_obj_add_event_cb(dd, dd_event_handler, LV_EVENT_VALUE_CHANGED, file_explorer);
#endif
}
#endif
Custom sort¶
C code
View on GitHub
#include "../../lv_examples.h"
#if LV_USE_TABLE && LV_USE_FILE_EXPLORER && (LV_USE_FS_STDIO || LV_USE_FS_POSIX || LV_USE_FS_WIN32 || LV_USE_FS_FATFS) && LV_BUILD_EXAMPLES
#include <stdlib.h>
#include <string.h>
static void exch_table_item(lv_obj_t * tb, int16_t i, int16_t j)
{
const char * tmp;
tmp = lv_table_get_cell_value(tb, i, 0);
lv_table_set_cell_value(tb, 0, 2, tmp);
lv_table_set_cell_value(tb, i, 0, lv_table_get_cell_value(tb, j, 0));
lv_table_set_cell_value(tb, j, 0, lv_table_get_cell_value(tb, 0, 2));
tmp = lv_table_get_cell_value(tb, i, 1);
lv_table_set_cell_value(tb, 0, 2, tmp);
lv_table_set_cell_value(tb, i, 1, lv_table_get_cell_value(tb, j, 1));
lv_table_set_cell_value(tb, j, 1, lv_table_get_cell_value(tb, 0, 2));
}
/*Quick sort 3 way*/
static void sort_by_file_kind(lv_obj_t * tb, int16_t lo, int16_t hi)
{
if(lo >= hi) return;
int16_t lt = lo;
int16_t i = lo + 1;
int16_t gt = hi;
const char * v = lv_table_get_cell_value(tb, lo, 1);
while(i <= gt) {
if(strcmp(lv_table_get_cell_value(tb, i, 1), v) < 0)
exch_table_item(tb, lt++, i++);
else if(strcmp(lv_table_get_cell_value(tb, i, 1), v) > 0)
exch_table_item(tb, i, gt--);
else
i++;
}
sort_by_file_kind(tb, lo, lt - 1);
sort_by_file_kind(tb, gt + 1, hi);
}
static void file_explorer_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target_obj(e);
if(code == LV_EVENT_VALUE_CHANGED) {
const char * cur_path = lv_file_explorer_get_current_path(obj);
const char * sel_fn = lv_file_explorer_get_selected_file_name(obj);
LV_LOG_USER("%s%s", cur_path, sel_fn);
}
else if(code == LV_EVENT_READY) {
lv_obj_t * tb = lv_file_explorer_get_file_table(obj);
uint16_t sum = lv_table_get_row_count(tb);
sort_by_file_kind(tb, 0, (sum - 1));
}
}
void lv_example_file_explorer_3(void)
{
lv_obj_t * file_explorer = lv_file_explorer_create(lv_screen_active());
/*Before custom sort, please set the default sorting to NONE. The default is NONE.*/
lv_file_explorer_set_sort(file_explorer, LV_EXPLORER_SORT_NONE);
#if LV_USE_FS_WIN32
/* Note to Windows users: the initial "C:" on these paths corresponds to
* the value of `LV_FS_WIN32_LETTER` in `lv_conf.h`, and should not be
* confused with the Windows/DOS drive letter. It is an identifier that
* is used to enable LVGL to look up the appropriate driver from a list of
* registered file-system drivers. `lv_fs_win32_init()` happens to use the
* identifier letter 'C' so "C:" is the driver-identifier-prefix used here.
* The "C:" following that is indeed the Windows/DOS drive letter and is
* part of the actual path that gets passed to the OS-level functions.
*
* See https://docs.lvgl.io/master/main-modules/fs.html for details.
* File Explorer uses `lv_fs` internally, thus the required prefix in path strings.
*/
lv_file_explorer_open_dir(file_explorer, "C:C:/");
#if LV_FILE_EXPLORER_QUICK_ACCESS
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_HOME_DIR, "C:C:/Users/Public/Desktop");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_VIDEO_DIR, "C:C:/Users/Public/Videos");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_PICTURES_DIR, "C:C:/Users/Public/Pictures");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_MUSIC_DIR, "C:C:/Users/Public/Music");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_DOCS_DIR, "C:C:/Users/Public/Documents");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_FS_DIR, "C:C:/");
#endif
#else
/* linux */
lv_file_explorer_open_dir(file_explorer, "A:/");
#if LV_FILE_EXPLORER_QUICK_ACCESS
const char * envvar = "HOME";
char home_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(home_dir, "A:");
/* get the user's home directory from the HOME environment variable*/
strcat(home_dir, getenv(envvar));
LV_LOG_USER("home_dir: %s\n", home_dir);
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_HOME_DIR, home_dir);
char video_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(video_dir, home_dir);
strcat(video_dir, "/Videos");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_VIDEO_DIR, video_dir);
char picture_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(picture_dir, home_dir);
strcat(picture_dir, "/Pictures");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_PICTURES_DIR, picture_dir);
char music_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(music_dir, home_dir);
strcat(music_dir, "/Music");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_MUSIC_DIR, music_dir);
char document_dir[LV_FS_MAX_PATH_LENGTH];
strcpy(document_dir, home_dir);
strcat(document_dir, "/Documents");
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_DOCS_DIR, document_dir);
lv_file_explorer_set_quick_access_path(file_explorer, LV_EXPLORER_FS_DIR, "A:/");
#endif
#endif
lv_obj_add_event_cb(file_explorer, file_explorer_event_handler, LV_EVENT_ALL, NULL);
}
#endif
Font Manager¶
Create FreeType Font¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FONT_MANAGER && LV_USE_FREETYPE && LV_BUILD_EXAMPLES
#if LV_FREETYPE_USE_LVGL_PORT
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
static lv_font_manager_t * g_font_manager = NULL;
void lv_example_font_manager_1(void)
{
/* Create font manager, with 8 fonts recycling buffers */
g_font_manager = lv_font_manager_create(8);
/* Add font path mapping to font manager */
lv_font_manager_add_src_static(g_font_manager,
"Lato-Regular",
PATH_PREFIX "lvgl/examples/libs/freetype/Lato-Regular.ttf",
&lv_freetype_font_class);
/* Create font from font manager */
lv_font_t * font = lv_font_manager_create_font(g_font_manager,
"Lato-Regular",
LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
24,
LV_FREETYPE_FONT_STYLE_NORMAL,
LV_FONT_KERNING_NONE);
if(!font) {
LV_LOG_ERROR("Could not create font");
return;
}
/* Create label with the font */
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(label, font, 0);
lv_label_set_text(label, "Hello Font Manager!");
lv_obj_center(label);
}
#else
void lv_example_font_manager_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Font Manager or FreeType is not enabled");
lv_obj_center(label);
}
#endif
Create Font Family¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FONT_MANAGER && LV_BUILD_EXAMPLES
#if defined(LV_FREETYPE_USE_LVGL_PORT) && LV_FREETYPE_USE_LVGL_PORT
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
static lv_font_manager_t * g_font_manager = NULL;
void lv_example_font_manager_2(void)
{
/* Create font manager, with 8 fonts recycling buffers */
g_font_manager = lv_font_manager_create(8);
#if LV_FONT_MONTSERRAT_14 && LV_FONT_MONTSERRAT_32
/* Register built-in font sources */
static lv_builtin_font_src_t builtin_font_src[3] = { 0 };
builtin_font_src[0].font_p = &lv_font_montserrat_14;
builtin_font_src[0].size = 14;
builtin_font_src[1].font_p = &lv_font_montserrat_32;
builtin_font_src[1].size = 32;
/* IMPORTANT! Marking the end of the array */
builtin_font_src[2].font_p = NULL;
builtin_font_src[2].size = 0;
lv_font_manager_add_src_static(g_font_manager,
"Montserrat",
builtin_font_src,
&lv_builtin_font_class);
#endif
#if LV_USE_FREETYPE
/* Register FreeType font source */
lv_font_manager_add_src_static(g_font_manager,
"NotoColorEmoji",
PATH_PREFIX "lvgl/examples/libs/freetype/NotoColorEmoji-32.subset.ttf",
&lv_freetype_font_class);
#endif
#if LV_USE_TINY_TTF && LV_TINY_TTF_FILE_SUPPORT
/* Register TinyTTF font source */
static const lv_tiny_ttf_font_src_t tiny_ttf_font_src = {
.path = "A:lvgl/examples/libs/tiny_ttf/Ubuntu-Medium.ttf",
.data = NULL,
.data_size = 0,
.cache_size = 0,
};
lv_font_manager_add_src_static(g_font_manager,
"Ubuntu-Medium",
&tiny_ttf_font_src,
&lv_tiny_ttf_font_class);
#endif
/* Create font from font manager */
lv_font_t * font = lv_font_manager_create_font(g_font_manager,
"Ubuntu-Medium,NotoColorEmoji,Montserrat",
LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
32,
LV_FREETYPE_FONT_STYLE_NORMAL,
LV_FONT_KERNING_NONE);
if(!font) {
LV_LOG_ERROR("Could not create font");
return;
}
/* Create label with the font */
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(label, font, 0);
lv_label_set_text(label, "Hello Font Manager! 😀 " LV_SYMBOL_OK);
lv_obj_center(label);
}
#else
void lv_example_font_manager_2(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Font Manager is not enabled");
lv_obj_center(label);
}
#endif
Create Custom Image Font¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_FONT_MANAGER && LV_USE_FREETYPE && LV_USE_IMGFONT && LV_BUILD_EXAMPLES
#if LV_FREETYPE_USE_LVGL_PORT
#define PATH_PREFIX "A:"
#else
#define PATH_PREFIX "./"
#endif
typedef struct {
uint16_t match_size_min;
uint16_t match_size_max;
lv_imgfont_get_path_cb_t get_path_cb;
} imgfont_src_t;
static lv_font_manager_t * g_font_manager = NULL;
static const void * get_imgfont_path(const lv_font_t * font, uint32_t unicode, uint32_t unicode_next,
int32_t * offset_y, void * user_data)
{
LV_UNUSED(font);
LV_UNUSED(unicode_next);
LV_UNUSED(offset_y);
LV_UNUSED(user_data);
LV_IMAGE_DECLARE(emoji_F617);
if(unicode == 0xF617) {
return &emoji_F617;
}
return NULL;
}
static lv_font_t * imgfont_create_cb(const lv_font_info_t * info, const void * src)
{
const imgfont_src_t * imgfont_src = (imgfont_src_t *) src;
if(info->size < imgfont_src->match_size_min
|| info->size > imgfont_src->match_size_max) {
return NULL;
}
return lv_imgfont_create(info->size, imgfont_src->get_path_cb, NULL);
}
static void imgfont_delete_cb(lv_font_t * font)
{
lv_imgfont_destroy(font);
}
static void * imgfont_dup_src_cb(const void * src)
{
imgfont_src_t * imgfont_src = (imgfont_src_t *) lv_malloc(sizeof(imgfont_src_t));
LV_ASSERT_MALLOC(imgfont_src);
lv_memcpy(imgfont_src, src, sizeof(imgfont_src_t));
return imgfont_src;
}
static void imgfont_free_src_cb(void * src)
{
lv_free(src);
}
static const lv_font_class_t imgfont_class = {
.create_cb = imgfont_create_cb,
.delete_cb = imgfont_delete_cb,
.dup_src_cb = imgfont_dup_src_cb,
.free_src_cb = imgfont_free_src_cb,
};
void lv_example_font_manager_3(void)
{
/* Create font manager, with 8 fonts recycling buffers */
g_font_manager = lv_font_manager_create(8);
/* Add font path mapping to font manager */
lv_font_manager_add_src_static(g_font_manager,
"Lato-Regular",
PATH_PREFIX "lvgl/examples/libs/freetype/Lato-Regular.ttf",
&lv_freetype_font_class);
/* Add custom imgfont source to font manager */
static const imgfont_src_t imgfont_src = {
.match_size_min = 70,
.match_size_max = 80,
.get_path_cb = get_imgfont_path,
};
lv_font_manager_add_src_static(g_font_manager,
"Emoji",
&imgfont_src,
&imgfont_class);
/* Create font from font manager */
lv_font_t * font = lv_font_manager_create_font(g_font_manager,
"Lato-Regular,Emoji",
LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
75,
LV_FREETYPE_FONT_STYLE_NORMAL,
LV_FONT_KERNING_NONE);
if(!font) {
LV_LOG_ERROR("Could not create font");
return;
}
/* Create label with the font */
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(label, font, 0);
lv_label_set_text(label, "Quiet\uF617~");
lv_obj_center(label);
}
#else
void lv_example_font_manager_3(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Font Manager or Freetype or Imgfont is not enabled");
lv_obj_center(label);
}
#endif
Fragment Manager¶
Basic fragment usage¶
C code
View on GitHub/**
* @file lv_example_fragment_1.c
* @brief Basic usage of obj fragment
*/
#include "../../lv_examples.h"
#if LV_USE_FRAGMENT && LV_BUILD_EXAMPLES
static void sample_fragment_ctor(lv_fragment_t * self, void * args);
static lv_obj_t * sample_fragment_create_obj(lv_fragment_t * self, lv_obj_t * parent);
static void sample_container_delete(lv_event_t * e);
static lv_obj_t * root = NULL;
struct sample_fragment_t {
lv_fragment_t base;
const char * name;
};
static const lv_fragment_class_t sample_cls = {
.constructor_cb = sample_fragment_ctor,
.create_obj_cb = sample_fragment_create_obj,
.instance_size = sizeof(struct sample_fragment_t),
};
void lv_example_fragment_1(void)
{
root = lv_obj_create(lv_screen_active());
lv_obj_set_size(root, LV_PCT(100), LV_PCT(100));
lv_fragment_manager_t * manager = lv_fragment_manager_create(NULL);
/* Clean up the fragment manager before objects in containers got deleted */
lv_obj_add_event_cb(root, sample_container_delete, LV_EVENT_DELETE, manager);
lv_fragment_t * fragment = lv_fragment_create(&sample_cls, (void *) "Fragment");
lv_fragment_manager_replace(manager, fragment, &root);
}
static void sample_fragment_ctor(lv_fragment_t * self, void * args)
{
((struct sample_fragment_t *) self)->name = (const char *) args;
}
static lv_obj_t * sample_fragment_create_obj(lv_fragment_t * self, lv_obj_t * parent)
{
lv_obj_t * label = lv_label_create(parent);
lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);
lv_label_set_text_fmt(label, "Hello, %s!", ((struct sample_fragment_t *) self)->name);
return label;
}
static void sample_container_delete(lv_event_t * e)
{
lv_fragment_manager_t * manager = (lv_fragment_manager_t *) lv_event_get_user_data(e);
lv_fragment_manager_delete(manager);
}
#endif
Gestures¶
Pinyin IME¶
Pinyin IME 26 key input¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_USE_TEXTAREA && LV_FONT_SOURCE_HAN_SANS_SC_16_CJK && LV_USE_IME_PINYIN && LV_BUILD_EXAMPLES
static void ta_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * ta = lv_event_get_target_obj(e);
lv_obj_t * kb = (lv_obj_t *) lv_event_get_user_data(e);
if(code == LV_EVENT_FOCUSED) {
if(lv_indev_get_type(lv_indev_active()) != LV_INDEV_TYPE_KEYPAD) {
lv_keyboard_set_textarea(kb, ta);
lv_obj_remove_flag(kb, LV_OBJ_FLAG_HIDDEN);
}
}
else if(code == LV_EVENT_CANCEL) {
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_obj_remove_state(ta, LV_STATE_FOCUSED);
lv_indev_reset(NULL, ta); /*To forget the last clicked object to make it focusable again*/
}
}
void lv_example_ime_pinyin_1(void)
{
lv_obj_t * pinyin_ime = lv_ime_pinyin_create(lv_screen_active());
lv_obj_set_style_text_font(pinyin_ime, &lv_font_source_han_sans_sc_16_cjk, 0);
//lv_ime_pinyin_set_dict(pinyin_ime, your_dict); // Use a custom dictionary. If it is not set, the built-in dictionary will be used.
/* ta1 */
lv_obj_t * ta1 = lv_textarea_create(lv_screen_active());
lv_textarea_set_one_line(ta1, true);
lv_obj_set_style_text_font(ta1, &lv_font_source_han_sans_sc_16_cjk, 0);
lv_obj_align(ta1, LV_ALIGN_TOP_LEFT, 0, 0);
/*Create a keyboard and add it to ime_pinyin*/
lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
lv_ime_pinyin_set_keyboard(pinyin_ime, kb);
lv_keyboard_set_textarea(kb, ta1);
lv_obj_add_event_cb(ta1, ta_event_cb, LV_EVENT_ALL, kb);
/*Get the cand_panel, and adjust its size and position*/
lv_obj_t * cand_panel = lv_ime_pinyin_get_cand_panel(pinyin_ime);
lv_obj_set_size(cand_panel, LV_PCT(100), LV_PCT(10));
lv_obj_align_to(cand_panel, kb, LV_ALIGN_OUT_TOP_MID, 0, 0);
/*Try using ime_pinyin to output the Chinese below in the ta1 above*/
lv_obj_t * cz_label = lv_label_create(lv_screen_active());
lv_label_set_text(cz_label,
"嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
lv_obj_set_style_text_font(cz_label, &lv_font_source_han_sans_sc_16_cjk, 0);
lv_obj_set_width(cz_label, 310);
lv_obj_align_to(cz_label, ta1, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
}
#endif
Pinyin IME 9 key input¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_USE_TEXTAREA && LV_FONT_SOURCE_HAN_SANS_SC_16_CJK && LV_USE_IME_PINYIN && LV_IME_PINYIN_USE_K9_MODE && LV_BUILD_EXAMPLES
static void ta_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * ta = lv_event_get_target_obj(e);
lv_obj_t * kb = (lv_obj_t *) lv_event_get_user_data(e);
if(code == LV_EVENT_FOCUSED) {
if(lv_indev_get_type(lv_indev_active()) != LV_INDEV_TYPE_KEYPAD) {
lv_keyboard_set_textarea(kb, ta);
lv_obj_remove_flag(kb, LV_OBJ_FLAG_HIDDEN);
}
}
else if(code == LV_EVENT_READY) {
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_obj_remove_state(ta, LV_STATE_FOCUSED);
lv_indev_reset(NULL, ta); /*To forget the last clicked object to make it focusable again*/
}
}
void lv_example_ime_pinyin_2(void)
{
lv_obj_t * pinyin_ime = lv_ime_pinyin_create(lv_screen_active());
lv_obj_set_style_text_font(pinyin_ime, &lv_font_source_han_sans_sc_16_cjk, 0);
//lv_ime_pinyin_set_dict(pinyin_ime, your_dict); // Use a custom dictionary. If it is not set, the built-in dictionary will be used.
/* ta1 */
lv_obj_t * ta1 = lv_textarea_create(lv_screen_active());
lv_textarea_set_one_line(ta1, true);
lv_obj_set_style_text_font(ta1, &lv_font_source_han_sans_sc_16_cjk, 0);
lv_obj_align(ta1, LV_ALIGN_TOP_LEFT, 0, 0);
/*Create a keyboard and add it to ime_pinyin*/
lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
lv_keyboard_set_textarea(kb, ta1);
lv_ime_pinyin_set_keyboard(pinyin_ime, kb);
lv_ime_pinyin_set_mode(pinyin_ime,
LV_IME_PINYIN_MODE_K9); // Set to 9-key input mode. Default: 26-key input(k26) mode.
lv_obj_add_event_cb(ta1, ta_event_cb, LV_EVENT_ALL, kb);
/*Get the cand_panel, and adjust its size and position*/
lv_obj_t * cand_panel = lv_ime_pinyin_get_cand_panel(pinyin_ime);
lv_obj_set_size(cand_panel, LV_PCT(100), LV_PCT(10));
lv_obj_align_to(cand_panel, kb, LV_ALIGN_OUT_TOP_MID, 0, 0);
/*Try using ime_pinyin to output the Chinese below in the ta1 above*/
lv_obj_t * cz_label = lv_label_create(lv_screen_active());
lv_label_set_text(cz_label,
"嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
lv_obj_set_style_text_font(cz_label, &lv_font_source_han_sans_sc_16_cjk, 0);
lv_obj_set_width(cz_label, 310);
lv_obj_align_to(cz_label, ta1, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
}
#endif
Image Font¶
Use emojis in a text.¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_IMGFONT
static const void * get_imgfont_path(const lv_font_t * font, uint32_t unicode, uint32_t unicode_next,
int32_t * offset_y, void * user_data)
{
LV_UNUSED(font);
LV_UNUSED(unicode_next);
LV_UNUSED(offset_y);
LV_UNUSED(user_data);
LV_IMAGE_DECLARE(emoji_F617);
if(unicode < 0xF000) return NULL;
if(unicode == 0xF617) {
return &emoji_F617;
}
else if(unicode == 0xF600) {
#if LV_USE_FFMPEG
return "lvgl/examples/assets/emoji/F600.png";
#else
return "A:lvgl/examples/assets/emoji/F600.png";
#endif
}
return NULL;
}
/**
* draw img in label or span obj
*/
void lv_example_imgfont_1(void)
{
lv_font_t * imgfont = lv_imgfont_create(80, get_imgfont_path, NULL);
if(imgfont == NULL) {
LV_LOG_ERROR("imgfont init error");
return;
}
imgfont->fallback = LV_FONT_DEFAULT;
lv_obj_t * label1 = lv_label_create(lv_screen_active());
lv_label_set_text(label1, "12\uF600\uF617AB");
lv_obj_set_style_text_font(label1, imgfont, LV_PART_MAIN);
lv_obj_center(label1);
}
#else
void lv_example_imgfont_1(void)
{
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "imgfont is not installed");
lv_obj_center(label);
}
#endif
#endif
Monkey¶
Touchpad monkey example¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_MONKEY && LV_BUILD_EXAMPLES
void lv_example_monkey_1(void)
{
/*Create pointer monkey test*/
lv_monkey_config_t config;
lv_monkey_config_init(&config);
config.type = LV_INDEV_TYPE_POINTER;
config.period_range.min = 10;
config.period_range.max = 100;
lv_monkey_t * monkey = lv_monkey_create(&config);
/*Start monkey test*/
lv_monkey_set_enable(monkey, true);
}
#endif
Encoder monkey example¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_MONKEY && LV_BUILD_EXAMPLES
void lv_example_monkey_2(void)
{
/*Create encoder monkey test*/
lv_monkey_config_t config;
lv_monkey_config_init(&config);
config.type = LV_INDEV_TYPE_ENCODER;
config.period_range.min = 50;
config.period_range.max = 500;
config.input_range.min = -5;
config.input_range.max = 5;
lv_monkey_t * monkey = lv_monkey_create(&config);
/*Set the default group*/
lv_group_t * group = lv_group_create();
lv_indev_set_group(lv_monkey_get_indev(monkey), group);
lv_group_set_default(group);
/*Start monkey test*/
lv_monkey_set_enable(monkey, true);
}
#endif
Observer¶
Bind a slider's value to a label¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_OBSERVER && LV_USE_SLIDER && LV_USE_LABEL && LV_BUILD_EXAMPLES
static lv_subject_t temperature_subject;
/**
* A slider sends a message on value change and a label display's that value
*/
void lv_example_observer_1(void)
{
lv_subject_init_int(&temperature_subject, 28);
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_slider_bind_value(slider, &temperature_subject);
/*Create a label below the slider*/
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_align(label, LV_ALIGN_CENTER, 0, 30);
lv_label_bind_text(label, &temperature_subject, "%d °C");
}
#endif
Handling login and its states¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_OBSERVER && LV_USE_SLIDER && LV_USE_LABEL && LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
/*This the only interface between the UI and the application*/
static lv_subject_t engine_subject;
static void app_init(void);
static void ui_init(void);
/**
* Simple PIN login screen to start an engine.
* The only interface between the UI and the application is a single "subject".
*/
void lv_example_observer_2(void)
{
lv_subject_init_int(&engine_subject, 0);
app_init();
ui_init();
}
/*--------------------------------------------------
* APPLICATION
*
* This part contains a demo application logic.
* It doesn't know anything about the internals of the UI
* and uses any the `engine_subject` as an interface.
* -------------------------------------------------*/
static void engine_state_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
LV_UNUSED(observer);
int32_t v = lv_subject_get_int(subject);
LV_UNUSED(v);
/*In a real application set/clear a pin here*/
LV_LOG_USER("Engine state: %" LV_PRId32, v);
}
static void app_init(void)
{
lv_subject_add_observer(&engine_subject, engine_state_observer_cb, NULL);
}
/*--------------------------------------------------
* USER INTERFACE
*
* This part contains only UI related code and data.
* In a project it would a separate file and the
* application couldn't see its internals
* -------------------------------------------------*/
typedef enum {
LOGGED_OUT,
LOGGED_IN,
AUTH_FAILED,
} auth_state_t;
static lv_subject_t auth_state_subject;
static void textarea_event_cb(lv_event_t * e)
{
lv_obj_t * ta = lv_event_get_target_obj(e);
if(lv_strcmp(lv_textarea_get_text(ta), "hello") == 0) {
lv_subject_set_int(&auth_state_subject, LOGGED_IN);
}
else {
lv_subject_set_int(&auth_state_subject, AUTH_FAILED);
}
}
static void info_label_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
lv_obj_t * label = (lv_obj_t *) lv_observer_get_target(observer);
switch(lv_subject_get_int(subject)) {
case LOGGED_IN:
lv_label_set_text(label, "Login successful");
break;
case LOGGED_OUT:
lv_label_set_text(label, "Logged out");
break;
case AUTH_FAILED:
lv_label_set_text(label, "Login failed");
break;
}
}
static void log_out_click_event_cb(lv_event_t * e)
{
LV_UNUSED(e);
lv_subject_set_int(&auth_state_subject, LOGGED_OUT);
}
static void ui_init(void)
{
lv_subject_init_int(&auth_state_subject, LOGGED_OUT);
/*Create a slider in the center of the display*/
lv_obj_t * ta = lv_textarea_create(lv_screen_active());
lv_obj_set_pos(ta, 10, 10);
lv_obj_set_width(ta, 200);
lv_textarea_set_one_line(ta, true);
lv_textarea_set_password_mode(ta, true);
lv_textarea_set_placeholder_text(ta, "The password is: hello");
lv_obj_add_event_cb(ta, textarea_event_cb, LV_EVENT_READY, NULL);
lv_obj_bind_state_if_eq(ta, &auth_state_subject, LV_STATE_DISABLED, LOGGED_IN);
lv_obj_t * kb = lv_keyboard_create(lv_screen_active());
lv_keyboard_set_textarea(kb, ta);
lv_obj_t * btn;
lv_obj_t * label;
/*Create a log out button which will be active only when logged in*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_pos(btn, 220, 10);
lv_obj_add_event_cb(btn, log_out_click_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_bind_state_if_not_eq(btn, &auth_state_subject, LV_STATE_DISABLED, LOGGED_IN);
label = lv_label_create(btn);
lv_label_set_text(label, "LOG OUT");
/*Create a label to show info*/
label = lv_label_create(lv_screen_active());
lv_obj_set_pos(label, 10, 60);
lv_subject_add_observer_obj(&auth_state_subject, info_label_observer_cb, label, NULL);
/*Create button which will be active only when logged in*/
btn = lv_button_create(lv_screen_active());
lv_obj_set_pos(btn, 10, 80);
lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);
lv_obj_bind_state_if_not_eq(btn, &auth_state_subject, LV_STATE_DISABLED, LOGGED_IN);
lv_obj_bind_checked(btn, &engine_subject);
label = lv_label_create(btn);
lv_label_set_text(label, "START ENGINE");
}
#endif
Set time with 12/24 mode and AM/PM¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_OBSERVER && LV_USE_SLIDER && LV_USE_LABEL && LV_USE_ROLLER && LV_USE_DROPDOWN && LV_FONT_MONTSERRAT_30 && LV_BUILD_EXAMPLES
static lv_subject_t hour_subject;
static lv_subject_t minute_subject;
static lv_subject_t format_subject;
static lv_subject_t am_pm_subject;
static lv_subject_t time_subject;
static lv_subject_t * time_group_array_subject[] = {&hour_subject, &minute_subject, &format_subject, &am_pm_subject};
const char * hour12_options = "01\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12";
const char * hour24_options =
"00\n01\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23";
const char * minute_options =
"00\n01\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59";
static void set_btn_clicked_event_cb(lv_event_t * e);
static void close_clicked_event_cb(lv_event_t * e);
static void hour_roller_options_update(lv_observer_t * observer, lv_subject_t * subject);
static void time_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
typedef enum {
TIME_FORMAT_12,
TIME_FORMAT_24,
} time_format_t;
typedef enum {
TIME_AM,
TIME_PM,
} time_am_pm_t;
/**
* Show how to handle a complex time setting with hour, minute, 12/24 hour mode, and AM/PM switch
* In a real application the time can be displayed on multiple screens and it's not trivial
* how and where to store the current values and how to get them.
* In this example the widgets to set the time are create/deleted dynamically,
* yet they always know what the current values are by using subjects.
*/
void lv_example_observer_3(void)
{
/*Initialize the subjects.
*The UI will update these and read the current values from here,
*however the application can update these values at any time and
*the widgets will be updated automatically. */
lv_subject_init_int(&hour_subject, 7);
lv_subject_init_int(&minute_subject, 45);
lv_subject_init_int(&format_subject, TIME_FORMAT_12);
lv_subject_init_int(&am_pm_subject, TIME_AM);
lv_subject_init_group(&time_subject, time_group_array_subject, 4);
/*Create the UI*/
lv_obj_t * time_label = lv_label_create(lv_screen_active());
lv_obj_set_style_text_font(time_label, &lv_font_montserrat_30, 0);
lv_subject_add_observer_obj(&time_subject, time_observer_cb, time_label, NULL);
lv_obj_set_pos(time_label, 24, 24);
lv_obj_t * set_btn = lv_button_create(lv_screen_active());
lv_obj_set_pos(set_btn, 180, 24);
lv_obj_add_event_cb(set_btn, set_btn_clicked_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_t * set_label = lv_label_create(set_btn);
lv_label_set_text(set_label, "Set");
/*Update some subjects to see if the UI is updated as well*/
lv_subject_set_int(&hour_subject, 9);
lv_subject_set_int(&minute_subject, 30);
lv_subject_set_int(&am_pm_subject, TIME_PM);
}
static void set_btn_clicked_event_cb(lv_event_t * e)
{
lv_obj_t * set_btn = lv_event_get_target_obj(e);
lv_obj_add_state(set_btn, LV_STATE_DISABLED);
lv_obj_t * cont = lv_obj_create(lv_screen_active());
lv_obj_set_size(cont, lv_pct(100), LV_SIZE_CONTENT);
lv_obj_align(cont, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_t * hour_roller = lv_roller_create(cont);
lv_obj_add_flag(hour_roller, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
lv_subject_add_observer_obj(&format_subject, hour_roller_options_update, hour_roller, NULL);
lv_roller_bind_value(hour_roller, &hour_subject);
lv_obj_set_pos(hour_roller, 0, 0);
lv_obj_t * min_roller = lv_roller_create(cont);
lv_roller_set_options(min_roller, minute_options, LV_ROLLER_MODE_NORMAL);
lv_roller_bind_value(min_roller, &minute_subject);
lv_obj_set_pos(min_roller, 64, 0);
lv_obj_t * format_dropdown = lv_dropdown_create(cont);
lv_dropdown_set_options(format_dropdown, "12\n24");
lv_dropdown_bind_value(format_dropdown, &format_subject);
lv_obj_set_pos(format_dropdown, 128, 0);
lv_obj_set_width(format_dropdown, 80);
lv_obj_t * am_pm_dropdown = lv_dropdown_create(cont);
lv_dropdown_set_options(am_pm_dropdown, "am\npm");
lv_dropdown_bind_value(am_pm_dropdown, &am_pm_subject);
lv_obj_bind_state_if_eq(am_pm_dropdown, &format_subject, LV_STATE_DISABLED, TIME_FORMAT_24);
lv_obj_set_pos(am_pm_dropdown, 128, 48);
lv_obj_set_width(am_pm_dropdown, 80);
lv_obj_t * close_btn = lv_button_create(cont);
lv_obj_align(close_btn, LV_ALIGN_TOP_RIGHT, 0, 0);
/*Pass the set_btn as user_data to make it non-disabled on close*/
lv_obj_add_event_cb(close_btn, close_clicked_event_cb, LV_EVENT_CLICKED, set_btn);
lv_obj_t * close_label = lv_label_create(close_btn);
lv_label_set_text(close_label, LV_SYMBOL_CLOSE);
}
static void close_clicked_event_cb(lv_event_t * e)
{
lv_obj_t * set_btn = (lv_obj_t *) lv_event_get_user_data(e);
lv_obj_t * close_btn = lv_event_get_target_obj(e);
lv_obj_t * cont = lv_obj_get_parent(close_btn);
lv_obj_remove_state(set_btn, LV_STATE_DISABLED);
lv_obj_delete(cont);
}
/*Watch all related subject to display the current time correctly*/
static void time_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
int32_t hour = lv_subject_get_int(lv_subject_get_group_element(subject, 0));
int32_t minute = lv_subject_get_int(lv_subject_get_group_element(subject, 1));
int32_t format = lv_subject_get_int(lv_subject_get_group_element(subject, 2));
int32_t am_pm = lv_subject_get_int(lv_subject_get_group_element(subject, 3));
lv_obj_t * label = (lv_obj_t *) lv_observer_get_target(observer);
if(format == TIME_FORMAT_24) {
lv_label_set_text_fmt(label, "%" LV_PRId32 ":%02" LV_PRId32, hour, minute);
}
else {
lv_label_set_text_fmt(label, "%" LV_PRId32":%02" LV_PRId32" %s", hour + 1, minute, am_pm == TIME_AM ? "am" : "pm");
}
}
/*Change the hour options on format change*/
static void hour_roller_options_update(lv_observer_t * observer, lv_subject_t * subject)
{
lv_obj_t * roller = (lv_obj_t *) lv_observer_get_target(observer);
int32_t prev_selected = lv_roller_get_selected(roller);
int32_t v = lv_subject_get_int(subject);
if(v == TIME_FORMAT_12) {
prev_selected--;
if(prev_selected > 12) prev_selected -= 12;
lv_roller_set_options(roller, hour12_options, LV_ROLLER_MODE_NORMAL);
}
else {
prev_selected++;
lv_roller_set_options(roller, hour24_options, LV_ROLLER_MODE_NORMAL);
}
lv_roller_set_selected(roller, prev_selected, LV_ANIM_OFF);
lv_obj_send_event(roller, LV_EVENT_VALUE_CHANGED, NULL);
}
#endif
Custom tab view with state management¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_OBSERVER && LV_USE_SLIDER && LV_USE_LABEL && LV_USE_ROLLER && LV_USE_DROPDOWN && LV_FONT_MONTSERRAT_30 && LV_BUILD_EXAMPLES
static void cont_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static void btn_create(lv_obj_t * parent, const char * text);
static void btn_click_event_cb(lv_event_t * e);
static void btn_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static void indicator_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static lv_subject_t current_tab_subject;
static lv_subject_t slider_subject[4];
static lv_subject_t dropdown_subject[3];
static lv_subject_t roller_subject[2];
void lv_example_observer_4(void)
{
lv_subject_init_int(¤t_tab_subject, 0);
lv_subject_init_int(&slider_subject[0], 0);
lv_subject_init_int(&slider_subject[1], 0);
lv_subject_init_int(&slider_subject[2], 0);
lv_subject_init_int(&slider_subject[3], 0);
lv_subject_init_int(&dropdown_subject[0], 0);
lv_subject_init_int(&dropdown_subject[1], 0);
lv_subject_init_int(&dropdown_subject[2], 0);
lv_subject_init_int(&roller_subject[0], 0);
lv_subject_init_int(&roller_subject[1], 0);
lv_obj_t * main_cont = lv_obj_create(lv_screen_active());
lv_obj_remove_style_all(main_cont);
lv_obj_set_size(main_cont, lv_pct(100), lv_pct(100));
lv_obj_set_style_pad_all(main_cont, 0, 0);
lv_obj_set_flex_flow(main_cont, LV_FLEX_FLOW_COLUMN);
lv_obj_t * cont = lv_obj_create(main_cont);
lv_obj_remove_style_all(cont);
lv_obj_set_flex_grow(cont, 1);
lv_obj_set_style_pad_all(cont, 8, 0);
lv_obj_set_width(cont, lv_pct(100));
lv_subject_add_observer_obj(¤t_tab_subject, cont_observer_cb, cont, NULL);
lv_obj_set_scroll_dir(cont, LV_DIR_VER);
lv_obj_t * footer = lv_obj_create(main_cont);
lv_obj_remove_style_all(footer);
lv_obj_set_style_pad_column(footer, 8, 0);
lv_obj_set_style_pad_all(footer, 8, 0);
lv_obj_set_flex_flow(footer, LV_FLEX_FLOW_ROW);
lv_obj_set_size(footer, lv_pct(100), 60);
lv_obj_align(footer, LV_ALIGN_BOTTOM_MID, 0, 0);
btn_create(footer, "First");
btn_create(footer, "Second");
btn_create(footer, "Third");
lv_obj_t * indicator = lv_obj_create(footer);
lv_obj_remove_style(indicator, NULL, 0);
lv_obj_set_style_bg_opa(indicator, LV_OPA_40, 0);
lv_subject_add_observer_obj(¤t_tab_subject, indicator_observer_cb, indicator, NULL);
lv_obj_set_height(indicator, 10);
lv_obj_align(indicator, LV_ALIGN_BOTTOM_LEFT, 0, 0);
lv_obj_add_flag(indicator, LV_OBJ_FLAG_IGNORE_LAYOUT);
/*Be sure the indicator has the correct size*/
lv_obj_update_layout(indicator);
lv_subject_notify(¤t_tab_subject);
}
static int32_t anim_get_x_cb(lv_anim_t * a)
{
return lv_obj_get_x_aligned((lv_obj_t *) a->var);
}
static void anim_set_x_cb(void * obj, int32_t v)
{
lv_obj_set_x((lv_obj_t *) obj, v);
}
static void cont_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
int32_t prev_v = lv_subject_get_previous_int(subject);
int32_t cur_v = lv_subject_get_int(subject);
lv_obj_t * cont = (lv_obj_t *) lv_observer_get_target(observer);
/*Animate out the previous content*/
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_duration(&a, 300);
lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);
lv_anim_set_exec_cb(&a, anim_set_x_cb);
lv_anim_set_get_value_cb(&a, anim_get_x_cb);
lv_anim_set_completed_cb(&a, lv_obj_delete_anim_completed_cb);
uint32_t i;
uint32_t delay = 0;
uint32_t child_cnt_prev = lv_obj_get_child_count(cont);
for(i = 0; i < child_cnt_prev; i++) {
lv_obj_t * child = lv_obj_get_child(cont, i);
lv_anim_set_var(&a, child);
if(prev_v < cur_v) {
lv_anim_set_values(&a, 0, -20);
}
else {
lv_anim_set_values(&a, 0, 20);
}
lv_anim_set_delay(&a, delay);
lv_anim_start(&a);
lv_obj_fade_out(child, 200, delay);
delay += 50;
}
/*Create the widgets according to the current value*/
if(cur_v == 0) {
for(i = 0; i < 4; i++) {
lv_obj_t * slider = lv_slider_create(cont);
lv_slider_bind_value(slider, &slider_subject[i]);
lv_obj_align(slider, LV_ALIGN_TOP_MID, 0, 10 + i * 30);
}
}
if(cur_v == 1) {
for(i = 0; i < 3; i++) {
lv_obj_t * dropdown = lv_dropdown_create(cont);
lv_dropdown_bind_value(dropdown, &dropdown_subject[i]);
lv_obj_align(dropdown, LV_ALIGN_TOP_MID, 0, i * 50);
}
}
if(cur_v == 2) {
for(i = 0; i < 2; i++) {
lv_obj_t * roller = lv_roller_create(cont);
lv_roller_bind_value(roller, &roller_subject[i]);
lv_obj_align(roller, LV_ALIGN_CENTER, - 80 + i * 160, 0);
}
}
/*Animate in the new widgets*/
lv_anim_set_completed_cb(&a, NULL);
for(i = child_cnt_prev; i < lv_obj_get_child_count(cont); i++) {
lv_obj_t * child = lv_obj_get_child(cont, i);
lv_anim_set_var(&a, child);
if(prev_v < cur_v) {
lv_anim_set_values(&a, 20, 0);
}
else {
lv_anim_set_values(&a, -20, -0);
}
lv_anim_set_delay(&a, delay);
lv_anim_start(&a);
lv_obj_fade_in(child, 200, delay);
delay += 50;
}
}
static void btn_create(lv_obj_t * parent, const char * text)
{
lv_obj_t * btn = lv_button_create(parent);
lv_obj_set_flex_grow(btn, 1);
lv_obj_set_height(btn, lv_pct(100));
lv_obj_set_style_radius(btn, 0, 0);
lv_subject_add_observer_obj(¤t_tab_subject, btn_observer_cb, btn, NULL);
lv_obj_add_event_cb(btn, btn_click_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, text);
lv_obj_center(label);
}
static void btn_click_event_cb(lv_event_t * e)
{
lv_obj_t * btn = lv_event_get_target_obj(e);
uint32_t idx = lv_obj_get_index(btn);
lv_subject_set_int(¤t_tab_subject, idx);
}
static void btn_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
int32_t prev_v = lv_subject_get_previous_int(subject);
int32_t cur_v = lv_subject_get_int(subject);
lv_obj_t * btn = (lv_obj_t *) lv_observer_get_target(observer);
int32_t idx = (int32_t)lv_obj_get_index(btn);
if(idx == prev_v) lv_obj_remove_state(btn, LV_STATE_CHECKED);
if(idx == cur_v) lv_obj_add_state(btn, LV_STATE_CHECKED);
}
static void indicator_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
int32_t cur_v = lv_subject_get_int(subject);
lv_obj_t * indicator = (lv_obj_t *) lv_observer_get_target(observer);
lv_obj_t * footer = lv_obj_get_parent(indicator);
lv_obj_t * btn_act = lv_obj_get_child(footer, cur_v);
lv_obj_set_width(indicator, lv_obj_get_width(btn_act));
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_exec_cb(&a, anim_set_x_cb);
lv_anim_set_duration(&a, 300);
lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);
lv_anim_set_var(&a, indicator);
lv_anim_set_values(&a, lv_obj_get_x(indicator), lv_obj_get_x(btn_act));
lv_anim_start(&a);
}
#endif
Firmware update process¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_OBSERVER && LV_USE_ARC && LV_USE_LABEL && LV_USE_BUTTON && LV_USE_SPINNER && LV_BUILD_EXAMPLES
typedef enum {
FW_UPDATE_STATE_IDLE,
FW_UPDATE_STATE_CONNECTING,
FW_UPDATE_STATE_CONNECTED,
FW_UPDATE_STATE_DOWNLOADING,
FW_UPDATE_STATE_CANCEL,
FW_UPDATE_STATE_READY,
} lv_fw_update_state_t;
static void fw_upload_manager_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static void fw_update_btn_clicked_event_cb(lv_event_t * e);
static void fw_update_close_event_cb(lv_event_t * e);
static void fw_update_win_observer_cb(lv_observer_t * observer, lv_subject_t * subject);
static lv_subject_t fw_download_percent_subject;
static lv_subject_t fw_update_status_subject;
/**
* Show how to handle a complete firmware update process with observers.
* Normally it's hard to implement a firmware update process because in some cases
* - the App needs to was for the UI (wait for a button press)
* - the UI needs to wait for the App (connecting or downloading)
* With observers these complex mechanisms can be implemented a simple and clean way.
*/
void lv_example_observer_5(void)
{
lv_subject_init_int(&fw_download_percent_subject, 0);
lv_subject_init_int(&fw_update_status_subject, FW_UPDATE_STATE_IDLE);
lv_subject_add_observer(&fw_update_status_subject, fw_upload_manager_observer_cb, NULL);
/*Create start FW update button*/
lv_obj_t * btn = lv_button_create(lv_screen_active());
lv_obj_add_event_cb(btn, fw_update_btn_clicked_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_center(btn);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, "Firmware update");
}
static void fw_update_btn_clicked_event_cb(lv_event_t * e)
{
LV_UNUSED(e);
lv_obj_t * win = lv_win_create(lv_screen_active());
lv_obj_set_size(win, lv_pct(90), lv_pct(90));
lv_obj_set_height(lv_win_get_header(win), 40);
lv_obj_set_style_radius(win, 8, 0);
lv_obj_set_style_shadow_width(win, 24, 0);
lv_obj_set_style_shadow_offset_x(win, 2, 0);
lv_obj_set_style_shadow_offset_y(win, 3, 0);
lv_obj_set_style_shadow_color(win, lv_color_hex3(0x888), 0);
lv_win_add_title(win, "Firmware update");
lv_obj_t * btn = lv_win_add_button(win, LV_SYMBOL_CLOSE, 40);
lv_obj_add_event_cb(btn, fw_update_close_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_center(win);
lv_subject_set_int(&fw_update_status_subject, FW_UPDATE_STATE_IDLE);
lv_subject_add_observer_obj(&fw_update_status_subject, fw_update_win_observer_cb, win, NULL);
}
static void fw_update_close_event_cb(lv_event_t * e)
{
LV_UNUSED(e);
lv_subject_set_int(&fw_update_status_subject, FW_UPDATE_STATE_CANCEL);
}
static void restart_btn_click_event_cb(lv_event_t * e)
{
lv_obj_t * win = (lv_obj_t *) lv_event_get_user_data(e);
lv_obj_delete(win);
lv_subject_set_int(&fw_update_status_subject, FW_UPDATE_STATE_IDLE);
}
static void fw_update_win_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
lv_obj_t * win = (lv_obj_t *) lv_observer_get_target(observer);
lv_obj_t * cont = lv_win_get_content(win);
lv_fw_update_state_t status = (lv_fw_update_state_t) lv_subject_get_int(&fw_update_status_subject);
if(status == FW_UPDATE_STATE_IDLE) {
lv_obj_clean(cont);
lv_obj_t * spinner = lv_spinner_create(cont);
lv_obj_center(spinner);
lv_obj_set_size(spinner, 130, 130);
lv_obj_t * label = lv_label_create(cont);
lv_label_set_text(label, "Connecting");
lv_obj_center(label);
lv_subject_set_int(subject, FW_UPDATE_STATE_CONNECTING);
}
else if(status == FW_UPDATE_STATE_DOWNLOADING) {
lv_obj_clean(cont);
lv_obj_t * arc = lv_arc_create(cont);
lv_arc_bind_value(arc, &fw_download_percent_subject);
lv_obj_center(arc);
lv_obj_set_size(arc, 130, 130);
lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE);
lv_obj_t * label = lv_label_create(cont);
lv_label_bind_text(label, &fw_download_percent_subject, "%d %%");
lv_obj_center(label);
}
else if(status == FW_UPDATE_STATE_READY) {
lv_obj_clean(cont);
lv_obj_t * label = lv_label_create(cont);
lv_label_set_text(label, "Firmware update is ready");
lv_obj_align(label, LV_ALIGN_CENTER, 0, -20);
lv_obj_t * btn = lv_button_create(cont);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 20);
lv_obj_add_event_cb(btn, restart_btn_click_event_cb, LV_EVENT_CLICKED, win);
label = lv_label_create(btn);
lv_label_set_text(label, "Restart");
}
else if(status == FW_UPDATE_STATE_CANCEL) {
lv_obj_delete(win);
}
}
static void connect_timer_cb(lv_timer_t * t)
{
if(lv_subject_get_int(&fw_update_status_subject) != FW_UPDATE_STATE_CANCEL) {
lv_subject_set_int(&fw_update_status_subject, FW_UPDATE_STATE_CONNECTED);
}
lv_timer_delete(t);
}
static void download_timer_cb(lv_timer_t * t)
{
if(lv_subject_get_int(&fw_update_status_subject) == FW_UPDATE_STATE_CANCEL) {
lv_timer_delete(t);
return;
}
int32_t v = lv_subject_get_int(&fw_download_percent_subject);
if(v < 100) {
lv_subject_set_int(&fw_download_percent_subject, v + 1);
}
else {
lv_subject_set_int(&fw_update_status_subject, FW_UPDATE_STATE_READY);
lv_timer_delete(t);
}
}
/**
* Emulate connection and FW downloading by timers
*/
static void fw_upload_manager_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
LV_UNUSED(subject);
LV_UNUSED(observer);
lv_fw_update_state_t state = (lv_fw_update_state_t) lv_subject_get_int(&fw_update_status_subject);
if(state == FW_UPDATE_STATE_CONNECTING) {
lv_timer_create(connect_timer_cb, 2000, NULL);
}
else if(state == FW_UPDATE_STATE_CONNECTED) {
lv_subject_set_int(&fw_download_percent_subject, 0);
lv_subject_set_int(&fw_update_status_subject, FW_UPDATE_STATE_DOWNLOADING);
lv_timer_create(download_timer_cb, 50, NULL);
}
}
#endif
Modular style update on theme change¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_OBSERVER && LV_USE_SLIDER && LV_USE_LABEL && LV_BUILD_EXAMPLES
typedef enum {
THEME_MODE_LIGHT,
THEME_MODE_DARK,
} lv_theme_mode_t;
static lv_obj_t * my_panel_create(lv_obj_t * parent);
static lv_obj_t * my_button_create(lv_obj_t * parent, const char * text, lv_event_cb_t event_cb);
static void switch_theme_event_cb(lv_event_t * e);
static lv_subject_t theme_subject;
/**
* Change between light and dark mode
*/
void lv_example_observer_6(void)
{
lv_subject_init_int(&theme_subject, THEME_MODE_DARK);
lv_obj_t * panel1 = my_panel_create(lv_screen_active());
lv_obj_set_flex_flow(panel1, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(panel1, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_size(panel1, lv_pct(90), lv_pct(90));
lv_obj_center(panel1);
my_button_create(panel1, "Button 1", switch_theme_event_cb);
my_button_create(panel1, "Button 2", switch_theme_event_cb);
my_button_create(panel1, "Button 3", switch_theme_event_cb);
my_button_create(panel1, "Button 4", switch_theme_event_cb);
my_button_create(panel1, "Button 5", switch_theme_event_cb);
my_button_create(panel1, "Button 6", switch_theme_event_cb);
my_button_create(panel1, "Button 7", switch_theme_event_cb);
my_button_create(panel1, "Button 8", switch_theme_event_cb);
my_button_create(panel1, "Button 9", switch_theme_event_cb);
my_button_create(panel1, "Button 10", switch_theme_event_cb);
}
static void switch_theme_event_cb(lv_event_t * e)
{
LV_UNUSED(e);
if(lv_subject_get_int(&theme_subject) == THEME_MODE_LIGHT) lv_subject_set_int(&theme_subject, THEME_MODE_DARK);
else lv_subject_set_int(&theme_subject, THEME_MODE_LIGHT);
}
/*-----------------------------------------
* my_panel.c
*
* It would be a separate file with its own
* local types, data, and functions
*------------------------------------------*/
typedef struct {
lv_style_t style_main;
lv_style_t style_scrollbar;
} lv_panel_styles_t;
static void my_panel_style_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
LV_UNUSED(subject);
LV_UNUSED(observer);
lv_theme_mode_t m = (lv_theme_mode_t) lv_subject_get_int(&theme_subject);
lv_panel_styles_t * styles = (lv_panel_styles_t *) lv_observer_get_target(observer);
if(m == THEME_MODE_LIGHT) {
lv_style_set_bg_color(&styles->style_main, lv_color_hex3(0xfff));
lv_style_set_shadow_color(&styles->style_main, lv_color_hex3(0x888));
lv_style_set_text_color(&styles->style_main, lv_color_hex3(0x222));
lv_style_set_bg_color(&styles->style_scrollbar, lv_color_hex3(0x888));
}
if(m == THEME_MODE_DARK) {
lv_style_set_bg_color(&styles->style_main, lv_color_hex(0x040038));
lv_style_set_shadow_color(&styles->style_main, lv_color_hex3(0xaaa));
lv_style_set_text_color(&styles->style_main, lv_color_hex3(0xeee));
lv_style_set_bg_color(&styles->style_scrollbar, lv_color_hex3(0xaaa));
}
lv_obj_report_style_change(&styles->style_main);
lv_obj_report_style_change(&styles->style_scrollbar);
}
static lv_obj_t * my_panel_create(lv_obj_t * parent)
{
static bool inited = false;
static lv_panel_styles_t styles;
if(!inited) {
inited = true;
lv_style_init(&styles.style_main);
lv_style_set_radius(&styles.style_main, 12);
lv_style_set_bg_opa(&styles.style_main, LV_OPA_COVER);
lv_style_set_shadow_width(&styles.style_main, 24);
lv_style_set_shadow_offset_x(&styles.style_main, 4);
lv_style_set_shadow_offset_y(&styles.style_main, 6);
lv_style_set_pad_all(&styles.style_main, 12);
lv_style_set_pad_gap(&styles.style_main, 16);
lv_style_init(&styles.style_scrollbar);
lv_style_set_width(&styles.style_scrollbar, 4);
lv_style_set_radius(&styles.style_scrollbar, 2);
lv_style_set_pad_right(&styles.style_scrollbar, 8);
lv_style_set_pad_ver(&styles.style_scrollbar, 8);
lv_style_set_bg_opa(&styles.style_scrollbar, LV_OPA_50);
lv_subject_add_observer_with_target(&theme_subject, my_panel_style_observer_cb, &styles, NULL);
}
lv_obj_t * panel = lv_obj_create(parent);
lv_obj_remove_style_all(panel);
lv_obj_add_style(panel, &styles.style_main, 0);
lv_obj_add_style(panel, &styles.style_scrollbar, LV_PART_SCROLLBAR);
return panel;
}
/*-----------------------------------------
* my_button.c
*
* It would be a separate file with its own
* local types, data, and functions
*------------------------------------------*/
typedef struct {
lv_style_t style_main;
lv_style_t style_pressed;
} lv_button_styles_t;
static void my_button_style_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
LV_UNUSED(subject);
LV_UNUSED(observer);
lv_theme_mode_t m = (lv_theme_mode_t) lv_subject_get_int(&theme_subject);
lv_button_styles_t * styles = (lv_button_styles_t *) lv_observer_get_target(observer);
if(m == THEME_MODE_LIGHT) {
lv_style_set_bg_color(&styles->style_main, lv_color_hex(0x3379de));
lv_style_set_bg_grad_color(&styles->style_main, lv_color_hex(0xd249a5));
lv_style_set_shadow_color(&styles->style_main, lv_color_hex(0x3379de));
lv_style_set_text_color(&styles->style_main, lv_color_hex3(0xfff));
lv_style_set_color_filter_opa(&styles->style_pressed, LV_OPA_70);
}
if(m == THEME_MODE_DARK) {
lv_style_set_bg_color(&styles->style_main, lv_color_hex(0xde1382));
lv_style_set_bg_grad_color(&styles->style_main, lv_color_hex(0x4b0c72));
lv_style_set_shadow_color(&styles->style_main, lv_color_hex(0x4b0c72));
lv_style_set_text_color(&styles->style_main, lv_color_hex3(0xfff));
lv_style_set_color_filter_opa(&styles->style_pressed, LV_OPA_30);
}
lv_obj_report_style_change(&styles->style_main);
lv_obj_report_style_change(&styles->style_pressed);
}
static lv_obj_t * my_button_create(lv_obj_t * parent, const char * text, lv_event_cb_t event_cb)
{
static bool inited = false;
static lv_button_styles_t styles;
if(!inited) {
inited = true;
lv_style_init(&styles.style_main);
lv_style_set_radius(&styles.style_main, LV_RADIUS_CIRCLE);
lv_style_set_bg_opa(&styles.style_main, LV_OPA_COVER);
lv_style_set_bg_grad_dir(&styles.style_main, LV_GRAD_DIR_HOR);
lv_style_set_shadow_width(&styles.style_main, 24);
lv_style_set_shadow_offset_y(&styles.style_main, 6);
lv_style_set_pad_hor(&styles.style_main, 32);
lv_style_set_pad_ver(&styles.style_main, 12);
lv_style_init(&styles.style_pressed);
lv_style_set_color_filter_dsc(&styles.style_pressed, &lv_color_filter_shade);
lv_subject_add_observer_with_target(&theme_subject, my_button_style_observer_cb, &styles, NULL);
}
lv_obj_t * btn = lv_button_create(parent);
lv_obj_remove_style_all(btn);
lv_obj_add_style(btn, &styles.style_main, 0);
lv_obj_add_style(btn, &styles.style_pressed, LV_STATE_PRESSED);
lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, text);
return btn;
}
#endif
Snapshot¶
Simple snapshot example¶
C code
View on GitHub
#include "../../lv_examples.h"
#if LV_USE_SNAPSHOT && LV_BUILD_EXAMPLES
static void event_cb(lv_event_t * e)
{
lv_obj_t * snapshot_obj = (lv_obj_t *) lv_event_get_user_data(e);
lv_obj_t * img = lv_event_get_target_obj(e);
if(snapshot_obj) {
lv_draw_buf_t * snapshot = (lv_draw_buf_t *)lv_image_get_src(snapshot_obj);
if(snapshot) {
lv_draw_buf_destroy(snapshot);
}
/*Update the snapshot, we know parent of object is the container.*/
snapshot = lv_snapshot_take(lv_obj_get_parent(img), LV_COLOR_FORMAT_ARGB8888);
if(snapshot == NULL)
return;
lv_image_set_src(snapshot_obj, snapshot);
}
}
void lv_example_snapshot_1(void)
{
LV_IMAGE_DECLARE(img_star);
lv_obj_t * root = lv_screen_active();
lv_obj_set_style_bg_color(root, lv_palette_main(LV_PALETTE_LIGHT_BLUE), 0);
/*Create an image object to show snapshot*/
lv_obj_t * snapshot_obj = lv_image_create(root);
lv_obj_set_style_bg_color(snapshot_obj, lv_palette_main(LV_PALETTE_PURPLE), 0);
lv_obj_set_style_bg_opa(snapshot_obj, LV_OPA_100, 0);
lv_image_set_scale(snapshot_obj, 128);
lv_image_set_rotation(snapshot_obj, 300);
/*Create the container and its children*/
lv_obj_t * container = lv_obj_create(root);
lv_obj_center(container);
lv_obj_set_size(container, 180, 180);
lv_obj_set_flex_flow(container, LV_FLEX_FLOW_ROW_WRAP);
lv_obj_set_flex_align(container, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_radius(container, 50, 0);
lv_obj_t * img;
int i;
for(i = 0; i < 4; i++) {
img = lv_image_create(container);
lv_image_set_src(img, &img_star);
lv_obj_set_style_bg_color(img, lv_color_black(), 0);
lv_obj_set_style_bg_opa(img, LV_OPA_COVER, 0);
// lv_obj_set_style_transform_scale(img, 400, LV_STATE_PRESSED);
lv_obj_add_flag(img, LV_OBJ_FLAG_CLICKABLE);
lv_obj_add_event_cb(img, event_cb, LV_EVENT_PRESSED, snapshot_obj);
lv_obj_add_event_cb(img, event_cb, LV_EVENT_RELEASED, snapshot_obj);
}
}
#endif
Translation¶
Simple translation example¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TRANSLATION && LV_BUILD_EXAMPLES
static void add_static(void)
{
/* Arrays are defined `const` to place them in program space instead of RAM. */
static const char * const languages[] = {"en", "de", "es", NULL};
static const char * const tags[] = {"tiger", "lion", "rabbit", "elephant", NULL};
static const char * const translations[] = {
"The Tiger", "Der Tiger", "El Tigre",
"The Lion", "Der Löwe", "El León",
"The Rabbit", "Das Kaninchen", "El Conejo",
"The Elephant", "Der Elefant", "El Elefante",
};
lv_translation_add_static(languages, tags, translations);
}
static void add_dynamic(void)
{
lv_translation_pack_t * pack = lv_translation_add_dynamic();
lv_translation_add_language(pack, "en");
lv_translation_add_language(pack, "de");
lv_translation_tag_dsc_t * tag;
tag = lv_translation_add_tag(pack, "table");
lv_translation_set_tag_translation(pack, tag, 0, "It's a table");
lv_translation_set_tag_translation(pack, tag, 1, "Das is ein Tish");
tag = lv_translation_add_tag(pack, "chair");
lv_translation_set_tag_translation(pack, tag, 0, "It's a chair");
lv_translation_set_tag_translation(pack, tag, 1, "Das ist ein Stuhl");
}
/**
* Create and use translations
*/
void lv_example_translation_1(void)
{
add_static();
add_dynamic();
lv_translation_set_language("de");
lv_obj_t * label;
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, lv_tr("tiger"));
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, lv_tr("chair"));
lv_obj_set_y(label, 50);
}
#endif /*LV_USE_TRANSLATION && LV_BUILD_EXAMPLES*/
Dynamic language selection¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TRANSLATION && LV_USE_DROPDOWN && LV_USE_LABEL && LV_BUILD_EXAMPLES
/* Arrays are defined `const` to place them in program space instead of RAM. */
static const char * const tags[] = {"tiger", "lion", "rabbit", "elephant", NULL};
static const char * const languages[] = {"English", "Deutsch", "Español", NULL};
static void add_static_translations(void)
{
static const char * const translations[] = {
"The Tiger", "Der Tiger", "El Tigre",
"The Lion", "Der Löwe", "El León",
"The Rabbit", "Das Kaninchen", "El Conejo",
"The Elephant", "Der Elefant", "El Elefante",
};
lv_translation_add_static(languages, tags, translations);
}
static void on_language_change(lv_event_t * e)
{
lv_obj_t * label = lv_event_get_target_obj(e);
const char * tag = (const char *) lv_event_get_user_data(e);
/* You can get the new language with `lv_event_get_param`*/
const char * language = (const char *) lv_event_get_param(e);
LV_UNUSED(language);
lv_label_set_text(label, lv_tr(tag));
}
static void language_change_cb(lv_event_t * e)
{
static char selected_lang[20];
lv_obj_t * dropdown = lv_event_get_target_obj(e);
lv_dropdown_get_selected_str(dropdown, selected_lang, sizeof(selected_lang));
lv_translation_set_language(selected_lang);
}
/**
* Change label text when the translation language changes
*/
void lv_example_translation_2(void)
{
lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
add_static_translations();
const size_t tag_count = sizeof(tags) / sizeof(tags[0]) - 1;
const size_t lang_count = sizeof(languages) / sizeof(languages[0]) - 1;
/* Create a dropdown to be able to select the language */
lv_obj_t * language_dropdown = lv_dropdown_create(lv_screen_active());
lv_dropdown_clear_options(language_dropdown);
for(size_t i = 0; i < lang_count; ++i) {
lv_dropdown_add_option(language_dropdown, languages[i], i);
}
lv_obj_add_event_cb(language_dropdown, language_change_cb, LV_EVENT_VALUE_CHANGED, NULL);
/* Create a label for each tag */
for(size_t i = 0; i < tag_count; ++i) {
lv_obj_t * label = lv_label_create(lv_screen_active());
/* Bind to the language change event so that we can change the label when the language changes */
lv_obj_add_event_cb(label, on_language_change, LV_EVENT_TRANSLATION_LANGUAGE_CHANGED, (void *)tags[i]);
}
lv_translation_set_language("English");
}
#endif /*LV_USE_TRANSLATION && LV_USE_DROPDOWN && LV_USE_LABEL && LV_BUILD_EXAMPLES*/
XML Components¶
Load components at runtime¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_XML
void lv_example_xml_1(void)
{
/*A red button created from builti-in LVGL widgets
*It has an API parameter too to change its text.*/
const char * red_button_xml =
"<component>"
" <api>"
" <prop name=\"button_text\" type=\"string\" default=\"None\"/>"
" </api>"
" <view extends=\"lv_button\" radius=\"0\" style_bg_color=\"0xa91500\">"
" <lv_label text=\"$button_text\" align=\"center\"/>"
" </view>"
"</component>";
/*The card is just an lv_obj where a label and two red buttons are used.
* Its API allow setting a title (label test) and the action (the text of a button)*/
const char * card_xml =
"<component>"
" <api>"
" <prop name=\"title\" type=\"string\" default=\"Hello world\"/>"
" <prop name=\"action\" type=\"string\"/>"
" </api>"
" <view width=\"200\" height=\"content\">"
" <lv_label text=\"$title\" align=\"top_mid\"/>"
" <red_button y=\"20\" align=\"top_left\" button_text=\"Cancel\"/>"
" <red_button y=\"20\" align=\"top_right\" button_text=\"$action\"/>"
" </view>"
"</component>";
/* Motor card is a special case of a card where the title and action are already set*/
const char * motor_card_xml =
"<component>"
" <view extends=\"card\" title=\"Motor start?\" action=\"Start\">"
" </view>"
"</component>";
/*Register all the custom components*/
lv_xml_register_component_from_data("red_button", red_button_xml);
lv_xml_register_component_from_data("card", card_xml);
lv_xml_register_component_from_data("motor_card", motor_card_xml);
lv_obj_t * card;
/*Create a card with the default values*/
card = (lv_obj_t *) lv_xml_create(lv_screen_active(), "card", NULL);
/*Create a motor card too. The returned value can be adjusted freely*/
card = (lv_obj_t *) lv_xml_create(lv_screen_active(), "motor_card", NULL);
lv_obj_set_y(card, 90);
/*Pass properties to a card*/
const char * attrs[] = {
"y", "180",
"action", "Apply",
"title", "New title",
NULL, NULL,
};
card = (lv_obj_t *) lv_xml_create(lv_screen_active(), "card", attrs);
}
#endif
Load components at runtime¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_XML && LV_USE_TRANSLATION && LV_FONT_MONTSERRAT_18
void lv_example_xml_2(void)
{
lv_result_t res;
res = lv_xml_register_component_from_file("A:lvgl/examples/others/xml/my_h3.xml");
if(res != LV_RESULT_OK) {
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Couldn't open the XML files.");
lv_obj_center(label);
return;
}
lv_xml_register_component_from_file("A:lvgl/examples/others/xml/my_card.xml");
lv_xml_register_component_from_file("A:lvgl/examples/others/xml/my_button.xml");
lv_xml_register_component_from_file("A:lvgl/examples/others/xml/view.xml");
lv_xml_register_translation_from_file("A:lvgl/examples/others/xml/translations.xml");
lv_xml_register_font(NULL, "lv_montserrat_18", &lv_font_montserrat_18);
lv_translation_set_language("de");
lv_obj_t * obj = (lv_obj_t *) lv_xml_create(lv_screen_active(), "view", NULL);
lv_obj_set_pos(obj, 10, 10);
const char * slider_attrs[] = {
"x", "200",
"y", "-15",
"align", "bottom_left",
"value", "30",
NULL, NULL,
};
lv_obj_t * slider = (lv_obj_t *) lv_xml_create(lv_screen_active(), "lv_slider", slider_attrs);
lv_obj_set_width(slider, 100);
}
#endif
Porting¶
OS Abstraction Layer (OSAL)¶
Basic Example¶
C code
View on GitHub/**
* @file lv_example_osal.c
*
*/
/*********************
* INCLUDES
*********************/
#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#include "../../../lvgl_private.h"
/*********************
* DEFINES
*********************/
/**********************
* TYPEDEFS
**********************/
/**********************
* STATIC PROTOTYPES
**********************/
static void counter_button_event_cb(lv_event_t * e);
static void increment_thread_entry(void * user_data);
/**********************
* STATIC VARIABLES
**********************/
static lv_thread_sync_t press_sync;
static lv_thread_t increment_thread;
/**********************
* MACROS
**********************/
/**********************
* GLOBAL FUNCTIONS
**********************/
void lv_example_osal(void)
{
lv_obj_t * counter_button;
counter_button = lv_button_create(lv_screen_active());
lv_obj_align(counter_button, LV_ALIGN_CENTER, 0, -15);
lv_obj_add_event_cb(counter_button, counter_button_event_cb, LV_EVENT_CLICKED, NULL);
if(lv_thread_sync_init(&press_sync) != LV_RESULT_OK) {
LV_LOG_ERROR("Error initializing thread sync");
}
if(lv_thread_init(&increment_thread, "inc_th", LV_THREAD_PRIO_MID, increment_thread_entry, 2048,
NULL) != LV_RESULT_OK) {
LV_LOG_ERROR("Error initializing thread");
}
}
/**********************
* STATIC FUNCTIONS
**********************/
static void counter_button_event_cb(lv_event_t * e)
{
LV_UNUSED(e);
if(lv_thread_sync_signal(&press_sync) != LV_RESULT_OK) {
LV_LOG_ERROR("Error signaling thread sync");
}
}
static void increment_thread_entry(void * user_data)
{
LV_UNUSED(user_data);
lv_obj_t * counter_label;
uint32_t press_count = 0;
lv_lock();
counter_label = lv_label_create(lv_screen_active());
lv_obj_align(counter_label, LV_ALIGN_CENTER, 0, 0);
lv_label_set_text_fmt(counter_label, "Pressed %" LV_PRIu32 " times", press_count);
lv_unlock();
while(true) {
if(lv_thread_sync_wait(&press_sync) != LV_RESULT_OK) {
LV_LOG_ERROR("Error awaiting thread sync");
}
press_count += 1;
lv_lock();
lv_label_set_text_fmt(counter_label, "Pressed %" LV_PRIu32 " times", press_count);
lv_unlock();
}
}
#endif