' @& {. S# K, j
8 l/ ^# n0 M; j2 _: |) I6 m

STM32 GUI高阶培训之实验二、蝴蝶闪呀闪，应用工程APP

6 S* K8 S: G4 m+ \% `, q

  今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。
9 H, t& J' @" k) h" q
1 b  A4 z1 f3 U3 M6 P  d/ `6 l  打开之前建好的，STM32CubeMX工程模板BSP。
8 O7 U" K- u, Q" O  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
) v, Z0 ]; z5 M, q2 B' J. Nhttps://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
(出处: 意法半导体STM32/STM8技术社区)
. s9 o1 `( ]& l9 t( l0 J* O4 d

. x. w- n/ g/ O: U' h  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
, I$ B! G' I$ I% [. @# h, o
# i" p1 I$ @0 s* D+ t2 n5 N9 I/ I
+ k. g6 h: K' p( ?- X  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。

3 L9 n' Q3 ?; Y+ n- I- t$ r2 z
  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
0 F. F5 ]/ M  I. d, j

  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。
3 L& ?" @0 n) C: c. r

  保存STemWin设置

& g1 F+ V8 S2 j6 w+ h  g, o
  提示已存在，是否替换，“确定”替换即可。
9 O7 q- {- M9 F- m1 V

" ?3 Q' K% ]. W5 _* R- |$ q  重新生成Keil工程及代码。
/ y5 I3 ?6 W4 E1 W
4 b( L: d" s$ e+ D  |3 ]) B* n" N; V
  Keil工程生成完毕，打开Keil工程。
( [* w2 ]2 s0 J3 }+ _+ |" E
  r  K3 [6 r4 C; E+ G( B8 }. l
  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。


" n8 p4 \0 G: a5 n  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。

2 e; r% O4 T6 G) A
  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
& |- S. x& i  C: \  Y! j蝴蝶图片等，当然也可以通过其它途径获得相应文件。

3 c4 V+ j7 b5 Y8 V2 j3 ~" o
9 V8 E% E. d$ F& Q6 N: U  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。
( d4 V: w3 P9 G# B6 p1 R6 C& {
1 V; a- J/ U, Z2 Z4 o/ @
/ e! h( ], j2 V. _  打开转换工具软件“BmpCvtST.exe”。
3 l8 A1 |& l4 a# M" q! d

: J/ k: u7 G- [6 `6 H7 b  “BmpCvtST.exe”打开后，光光的，界面相当简洁。

, n( x% Q( `1 _7 A" F. r2 }& R
0 M4 V& r9 W" E" K1 O. K9 E  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。
5 h* X& d& ^) u- _- h
0 n, j; W5 L% q/ J8 M( r+ i
  E4 K  H; y: n" ~- L9 D4 x8 j  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。


  保存时，将可以根据提示，转换文件。


  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。

* \- f% k( j, C0 C$ F. V
$ R. n: E4 E3 V7 o( S8 m  L( S  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
$ w" W1 u  n' S- b2 q) c8 e
9 o0 x$ \" ~+ {0 @
- B% L. i6 ]& }" W2 ~4 d9 c8 |- @5 ~  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。
- V. j) `6 W( b# `
6 B2 d( X" E7 k" l
9 x% n! i' Z  @: s* ^
  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
/ X9 u+ D6 w5 m- P% ^. B2 _那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。
3 G# `9 h7 ?  A2 T/ k! C! X
2 `; O! |3 L7 M& ?: B( ~; _
7 u5 O% n6 w5 G, n5 o, @  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。


  在Keil工具中添加文件夹，并重命名为“res”。

& D, r4 w& o9 A! m+ K$ P
! ?/ Q% _+ ~$ [$ Y  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。
* M( A' S- u9 j7 U! B8 j5 f! y! R7 h

  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
  打开“background_new.c”，复制数组声明行。

% A" v, `: X. L; r* W7 T4 L0 _& j
  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。
+ k. u' Z" _- S/ `$ P

9 X- ^( z: ?" N/ H- g  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
/ M5 P7 Z  O  X. g* D

  需要更换原有的屏显函数。


  更换为函数IMAGE_SetBitmap()。
* ^( }4 Q5 u, S8 R2 k

  新创建一个静态变量，标示“蝴蝶”循环显示状态。
! _+ x0 p- _: {% A

8 Z0 S% l& N, X4 \8 A, \0 F  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。


" N' t1 q/ e8 b0 Y! \  打开文件“GUI_App.c”，需要修改两处程序。
% U" ?" H0 u& H( L# ]  f6 `
- g. Q/ w6 [8 p" l/ d
* Z$ F* M, B% S0 l5 Z  新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。
* U& v# I9 ^; P$ B+ ^; o3 J' z

  下载程序到开发板。

, @+ O& |% B) b! J% k+ M4 s. l
  复位或重新上电，程序全速运行。


  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。


  至此，蝴蝶开始闪呀闪！本实验完成。

国际惯例，程序必须有！完整版本工程：
. K0 X6 n6 n/ }* r9 ~; J TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件

5 S# s. ?; S1 j" s, ~0 B4 A9 E添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程）
TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34)

2018-7-23 23:06 上传

点击文件名下载附件
0 U; u% @4 B: d8 Z: C* E
" H. H1 J; Z% n2 }8 L
. ]! V! B2 ^0 w( D$ s/ B+ D, f8 e$ |图片及工具附上：
9 _& _# b5 p4 D& |+ V 01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件
9 w% @, `1 v3 C/ }8 @

1 B' X5 }0 Y8 r6 {$ k5 b2 x9 f

支持下

帮顶，学习下

分享的非常详细，感谢分享

谢谢分享

谢谢~~~

谢谢