3 进度条控件
什么是进度条控件？
进度条控件可以将某些数值的改变效果形象直观的体现在屏幕上，可以和文本控件、滑块控件、按钮控件配合使用
本例程中介绍进度条控件的属性、常见应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示
- 开机进度条：MCU在开机时定时发送数据给屏幕，屏幕进度条自动增加的效果
- 控件联动：实现进度条、滑块、文本控件三方数据联动更新
- 增量调节：通过按钮控件和进度条控件关联，通过按钮实现进度条的增加和减少
适用范围：全系列
例程下载链接：《串口屏进度条控件应用》(点击跳转)
3.1. 进度条控件属性
起始值
进度条控件显示范围的起始位置
终止值
进度条控件显示范围的终止位置
初始值
初始化时进度条指示的位置
滑动通知
可设置为“禁止”、“允许【滑动通知】”、“允许【松开通知】、“关联滑动条””，如下所示
- 禁止：设置进度条禁止滑动
- 允许【滑动通知】：进度条设置为可以滑动，并且在滑动的同时下发通知数据
- 允许【松开通知】：进度条设置为可以滑动，并且在松开时下发通知数据
- 关联滑动条：设置与滑块控件关联，可以通过拖动游标来改变进度条的值
数值显示
设置进度条的数值显示方式，可设置为“不显示”、“居中显示”，“末端显示”，如下所示
- 字体：设置进度条显示数值的字体大小
- 文字颜色：设置进度条显示数值的文字颜色
- 显示百分号：设置进度条的数值是否以百分号的形式显示，可设置“是”或者“否”
进度条类型
设置进度条在控件范围内显示的方向，可设置为“水平/左”、“水平/右”、“垂直/上”、“垂直/下”
背景类型
设置进度条背景的类型，可设置为“透明”、“单色背景”、“背景图片”
- 背景颜色：当【背景类型】设置为“单色背景”时，可通过调色板设置背景颜色
- 背景图片：当【背景类型】设置为“背景图片”时，可通过在此处插入图片UI来设置为进度条的背景
前景类型
设置进度条的前景类型，可设置为“单色前景”、“前景图片”
- 前景颜色：当【前景类型】设置为“单色前景”时，可通过调色板设置前景颜色
- 前景图片：当【前景类型】设置为“前景图片”时，可通过在此处插入图片UI来设置为进度条的前景
3.2 开机进度条应用
当屏幕上电时候，可使用进度条控件按照一定的步进值，递增显示，来增加用户体验效果
画面配置
【进度条功能】画面的“背景图片”导入相应的美工图片
属性配置
设置【数值显示】为“末端显示”且“显示百分号”、【背景类型】为“透明”、【前景类型】为“前景图片”、【前景图片】处插入准备好的UI图片，配置如下所示
运行预览
运行虚拟屏和VisualTFT建立联机，在【指令助手】⇨‘进度条/仪表/滑块’中，拖动进度，模拟开机进度，如下所示
外部MCU控制
参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需实现例程中【开机进度条】的效果（进度条从【0-100】循环递增），直接调用进度条控件值更新函数SetProgressValue( )即可，代码如下所示
/************************************************************************
** 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进度条控件值
}
}
3.3 控件联动应用
属性配置
文本控件配置、进度条控件、滑动条控件的属性如下所示：
文本控件属性
进度条控件属性
滑块控件属性
外部MCU控制
例如用户需实现当【0-100】的滑块控件，游标滑到“88”的地方时，进度条和文本控件的数值同时更新为“88”。或当利用弹出键盘输入文本时，进度条的值随着文本值的变化更新，直接调用进度条控件通知函数NotifyProgress ( )和文本控件通知函数NotifyText ( )即可，代码如下所示
/************************************************************************
** 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的进度条控件
}
}
3.4 进度条进度调节
进度条控件、按钮属性如下所示
文本控件属性
进度条控件属性
外部MCU控制
例如用户设置进度条的值，调用一下即可，函数SetProgressValue( )即可，代码如下所示
/************************************************************************
** 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进度条控件值
......
}