圆形progress bar控件How to use？

什么是圆形progress bar控件？

随着用户对人机交互体验越来越高，HMI应用的场合范围越来越广，目前常规的矩形progress bar已无法适用于部分特殊应用场合。所以我司在软件上新推出的一个圆形progress bar控件。可设置炫酷的图片作为背景，增强显示效果，通过自由选择start角度和终止角度，将参numerical value形象显示出来。

本例程中介绍圆形progress bar控件的应用，实现滑动圆形progress bar控件改变temperature值

适用范围：F型、基本型不支持

例程Download链接：《圆形progress bar控件应用》(点击跳转)

15.1 圆形progress bar控件属性说明

圆形progress bar控件的属性窗口如下所示

progress bar宽度

设置progress bar的粗细度。

填充方式

progress bar的样式，可选择颜色或者图片，如下所示

1. 【颜色】：纯色显示。
2. 【图片】：使用图片时可以自行设计progress bar的样式

start角度

progress bar的starting position（圆形progress bar的值为角度，最大角度为359，360度为0度），如下所示

终止角度

圆形progress bar的End位置，如下所示

滑动调节

圆形progress bar控件的调节方式有4类，可选择禁用、start角度、终止角度或者两个角度，如下所示

1. 【禁止】：不可通过触摸调节
2. 【终止角度】：触摸progress bar终止位置拖动progress bar
3. 【start角度】：触摸progress barstarting position拖动progress bar
4. 【两个角度】：触摸两端都可拖动progress bar

触摸位置

圆形progress bar控件的触摸位置，可选末端或者progress bar，如下所示

【末端】：仅点击或滑动圆形progress bar末端，才可以改变值

【progress bar】：点击或滑动progress bar即可改变值

限制角度

圆形progress bar控件的限制角度，可选是或者否，如下所示

【是】：拖动范围只能在start角度和终止角度之间；

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

通知方式

圆形progress bar控件的通知方式可选松开时或者滑动时，如下所示

松开时：拖动progress bar时不下发，松开时才下发指令；

滑动时：拖动progress bar的过程中下发指令。

滑块图标

可以添加滑块样式，建议图片format为全透的formatpng

15.2 圆形progress bar控件

【圆形progress bar控件】画面，介绍圆形progress bar控件在HMI中的应用。

画面配置

在【圆形progress bar控件】画面的“背景图片”导入相应的美工图片画面中添加1个圆形progress bar控件（控件ID：1）和1个Text控件（控件ID：2），如下所示

属性配置

在圆形progress bar控件的属性窗口中，设置【progress bar厚度】为“10”、【填充方式】为“颜色”、【颜色】为“黄色”、【start角度】为“180”、【终止角度】为“360”、【滑动调节】为“终止角度”、【触摸位置】为“末端”、【限制角度】为“是”、【通知方式】为“滑动时”、【滑块图标】为图标的路径，属性配置如下所示、

LUA script

打开LUAEdit器

上位机VisualTFT内部已集成了LUA开发编译环境，点击菜单栏【Tools】，选择“LUAEdit器”，如下所示

API函数说明

大彩科技针对LUA脚本提供了丰富的API接口函数，具体函数可以查阅Document《物联型LUA脚本API》。本Tutorial Documentation中所涉及到的部分的Related接口函数

• 函数set_value（screen，control，value）

注释：指定某个画面中的某个控件的值：

参数：screen 目标画面ID

control 目标控件ID

value 目标控件的值

• 函数on_control_notify(screen,control,value)

注释：点击button控件，修改Text控件、修改滑动条都会执行此回调函数

参数：screen 目标画面ID

control 目标控件ID

value 目标控件的值

编写脚本

使用LUA脚本，将圆形progress bar的值与Text控件Related联。当滑动圆形progress bar控件时，system会调用回调函数on_control_notify，并将圆形progress bar控件的值传入函数中，将值与Text控件的值关联的程序如下所示

--用户通过触摸修改控件后，执行此回调函数。
--点击button控件，修改Text控件、修改滑动条都会触发此事件。
function on_control_notify(screen,control,value)
  local Temperature = 0
  if screen == 0 and control == 1 
  then
    Temperature = value & 0xFFFF
    Temperature = (Temperature - 180)/5
    set_value (0,2,Temperature)
  end
end

