1from micropython import const
2
3# the example show the use of cubic-bezier3 in animation.
4# the control point P1,P2 of cubic-bezier3 can be adjusted by slider.
5# and the chart shows the cubic-bezier3 in real time. you can click
6# run button see animation in current point of cubic-bezier3.
7#
8
9CHART_POINTS_NUM = const(256)
10
11class LvExampleAnim_3():
12    #
13    # create an animation
14    #
15    def __init__(self):
16        # Create a container with grid
17        col_dsc = [lv.grid_fr(1), 200, lv.grid_fr(1), lv.GRID_TEMPLATE.LAST]
18        row_dsc = [30, 10, 10, lv.grid_fr(1),lv.GRID_TEMPLATE.LAST]
19
20        self.p1 = 0
21        self.p2 = 0
22        self.cont = lv.obj(lv.scr_act())
23        self.cont.set_style_pad_all(2, lv.PART.MAIN)
24        self.cont.set_style_pad_column(10, lv.PART.MAIN)
25        self.cont.set_style_pad_row(10, lv.PART.MAIN)
26        self.cont.set_grid_dsc_array(col_dsc, row_dsc)
27        self.cont.set_size(320, 240)
28        self.cont.center()
29        self.page_obj_init(self.cont)
30
31        self.a = lv.anim_t()
32        self.a.init()
33        self.a.set_var(self.anim_obj)
34        end = self.cont.get_style_width(lv.PART.MAIN) - self.anim_obj.get_style_width(lv.PART.MAIN) - 10
35        self.a.set_values(5, end)
36        self.a.set_time(2000)
37        self.a.set_custom_exec_cb(lambda a,val: self.anim_x_cb(self.anim_obj,val))
38        self.a.set_path_cb(self.anim_path_bezier3_cb)
39        self.refer_chart_cubic_bezier()
40
41    def page_obj_init(self,par):
42        self.anim_obj = lv.obj(par)
43        self.anim_obj.set_size(30, 30)
44        self.anim_obj.set_align(lv.ALIGN.TOP_LEFT)
45        self.anim_obj.clear_flag(lv.obj.FLAG.SCROLLABLE)
46        self.anim_obj.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), lv.PART.MAIN)
47        self.anim_obj.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,lv.GRID_ALIGN.START, 0, 1)
48
49        self.p1_label = lv.label(par)
50        self.p2_label = lv.label(par)
51        self.p1_label.set_text("p1:0")
52        self.p2_label.set_text("p2:0")
53        self.p1_label.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,lv.GRID_ALIGN.START, 1, 1)
54        self.p2_label.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,lv.GRID_ALIGN.START, 2, 1)
55
56        self.p1_slider = lv.slider(par)
57        self.p2_slider = lv.slider(par)
58        self.p1_slider.set_range(0, 1024)
59        self.p2_slider.set_range(0, 1024)
60        self.p1_slider.set_style_pad_all(2, lv.PART.KNOB)
61        self.p2_slider.set_style_pad_all(2, lv.PART.KNOB)
62        self.p1_slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
63        self.p2_slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
64        self.p1_slider.set_grid_cell(lv.GRID_ALIGN.STRETCH, 1, 1,lv.GRID_ALIGN.START, 1, 1)
65        self.p2_slider.set_grid_cell(lv.GRID_ALIGN.STRETCH, 1, 1,lv.GRID_ALIGN.START, 2, 1)
66
67        self.run_btn = lv.btn(par)
68        self.run_btn.add_event_cb(self.run_btn_event_handler, lv.EVENT.CLICKED, None)
69        btn_label = lv.label(self.run_btn)
70        btn_label.set_text(lv.SYMBOL.PLAY)
71        btn_label.center()
72        self.run_btn.set_grid_cell(lv.GRID_ALIGN.STRETCH, 2, 1,lv.GRID_ALIGN.STRETCH, 1, 2)
73
74        self.chart = lv.chart(par)
75        self.chart.set_style_pad_all(0, lv.PART.MAIN)
76        self.chart.set_style_size(0, lv.PART.INDICATOR)
77        self.chart.set_type(lv.chart.TYPE.SCATTER)
78        self.ser1 = self.chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
79        self.chart.set_range(lv.chart.AXIS.PRIMARY_Y, 0, 1024)
80        self.chart.set_range(lv.chart.AXIS.PRIMARY_X, 0, 1024)
81        self.chart.set_point_count(CHART_POINTS_NUM)
82        self.chart.set_grid_cell(lv.GRID_ALIGN.STRETCH, 0, 3,lv.GRID_ALIGN.STRETCH, 3, 1)
83
84    def refer_chart_cubic_bezier(self):
85        for i in range(CHART_POINTS_NUM+1):
86            t = i * (1024 // CHART_POINTS_NUM)
87            step = lv.bezier3(t, 0, self.p1, self.p2, 1024)
88            self.chart.set_value_by_id2(self.ser1, i, t, step)
89            self.chart.refresh()
90
91    def slider_event_cb(self,e):
92        slider = e.get_target()
93
94        if slider == self.p1_slider:
95            label = self.p1_label
96            self.p1 = slider.get_value()
97            label.set_text("p1: {:d}".format(self.p1))
98        else:
99            label = self.p2_label
100            self.p2 = slider.get_value()
101            label.set_text("p1: {:d}".format(self.p2))
102
103        self.refer_chart_cubic_bezier()
104
105
106    def run_btn_event_handler(self,e):
107
108        code = e.get_code()
109        if code == lv.EVENT.CLICKED:
110                lv.anim_t.start(self.a)
111
112    def anim_x_cb(self, var, v):
113        var.set_style_translate_x(v, lv.PART.MAIN)
114
115    def anim_path_bezier3_cb(self,a):
116        t = lv.map(a.act_time, 0, a.time, 0, 1024)
117        step = lv.bezier3(t, 0, self.p1, self.p2, 1024)
118        new_value = step * (a.end_value - a.start_value)
119        new_value = new_value >> 10
120        new_value += a.start_value
121        return new_value
122
123lv_example_anim_3 = LvExampleAnim_3()
124