progress bar控件How to use？

什么是progress bar控件？

progress bar控件可以将某些numerical value的改变效果形象直观的体现在屏幕上，可以和Text控件、滑块控件、button控件配合使用

本例程中介绍progress bar控件的属性、常见应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示

1. 开机progress bar：MCU在开机时定时senddata给屏幕，屏幕progress bar自动增加的效果
2. 控件联动：实现progress bar、滑块、Text控件三方data联动更新
3. 增量调节：通过button控件和progress bar控件关联，通过button实现progress bar的增加和减少

适用范围：全系列

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

3.1. progress bar控件属性

initial value

progress bar控件显示范围的starting position

终止值

progress bar控件显示范围的终止位置

初始值

初始化时progress bar指示的位置

滑动通知

可设置为“禁止”、“允许【滑动通知】”、“允许【松开通知】、“关联滑动条””，如下所示

• 禁止：设置progress bar禁止滑动
• 允许【滑动通知】：progress bar设置为可以滑动，并且在滑动的同时下发通知data
• 允许【松开通知】：progress bar设置为可以滑动，并且在松开时下发通知data
• 关联滑动条：设置与滑块控件关联，可以通过拖动游标来改变progress bar的值

numerical value显示

设置progress bar的numerical value显示方式，可设置为“不显示”、“居中显示”，“末端显示”，如下所示

• 字体：设置progress bar显示numerical value的字体大小
• 文字颜色：设置progress bar显示numerical value的文字颜色
• 显示百分号：设置progress bar的numerical value是否以百分号的形式显示，可设置“是”或者“否”

progress barType

设置progress bar在控件范围内显示的方向，可设置为“水平/左”、“水平/右”、“垂直/上”、“垂直/下”

背景Type

设置progress bar背景的Type，可设置为“透明”、“单色背景”、“背景图片”

• 背景颜色：当【背景Type】设置为“单色背景”时，可通过调色板设置背景颜色
• 背景图片：当【背景Type】设置为“背景图片”时，可通过在此处插入图片UI来设置为progress bar的背景

前景Type

设置progress bar的前景Type，可设置为“单色前景”、“前景图片”

• 前景颜色：当【前景Type】设置为“单色前景”时，可通过调色板设置前景颜色
• 前景图片：当【前景Type】设置为“前景图片”时，可通过在此处插入图片UI来设置为progress bar的前景

3.2 开机progress bar应用

当屏幕上电时候，可使用progress bar控件按照一定的步进值，递增显示，来增加用户体验效果

画面配置

【progress barFunction】画面的“背景图片”导入相应的美工图片

属性配置

设置【numerical value显示】为“末端显示”且“显示百分号”、【背景Type】为“透明”、【前景Type】为“前景图片”、【前景图片】处插入准备好的UI图片，配置如下所示

运行预览

运行虚拟屏和VisualTFT建立联机，在【指令Assistant】⇨‘progress bar/仪表/滑块’中，拖动进度，模拟开机进度，如下所示

外部MCU控制

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现例程中【开机progress bar】的效果（progress bar从【0-100】循环递增），直接调用progress bar控件值更新函数SetProgressValue( )即可，代码如下所示

/************************************************************************
** Function name:    void SetProgressValue (uint16 screen_id,
**                                          uint16 control_id,
**                                          uint32 value);
** Descriptions    :  设置progress bar控件值
** input parameters: 
**                    screen_id : 画面ID
**                    control_id: 控件ID
**                    value     : 设置的numerical value
** output parameters : 无
** Returned value    : 无
************************************************************************/
uint8 Start_Progress = 0;

/*!
* brief 更新开机progress bar值
*/
void UpdateUI()
{
    if(current_screen_id == 0)
    {
        Start_Progress += 1;
        if(Start_Progress > 100)
        {
            Start_Progress = 0;
        }    
        SetProgressValue(0, 1, Start_Progress);//设置画面0,ID1progress bar控件值
    }
}

3.3 控件联动应用

属性配置

