diff options
| author | jacqueline <me@jacqueline.id.au> | 2023-06-01 15:41:47 +1000 |
|---|---|---|
| committer | jacqueline <me@jacqueline.id.au> | 2023-06-01 15:41:47 +1000 |
| commit | dd27c3530432ea0b09f01e604bf577f31d8ef841 (patch) | |
| tree | bbf86cf81a78f0ff0b07f31f1c390db473f26fd3 /lib/lvgl/examples/anim | |
| parent | 6fd588e970470b15936187980829916d0dbe77bb (diff) | |
| download | tangara-fw-dd27c3530432ea0b09f01e604bf577f31d8ef841.tar.gz | |
convert lvgl from submodule to a plain old directory
Diffstat (limited to 'lib/lvgl/examples/anim')
| m--------- | lib/lvgl | 0 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/index.rst | 17 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim.h | 41 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_1.c | 53 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_1.py | 41 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_2.c | 45 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_2.py | 41 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_3.c | 165 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_3.py | 123 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_timeline_1.c | 192 | ||||
| -rw-r--r-- | lib/lvgl/examples/anim/lv_example_anim_timeline_1.py | 143 |
11 files changed, 861 insertions, 0 deletions
diff --git a/lib/lvgl b/lib/lvgl deleted file mode 160000 -Subproject 0732400e7b564dd0e7dc4a924619d8e19c5b23a diff --git a/lib/lvgl/examples/anim/index.rst b/lib/lvgl/examples/anim/index.rst new file mode 100644 index 00000000..3eda5551 --- /dev/null +++ b/lib/lvgl/examples/anim/index.rst @@ -0,0 +1,17 @@ + +Start animation on an event +"""""""""""""""""""""""""""" + +.. lv_example:: anim/lv_example_anim_1 + :language: c + +Playback animation +""""""""""""""""""" +.. lv_example:: anim/lv_example_anim_2 + :language: c + +Animation timeline +""""""""""""""""""" +.. lv_example:: anim/lv_example_anim_timeline_1 + :language: c + diff --git a/lib/lvgl/examples/anim/lv_example_anim.h b/lib/lvgl/examples/anim/lv_example_anim.h new file mode 100644 index 00000000..48b61b02 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim.h @@ -0,0 +1,41 @@ +/** + * @file lv_example_anim.h + * + */ + +#ifndef LV_EXAMPLE_ANIM_H +#define LV_EXAMPLE_ANIM_H + +#ifdef __cplusplus +extern "C" { +#endif + +/********************* + * INCLUDES + *********************/ + +/********************* + * DEFINES + *********************/ + +/********************** + * TYPEDEFS + **********************/ + +/********************** + * GLOBAL PROTOTYPES + **********************/ +void lv_example_anim_1(void); +void lv_example_anim_2(void); +void lv_example_anim_3(void); +void lv_example_anim_timeline_1(void); + +/********************** + * MACROS + **********************/ + +#ifdef __cplusplus +} /*extern "C"*/ +#endif + +#endif /*LV_EXAMPLE_ANIM_H*/ diff --git a/lib/lvgl/examples/anim/lv_example_anim_1.c b/lib/lvgl/examples/anim/lv_example_anim_1.c new file mode 100644 index 00000000..6c16a918 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_1.c @@ -0,0 +1,53 @@ +#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(var, v); +} + +static void sw_event_cb(lv_event_t * e) +{ + lv_obj_t * sw = lv_event_get_target(e); + lv_obj_t * label = 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_time(&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_time(&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_scr_act()); + lv_label_set_text(label, "Hello animations!"); + lv_obj_set_pos(label, 100, 10); + + + lv_obj_t * sw = lv_switch_create(lv_scr_act()); + 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 diff --git a/lib/lvgl/examples/anim/lv_example_anim_1.py b/lib/lvgl/examples/anim/lv_example_anim_1.py new file mode 100644 index 00000000..64ee1ce6 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_1.py @@ -0,0 +1,41 @@ +def anim_x_cb(label, v): + label.set_x(v) + +def sw_event_cb(e,label): + sw = e.get_target() + + if sw.has_state(lv.STATE.CHECKED): + a = lv.anim_t() + a.init() + a.set_var(label) + a.set_values(label.get_x(), 100) + a.set_time(500) + a.set_path_cb(lv.anim_t.path_overshoot) + a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val)) + lv.anim_t.start(a) + else: + a = lv.anim_t() + a.init() + a.set_var(label) + a.set_values(label.get_x(), -label.get_width()) + a.set_time(500) + a.set_path_cb(lv.anim_t.path_ease_in) + a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val)) + lv.anim_t.start(a) + +# +# Start animation on an event +# + +label = lv.label(lv.scr_act()) +label.set_text("Hello animations!") +label.set_pos(100, 10) + + +sw = lv.switch(lv.scr_act()) +sw.center() +sw.add_state(lv.STATE.CHECKED) +sw.add_event_cb(lambda e: sw_event_cb(e,label), lv.EVENT.VALUE_CHANGED, None) + + + diff --git a/lib/lvgl/examples/anim/lv_example_anim_2.c b/lib/lvgl/examples/anim/lv_example_anim_2.c new file mode 100644 index 00000000..d030ed60 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_2.c @@ -0,0 +1,45 @@ +#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(var, v); +} + +static void anim_size_cb(void * var, int32_t v) +{ + lv_obj_set_size(var, v, v); +} + +/** + * Create a playback animation + */ +void lv_example_anim_2(void) +{ + + lv_obj_t * obj = lv_obj_create(lv_scr_act()); + 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_time(&a, 1000); + lv_anim_set_playback_delay(&a, 100); + lv_anim_set_playback_time(&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 diff --git a/lib/lvgl/examples/anim/lv_example_anim_2.py b/lib/lvgl/examples/anim/lv_example_anim_2.py new file mode 100644 index 00000000..1b0356a5 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_2.py @@ -0,0 +1,41 @@ +def anim_x_cb(obj, v): + obj.set_x(v) + +def anim_size_cb(obj, v): + obj.set_size(v, v) + + +# +# Create a playback animation +# +obj = lv.obj(lv.scr_act()) +obj.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), 0) +obj.set_style_radius(lv.RADIUS.CIRCLE, 0) + +obj.align(lv.ALIGN.LEFT_MID, 10, 0) + +a1 = lv.anim_t() +a1.init() +a1.set_var(obj) +a1.set_values(10, 50) +a1.set_time(1000) +a1.set_playback_delay(100) +a1.set_playback_time(300) +a1.set_repeat_delay(500) +a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE) +a1.set_path_cb(lv.anim_t.path_ease_in_out) +a1.set_custom_exec_cb(lambda a1,val: anim_size_cb(obj,val)) +lv.anim_t.start(a1) + +a2 = lv.anim_t() +a2.init() +a2.set_var(obj) +a2.set_values(10, 240) +a2.set_time(1000) +a2.set_playback_delay(100) +a2.set_playback_time(300) +a2.set_repeat_delay(500) +a2.set_repeat_count(lv.ANIM_REPEAT.INFINITE) +a2.set_path_cb(lv.anim_t.path_ease_in_out) +a2.set_custom_exec_cb(lambda a1,val: anim_x_cb(obj,val)) +lv.anim_t.start(a2) diff --git a/lib/lvgl/examples/anim/lv_example_anim_3.c b/lib/lvgl/examples/anim/lv_example_anim_3.c new file mode 100644 index 00000000..dedcad99 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_3.c @@ -0,0 +1,165 @@ +#include "../lv_examples.h" +#if LV_BUILD_EXAMPLES && LV_USE_SLIDER && LV_USE_CHART && LV_USE_BTN && 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; + 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 diff --git a/lib/lvgl/examples/anim/lv_example_anim_3.py b/lib/lvgl/examples/anim/lv_example_anim_3.py new file mode 100644 index 00000000..ef7ebb2f --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_3.py @@ -0,0 +1,123 @@ +from micropython import const + +# 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. +# + +CHART_POINTS_NUM = const(256) + +class LvExampleAnim_3(): + # + # create an animation + # + def __init__(self): + # Create a container with grid + col_dsc = [lv.grid_fr(1), 200, lv.grid_fr(1), lv.GRID_TEMPLATE.LAST] + row_dsc = [30, 10, 10, lv.grid_fr(1),lv.GRID_TEMPLATE.LAST] + + self.p1 = 0 + self.p2 = 0 + self.cont = lv.obj(lv.scr_act()) + self.cont.set_style_pad_all(2, lv.PART.MAIN) + self.cont.set_style_pad_column(10, lv.PART.MAIN) + self.cont.set_style_pad_row(10, lv.PART.MAIN) + self.cont.set_grid_dsc_array(col_dsc, row_dsc) + self.cont.set_size(320, 240) + self.cont.center() + self.page_obj_init(self.cont) + + self.a = lv.anim_t() + self.a.init() + self.a.set_var(self.anim_obj) + end = self.cont.get_style_width(lv.PART.MAIN) - self.anim_obj.get_style_width(lv.PART.MAIN) - 10 + self.a.set_values(5, end) + self.a.set_time(2000) + self.a.set_custom_exec_cb(lambda a,val: self.anim_x_cb(self.anim_obj,val)) + self.a.set_path_cb(self.anim_path_bezier3_cb) + self.refer_chart_cubic_bezier() + + def page_obj_init(self,par): + self.anim_obj = lv.obj(par) + self.anim_obj.set_size(30, 30) + self.anim_obj.set_align(lv.ALIGN.TOP_LEFT) + self.anim_obj.clear_flag(lv.obj.FLAG.SCROLLABLE) + self.anim_obj.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), lv.PART.MAIN) + self.anim_obj.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,lv.GRID_ALIGN.START, 0, 1) + + self.p1_label = lv.label(par) + self.p2_label = lv.label(par) + self.p1_label.set_text("p1:0") + self.p2_label.set_text("p2:0") + self.p1_label.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,lv.GRID_ALIGN.START, 1, 1) + self.p2_label.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,lv.GRID_ALIGN.START, 2, 1) + + self.p1_slider = lv.slider(par) + self.p2_slider = lv.slider(par) + self.p1_slider.set_range(0, 1024) + self.p2_slider.set_range(0, 1024) + self.p1_slider.set_style_pad_all(2, lv.PART.KNOB) + self.p2_slider.set_style_pad_all(2, lv.PART.KNOB) + self.p1_slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None) + self.p2_slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None) + self.p1_slider.set_grid_cell(lv.GRID_ALIGN.STRETCH, 1, 1,lv.GRID_ALIGN.START, 1, 1) + self.p2_slider.set_grid_cell(lv.GRID_ALIGN.STRETCH, 1, 1,lv.GRID_ALIGN.START, 2, 1) + + self.run_btn = lv.btn(par) + self.run_btn.add_event_cb(self.run_btn_event_handler, lv.EVENT.CLICKED, None) + btn_label = lv.label(self.run_btn) + btn_label.set_text(lv.SYMBOL.PLAY) + btn_label.center() + self.run_btn.set_grid_cell(lv.GRID_ALIGN.STRETCH, 2, 1,lv.GRID_ALIGN.STRETCH, 1, 2) + + self.chart = lv.chart(par) + self.chart.set_style_pad_all(0, lv.PART.MAIN) + self.chart.set_style_size(0, lv.PART.INDICATOR) + self.chart.set_type(lv.chart.TYPE.SCATTER) + self.ser1 = self.chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y) + self.chart.set_range(lv.chart.AXIS.PRIMARY_Y, 0, 1024) + self.chart.set_range(lv.chart.AXIS.PRIMARY_X, 0, 1024) + self.chart.set_point_count(CHART_POINTS_NUM) + self.chart.set_grid_cell(lv.GRID_ALIGN.STRETCH, 0, 3,lv.GRID_ALIGN.STRETCH, 3, 1) + + def refer_chart_cubic_bezier(self): + for i in range(CHART_POINTS_NUM+1): + t = i * (1024 // CHART_POINTS_NUM) + step = lv.bezier3(t, 0, self.p1, self.p2, 1024) + self.chart.set_value_by_id2(self.ser1, i, t, step) + self.chart.refresh() + + def slider_event_cb(self,e): + slider = e.get_target() + + if slider == self.p1_slider: + label = self.p1_label + self.p1 = slider.get_value() + label.set_text("p1: {:d}".format(self.p1)) + else: + label = self.p2_label + self.p2 = slider.get_value() + label.set_text("p1: {:d}".format(self.p2)) + + self.refer_chart_cubic_bezier() + + + def run_btn_event_handler(self,e): + + code = e.get_code() + if code == lv.EVENT.CLICKED: + lv.anim_t.start(self.a) + + def anim_x_cb(self, var, v): + var.set_style_translate_x(v, lv.PART.MAIN) + + def anim_path_bezier3_cb(self,a): + t = lv.map(a.act_time, 0, a.time, 0, 1024) + step = lv.bezier3(t, 0, self.p1, self.p2, 1024) + new_value = step * (a.end_value - a.start_value) + new_value = new_value >> 10 + new_value += a.start_value + return new_value + +lv_example_anim_3 = LvExampleAnim_3() diff --git a/lib/lvgl/examples/anim/lv_example_anim_timeline_1.c b/lib/lvgl/examples/anim/lv_example_anim_timeline_1.c new file mode 100644 index 00000000..d2d4e81b --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_timeline_1.c @@ -0,0 +1,192 @@ +#include "../lv_examples.h" +#if LV_USE_FLEX && LV_BUILD_EXAMPLES + +static lv_anim_timeline_t * anim_timeline = NULL; + +static lv_obj_t * obj1 = NULL; +static lv_obj_t * obj2 = NULL; +static lv_obj_t * obj3 = NULL; + +static const lv_coord_t obj_width = 90; +static const lv_coord_t obj_height = 70; + +static void set_width(void * var, int32_t v) +{ + lv_obj_set_width((lv_obj_t *)var, v); +} + +static void set_height(void * var, int32_t v) +{ + lv_obj_set_height((lv_obj_t *)var, v); +} + +static void anim_timeline_create(void) +{ + /* 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_early_apply(&a1, false); + lv_anim_set_exec_cb(&a1, (lv_anim_exec_xcb_t)set_width); + lv_anim_set_path_cb(&a1, lv_anim_path_overshoot); + lv_anim_set_time(&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_early_apply(&a2, false); + lv_anim_set_exec_cb(&a2, (lv_anim_exec_xcb_t)set_height); + lv_anim_set_path_cb(&a2, lv_anim_path_ease_out); + lv_anim_set_time(&a2, 300); + + /* 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_early_apply(&a3, false); + lv_anim_set_exec_cb(&a3, (lv_anim_exec_xcb_t)set_width); + lv_anim_set_path_cb(&a3, lv_anim_path_overshoot); + lv_anim_set_time(&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_early_apply(&a4, false); + lv_anim_set_exec_cb(&a4, (lv_anim_exec_xcb_t)set_height); + lv_anim_set_path_cb(&a4, lv_anim_path_ease_out); + lv_anim_set_time(&a4, 300); + + /* 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_early_apply(&a5, false); + lv_anim_set_exec_cb(&a5, (lv_anim_exec_xcb_t)set_width); + lv_anim_set_path_cb(&a5, lv_anim_path_overshoot); + lv_anim_set_time(&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_early_apply(&a6, false); + lv_anim_set_exec_cb(&a6, (lv_anim_exec_xcb_t)set_height); + lv_anim_set_path_cb(&a6, lv_anim_path_ease_out); + lv_anim_set_time(&a6, 300); + + /* Create anim timeline */ + anim_timeline = lv_anim_timeline_create(); + 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); +} + +static void btn_start_event_handler(lv_event_t * e) +{ + lv_obj_t * btn = lv_event_get_target(e); + + if(!anim_timeline) { + anim_timeline_create(); + } + + 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_del_event_handler(lv_event_t * e) +{ + LV_UNUSED(e); + if(anim_timeline) { + lv_anim_timeline_del(anim_timeline); + anim_timeline = NULL; + } +} + +static void btn_stop_event_handler(lv_event_t * e) +{ + LV_UNUSED(e); + if(anim_timeline) { + lv_anim_timeline_stop(anim_timeline); + } +} + +static void slider_prg_event_handler(lv_event_t * e) +{ + lv_obj_t * slider = lv_event_get_target(e); + + if(!anim_timeline) { + anim_timeline_create(); + } + + int32_t progress = lv_slider_get_value(slider); + lv_anim_timeline_set_progress(anim_timeline, progress); +} + +/** + * Create an animation timeline + */ +void lv_example_anim_timeline_1(void) +{ + lv_obj_t * par = lv_scr_act(); + 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_btn_create(par); + lv_obj_add_event_cb(btn_start, btn_start_event_handler, LV_EVENT_VALUE_CHANGED, NULL); + 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_del */ + lv_obj_t * btn_del = lv_btn_create(par); + lv_obj_add_event_cb(btn_del, btn_del_event_handler, LV_EVENT_CLICKED, NULL); + lv_obj_add_flag(btn_del, LV_OBJ_FLAG_IGNORE_LAYOUT); + lv_obj_align(btn_del, LV_ALIGN_TOP_MID, 0, 20); + + lv_obj_t * label_del = lv_label_create(btn_del); + lv_label_set_text(label_del, "Delete"); + lv_obj_center(label_del); + + /* create btn_stop */ + lv_obj_t * btn_stop = lv_btn_create(par); + lv_obj_add_event_cb(btn_stop, btn_stop_event_handler, LV_EVENT_CLICKED, NULL); + lv_obj_add_flag(btn_stop, LV_OBJ_FLAG_IGNORE_LAYOUT); + lv_obj_align(btn_stop, LV_ALIGN_TOP_MID, 100, 20); + + lv_obj_t * label_stop = lv_label_create(btn_stop); + lv_label_set_text(label_stop, "Stop"); + lv_obj_center(label_stop); + + /* 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, NULL); + 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, 65535); + + /* create 3 objects */ + obj1 = lv_obj_create(par); + lv_obj_set_size(obj1, obj_width, obj_height); + + obj2 = lv_obj_create(par); + lv_obj_set_size(obj2, obj_width, obj_height); + + obj3 = lv_obj_create(par); + lv_obj_set_size(obj3, obj_width, obj_height); +} + +#endif diff --git a/lib/lvgl/examples/anim/lv_example_anim_timeline_1.py b/lib/lvgl/examples/anim/lv_example_anim_timeline_1.py new file mode 100644 index 00000000..b5ed3e54 --- /dev/null +++ b/lib/lvgl/examples/anim/lv_example_anim_timeline_1.py @@ -0,0 +1,143 @@ +class LV_ExampleAnimTimeline_1(object): + + def __init__(self): + self.obj_width = 120 + self.obj_height = 150 + # + # Create an animation timeline + # + + self.par = lv.scr_act() + self.par.set_flex_flow(lv.FLEX_FLOW.ROW) + self.par.set_flex_align(lv.FLEX_ALIGN.SPACE_AROUND, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) + + self.btn_run = lv.btn(self.par) + self.btn_run.add_event_cb(self.btn_run_event_handler, lv.EVENT.VALUE_CHANGED, None) + self.btn_run.add_flag(lv.obj.FLAG.IGNORE_LAYOUT) + self.btn_run.add_flag(lv.obj.FLAG.CHECKABLE) + self.btn_run.align(lv.ALIGN.TOP_MID, -50, 20) + + self.label_run = lv.label(self.btn_run) + self.label_run.set_text("Run") + self.label_run.center() + + self.btn_del = lv.btn(self.par) + self.btn_del.add_event_cb(self.btn_del_event_handler, lv.EVENT.CLICKED, None) + self.btn_del.add_flag(lv.obj.FLAG.IGNORE_LAYOUT) + self.btn_del.align(lv.ALIGN.TOP_MID, 50, 20) + + self.label_del = lv.label(self.btn_del) + self.label_del.set_text("Stop") + self.label_del.center() + + self.slider = lv.slider(self.par) + self.slider.add_event_cb(self.slider_prg_event_handler, lv.EVENT.VALUE_CHANGED, None) + self.slider.add_flag(lv.obj.FLAG.IGNORE_LAYOUT) + self.slider.align(lv.ALIGN.BOTTOM_RIGHT, -20, -20) + self.slider.set_range(0, 65535) + + self.obj1 = lv.obj(self.par) + self.obj1.set_size(self.obj_width, self.obj_height) + + self.obj2 = lv.obj(self.par) + self.obj2.set_size(self.obj_width, self.obj_height) + + self.obj3 = lv.obj(self.par) + self.obj3.set_size(self.obj_width, self.obj_height) + + self.anim_timeline = None + + def set_width(self,obj, v): + obj.set_width(v) + + def set_height(self,obj, v): + obj.set_height(v) + + def anim_timeline_create(self): + # obj1 + self.a1 = lv.anim_t() + self.a1.init() + self.a1.set_values(0, self.obj_width) + self.a1.set_early_apply(False) + self.a1.set_custom_exec_cb(lambda a,v: self.set_width(self.obj1,v)) + self.a1.set_path_cb(lv.anim_t.path_overshoot) + self.a1.set_time(300) + + self.a2 = lv.anim_t() + self.a2.init() + self.a2.set_values(0, self.obj_height) + self.a2.set_early_apply(False) + self.a2.set_custom_exec_cb(lambda a,v: self.set_height(self.obj1,v)) + self.a2.set_path_cb(lv.anim_t.path_ease_out) + self.a2.set_time(300) + + # obj2 + self.a3=lv.anim_t() + self.a3.init() + self.a3.set_values(0, self.obj_width) + self.a3.set_early_apply(False) + self.a3.set_custom_exec_cb(lambda a,v: self.set_width(self.obj2,v)) + self.a3.set_path_cb(lv.anim_t.path_overshoot) + self.a3.set_time(300) + + self.a4 = lv.anim_t() + self.a4.init() + self.a4.set_values(0, self.obj_height) + self.a4.set_early_apply(False) + self.a4.set_custom_exec_cb(lambda a,v: self.set_height(self.obj2,v)) + self.a4.set_path_cb(lv.anim_t.path_ease_out) + self.a4.set_time(300) + + # obj3 + self.a5 = lv.anim_t() + self.a5.init() + self.a5.set_values(0, self.obj_width) + self.a5.set_early_apply(False) + self.a5.set_custom_exec_cb(lambda a,v: self.set_width(self.obj3,v)) + self.a5.set_path_cb(lv.anim_t.path_overshoot) + self.a5.set_time(300) + + self.a6 = lv.anim_t() + self.a6.init() + self.a6.set_values(0, self.obj_height) + self.a6.set_early_apply(False) + self.a6.set_custom_exec_cb(lambda a,v: self.set_height(self.obj3,v)) + self.a6.set_path_cb(lv.anim_t.path_ease_out) + self.a6.set_time(300) + + # Create anim timeline + print("Create new anim_timeline") + self.anim_timeline = lv.anim_timeline_create() + lv.anim_timeline_add(self.anim_timeline, 0, self.a1) + lv.anim_timeline_add(self.anim_timeline, 0, self.a2) + lv.anim_timeline_add(self.anim_timeline, 200, self.a3) + lv.anim_timeline_add(self.anim_timeline, 200, self.a4) + lv.anim_timeline_add(self.anim_timeline, 400, self.a5) + lv.anim_timeline_add(self.anim_timeline, 400, self.a6) + + def slider_prg_event_handler(self,e): + slider = e.get_target() + + if not self.anim_timeline: + self.anim_timeline_create() + + progress = slider.get_value() + lv.anim_timeline_set_progress(self.anim_timeline, progress) + + + def btn_run_event_handler(self,e): + btn = e.get_target() + if not self.anim_timeline: + self.anim_timeline_create() + + reverse = btn.has_state(lv.STATE.CHECKED) + lv.anim_timeline_set_reverse(self.anim_timeline,reverse) + lv.anim_timeline_start(self.anim_timeline) + + def btn_del_event_handler(self,e): + if self.anim_timeline: + lv.anim_timeline_del(self.anim_timeline) + self.anim_timeline = None + + +lv_example_anim_timeline_1 = LV_ExampleAnimTimeline_1() |
