图像显示专用驱动芯片ZDP1440系列小技巧-如何提升环形进度条帧率

本文导读

ZDP1440是一款基于开源GUI引擎的图像显示专用驱动芯片，可以通过串口或者SPI与其他芯片通信。在一些仪器仪表中会有环形进度条或者扇形进度条的需求，本文将介绍如何提升这部分动画的帧率。

在一些使用场景中，需要在UI上显示一个仪表盘，仪表盘上存在环形进度条或扇形进度条。在没有GPU的平台直接使用现有的控件实现，会调用软件vg抗锯齿算法，优化显示效果，导致显示效率大幅降低。为了提升这部分应用场景的帧率，我们制作了一个自定义控件（progress-circle-no-vg），不使用软件vg绘图，提升显示效率。
使用此控件绘制，会额外占用进度条图片大小的32位色的内存空间，且进度条边缘处会存在锯齿。  

显示差异

下图左侧为未经抗锯齿处理的显示效果，右侧为经抗锯齿处理的显示效果。锯齿的宽度或高度最少为一个像素点大小，如果屏幕的像素密度较高，则基本不可见。    

导入并安装控件

新建好UI后，点击“插件管理”，再点击“导入”按钮：

  随后选择并打开03.UI_build_project oolsawtk-widget-progress-circle-no-vg路径下的project.json文件：

在“推荐”栏中找到新导入的自定义控件，点击“安装”：

等待安装完成，在安装成功的弹窗中点击“刷新”按钮：

已安装的插件中就会新增progress-circle-no-vg，点击插件，右侧就会弹出该控件的使用说明：

在“控件列表”的“自定义”栏中，出现安装好的progress-circle-no-vg控件

控件的使用

以UI工程中自带的“guage_bg.png”图片为例，制作一个顺时针旋转的0~100的环形进度条。根据控件的使用说明，进度条图片为guage_bg、最大值为100、当前值任意填写、起始角度是135°、总角度为270°、圆心刚好为图片中心：

在对应位置填好参数，进度条即可正常显示，可为该进度条设置动画或者在代码中实时更新控件的值。  

效果展示

为了使效果更加直观，创建两个窗口。在一个窗口中创建四个环形进度条控件，在另一个窗口中创建四个自定义控件，增加同样的动画，打开帧率，观察其帧率表现。

使用环形进度条控件的窗口的帧率在15~20左右，而使用自定义控件的窗口帧率稳定在60fps。

HMI-ZDP1440D串口屏开发套件资料持续更新中。

HMI-ZDP1440D开发套件已在微商城上架。