Text控件配置、progress bar控件、滑动条控件的属性如下所示：

Text控件属性

progress bar控件属性

滑块控件属性

外部MCU控制

例如用户需实现当【0-100】的滑块控件，游标滑到“88”的地方时，progress bar和Text控件的numerical value同时更新为“88”。或当利用弹出键盘输入Text时，progress bar的值随着Text值的变化更新，直接调用progress bar控件通知函数NotifyProgress ( )和Text控件通知函数NotifyText ( )即可，代码如下所示

/************************************************************************
** Function name:    void NotifyProgress (uint16 screen_id,
**                                        uint16 control_id,
**                                        uint32 value);
** Descriptions    : 设置progress bar控件通知
** input parameters: 
**             screen_id: 画面ID
**            control_id: 控件ID
**                 value: progress bar控件值
** output parameters: 无
** Returned value   : 无
************************************************************************/
void NotifyProgress(uint16 screen_id, uint16 control_id, uint32 value)
{
    if(screen_id == 0 && control_id == 3)
    {
        SetTextInt32(0,2,value,0,1);//关联progress bar的值赋值给画面0，ID2的Text控件
    }
} 
/************************************************************************
** Function name:    void NotifyText (uint16 screen_id,
**                                    uint16 control_id,
**                                    uint8 *str);
** Descriptions    : 设置Text控件通知
** input parameters:
**              screen_id: 画面ID
**             control_id: 控件ID
**                    str: Text控件内容
** output parameters: 无
** Returned value   : 无
************************************************************************/
void NotifyText(uint16 screen_id, uint16 control_id, uint8 *str)
{
    int32 value = 0;
    if(screen_id == 0 && control_id == 2)
    {
        sscanf(str,"%ld",&value);//字符转化为整数
        SetProgressValue(0,3,value);//Text控件numerical value赋值给画面0，ID3的progress bar控件
    }
}

3.4 progress bar进度调节

progress bar控件、button属性如下所示

Text控件属性

progress bar控件属性

外部MCU控制

例如用户设置progress bar的值，调用一下即可，函数SetProgressValue( )即可，代码如下所示

/************************************************************************
** Function name:    void SetProgressValue (uint16 screen_id,
**                                          uint16 control_id,
**                                          uint32 value);
** Descriptions    :  设置progress bar控件值
** input parameters: 
**                    screen_id : 画面ID
**                    control_id: 控件ID
**                    value     : 设置的numerical value
** output parameters : 无
** Returned value    : 无
************************************************************************/

{
    ......
    SetProgressValue(0, 1, Start_Progress);//设置画面0,ID1progress bar控件值
    ......
}

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

串口	计算机与外部设备进行串行Communication的物理Interface

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

来源 Modbus Chinese Network（modbus.cn） —— China leadingModbuscommunication protocol technical community Category Basic Control Document / 触控屏开发Document 字数 3552 字 · 阅读约 9 分钟 更新 2026-07-01 永久链接 https://www.modbus.cn/6904.html

Recommended Tool: Modbus Debug Assistant WeChat Mini Program

Modbus Chinese Network官方推出的Modbus DebuggingTools，支持 Modbus RTU/TCP 实时Communicationdebug、register读写、线圈控制、data监控和message分析。 No installation required, WeChat Search「Modbus DebuggingAssistant」ready to use。 电脑端入口：https://www.modbus.cn/modbustool/

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

Related阅读

• 浏览器串口Assistant插件，web版本Serial Port DebuggingAssistant浏览器插件 Web Serial Online 发布
• ECOM串口Assistant-串口sendreceive，Modbus CRC16校验，工程师Debug Tools
• 10寸彩屏控制器产品说明书
• 基本图形控件How to use？
• Modbus网关和Serial Server如何选择，它们有什么区别？
• 基本参数说明（Modbus Configuration控件Tutorial1）
•    Visual TFT软件Download
• （XTinyModbus）C语言嵌入式ModbusProtocol栈，主站、从站示例源码