btn_demo.lua 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. local btn_demo = {}
  2. --demo1
  3. local function event_handler(obj, event)
  4. if(event == lvgl.EVENT_CLICKED) then
  5. print("Clicked\n")
  6. elseif(event == lvgl.EVENT_VALUE_CHANGED) then
  7. print("Toggled\n")
  8. end
  9. end
  10. function btn_demo.demo1()
  11. local label
  12. local btn1 = lvgl.btn_create(lvgl.scr_act(), nil)
  13. lvgl.obj_set_event_cb(btn1, event_handler)
  14. lvgl.obj_align(btn1, nil, lvgl.ALIGN_CENTER, 0, -40)
  15. label = lvgl.label_create(btn1, nil)
  16. lvgl.label_set_text(label, "Button")
  17. local btn2 = lvgl.btn_create(lvgl.scr_act(), nil)
  18. lvgl.obj_set_event_cb(btn2, event_handler)
  19. lvgl.obj_align(btn2, nil, lvgl.ALIGN_CENTER, 0, 40)
  20. lvgl.btn_set_checkable(btn2, true)
  21. lvgl.btn_toggle(btn2)
  22. lvgl.btn_set_fit2(btn2, lvgl.FIT_NONE, lvgl.FIT_TIGHT)
  23. label = lvgl.label_create(btn2, nil)
  24. lvgl.label_set_text(label, "Toggled")
  25. end
  26. --demo2
  27. function btn_demo.demo2()
  28. local path_overshoot = lvgl.anim_path_t()
  29. lvgl.anim_path_init(path_overshoot);
  30. lvgl.anim_path_set_cb(path_overshoot, "overshoot");
  31. local path_ease_out = lvgl.anim_path_t()
  32. lvgl.anim_path_init(path_ease_out);
  33. lvgl.anim_path_set_cb(path_ease_out, "ease_out");
  34. local path_ease_in_out = lvgl.anim_path_t()
  35. lvgl.anim_path_init(path_ease_in_out);
  36. lvgl.anim_path_set_cb(path_ease_in_out, "ease_in_out");
  37. --Gum-like button
  38. local style_gum = lvgl.style_t()
  39. lvgl.style_init(style_gum);
  40. lvgl.style_set_transform_width(style_gum, lvgl.STATE_PRESSED, 10);
  41. lvgl.style_set_transform_height(style_gum, lvgl.STATE_PRESSED, -10);
  42. lvgl.style_set_value_letter_space(style_gum, lvgl.STATE_PRESSED, 5);
  43. lvgl.style_set_transition_path(style_gum, lvgl.STATE_DEFAULT, path_overshoot);
  44. lvgl.style_set_transition_path(style_gum, lvgl.STATE_PRESSED, path_ease_in_out);
  45. lvgl.style_set_transition_time(style_gum, lvgl.STATE_DEFAULT, 250);
  46. lvgl.style_set_transition_delay(style_gum, lvgl.STATE_DEFAULT, 100);
  47. lvgl.style_set_transition_prop_1(style_gum, lvgl.STATE_DEFAULT, lvgl.STYLE_TRANSFORM_WIDTH);
  48. lvgl.style_set_transition_prop_2(style_gum, lvgl.STATE_DEFAULT, lvgl.STYLE_TRANSFORM_HEIGHT);
  49. lvgl.style_set_transition_prop_3(style_gum, lvgl.STATE_DEFAULT, lvgl.STYLE_VALUE_LETTER_SPACE);
  50. local btn1 = lvgl.btn_create(lvgl.scr_act(), nil);
  51. lvgl.obj_align(btn1, nil, lvgl.ALIGN_CENTER, 0, -80);
  52. lvgl.obj_add_style(btn1, lvgl.BTN_PART_MAIN, style_gum);
  53. --Instead of creating a label add a values string
  54. lvgl.obj_set_style_local_value_str(btn1, lvgl.BTN_PART_MAIN, lvgl.STATE_DEFAULT, "Gum");
  55. --Halo on press
  56. local style_halo = lvgl.style_t()
  57. lvgl.style_init(style_halo);
  58. lvgl.style_set_transition_time(style_halo, lvgl.STATE_PRESSED, 400);
  59. lvgl.style_set_transition_time(style_halo, lvgl.STATE_DEFAULT, 0);
  60. lvgl.style_set_transition_delay(style_halo, lvgl.STATE_DEFAULT, 200);
  61. lvgl.style_set_outline_width(style_halo, lvgl.STATE_DEFAULT, 0);
  62. lvgl.style_set_outline_width(style_halo, lvgl.STATE_PRESSED, 20);
  63. lvgl.style_set_outline_opa(style_halo, lvgl.STATE_DEFAULT, lvgl.OPA_COVER);
  64. lvgl.style_set_outline_opa(style_halo, lvgl.STATE_FOCUSED, lvgl.OPA_COVER); --Just to be sure, the theme might use it*/
  65. lvgl.style_set_outline_opa(style_halo, lvgl.STATE_PRESSED, lvgl.OPA_TRANSP);
  66. lvgl.style_set_transition_prop_1(style_halo, lvgl.STATE_DEFAULT, lvgl.STYLE_OUTLINE_OPA);
  67. lvgl.style_set_transition_prop_2(style_halo, lvgl.STATE_DEFAULT, lvgl.STYLE_OUTLINE_WIDTH);
  68. local btn2 = lvgl.btn_create(lvgl.scr_act(), nil);
  69. lvgl.obj_align(btn2, nil, lvgl.ALIGN_CENTER, 0, 0);
  70. lvgl.obj_add_style(btn2, lvgl.BTN_PART_MAIN, style_halo);
  71. lvgl.obj_set_style_local_value_str(btn2, lvgl.BTN_PART_MAIN, lvgl.STATE_DEFAULT, "Halo");
  72. --Ripple on press
  73. local style_ripple = lvgl.style_t()
  74. lvgl.style_init(style_ripple);
  75. lvgl.style_set_transition_time(style_ripple, lvgl.STATE_PRESSED, 300);
  76. lvgl.style_set_transition_time(style_ripple, lvgl.STATE_DEFAULT, 0);
  77. lvgl.style_set_transition_delay(style_ripple, lvgl.STATE_DEFAULT, 300);
  78. lvgl.style_set_bg_opa(style_ripple, lvgl.STATE_DEFAULT, 0);
  79. lvgl.style_set_bg_opa(style_ripple, lvgl.STATE_PRESSED, lvgl.OPA_80);
  80. lvgl.style_set_border_width(style_ripple, lvgl.STATE_DEFAULT, 0);
  81. lvgl.style_set_outline_width(style_ripple, lvgl.STATE_DEFAULT, 0);
  82. lvgl.style_set_transform_width(style_ripple, lvgl.STATE_DEFAULT, -20);
  83. lvgl.style_set_transform_height(style_ripple, lvgl.STATE_DEFAULT, -20);
  84. lvgl.style_set_transform_width(style_ripple, lvgl.STATE_PRESSED, 0);
  85. lvgl.style_set_transform_height(style_ripple, lvgl.STATE_PRESSED, 0);
  86. lvgl.style_set_transition_path(style_ripple, lvgl.STATE_DEFAULT, path_ease_out);
  87. lvgl.style_set_transition_prop_1(style_ripple, lvgl.STATE_DEFAULT, lvgl.STYLE_BG_OPA);
  88. lvgl.style_set_transition_prop_2(style_ripple, lvgl.STATE_DEFAULT, lvgl.STYLE_TRANSFORM_WIDTH);
  89. lvgl.style_set_transition_prop_3(style_ripple, lvgl.STATE_DEFAULT, lvgl.STYLE_TRANSFORM_HEIGHT);
  90. local btn3 = lvgl.btn_create(lvgl.scr_act(), nil);
  91. lvgl.obj_align(btn3, nil, lvgl.ALIGN_CENTER, 0, 80);
  92. lvgl.obj_add_style(btn3, lvgl.BTN_PART_MAIN, style_ripple);
  93. lvgl.obj_set_style_local_value_str(btn3, lvgl.BTN_PART_MAIN, lvgl.STATE_DEFAULT, "Ripple");
  94. end
  95. return btn_demo