You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
4.9 KiB
Python
124 lines
4.9 KiB
Python
2 years ago
|
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()
|