6 k6 ^' M7 R4 a% C# v1 D

在之前的LTDC、DSIHOST、FMC、图形中间件搭建环境好并验证成功之后，要实现图形化还需要很便捷的图形界面实现工具，加速图形应用的开发，下面这个动画，不断切换蝴蝶颜色的案例，怎么做呢？

                              

培训视频中的方法：

  就是将图片调入内存中，不断切换图片局部的图形内容来实现；

工具呢？还用emWin一行一行代码写并作下载调试？有没有所见即所得的方法？一次下载就能完成？

答案是有，ST官方已经集成在CubeMX中，并以Lib文件形式免费使用

0 q6 i. J" g+ q- L8 k3 K

1)  图形的框架搭建

CubeMX进入配置（configuration）标签栏，选择“Middlewares”中的“Graphics”—〉进入弹出窗口的“Graphics”---->使能External Tool中的 Use GuiBuilder Tool。

然后在STemWin中选择图形应用模式为Window,点击Execute

即可进入STemWin的图形编辑界面：

添加两个Image图层background和butterflay

分别如下图设置name、xpos、ypos、xSize、ySize

然后就保存，默认的保存位置在CubeMX工程项目中的

STemWin\app\WindowDLG.c

通过CubeMX生成代码的按钮，即可生成工程关联代码：

之前的HelloWorld生成的代码主要区别在

1. void GRAPHICS_MainTask(void) {
   ! Y5 z. v* z, U: r0 j0 Y
2.   ......
   . C0 `9 y! Q5 ?3 U9 X
3.   CreateWindow();
   
4.   ......
   
5. }
   5 l2 D6 V/ g, m% Z( U! M# f2 e' G5 u; [

复制代码

CreateWindow调用实体在新保存WindowDLG.c文件中，emWin GUIBuilder已经将电脑中编辑的图形界面，生成可由编译工具编译的C代码。这里图形环境的框架就在Cubemx和emWin GUIBuilder的帮助下搭建好了。要实现上边视频的内容，就要对框架中的内容进行素材填充和逻辑代码调整。

2)素材的转换

   在实验视频中，官方提供了动手实验的素材：01-assets.7z,其中包括

background.png、butterfly_blue.bmp、butterfly_green.bmp、butterfly_pink.bmp、butterfly_yellow.bmp 等文件

视频中给出的方法是将png、bmp文件转换为数组存放在.c文件中供框架调用以便液晶屏根据代码界面显示内容。

{Cubemx生成项目}\Middlewares\ST\STemWin\Software目录中已经提供了将图形文件转换为.c文件的工具，如下图：

& }; @$ v' A$ H3 C, A0 U1 `

分别用BmpCvtST工具打开PNG、BMP文件

另存为C文件

Background.png转换的格式为：“True Color With alpha, r/b swapped, alpha inverted ”

其余的butterfly*.bmp转换格式为：“High color whit Alpha[565], read and blue swapped”

; }1 c/ Z+ \/ b  }( B, e

这是素材转换就准备好了,为什么格式不一样可以同时使用？这里的答案已经在直播视频中，请诸位在直播中去寻找。

5 {+ Z1 B; W. N$ f, D) F

2 B0 |# c( \2 ?) s

3)控制逻辑修改

用IDE打开工程，把对应的C代码引入工程中

修改STemWin/APP如下文件的内容：

修改后的内容分别如下：

GUI_APP.c文件中

1. void GRAPHICS_MainTask(void) {
   
2.   ……
   % \( I  }# Y/ k) b( C. \. X' O0 `
3.   WM_HWIN hWin = CreateWindow();
   
4.   while(1) {        
   # @" M, O$ i8 N/ S  p
5.     WM_InvalidateWindow(hWin);
   
6.     GUI_Delay(1000);
   
7.   }
   
8.   ……
   
9. }
   

复制代码

WindowDLG.c文件中

1. //引入图片文件
   * q- F1 B4 B" Q. D9 a) ]
2. // USER START (Optionally insert additional defines)
   
3. extern GUI_CONST_STORAGE GUI_BITMAP bmbackground;
   
4. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_blue;
   $ y( b' I7 m# |. f" n. b( I8 R
5. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_green;
   ) T/ {) @" E% N+ @. a0 H' N; ~7 g
6. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_pink;
   
7. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_yellow;
   $ M5 {# b2 R2 Q8 h
8. // USER END
   
9. …….
   8 }( I. A! `# ]& l
10. //定义图片状态
    $ w; D7 g. |( t* ^4 ?
11. // USER START (Optionally insert additional static code)
    8 V9 [1 x3 c) ]' j
12.    static int butterflay_status=0;
    
13. // USER END
    
14. ……
    
15. //修改显示控制
    . p1 z& `& e! O1 w6 D: c8 W% ?2 q
16. static void _cbDialog(WM_MESSAGE * pMsg) {
    : m: o  O+ o- ^% T# f- N: c& i
17. ……
    
18. switch (pMsg->MsgId) {
    
19.   case WM_INIT_DIALOG:
    , P" o6 I+ e2 G& ~7 Z$ O
20.     hItem = WM_GetDialogItem(pMsg->hWin, ID_IMAGE_0);
    
21.     IMAGE_SetBitmap(hItem, &bmbackground);
    7 N9 [' b' r5 E7 P! T9 u
22. 
    % O% Y; m3 k5 V! D4 ^
23.     hItem = WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
      i; z# A3 G6 j, s4 g4 Q) T
24.     IMAGE_SetBitmap(hItem, &bmbutterfly_blue);
    
25.         
    . v" y0 {+ d4 Z6 z  N
26.     break;
    - i/ m. T: c- h! ^, N1 J, X
27.   default:
    " {) U/ u8 s7 k( [
28.           if (butterflay_status==0){
    
29.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    - v& }1 a/ |$ z7 Y: u8 G# `& E
30.                   IMAGE_SetBitmap(hItem, &bmbutterfly_green);
    
31.                   butterflay_status=1;
    , D9 e7 G1 {0 w! \; z2 b
32.           }else if (butterflay_status==1){
    
33.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    
34.                   IMAGE_SetBitmap(hItem, &bmbutterfly_pink);
    
35.                   butterflay_status=2;
    / D# R5 a/ Q) ^. w  b4 U
36.           }else if (butterflay_status==2){
    4 k9 w9 o1 }2 v7 A# L% M
37.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    
38.                   IMAGE_SetBitmap(hItem, &bmbutterfly_yellow);
    
39.                   butterflay_status=3;
    
40.           }else {
    : O0 N' V" S, F" K) B" K, E9 I. [
41.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    
42.                   IMAGE_SetBitmap(hItem, &bmbutterfly_blue);
    
43.                   butterflay_status=0;
    0 E+ n7 f7 c2 P: b9 J4 ~) M
44.         }
    $ _2 W' C8 j  A% V9 n1 R* M
45.     WM_DefaultProc(pMsg);
    - S$ A2 h, ]  u- i) P/ T
46.     break;
    3 s9 Y' H3 t5 w5 x* G
47.   }
      ^! c, U6 q2 v7 [" g: C5 y
48. }
    - V$ e* {8 K7 Y8 x. ~- E6 r1 J
49. …….
    * J* }' h) G' g1 z& I

复制代码

编译工程并下载到开发板中，即可实现上面GIF文件所展示的GUI图形显示功能。

! T: W: ], h7 t6 A

在Cubemx、GUIBuilder、BmpCvtST等工具的辅助下，加快了GUI应用的实现。虽然是一个Demo已经完整地展示了图形框架的搭建、素材转换、以及控制逻辑修改等方法流程；对于学习GUI工程实现有很大的帮助；

: O5 G0 }! m. F# g( J

真正的工程应用会使用其他方法解决Demo中几个问题:

1、占用内部Flash太大；

2、图片的更换需要更新工程代码；

3、可以将STM32F769I的设备引用进来，充分利用硬件的特性；

比如：JPG硬件加速、SD卡设备读取外部文件等等，

GUI这个技术含量颇高的功能已经掌握后，STM32F769IDisco的其他应用拓展正等着诸位前去逐一熟悉。
  I( A! \& V# x5 i! d" |. _1 N
; N* j0 [- x. S5 i: HSTM32F769I-DISCO开发板GUI学习内容(一)_课前知识预习
STM32F769I-DISCO开发板GUI学习内容(二)_课前硬件基础
3 l/ M/ o$ Q! ~! @STM32F769I-DISCO开发板GUI学习内容(三)_课前预习之CubeMX篇(上)
% @0 z( ?# {' Q# |+ E' bSTM32F769I-DISCO开发板GUI学习内容(三)_课前预习之CubeMX篇(下)
+ y9 w. E6 }6 {4 O# X  V

点赞！

学习中

学习中

学习中