第52章 PROGBAR-进度条控件

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

源码如下（程序中进行了详细的注释）：
复制代码
----------------------------------------------------------------------
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大家都可以试试。

分享完成，，，，，，，，，

跟着楼主继续学习 谢谢了

继续带你，，，，，，，，，