diff --git a/examples/get_started/lv_example_get_started_1.c b/examples/get_started/lv_example_get_started_1.c index 8f7402792d..ea51de93c1 100644 --- a/examples/get_started/lv_example_get_started_1.c +++ b/examples/get_started/lv_example_get_started_1.c @@ -10,21 +10,23 @@ static void btn_event_cb(lv_obj_t * btn, lv_event_t event) /*Get the first child of the button which is the label and change its text*/ lv_obj_t * label = lv_obj_get_child(btn, 0); lv_label_set_text_fmt(label, "Button: %d", cnt); + lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0); } } /** - * Create a button with a label and react on Click event. + * Create a button with a label and react on click event. */ void lv_example_get_started_1(void) { lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*Add a button the current screen*/ lv_obj_set_pos(btn, 10, 10); /*Set its position*/ lv_obj_set_size(btn, 120, 50); /*Set its size*/ - lv_obj_add_event_cb(btn, btn_event_cb, NULL); /*Assign a callback to the button*/ + lv_obj_add_event_cb(btn, btn_event_cb, NULL); /*Assign a callback to the button*/ lv_obj_t * label = lv_label_create(btn, NULL); /*Add a label to the button*/ lv_label_set_text(label, "Button"); /*Set the labels text*/ + lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0); } #endif diff --git a/examples/get_started/lv_example_get_started_2.c b/examples/get_started/lv_example_get_started_2.c index bd70f6280c..cab2449070 100644 --- a/examples/get_started/lv_example_get_started_2.c +++ b/examples/get_started/lv_example_get_started_2.c @@ -1,83 +1,66 @@ -//#include "../../lv_examples.h" -// -// -///** -// * Create styles from scratch for buttons. -// */ -//void lv_example_get_started_2(void) -//{ -// static lv_style_t style_btn; -// static lv_style_t style_btn_red; -// -// /*Create a simple button style*/ -// lv_style_init(&style_btn); -// lv_style_set_radius(&style_btn, LV_STATE_DEFAULT, 10); -// lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER); -// lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_SILVER); -// lv_style_set_bg_grad_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_GRAY); -// lv_style_set_bg_grad_dir(&style_btn, LV_STATE_DEFAULT, LV_GRAD_DIR_VER); -// -// /*Swap the colors in pressed state*/ -// lv_style_set_bg_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_GRAY); -// lv_style_set_bg_grad_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_SILVER); -// -// /*Add a border*/ -// lv_style_set_border_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE); -// lv_style_set_border_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_70); -// lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 2); -// -// /*Different border color in focused state*/ -// lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED, LV_COLOR_BLUE); -// lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED | LV_STATE_PRESSED, LV_COLOR_NAVY); -// -// /*Set the text style*/ -// lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE); -// -// /*Make the button smaller when pressed*/ -// lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -5); -// lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, -10); -//#if LV_USE_ANIMATION -// /*Add a transition to the size change*/ -// static lv_anim_path_t path; -// lv_anim_path_init(&path); -// lv_anim_path_set_cb(&path, lv_anim_path_overshoot); -// -// lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT); -// lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH); -// lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 300); -// lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT, &path); -//#endif -// -// /*Create a red style. Change only some colors.*/ -// lv_style_init(&style_btn_red); -// lv_style_set_bg_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_RED); -// lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_MAROON); -// lv_style_set_bg_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_MAROON); -// lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_RED); -// lv_style_set_text_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_WHITE); -//#if LV_USE_BTN -// /*Create buttons and use the new styles*/ -// lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*Add a button the current screen*/ -// lv_obj_set_pos(btn, 10, 10); /*Set its position*/ -// lv_obj_set_size(btn, 120, 50); /*Set its size*/ -// lv_obj_reset_style_list(btn, LV_BTN_PART_MAIN); /*Remove the styles coming from the theme*/ -// lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style_btn); -// -// lv_obj_t * label = lv_label_create(btn, NULL); /*Add a label to the button*/ -// lv_label_set_text(label, "Button"); /*Set the labels text*/ -// -// /*Create a new button*/ -// lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), btn); -// lv_obj_set_pos(btn2, 10, 80); -// lv_obj_set_size(btn2, 120, 50); /*Set its size*/ -// lv_obj_reset_style_list(btn2, LV_BTN_PART_MAIN); /*Remove the styles coming from the theme*/ -// lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn); -// lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn_red); /*Add the red style on top of the current */ -// lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); /*Add a local style*/ -// -// label = lv_label_create(btn2, NULL); /*Add a label to the button*/ -// lv_label_set_text(label, "Button 2"); /*Set the labels text*/ -//#endif -//} -// -// +#include "../../lvgl.h" +#if LV_USE_BTN && LV_BUILD_EXAMPLES + +/** + * Create styles from scratch for buttons. + */ +void lv_example_get_started_2(void) +{ + static lv_style_t style_btn; + static lv_style_t style_btn_red; + static lv_style_t style_btn_pressed; + + /*Create a simple button style*/ + lv_style_init(&style_btn); + lv_style_set_radius(&style_btn, 10); + lv_style_set_bg_opa(&style_btn, LV_OPA_COVER); + lv_style_set_bg_color(&style_btn, LV_COLOR_SILVER); + lv_style_set_bg_grad_color(&style_btn, LV_COLOR_GRAY); + lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER); + + /*Add a border*/ + lv_style_set_border_color(&style_btn, LV_COLOR_WHITE); + lv_style_set_border_opa(&style_btn, LV_OPA_70); + lv_style_set_border_width(&style_btn, 2); + + /*Set the text style*/ + lv_style_set_text_color(&style_btn, LV_COLOR_WHITE); + + /*Create a red style. Change only some colors.*/ + lv_style_init(&style_btn_red); + lv_style_set_bg_color(&style_btn_red, LV_COLOR_RED); + lv_style_set_bg_grad_color(&style_btn_red, LV_COLOR_MAROON); + + /*Create a style for the pressed state. Add color filter to make every color darker*/ + lv_style_init(&style_btn_pressed); + lv_style_set_color_filter_cb(&style_btn_pressed, lv_color_darken); + lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_30); + + /*Create a button and use the new styles*/ + lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*Add a button the current screen*/ + lv_obj_set_pos(btn, 10, 10); /*Set its position*/ + lv_obj_set_size(btn, 120, 50); /*Set its size*/ + lv_obj_remove_style(btn, LV_PART_ANY, LV_STATE_ANY, NULL); /*Remove the styles coming from the theme*/ + lv_obj_add_style(btn, LV_PART_MAIN, LV_STATE_DEFAULT, &style_btn); + lv_obj_add_style(btn, LV_PART_MAIN, LV_STATE_PRESSED, &style_btn_pressed); + + lv_obj_t * label = lv_label_create(btn, NULL); /*Add a label to the button*/ + lv_label_set_text(label, "Button"); /*Set the labels text*/ + lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0); + + /*Create an other button and use the red style too*/ + lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL); + lv_obj_set_pos(btn2, 10, 80); + lv_obj_set_size(btn2, 120, 50); /*Set its size*/ + lv_obj_remove_style(btn2, LV_PART_ANY, LV_STATE_ANY, NULL); /*Remove the styles coming from the theme*/ + lv_obj_add_style(btn2, LV_PART_MAIN, LV_STATE_DEFAULT, &style_btn); + lv_obj_add_style(btn2, LV_PART_MAIN, LV_STATE_DEFAULT, &style_btn_red); + lv_obj_add_style(btn2, LV_PART_MAIN, LV_STATE_PRESSED, &style_btn_pressed); + lv_obj_set_style_radius(btn2, LV_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); /*Add a local style*/ + + label = lv_label_create(btn2, NULL); /*Add a label to the button*/ + lv_label_set_text(label, "Button 2"); /*Set the labels text*/ + lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0); +} + +#endif diff --git a/examples/get_started/lv_example_get_started_3.c b/examples/get_started/lv_example_get_started_3.c index 8c73b677e9..dbd7c41c6a 100644 --- a/examples/get_started/lv_example_get_started_3.c +++ b/examples/get_started/lv_example_get_started_3.c @@ -1,31 +1,33 @@ -//#include "../../lv_examples.h" -// -//static lv_obj_t * label; -// -//static void slider_event_cb(lv_obj_t * slider, lv_event_t event) -//{ -// if(event == LV_EVENT_VALUE_CHANGED) { -// /*Refresh the text*/ -// lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider)); -// lv_obj_align(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 20); /*Align below the slider*/ -// } -//} -// -///** -// * Create a slider and write its value on a label. -// */ -//void lv_example_get_started_3(void) -//{ -// /* Create a slider in the center of the display */ -// lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL); -// lv_obj_set_width(slider, 200); /*Set the width*/ -// lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0); /*Align to the center of the parent (screen)*/ -// lv_obj_set_event_cb(slider, slider_event_cb); /*Assign an event function*/ -// -// /* Create a label below the slider */ -// label = lv_label_create(lv_scr_act(), NULL); -// lv_label_set_text(label, "0"); -// lv_obj_align(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 20); /*Align below the slider*/ -//} -// -// +#include "../../lvgl.h" +#if LV_BUILD_EXAMPLES && LV_USE_SLIDER + +static lv_obj_t * label; + +static void slider_event_cb(lv_obj_t * slider, lv_event_t event) +{ + if(event == LV_EVENT_VALUE_CHANGED) { + /*Refresh the text*/ + lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider)); + lv_obj_align(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align below the slider*/ + } +} + +/** + * Create a slider and write its value on a label. + */ +void lv_example_get_started_3(void) +{ + /* Create a slider in the center of the display */ + lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL); + lv_obj_set_width(slider, 200); /*Set the width*/ + lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0); /*Align to the center of the parent (screen)*/ + lv_obj_add_event_cb(slider, slider_event_cb, NULL); /*Assign an event function*/ + + /* Create a label below the slider */ + label = lv_label_create(lv_scr_act(), NULL); + lv_label_set_text(label, "0"); + lv_obj_align(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /*Align below the slider*/ +} + +#endif +