大彩讲堂：VisualTFT软件如何自定义圆形进度条

一、适合范围

适合全系列大彩协议串口屏产品。

二、功能实现

2.1 建立工程

根据串口屏的实际型号，在 visual TFT 软件菜单中选择文件并新建一个工程。下面以物联型串口屏（DC48480EW040）为例，如图2-1所示。

图2-1 建立工程

2.2 控件属性说明

圆形进度条的属性窗口，如下图2-2所示；

图2-2 属性窗口

进度条厚度：设置进度条的粗细度

填充方式：进度条样式，可选颜色或者图片，如下图2-3所示

【颜色】：纯色显示

【图片】：使用图片时可自行设计进度条的样式，本工程选择为自定义图片样式。

图2-3 填充方式

起始角度：进度条起始位置（圆形进度条的值为角度，最大角度为359，360度为0度）

终止角度：进度条的结束位置。如下图2-4所示

图2-4 起始与终止角度

滑动调节：圆形的滑动调节有四类如下图2-5所示

【禁用】：不可通过触摸调节

【终止角度】：触摸进度条终止位置拖动进度条

【起始角度】：触摸进度条起始位置拖动进度条

【俩个角度】：触摸俩端都可以拖动进度条

图2-5 滑动调节选项

触摸位置：圆形进度条的触摸位置如下图2-6所示

【末端】：仅点击或滑动圆形进度条末端， 才可以改变数值

【进度条】：点击或滑动进度条即可改变数值

图2-6 触摸位置选项

限制角度：

【是】：拖动范围只能在起始角与终止角之间；

【否】：没有限制角度， 可随意滑动。

通知方式：圆形进度条控件的通知方式如下图2-7所示

【松开时】：拖动进度条时不下发， 松开时才下发指令。

【滑动时】：拖动进度条的过程中下发指令。

图2-7 通知方式选项

滑块图标：可以添加滑块样式， 建议将图片格式为全透的格式 png

2.3 画面与属性配置

画面配置

在【圆形进度条控件】画面的“背景图片”导入相应的美工图片画面中添加 1 个圆形进度条控件（控件 ID：1）和1个文本控件（控件ID：2）和2个按钮控件（控件 ID：3、4）如下图2-8所示。

图2-8 画面配置

属性配置

在圆形进度条控件的属性窗口中，设置【进度条厚度】为“40”、【填充方式】 为“图片”并加入相应的美工图片、【起始角度】为“150”、【终止角度】为“30”、【滑动调节】为“终止角度”、【触摸位置】为末端、【限制角度】为“是” 、【通知方式】为“滑动时”，属性配置如下图2-9所示。

图2-9 属性配置

2.4 运行预览

三、LUA脚本

打开 LUA 编程器

点击菜单栏【工具】，选择LUA脚本编程，如下图3-1所示.

图3-1 打开 LUA 编程器

API 函数说明

大彩科技针对LUA脚本提供了丰富的API接口函数，具体函数可以查阅文档《LUA脚本API函数接口》。本教程文档中所涉及到的部分的相关接口函数

·函数 on_init（）

系统加载 LUA 脚本之后， 立即调用此回调函数， 通常用于执行初始化操作。

·函数 set_value（screen， control， value）

设置控件数值

value：控件值

按钮控件：value=1 - 按下，0 - 弹起

文本控件：value - 整数或小数

也可以设置进度条、滑块、仪表、滑动选择控件等等

·函数 on_control_notify（screen， control， value）

用户触摸修改控件后，执行此回调函数。点击按钮控件，修改文本控件、修改滑动条都会触发此控件

value:为数值类型，如果需要获取文本控件的字符串值，使用 get_text(screen,control)

编写脚本

此编程主要描述角度转化为所对应的数值（value），所对应的数值（value） 转化为角度的对应关系。

此脚本为初始化回调函数， 代表打开此工程时角度与文本控件显示数值为一个初始化值。 如图3-2所示。

图3-2 LUA脚本

使用LUA脚本，将圆形进度条的值与文本控件相关联。当滑动圆形进度条控件时，系统会调用回调函数 on_control_notify，并将圆形进度条控件的值传入函数中，将值与文本控件的值关联。按下按钮控件也能使角度递增或者递减使其对应的角度也产生递增递减变化。

函数 math.floor 函数是 lua 标准库中 math 模块的一个函数，用于向下取整，即返回小于或等于给定数字的最大整数。math.floor(value) % 65536 这个表达式的含义是： 首先对 value 进行向下取整操作，然后将得到的结果与 65536 进行取模运算得到一个 now_angle（现在的角度）角度。每一个角度对应一个value值，角度范围在150~30，每次滑动圆形进度条的角度为now_angle

假设当 now_angle 为 200 时需要减去起始角度（start_angle）150 所得值为控件 2 文本显示 50代表现在的角度为 200 时文本控件 2 显示为 50。

代码编程如3-3所示

图3-3 LUA 脚本