第52章  PROGBAR-进度条控件

本期教程讲解STemWin支持的进度条控件。

52. 1 进度条控件介绍

52. 2 官方WIDGET_Multipage实例

52. 3 使用GUIBulder建立多页控件

52. 4 总结

52.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 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) {

   

      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);

 

  }

}

 

 

 

void MainTask(void) {

  GUI_Init();

  while (1) {

    _DemoProgBar();

  }

}

实际显示效果如下：

52.3  使用uCGUIBulder建立进度条控件

用uCGUIBulder4.0建立如下界面（480*272分辨率）：

设置进度条控件的如下三个地方：

将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：

设置皮肤色的话，显示效果如下：

52.4  总结

本期教程主要是跟大家讲解了进度条控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的进度条控件API，其它的API大家都可以试试。