LVGL 指针表盘界面的实现

一、前言

       中科蓝讯 BT8958B SDK 中移植了 LVGL 7.11.0 版本的图形库，笔者将在此基础上跟大家分享一下指针表盘界面的实现。

二、图片资源的转换与添加

       首先需要进行图片资源的转换，可通过 LVGL 官网图像转换工具进行转换。

1. 进行图像格式转换

       以将图片转换为源文件为例，源文件是以数组的形式存放图片的像素颜色数据。以秒针图片进行转换为例，如图 2-1 所示。

图 2-1

       需要注意的是，秒针图片是带有透明色的图片，除了秒针部分，背景为透明色。LVGL 支持带有不透明度的图片的显示，这里的颜色格式需选择 CF_TRUE_COLOR_ALPHA。CF_TRUE_COLOR 存储RGB颜色，而 CF_TRUE_COLOR_ALPHA 是在此基础上为每个像素添加一个字节的 Alpha 通道，用于存储不透明度。

       输出格式选择 C array 后就可以进行转换，得到对应的 .c 文件。如图 2-2 所示，LVGL 中以图片数据类型结构体去存放对应的变量信息。

图 2-2

2. 进行图片资源添加

       将生成的 sec_150.c 文件复制到 SDK 中内部图片资源的存放路径 app\gui\lvgl_ui 下，接着将该文件添加到工程的对应位置。

       在使用前需要对该图片变量进行声明，如图 2-3 所示。

图 2-3

三、LVGL图像显示

       表盘图片资源的添加可参考上面的内容。首先进行表盘图片的显示。如图 3-1 所示，创建图像对象进行显示，图片显示的用法类似，此处先不展开说明。

图 3-1

下面以秒针图片显示为例介绍 LVGL 的图像显示。如图 3-2 所示，以表盘图片对象为父对象，创建子对象。接着设置图片的显示源，调用该图片数组。接着设置对齐方式和偏移坐标，对齐方式设置 LV_ALIGN_CENTER，为中心对齐。

图 3-2

       图片显示效果如图 3-3 所示。

图 3-3

四、指针表盘的简单应用

1. 图片旋转

       接下来介绍通过图片的旋转去完成指针表盘时间的显示。LVGL 中可通过 lv_img_set_angle(img, angle) 函数对图片对象进行旋转。需注意的是，这里角度精度为 0.1 度，例如需要设置 90 度时，对应的 angle 需设置 900。

2. 设置旋转轴驱点

       默认情况下，旋转的枢轴点是图像的中心，可以根据图片旋转需要进行设置。可通过 lv_img_set_pivot(img, pivot_x, pivot_y) 函数进行设置。lv_img_set_pivot(img, 0, 0) 则是设置图片旋转的枢轴点为图像的左上角。

3. 应用

       在 SDK 中可通过获取 rtc_tm 结构体对应的变量值得到对应的时间值去计算角度。

图 4 -1

       如图 4-2 所示，首先进行时、分、秒图片对象旋转中心的设置，下一步获取对应的时间值，进行角度的计算，再通过设置旋转角度即可。

图 4-2

       对于秒针图像，每走一秒需旋转 6 度。对于分针图像，每走一分钟也是需旋转 6 度。而对于时针图像，时针旋转的角度为小时旋转角度与分钟旋转角度的和，每走一小时，需旋转 30 度，每走一分钟，需旋转 0.5 度。

       显示效果如图 4-3 所示。

图 4-3

五、结语

       以上就是本篇文章的全部内容，感谢阅读。

六、参考资料

       LVGL 官方手册 https://docs.lvgl.io/7.11/widgets/list.html#