3 M2 [4 A: d; F) o
, E4 D, q" J) `" c5 F

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第4章      uCGUIBulder4.0和GUIBulder5.22的使用方法

    本期主要是带领大家学习uCGUIBulder4.0和GUIBulder5.22的使用，很好的利用这两个软件，能使得STemWin界面设计事半功倍。这个两个软件各有优缺点，要充分的发挥他们的长处就好，比如使用uCGUIBulder4.0的好处就是支持控件的对齐功能，这个功能非常的重要，官方推出的GUIBulder5.22的好处就是控件非常的全，基本涵盖和所有控件，但是不支持控件对齐功能。

      4.1  GUIBulder5.22的使用步骤

      4.2  emWin5.24模拟器上运行GUIBulder5.22生成代码

      4.3  uCGUIBulder4.0的使用步骤
      4.4  移植uCGUIBulder4.0生成的代码到开发板
      4.5  总结

4.1   GUIBulder5.22的使用步骤

    关于GUIBulder5.22的使用分为两部分跟大家讲解。一个是MDK安装目录中的，一个是STemWin软件包。

l  MDK4.73及其以下版本中GUIBulder5.22所在位置

7 g, _' Q# w0 b& C2 k" l

l MDK5.xx版本中GUIBulder5.22所在位置，MDK5.xx版本相对于以前的版本变化比较大，路径也有很大变化。

