STM32/STM8技术william hill官网
直播中

硬汉Eric2013

9年用户 1035经验值
擅长:嵌入式技术
私信 关注
[经验]

【安富莱原创】【STemWin教程】第52章 PROGBAR-进度条控件

第52章 PROGBAR-进度条控件
    本期教程讲解STemWin支持的进度条控件。
    52. 1 进度条控件介绍
    52. 2 官方WIDGET_Multipage实例
    52. 3 使用GUIBulder建立多页控件
    52. 4 总结
52.1 进度条控件介绍
     进度条通常在应用程序中用于实现虚拟化，下面的截图是设置了皮肤和没有设置皮肤时的显示效果：
52.1.png
设置皮肤后显示效果如下：
52.2.png


回帖（3）

硬汉Eric2013

2015-5-16 14:46:57
52.2  官方WIDGET_Multipage实例
    官方的这个实例很好的演示了MULTIPAGE的使用，这个例子在模拟器中的位置：
52.3.png
源码如下（程序中进行了详细的注释）：
  1. ----------------------------------------------------------------------
  2. File        : WIDGET_Progbar.c
  3. Purpose     : Simple demo shows the use of the PROGBAR widget
  4. ----------------------------------------------------------------------
  5. */

  7. #include "GUI.h"
  8. #include "PROGBAR.h"
  9. #include

  11. /*******************************************************************
  12. *
  13. *       static code
  14. *
  15. ********************************************************************
  16. */

  18. /*******************************************************************
  19. *
  20. *       _DemoProgBar
  21. 0 对应的是上面的进度条，
  22. 1 对应的是下面的进度条。
  23. */
  24. static void _DemoProgBar(void) {
  25.   int i;
  26.   PROGBAR_Handle ahProgBar[2];
  27.   GUI_SetBkColor(GUI_BLACK);
  28.   GUI_Clear();
  29.   GUI_SetColor(GUI_WHITE);
  30.   GUI_SetFont(&GUI_Font24_ASCII);
  31.   GUI_DispStringHCenterAt("WIDGET_Progbar - Sample", 160, 5);
  32.   GUI_SetFont(&GUI_Font8x16);
  33.   GUI_DispStringAt("Progress bar", 100,80);

  35.   /* 创建两个进度条*/
  36.   ahProgBar[0] = PROGBAR_Create(100,100,100,20, WM_CF_SHOW);
  37.   ahProgBar[1] = PROGBAR_Create( 80,150,140,10, WM_CF_SHOW);

  39.   /* 进度条使用内存设备两个进度条都使用*/
  40.   PROGBAR_EnableMemdev(ahProgBar[0]);
  41.   PROGBAR_EnableMemdev(ahProgBar[1]);

  43.   /* 设置第二个进度条的大小范围*/
  44.   PROGBAR_SetMinMax(ahProgBar[1], 0, 500);
  45.   /* 设置第一个进度条的字体*/
  46.   PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
  47.   GUI_Delay(500);
  48.   while(1) {
  49.   /* 设置进度条的字体*/
  50.      PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);

  52.     if (LCD_GetDevCap(LCD_DEVCAP_BITSPERPIXEL) <= 4) {
  53.    /* 0代表进度条使用的颜色，代表没有进度到的颜色*/
  54.       PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_DARKGRAY);
  55.       PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_LIGHTGRAY);
  56.     } else {
  57.       PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_GREEN);
  58.       PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_RED);
  59.     }

  61.     /* 设置文字对齐方式*/
  62.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_HCENTER);
  63. /* 要显示的文字*/
  64.     PROGBAR_SetText(ahProgBar[0], NULL);

  66.     /* 显示的进度*/
  67.     for (i=0; i<=100; i++) {
  68.       PROGBAR_SetValue(ahProgBar[0], i);
  69.       PROGBAR_SetValue(ahProgBar[1], i);
  70.       GUI_Delay(5);
  71.     }

  73.     /* 设置进度条要显示的文字*/
  74.     PROGBAR_SetText(ahProgBar[0], "Tank empty");

  76.     /* 动态显示数值*/
  77.     for (; i>=0; i--) {
  78.       PROGBAR_SetValue(ahProgBar[0], i);
  79.       PROGBAR_SetValue(ahProgBar[1], 200-i);
  80.       GUI_Delay(5);
  81.     }

  83.     /* 设置进度条上面显示的文本*/
  84. /* 动态显示数值效果一*/
  85. PROGBAR_SetText(ahProgBar[0], "Any text...");
  86.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_LEFT);
  87. for (; i<=100; i++) {
  88.       PROGBAR_SetValue(ahProgBar[0], i);
  89.       PROGBAR_SetValue(ahProgBar[1], 200+i);
  90.       GUI_Delay(5);
  91.     }
  92. /* 动态显示数值效果二*/
  93.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_RIGHT);
  94. for (; i>=0; i--) {
  95.       PROGBAR_SetValue(ahProgBar[0], i);
  96.       PROGBAR_SetValue(ahProgBar[1], 400-i);
  97.       GUI_Delay(5);
  98.     }
  99. /* 动态显示数值效果三*/
  100.     PROGBAR_SetFont(ahProgBar[0], &GUI_FontComic18B_1);
  101.     PROGBAR_SetText(ahProgBar[0], "Any font...");
  102. for (; i<=100; i++) {
  103.       PROGBAR_SetValue(ahProgBar[0], i);
  104.       PROGBAR_SetValue(ahProgBar[1], 400+i);
  105.       GUI_Delay(5);
  106.     }
  107.     GUI_Delay(500);

  109.   }
  110. }

  112. /*******************************************************************
  113. *
  114. *       MainTask
  115. *
  116. *       Demonstrates the use of the PROGBAR widget
  117. *
  118. ********************************************************************
  119. */

  121. void MainTask(void) {
  122.   GUI_Init();
  123.   while (1) {
  124.     _DemoProgBar();
  125.   }
  126. }
实际显示效果如下：
52.4.png


举报

硬汉Eric2013

2015-5-16 14:48:00
52.3  使用uCGUIBulder建立进度条控件
    用uCGUIBulder4.0建立如下界面（480*272分辨率）：
52.5.png
设置进度条控件的如下三个地方：
52.6.png
将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：
52.7.png
设置皮肤色的话，显示效果如下：
52.8.png


举报

硬汉Eric2013

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

举报

更多回帖

3 0 0

相关帖子

发帖
电子发烧友APP
|投诉反馈|电子发烧友网
© 2021 bbs.elecfans.com
湘ICP备2023018690号
×
20
完善资料，
赚取积分