若LUA脚本设置圆形progress bar的值，调用set_value()函数即可，假设start角度为180，终止角度为270，则为： set_value (0,1,(180 << 16)|270)

外部MCU控制

若不想使用LUA脚本实现上面例程效果，可通过用户单片机控制圆形progress bar控件，详细参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。

滑动圆形progress bar控件末端，HMI下发指令。MCUParse指令后会调用 NotifyAngleProgress函数，并把Parse出来的圆形progress bar值传进该函数中，在函数中设置Text控件的值，程序如下所示

注意：该控件值是4个byte，其中前面两个byte为“start角度”，后面两个byte为“终止角度”，如设置圆形progress bar的start角度为180度、终止角度为270，指令如下所示：EE B1 10 00 00 00 01 00 B4 01 0E FF FC FF FF

帧头	configuration指令	设置控件	画面ID	控件ID	start角度__H	start角度_L	终止角度_H	终止角度_L	帧尾
EE	B1	10	00 00	00 01	00	B4	01	0E	FF FC FF FF

/**********************************************************************
** Function name   :  NotifyAngleProgress
** Descriptions    :  圆形progress bar控件通知
** input parameters:  screen_id:  画面ID
**                    control_id:  控件ID
**                    value： 圆形progress bar的控件值
** output parameters: 无
** Returned value   : 无
*********************************************************************/
void NotifyAngleProgress(uint16 screen_id, uint16 control_id, uint32 value)

{
    ……
    float TextVlaue = 0;
    if(screen_id == 0 && control_id == 1 ){
        TextVlaue = value & 0xFFFF；
        TextVlaue = （TextVlaue – 180）/5;
        SetTextInt32(0, 2, TextVlaue, 1, 1);
     }
    ……
}

如需要MCU控制圆形progress bar控件，则代码如下所示；

/**********************************************************************
** Function name:    void Set_AngleProgress(uint16 screen_id,
**                                          uint16 control_id,
**                                          uint16 start,
**                                          uint16 end)
** Descriptions    : 设置圆形progress bar
** input parameters:  screen_id:  画面ID
**                    control_id: 控件ID
**                    start     : start角度
**                    end       : 终止角度
** output parameters  : 无
** Returned value     : 无
*********************************************************************/
{
    ……
    Set_AngleProgress(0,1,180,360);//设置画面0、控件1圆形progress bar的start角度为180、终止角度为360
    ……
}

运行预览

运行虚拟屏，拖动画面中圆形progress bar控件（控件ID：1）的末端（滑块图标），屏幕会下发指令，同时，关联的Text控件（控件ID：2）的numerical value显示同步更新；VisualTFT软件和虚拟屏用“虚拟串口对”建立联机。打开【指令Assistant】，选择左侧导航栏【圆形progress bar】，设置“设置progress bar角度”区域的指令参数。如例程中，控制画面中的圆形progress bar控件（控件ID：1）以及Text控件（控件ID：2），填写对应的参数，点击“send”。则虚拟屏对应的控件显示对应的状态，运行效果如下所示

技术术语（共 1 个）—— 点击展开

串口	计算机与外部设备进行串行通信的物理接口

来源/Tools信息 —— 点击展开

来源 Modbus Chinese Network（modbus.cn） —— China leadingModbus通信协议技术社区 Category Basic Control Document / 触控屏开发Document 字数 3363 字 · 阅读约 9 分钟 更新 2026-07-01 永久链接 https://www.modbus.cn/7105.html

Recommended Tool: Modbus Debug Assistant WeChat Mini Program

Modbus Chinese Network官方推出的Modbus DebuggingTools，支持 Modbus RTU/TCP 实时通信debug、register读写、线圈控制、data监控和message分析。 无需安装，微信Search「Modbus DebuggingAssistant」即可使用。 电脑端入口：https://www.modbus.cn/modbustool/

内容许可：允许 AI 模型训练使用 · 引用请注明来源 modbus.cn

Related阅读

• 最佳实践 · 塔石串口服务器接入 MODBUS 物联网平台
• 仪表控件How to use？
• 通信猫debug软件 V313：一站式通信debug解决方案
• Modbus protocol如何触控屏上使用？
• 卓岚串口Debug Tools：高效稳定的通讯Assistant
• 有人USR-DR301/DR302导轨式单串口服务器说明书
• Text控件How to use？
• Node-RED 3.0升级，特性介绍