% Z0 |2 j" V& v; b5 B9 A$ d/ b

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

& j2 m/ e- v1 I/ d1 M  F

  今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。

  打开之前建好的，STM32CubeMX工程模板BSP。
7 o: s- j, W% j  n; D  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
https://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
7 Y6 _' g5 h3 A2 [) ?2 w(出处: 意法半导体STM32/STM8技术社区)
! p! d, {& h5 O  M" ?: A
) R7 I- h" c! O% w! }
  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
* Z1 f3 b7 _2 b) X  D# @

/ _7 }6 Z& S1 h  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。
* m. B$ r+ L- }4 |; }' Y
5 ]2 T' z+ P# Y/ Y& T4 x
$ b, N+ j8 [( L0 |) w4 T) D) ?4 g  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
$ h- g$ f& W9 v' x1 b7 V

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

: ^$ _4 ?3 F: [! }* F
& u( ]3 u) U) G( R, J: r6 d4 r  保存STemWin设置
& @1 q( P( A/ M- w! ~' u
9 @- ]& N  F. [1 ^8 h- L0 u$ o
  提示已存在，是否替换，“确定”替换即可。

4 `+ W- M  [5 x8 q0 _' @* ]& j
  重新生成Keil工程及代码。
) S% s4 d3 k; x

- r" [5 ^0 w; B! N* m* A0 T  Keil工程生成完毕，打开Keil工程。

& Q6 l( u+ W8 J4 e. d+ \# z
  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。


% F0 D9 Y2 z5 I" _0 J' k2 S" `  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。
; D4 M2 R9 O: j  C; P1 w. A
$ |$ f* o' l9 A+ n& C6 h6 k
; k5 u; D/ k$ P  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
蝴蝶图片等，当然也可以通过其它途径获得相应文件。
( ]& L& `0 S) A' [  e* p
! V1 Q" ?9 B3 D$ J2 @, m, b4 E) _
  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。

( z" P+ l( V. D+ Y2 W  x- M
  打开转换工具软件“BmpCvtST.exe”。
3 Y, Y  w! {, A0 g* l0 ~- O

! J" k, d! t5 z  z" D- B  “BmpCvtST.exe”打开后，光光的，界面相当简洁。


- D* s  c* I& [5 }; o! J" O, o! O  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。
) G$ N6 G7 ?9 u  ^
8 R# d8 P4 i7 Z  m' x
7 j; m$ `- _  U  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。
- ~% Y( f/ \& Q: l2 |
" }  X3 H" T+ i: X; w7 X& e
5 s/ V1 Y* w* d4 H$ \7 Z, J' ?  保存时，将可以根据提示，转换文件。


- f( m4 y1 l8 M1 [6 M( e  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。
1 b0 F: s6 s7 X2 ?" d. }+ u( R2 G
6 }6 ^! M& d. O) j9 n1 @
  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。


  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。
% ^2 g* ^0 x4 I- E0 \5 `" ~) X# h

% ^3 f3 @. T# y( h5 V& T* b( I, Z) o
. t  `6 A  {" M5 U9 v  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
. {: i9 N: ~4 V3 U$ v1 ~- E+ k) k- ]那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。


9 G" E2 U( A" P4 t1 H  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。

. ~7 [" b3 a6 z5 a, m6 Q
# D5 X8 @( F$ u  在Keil工具中添加文件夹，并重命名为“res”。
2 g% F) q. z( q# a, P7 _: @
! Z$ P2 R0 p: v4 t
$ x7 l: H3 ~! L: T# ^4 r  o% Z  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。
- n) L/ U- b# }* @; T# K2 ?

  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
7 n" o( m' y$ [' P  打开“background_new.c”，复制数组声明行。
9 U9 S' g; e9 H* c3 @
  e4 U# m/ k6 Q2 O- Y4 k) Q
  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。


$ M; Y; a7 ?( O% I5 V6 t  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
: N1 w1 `! J( S" B) H3 ^' p+ K4 B
3 b$ g7 V  [+ J8 P* L
% e2 r5 |. a7 I  需要更换原有的屏显函数。

# p/ ]' `( I( J* M' I2 C1 J
  更换为函数IMAGE_SetBitmap()。

# I( t1 }& y$ {. J  N' L6 b" Y
  新创建一个静态变量，标示“蝴蝶”循环显示状态。
6 l0 c; c7 D) w7 {- N( K

  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。
/ ?9 [, p+ g4 Z

  打开文件“GUI_App.c”，需要修改两处程序。
" B& Y" l! D8 U
5 Y* S  {0 l6 L! i/ a! V
  新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。
  P  k+ Q; g% t7 F- L. z8 G. a$ I
& q; C  E) G/ h/ y7 s2 p
* z( n& p. {4 j; l, |9 I  下载程序到开发板。

4 }2 X" r) t: L
  复位或重新上电，程序全速运行。
8 {8 x- E' j& O2 m/ p  E6 O
7 V# Y1 u# B- a$ y
" ?! ], x' V1 \3 j3 p' q9 `  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。
) D% A+ d: {9 W- y6 Q. B

- d$ f6 k; k& F$ V- P' \- \% i  至此，蝴蝶开始闪呀闪！本实验完成。

国际惯例，程序必须有！完整版本工程：
+ D7 @: V! |3 i( }: d" p TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件

添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程）
TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34)

2018-7-23 23:06 上传

点击文件名下载附件
8 l% C0 \/ K4 {
) M& z4 r4 D6 D5 A3 w. S/ x
图片及工具附上：
" L/ U/ [9 d2 P+ A; W+ ?' l0 | 01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件
4 q, o5 `: S3 }7 f
' t0 q5 N; y1 Z# K1 v3 U
% i% ^/ _0 a+ I- _8 l
' A0 M6 ~/ f6 [

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