进度条控件

什么是进度条控件？

dIs科讯网

进度条控件可以将某些数值的改变效果形象直观的体现在屏幕上，可以和文本控件、滑块控件、按钮控件配合使用dIs科讯网

本例程中介绍进度条控件的属性、常见应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示dIs科讯网

1. 开机进度条：MCU在开机时定时发送数据给屏幕，屏幕进度条自动增加的效果
2. 控件联动：实现进度条、滑块、文本控件三方数据联动更新
3. 增量调节：通过按钮控件和进度条控件关联，通过按钮实现进度条的增加和减少

3.1. 进度条控件属性

dIs科讯网

起始值

进度条控件显示范围的起始位置dIs科讯网

终止值

进度条控件显示范围的终止位置dIs科讯网

初始值

初始化时进度条指示的位置dIs科讯网

滑动通知

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

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

数值显示

设置进度条的数值显示方式，可设置为“不显示”、“居中显示”，“末端显示”，如下所示dIs科讯网

• 字体：设置进度条显示数值的字体大小
• 文字颜色：设置进度条显示数值的文字颜色
• 显示百分号：设置进度条的数值是否以百分号的形式显示，可设置“是”或者“否”

进度条类型

设置进度条在控件范围内显示的方向，可设置为“水平/左”、“水平/右”、“垂直/上”、“垂直/下”dIs科讯网

背景类型

设置进度条背景的类型，可设置为“透明”、“单色背景”、“背景图片”dIs科讯网

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

前景类型

设置进度条的前景类型，可设置为“单色前景”、“前景图片”dIs科讯网

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

3.2 开机进度条应用

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

画面配置

【进度条功能】画面的“背景图片”导入相应的美工图片dIs科讯网

dIs科讯网

属性配置

设置【数值显示】为“末端显示”且“显示百分号”、【背景类型】为“透明”、【前景类型】为“前景图片”、【前景图片】处插入准备好的UI图片，配置如下所示dIs科讯网

dIs科讯网

运行预览

运行虚拟屏和VisualTFT建立联机，在【指令助手】⇨‘进度条/仪表/滑块’中，拖动进度，模拟开机进度，如下所示dIs科讯网

dIs科讯网

外部MCU控制

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

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

/*!
\* \brief 更新开机进度条值
*/
void UpdateUI()
{
    if(current_screen_id == 0)
    {
        Start_Progress += 1;
        if(Start_Progress > 100)
        {
            Start_Progress = 0;
        }    
        SetProgressValue(0, 1, Start_Progress);//设置画面0,ID1进度条控件值
    }
}Copy

3.3 控件联动应用

属性配置

文本控件配置、进度条控件、滑动条控件的属性如下所示：dIs科讯网

文本控件属性

dIs科讯网

进度条控件属性

dIs科讯网

滑块控件属性

dIs科讯网

外部MCU控制

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

/************************************************************************
** Function name:    void NotifyProgress (uint16 screen_id,
**                                        uint16 control_id,
**                                        uint32 value);
** Descriptions    : 设置进度条控件通知
** input parameters: 
**             screen_id: 画面ID
**            control_id: 控件ID
**                 value: 进度条控件值
** 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);//关联进度条的值赋值给画面0，ID2的文本控件
    }
} 
/************************************************************************
** Function name:    void NotifyText (uint16 screen_id,
**                                    uint16 control_id,
**                                    uint8 *str);
** Descriptions    : 设置文本控件通知
** input parameters:
**              screen_id: 画面ID
**             control_id: 控件ID
**                    str: 文本控件内容
** 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);//文本控件数值赋值给画面0，ID3的进度条控件
    }
}Copy

3.4 进度条进度调节

进度条控件、按钮属性如下所示dIs科讯网

文本控件属性

dIs科讯网

进度条控件属性

dIs科讯网

外部MCU控制

例如用户设置进度条的值，调用一下即可，函数SetProgressValue( )即可，代码如下所示dIs科讯网

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

{
    ......
    SetProgressValue(0, 1, Start_Progress);//设置画面0,ID1进度条控件值
    ......
}