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

  今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。
, t' j/ C' x& _2 c. H: H& @, |
2 S: K2 x: d( p6 S, [+ G  打开之前建好的，STM32CubeMX工程模板BSP。
  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
+ m0 D) L$ d, i5 m( q; Whttps://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
(出处: 意法半导体STM32/STM8技术社区)
4 V( c! d& Y0 Q, a" H6 S. D

; Z( f  U( F1 b( V! b! _  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
0 Q5 X: Y* q: e4 Q  `

  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。

* J  I6 z9 K- w; V- C( S
  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
1 K. B1 b% u, t( D- e0 w/ ]' h) r& X; Z

  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。
0 o+ M5 W/ k+ n. Q) [

  保存STemWin设置
2 O7 Z# Y6 e0 j+ j1 |
4 F3 X3 \6 @& w4 ]* W- D% W
  提示已存在，是否替换，“确定”替换即可。
/ q! P! y9 C8 y4 ~

5 [. J0 v2 f1 ~, H. c  重新生成Keil工程及代码。

2 Q+ O5 y) B3 |. \3 @3 k& p; T6 _
  Keil工程生成完毕，打开Keil工程。
) [4 {; j& L, a6 Z+ ]
+ o9 I' a" n" y9 l# j
- e5 ]. f, W+ k& w  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。


3 d6 r8 I" e9 C  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。

( L6 f1 J  d, a2 h% S4 }
  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
蝴蝶图片等，当然也可以通过其它途径获得相应文件。
& R/ X. I& E  k/ \

0 s  w9 m+ m! l; d. n# \  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。

8 [; |% c( C% F7 G. u3 g7 \  M
  打开转换工具软件“BmpCvtST.exe”。
, u/ s# o2 _# A1 o* @

1 Z: X8 Y; j# j4 G3 F9 ?  “BmpCvtST.exe”打开后，光光的，界面相当简洁。
. V: [* e4 c+ J, S& g) |/ X

" X* t  Y! m3 s0 E3 ~0 q9 A  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。

% w) E' z& v0 T; W- h/ F
+ R. G6 {0 k* g* `6 G+ J  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。


  保存时，将可以根据提示，转换文件。
3 B3 \0 ?! z4 l& _3 i

8 e$ W3 A4 A" N$ m  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。


  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
6 t" k) U7 k7 k2 C
1 S) d9 W1 `7 O5 m# f
  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。
. ^- C4 H+ d. u% S  e' N( j


6 s) d+ y0 R1 A0 ]. ~0 E9 b  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。
! I' ]0 n- y  R6 V

  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。
+ R/ X5 e, m' c+ Q

. l4 E8 h# k: V/ K* E3 H  在Keil工具中添加文件夹，并重命名为“res”。
# U. C$ m$ ~, D. c2 _1 {0 q, P
/ X& j) d/ N- ~6 `+ n
! i8 W) [0 T+ k  d, `  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。


3 q  T0 s% h& y! i0 g: U" Y  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
  打开“background_new.c”，复制数组声明行。


/ P- B0 u. r  v' X! C  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。
: s' [' _" A0 y0 T" ~4 J# t4 a8 r
- M" I4 F" {+ R: H. S& F
. e) v3 G! |7 s8 A) a, y% n. [  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
9 n8 p; V8 B+ e. f/ i0 O

  需要更换原有的屏显函数。
) p- V. t: S* }2 F- \  S8 a4 q/ F
$ U( V1 U# k5 G0 B
+ T" K3 D; l7 ?0 E( R* E  更换为函数IMAGE_SetBitmap()。
" N/ H& c. w3 P' b7 c5 r$ x
( `6 q; f, b- R
  新创建一个静态变量，标示“蝴蝶”循环显示状态。

/ w6 x; S3 O; G2 f
0 ^! ^7 S' W- R7 f( {$ g  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。


0 v, z5 {4 k7 n0 B- `  打开文件“GUI_App.c”，需要修改两处程序。
- s5 ^3 N& r, Z  N

  A, m+ e$ r3 G( X2 X  新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。

) V1 C4 ?3 D: g% ]
2 n& I: L+ [7 t6 D3 T7 E: h6 y  下载程序到开发板。

. h& |' ]9 g. Q( Y2 A. o
  复位或重新上电，程序全速运行。
3 j. c3 L6 T- r4 |; {+ L8 |4 D
* H5 w# L2 Y. w# a, J2 e# Q# X
! F7 w, u4 B  l1 W9 e% e  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。


* S* ]/ I, S: ~- K0 l' t  f  至此，蝴蝶开始闪呀闪！本实验完成。

国际惯例，程序必须有！完整版本工程：
TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件

& G2 v: @5 D' @; h( V+ B2 g添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程）
9 X% H0 [7 l! ~, X( J  ?8 E+ F TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34)

2018-7-23 23:06 上传

点击文件名下载附件


) k% ?6 i" K! x$ b9 A0 Q图片及工具附上：
01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件
( Q% X4 w& h# d


/ T2 v; [$ \, ~! j0 v0 x, f

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