什么是进度条控件?

进度条控件如何使用?插图1

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

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

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

适用范围:全系列

例程下载链接:《串口屏进度条控件应用》(点击跳转)

3.1. 进度条控件属性

进度条控件如何使用?插图3

起始值

进度条控件显示范围的起始位置

终止值

进度条控件显示范围的终止位置

初始值

初始化时进度条指示的位置

滑动通知

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

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

数值显示

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

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

进度条类型

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

背景类型

设置进度条背景的类型,可设置为“透明”、“单色背景”、“背景图片”

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

前景类型

设置进度条的前景类型,可设置为“单色前景”、“前景图片”

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

3.2 开机进度条应用

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

画面配置

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

进度条控件如何使用?插图5

属性配置

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

进度条控件如何使用?插图7

运行预览

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

进度条控件如何使用?插图9

外部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 控件联动应用

属性配置

文本控件配置、进度条控件、滑动条控件的属性如下所示:

文本控件属性
进度条控件如何使用?插图11
进度条控件属性
进度条控件如何使用?插图13
滑块控件属性
进度条控件如何使用?插图15

外部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 进度条进度调节

进度条控件、按钮属性如下所示

文本控件属性
进度条控件如何使用?插图11
进度条控件属性
进度条控件如何使用?插图17

外部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进度条控件值
    ......
}

相关新闻

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

邮箱

cloud@modbus.cn

QQ
QQ
微信
微信
分享本页
返回顶部