#include "../lv_examples.h" #if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_CHART && LV_USE_BTN /** * 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; uint16_t p1; uint16_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_btn_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 lv_coord_t col_dsc[] = {LV_GRID_FR(1), 200, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST}; static lv_coord_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_scr_act()); 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_time(&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) { uint32_t t = lv_map(a->act_time, 0, a->time, 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 ++) { uint32_t t = i * (1024 / CHART_POINTS_NUM); int32_t step = lv_bezier3(t, 0, ginfo.p1, ginfo.p2, 1024); lv_chart_set_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(var, v, LV_PART_MAIN); } static void run_btn_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(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_clear_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_btn_create(par); lv_obj_add_event_cb(ginfo.run_btn, run_btn_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, 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_range(ginfo.chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1024); lv_chart_set_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