转stemwin教程
本期教程讲解STemWin支持的进度条控件。
52. 1 进度条控件介绍
52. 2 官方WIDGET_Multipage实例
52. 3 使用GUIBulder建立多页控件
52. 4 总结
52.1 进度条控件介绍
进度条通常在应用程序中用于实现虚拟化，下面的截图是设置了皮肤和没有设置皮肤时的显示效果：
设置皮肤后显示效果如下：
1
|
|
|
|
|
|
|
52.2 官方WIDGET_Multipage实例
官方的这个实例很好的演示了MULTIPAGE的使用，这个例子在模拟器中的位置：
|
|
|
|
|
|
|
|
|
源码如下（程序中进行了详细的注释）：
复制代码
----------------------------------------------------------------------
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);
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], "Any text...");
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);
}
/* 动态显示数值效果二*/
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], "Any font...");
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();
}
}
|
|
|
|
|
|
|
|
|
52.3 使用uCGUIBulder建立进度条控件
用uCGUIBulder4.0建立如下界面（480*272分辨率）：
|
|
|
|
|
|
|
|
|
将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：
|
|
|
|
|
|
|
|
|
52.4 总结
本期教程主要是跟大家讲解了进度条控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的进度条控件API，其它的API大家都可以试试。
|
|
|
|
|
|
|
|
|
/6 
工商网监
湘ICP备2023018690号
3394
淘帖
2014
发表评论
赞
回复
