进度条控件

BWSU · 发表于昨天 23:41

进度条控件使用说明

一、概述

本进度条控件基于单片机 + RA8889/RA6809 + TFT开发，提供了简单易用的进度显示功能。控件支持多个进度条同时显示、自定义颜色、边框和标签等特性，适用于需要直观显示进度信息的各类应用场景。

二、特性

支持多个进度条同时显示
可自定义进度条位置、尺寸和边框宽度
支持自定义背景色、进度条颜色、边框颜色和文字颜色
可配置是否显示百分比文字
支持自定义标签文本和位置
实时更新进度显示

三、硬件环境要求

MCU: 51/ARM等不限（测试平台使用：STC8H8K64U）
图形处理芯片(Micro GPU): RA8889/RA6809
显示屏: TFT液晶屏（演示采用：1024x600）

四、文件结构

进度条控件
│
├── main.c # 示例应用程序
├── widget/
│ ├── progressbar.c # 进度条控件实现
│ └── progressbar.h # 进度条控件头文件
└── RA8889_01_Kernel/
├── RA8889_51.c # RA8889底层驱动
├── RA8889_51.h
├── RA8889_API_51.c # RA8889 API实现
├── RA8889_API_51.h
└── UserDef.h # 用户定义配置

复制代码

五、如何移植

将 widget/progressbar.h 和 widget/progressbar.c 文件复制到您的项目中
确保您的项目中已包含 RA8889/RA6809 相关的驱动文件：

•RA8889_51.h
•RA8889_API_51.h
•UserDef.h
•delay.h

在需要使用进度条的源文件中引入头文件：#include "progressbar.h"
在初始化显示屏之后，调用进度条初始化函数：ProgressBar_Init();

六、使用方法

1. 初始化进度条控件

在使用进度条前，需要先初始化：

// 设置进度条值为50%
ProgressBar_SetValue(progress_id, 50);

复制代码

2. 添加进度条

使用 ProgressBar_Add 函数添加一个新的进度条：

unsigned char progress_id = ProgressBar_Add(
100, 100, // 位置 (x, y)
400, 40, // 尺寸 (width, height)
2, // 边框宽度
0x0000FF, // 背景色 (蓝色)
0xFF0000, // 进度条颜色 (红色)
0x000000, // 边框颜色 (黑色)
0xFFFFFF, // 文字颜色 (白色)
1, // 显示文字 (1:显示, 0:不显示)
0, // 初始值 (0-100)
"ProgressBar", // 标签文本
-70, -30, // 标签位置偏移量
0x00FF00 // 标签颜色 (绿色)
);

复制代码

3. 更新进度条值

使用 ProgressBar_SetValue 函数更新进度条的值：

// 设置进度条值为50%
ProgressBar_SetValue(progress_id, 50);

复制代码

4. 获取进度条当前值

使用 ProgressBar_GetValue 函数获取进度条的当前值：

unsigned char current_value = ProgressBar_GetValue(progress_id);

复制代码

5. 绘制单个进度条

如需单独刷新某个进度条：

ProgressBar_Draw(progress_id);

复制代码

6. 绘制所有进度条

如需刷新所有进度条：

ProgressBar_DrawAll();

复制代码

七、参数配置

在 progressbar.h 文件中，可以根据需要修改以下参数：

#define MAX_PROGRESSBAR_NUM 4 // 设定最多的进度条个数
#define MAX_PROGRESSBAR_LABEL_FONT_NUM 16 // 设定标签最多字数
#define PROGRESSBAR_FONT_WIDTH 12 // 设定标签上单个文字的宽度
#define PROGRESSBAR_FONT_HEIGHT 24 // 设定标签上单个文字的高度

复制代码

八、完整示例

以下是一个完整的示例，展示了如何创建和更新两个进度条：

#include "progressbar.h"
void main(void)
{
// 显示器初始化代码
// ...
// 初始化进度条控件
ProgressBar_Init();
// 添加第一个进度条
unsigned char progress1 = ProgressBar_Add(
50, 100, // 位置 (x, y)
400, 30, // 尺寸 (width, height)
2, // 边框宽度
0xAAAAAA, // 背景色 (灰色)
0x00FF00, // 进度条颜色 (绿色)
0x000000, // 边框颜色 (黑色)
0xFFFFFF, // 文字颜色 (白色)
1, // 显示文字 (1:显示, 0:不显示)
30, // 初始值 (30%)
"Upload", // 标签文本
-80, -30, // 标签位置偏移量
0xFFFF00 // 标签颜色 (黄色)
);
// 添加第二个进度条
unsigned char progress2 = ProgressBar_Add(
50, 200, // 位置 (x, y)
400, 30, // 尺寸 (width, height)
2, // 边框宽度
0xAAAAAA, // 背景色 (灰色)
0xFF0000, // 进度条颜色 (红色)
0x000000, // 边框颜色 (黑色)
0xFFFFFF, // 文字颜色 (白色)
1, // 显示文字 (1:显示, 0:不显示)
50, // 初始值 (50%)
"Download", // 标签文本
-50, -30, // 标签位置偏移量
0x00FFFF // 标签颜色 (青色)
);
// 更新进度条
while(1) {
static unsigned char value1 = 0;
static unsigned char value2 = 0;
// 更新第一个进度条值
ProgressBar_SetValue(progress1, value1);
value1 = (value1 + 5) % 101; // 0~100循环
// 更新第二个进度条值
ProgressBar_SetValue(progress2, value2);
value2 = (value2 + 10) % 101; // 0~100循环
delay_ms(500); // 延时500ms
}
}

复制代码

九、注意事项

进度条值的范围为0-100，超出范围的值会被自动限制在有效范围内
标签文本最大长度为MAX_PROGRESSBAR_LABEL_FONT_NUM-1
如果标签位置偏移量导致标签位置小于0，将自动调整为0
请确保RA8889/RA6809控制器已正确初始化
当标签为空字符串时，标签区域不会被绘制和复制到显示层

十、源码下载：

请至论坛菜单：组件与控件中心。

十一、视频说明：

		自动登录	找回密码
密码			立即注册

进度条控件

本帖子中包含更多资源

相关帖子