$ o( B4 g# X8 r1 {+ p; o

l STemWin软件包中GUIBulder5.22所在位置

) t! [9 l; w2 w; K, J8 n4.1.1      第一步：建立一个对话框
7 k3 ?+ h: C" C+ k" [

l  找到GUIBulder后，打开这个软件，并按照如下方式建立一个对话框。

7 [2 u1 x  n( K/ k

l  修改对话框大小为800*480

l  设置对话框标题的字体，对齐方式，和显示的文本

在建立的对话框上面右击鼠标，选择Set font出现如下界面，并选择字体GUI_FONT_32B_ASCII

  k: j8 i+ l2 i5 J2 ^

      

    设置号字体以后再设置对齐方式，还是右击鼠标，选择Set text alignment，并选择居中

    设置好以后，上面的字体Framewin字体会居中显示，然后还是鼠标右击，选择Set title text，并更改Framewin为armfly，修改的地方在左下角：

设置好以后，基本一个对话框就算建立完毕。

4.1.2      第二步：在对话框上面建立按钮

    按钮的建立方面和上面的对话框是一样的。按钮上面的字体大小和显示内容，大家可以任意设置。按钮上的文本不支持对齐方式设置，默认是居中显示，我这里是显示字符armfly，字体GUI_FONT_24B_ASCII，建立后的效果如下：

9 E2 w3 a8 F+ e$ Q" \
9 d. b/ w, r+ n$ l" R0 H& M- I

    对于建立的按钮控件，用户可以任意拖动，并通过鼠标调整其大小，调整方法如下：先左击选中相应控件，会出现绿色的边框，在边框的地方拖动鼠标即可修改大小

8 I9 [$ d( l" S( `  ~4.1.3      第三步：在对话框上面建立滚动条

    建立后的效果如下：

& S1 ]! n- U7 l0 t' l

4.1.4      第四步：在对话框上面建立滑动条

    建立的滑动条显示效果如下：

& n" X) ?( W5 T# S4.1.5      第五步：建立好后点击File-save

   保存方法如下：

/ o. k. G& c' x, G' S# |5 i, k

3 |0 O: ^3 d9 g/ H

    保存后生成的文件在GUIBluder5.22软件所在的文件夹里面：

9 _; l$ t- ]: e/ w, c

4.2  emWin5.24模拟器上运行GUIBulder5.22生成代码

    现在给大家演示一下emWin5.24上面运行上面GUIBulder5.22生成的代码。emWin5.24的官网下载地址：http://www.segger.com/downloads.html?pid=26

    用VC6.0打开emWin5.24模拟器，左侧栏是这样的

! ^" x6 V. |; ?$ Z9 v6 F( C

    这里打开那个GUIDEMO__Start的文件，里面只有一个MainTask的初始化，这里可以把这个文件里面的函数全部的删掉，全部复制刚才那个C文件里面的程序到这个文件里面来，只这样程序还是不能够运行的，复制过来以后再加入这个代码，加在文件的末尾即可。

1. /*********************************************************************
   
2. *
   
3. *       MainTask
   ! q% C% s8 z- z5 V0 V% O) k! _7 h. p
4. */
   $ e" O) c4 t6 \% ~2 e7 }7 N
5. void MainTask(void)
   4 Q  i  C' @" Q
6. {
   + t" m" e* \5 a/ C2 W( V
7. /* 窗口自动使用存储设备 */
   # y) O2 ^0 `7 \" U$ `
8. WM_SetCreateFlags(WM_CF_MEMDEV);
   9 q# y, B$ }9 [+ N! A9 S3 B3 K1 n
9.     /* 初始化 */
   7 E2 B/ e" m' ^- n9 k+ Z! o8 p
10. GUI_Init();
    
11. /* 创建对话框 就是刚才咱们用哪个GUIBulder5.20生成的程序里面的一个函数，用于创建对话框 */
    
12. CreateFramewin();
    
13. while(1)
    
14. {
    
15. /* 做一个延迟用出窗口的刷新和触摸响应 */
    # H+ b4 R. [4 x& ~6 |
16. GUI_Delay(100);
    " f& J  F9 z# y- W" j
17. }
    
18. }

复制代码

    运行VC6.0实际显示的效果如下：

: k. E  i: n7 L+ k5 @4 k% i- |+ V3 U

    显示这种界面很正常，是因为配置的输出界面时320*240的，下期教程跟大家讲emWin5.24的使用时，再详细的讲解如何设置。

4.3  uCGUIBulder4.0的使用步骤

     uCGUIBulder4.0是国内的一位网友做的，做的不错，特别是控件的对齐功能。这个小软件有一个作者写的使用说明，说的非常详细，我这里就不再赘述了，下面用这个软件设计一个如下的界面：

    然后将生成的代码复制到emWin5.24模拟器的那个文件里面，方法和上面讲的相同，这里主要将uCGUBulder4.0里面MainTask函数内容贴出来：

1. void MainTask(void)
   
2. {
   0 J: Z. n1 y/ ^
3. GUI_Init();
   3 O* ~" U1 J- B$ n& _+ w2 h: t
4. WM_SetDesktopColor(GUI_WHITE);      /* Automacally update desktop window */
   + ?. L3 d/ P0 F8 [7 f3 }0 ~) C
5. WM_SetCreateFlags(WM_CF_MEMDEV);  /* Use memory devices on all windows to avoid flicker */
   
6. //PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
   ' P/ ?7 R, e8 Z. J* ~
7. //FRAMEWIN_SetDefaultSkin(FRAMEWIN_SKIN_FLEX);
   
8. //PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
   1 h- U4 L6 j/ m& X0 L% Z
9. //BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);
   
10. //CHECKBOX_SetDefaultSkin(CHECKBOX_SKIN_FLEX);
    
11. //DROPDOWN_SetDefaultSkin(DROPDOWN_SKIN_FLEX);
    
12. //SCROLLBAR_SetDefaultSkin(SCROLLBAR_SKIN_FLEX);
    1 Y' A6 d8 t1 R* N6 _/ V7 x
13. //SLIDER_SetDefaultSkin(SLIDER_SKIN_FLEX);
    8 C$ P7 V; L; `* C! E5 N
14. //HEADER_SetDefaultSkin(HEADER_SKIN_FLEX);
    
15. //RADIO_SetDefaultSkin(RADIO_SKIN_FLEX);
    
16. /* 特别的主要这里，这个是阻塞式对话框，切记，切记 */
    
17. GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);
    2 X: x! s; a2 K5 B/ x
18. }

复制代码

    运行emWin5.24模拟器的实验效果如下图所示（这里将上面注释的皮肤设置函数全部打开）

4.4  移植uCGUIBulder4.0生成的代码到开发板

    移植到开发板上面和移植到移植到emWin5.22模拟器上面是一样的，直接复制粘贴就可以，只是粘贴到MainTask文件里面：

: m, U2 E' Z% x8 j- u$ S4 L- ]

    运行并下载到板子上面实际的显示效果如下（通过按下按键K1将界面保存为BMP图片到SD卡）

    特别注意，如果使用的是800*480分辨率的屏可以完成显示出来，如果是小于这个分辨率的屏只能显示出一部分，大家可以按照上面的设计方法做一个适合自己屏大小的显示。

4.5  总结

    通过本章教程，大家对于两个图形生成软件有一个了解即可，后面会跟大家再深入的介绍相关知识。

6 K6 h4 p* `( P6 A' z

学习记录一下

值得收藏哦