/Deck

基于稚晖君的Peak和FASTSHIFT的X-TRACK,享受丝滑UI并构建自己的玩具

Primary LanguageC

简介

Deck

基于 稚晖君的Peak,其使用了 FASTSHIFT 的码表 X-TRACK的丝滑 UI (IOS ViewController)并移植到了 ESP32 (修改部分库实现了 60 fps 纵享丝滑)上。

故忍不住自己来跑一跑学习一下 LVGL(久闻盛名),并且之后将基于此构建自己的小玩具。

修改:

  • 更新了启动界面和显示图片
  • 使用 3 个按键实现了 encoder 的逻辑

硬件

  • esp32doit-devkit-v1 开发板
  • 中景园1.3寸 IPS 屏(240*240)

硬件连线:

ESP32 屏幕
GPIO_23(MOSI) SDA
GPIO_18(SCLK) SCL
GPIO_2(DC) DC
GPIO_4(RST) RES
GPIO_15(BLK) BLK
  • Encoder->按键
    • ENTER -> GPIO_12
    • LEFT -> GPIO_33
    • RIGHT -> GPIO_25

GPIO(13 14 26)暂时不清楚和哪里冲突了,无法正常作为按键输入(始终为按下状态(低电平))

LVGL

以下仅为个人的学习记录。

图片

基于已有框架增添自己的图片:

动画

动画的官方文档解释了基本用法。 动画的实现主要需要指定 4 个参数,其他可选参数可看文档:

  • 执行对象:lv_anim_set_var(&a, obj);
  • 动画执行持续的时间: lv_anim_set_time(&a, duration);
  • 动画执行的方式:lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x); 设置回调函数
  • 动画执行的起点和终点:lv_anim_set_values(&a, start, end);

X-TRACE 的 UI 库对其进行了封装,下面简单分析一下。

UI库定义了一个类 lv_anim_timeline_wrapper_t 用来保存一个动画涉及到的基本参数,并且定义了一个宏ANIM_DEF(start_time, obj, attr, start, end)来实例化这个类。因此可以采用以下的代码方便地定义多个动画。

#define ANIM_DEF(start_time, obj, attr, start, end) \
     {start_time, obj, LV_ANIM_EXEC(attr), start, end, 500, lv_anim_path_ease_out, true}

    lv_anim_timeline_wrapper_t wrapper[] =
        {
            ANIM_DEF(0, ui.cont, width, 0, lv_obj_get_style_width(ui.cont, 0)),
            //ANIM_DEF(500, ui.labelLogo, y, lv_obj_get_style_height(ui.cont, 0), lv_obj_get_y(ui.labelLogo)), // 从下往上
           ANIM_DEF(500, ui.labelLogo, x, lv_obj_get_x(ui.labelLogo)+80, lv_obj_get_x(ui.labelLogo)),, //从右往左
            
            LV_ANIM_TIMELINE_WRAPPER_END
        };

    lv_anim_timeline_add_wrapper(ui.anim_timeline, wrapper);