lv_example_anim_3.py 4.9 KB

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