单片机 + 图像处理芯片 + TFT彩屏 进度条控件

进度条控件使用说明

概述

本进度条控件基于单片机 + 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        # 用户定义配置

如何移植

1. 将 widget/progressbar.h 和 widget/progressbar.c 文件复制到您的项目中
2. 确保您的项目中已包含 RA8889/RA6809 相关的驱动文件：
   • RA8889_51.h
   • RA8889_API_51.h
   • UserDef.h
   • delay.h
3. 在需要使用进度条的源文件中引入头文件：

   #include "progressbar.h"
   

使用方法

初始化进度条控件

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

// 初始化进度条控件
ProgressBar_Init();

添加进度条

使用 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               // 标签颜色 (绿色)
);

更新进度条值

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

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

获取进度条当前值

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

unsigned char current_value = ProgressBar_GetValue(progress_id);

绘制单个进度条

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

ProgressBar_Draw(progress_id);

绘制所有进度条

如需刷新所有进度条：

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
    }
}

注意事项

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

源码下载

请看到视频最后面

视频介绍说明