2024年4月4日发(作者：)
STM32-V5开发板STemWin教程
第52章 PROGBAR-进度条控件
本期教程讲解STemWin支持的进度条控件。
51. 1 进度条控件介绍
51. 2 官方WIDGET_Multipage实例
51. 3 使用GUIBulder建立多页控件
51. 4 总结
52.1 进度条控件介绍
进度条通常在应用程序中用于实现虚拟化，下面的截图是设置了皮肤和没有设置皮肤时的显示效果：
设置皮肤后显示效果如下：
52.2 官方WIDGET_Multipage实例
官方的这个实例很好的演示了MULTIPAGE的使用，这个例子在模拟器中的位置：
第 1 页 共 7 页
STM32-V5开发板STemWin教程
源码如下（程序中进行了详细的注释）：
----------------------------------------------------------------------
File : WIDGET_Progbar.c
Purpose : Simple demo shows the use of the PROGBAR widget
----------------------------------------------------------------------
*/
#include "GUI.h"
#include "PROGBAR.h"
#include
/*******************************************************************
*
* static code
*
********************************************************************
*/
/*******************************************************************
*
* _DemoProgBar
0 对应的是上面的进度条，
1 对应的是下面的进度条。
*/
static void _DemoProgBar(void) {
int i;
PROGBAR_Handle ahProgBar[2];
GUI_SetBkColor(GUI_BLACK);
GUI_Clear();
GUI_SetColor(GUI_WHITE);
GUI_SetFont(&GUI_Font24_ASCII);
GUI_DispStringHCenterAt("WIDGET_Progbar - Sample", 160, 5);
GUI_SetFont(&GUI_Font8x16);
第 2 页 共 7 页
STM32-V5开发板STemWin教程
GUI_DispStringAt("Progress bar", 100,80);
/* 创建两个进度条*/
ahProgBar[0] = PROGBAR_Create(100,100,100,20, WM_CF_SHOW);
ahProgBar[1] = PROGBAR_Create( 80,150,140,10, WM_CF_SHOW);
/* 进度条使用内存设备两个进度条都使用*/
PROGBAR_EnableMemdev(ahProgBar[0]);
PROGBAR_EnableMemdev(ahProgBar[1]);
/* 设置第二个进度条的大小范围*/
PROGBAR_SetMinMax(ahProgBar[1], 0, 500);
/* 设置第一个进度条的字体*/
PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
GUI_Delay(500);
while(1) {
/* 设置进度条的字体*/
PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
if (LCD_GetDevCap(LCD_DEVCAP_BITSPERPIXEL) <= 4) {
/* 0代表进度条使用的颜色，代表没有进度到的颜色*/
PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_DARKGRAY);
PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_LIGHTGRAY);
} else {
PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_GREEN);
PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_RED);
}
/* 设置文字对齐方式*/
PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_HCENTER);
/* 要显示的文字*/
PROGBAR_SetText(ahProgBar[0], NULL);
/* 显示的进度*/
for (i=0; i<=100; i++) {
PROGBAR_SetValue(ahProgBar[0], i);
PROGBAR_SetValue(ahProgBar[1], i);
GUI_Delay(5);
}
/* 设置进度条要显示的文字*/
PROGBAR_SetText(ahProgBar[0], "Tank empty");
/* 动态显示数值*/
for (; i>=0; i--) {
PROGBAR_SetValue(ahProgBar[0], i);
PROGBAR_SetValue(ahProgBar[1], 200-i);
GUI_Delay(5);
}
/* 设置进度条上面显示的文本*/
/* 动态显示数值效果一*/
PROGBAR_SetText(ahProgBar[0], "");
PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_LEFT);
for (; i<=100; i++) {
PROGBAR_SetValue(ahProgBar[0], i);
PROGBAR_SetValue(ahProgBar[1], 200+i);
GUI_Delay(5);
}
第 3 页 共 7 页
STM32-V5开发板STemWin教程
/* 动态显示数值效果二*/
PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_RIGHT);
for (; i>=0; i--) {
PROGBAR_SetValue(ahProgBar[0], i);
PROGBAR_SetValue(ahProgBar[1], 400-i);
GUI_Delay(5);
}
/* 动态显示数值效果三*/
PROGBAR_SetFont(ahProgBar[0], &GUI_FontComic18B_1);
PROGBAR_SetText(ahProgBar[0], "");
for (; i<=100; i++) {
PROGBAR_SetValue(ahProgBar[0], i);
PROGBAR_SetValue(ahProgBar[1], 400+i);
GUI_Delay(5);
}
GUI_Delay(500);
}
}
/*******************************************************************
*
* MainTask
*
* Demonstrates the use of the PROGBAR widget
*
********************************************************************
*/
void MainTask(void) {
GUI_Init();
while (1) {
_DemoProgBar();
}
}
实际显示效果如下：
第 4 页 共 7 页
STM32-V5开发板STemWin教程
52.3 使用uCGUIBulder建立进度条控件
用uCGUIBulder4.0建立如下界面（480*272分辨率）：
设置进度条控件的如下三个地方：
第 5 页 共 7 页
STM32-V5开发板STemWin教程
将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例
子中）：
设置皮肤色的话，显示效果如下：
第 6 页 共 7 页
STM32-V5开发板STemWin教程
52.4 总结
本期教程主要是跟大家讲解了进度条控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑
跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的进度条控件API，其它的API
大家都可以试试。
第 7 页 共 7 页
发布评论