" [9 e6 i/ L8 w+ h/ N
: w+ D  c0 Q* i  y, g5 X

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

2 {: f; u5 f5 p4 B/ f

  今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。
2 r: H1 p. l) ?/ ^/ G: ?
  打开之前建好的，STM32CubeMX工程模板BSP。
  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
/ J; V2 b" K; f. B4 Q0 Ehttps://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
(出处: 意法半导体STM32/STM8技术社区)
" X" \; S; a4 e2 v4 w
( O% N, r% J  y3 H
+ d! |5 M  R! C& a/ C& i  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
8 l. x( ?& ?* E
( {; ^# i9 v0 ^: e2 i
5 a& u  O% b  ~. P" v/ s; f- }  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。


  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
  [1 a( s3 P$ }  w
0 a' b" ]4 e, ^' M6 n- M
  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。
4 x* e$ a$ N! p8 W7 E2 n
8 J& {0 T: p' M5 @9 b- H- I2 D
  保存STemWin设置
% Q, e1 @( q+ Q; P$ f3 s
* t: ]! L0 p( A
  提示已存在，是否替换，“确定”替换即可。

. i6 x" c  j8 r" k
' `2 G8 L. v- l! ~; c9 A  重新生成Keil工程及代码。
( V' Y" L+ T' G

7 \/ `( |' p4 W; l  Keil工程生成完毕，打开Keil工程。


  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。


  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。

, N# ^& F7 r* ?0 D) Z+ o
  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
蝴蝶图片等，当然也可以通过其它途径获得相应文件。
& W2 |! _( @  }
0 |) g! d% S, {/ [% a/ @6 O  t9 O2 x
  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。
1 r; k8 P$ T! N! N/ y& n' j
! E/ Z2 x* g" {( `3 U" i0 I$ l  G% L- r
: @! E2 `( p! `# f/ U" N  打开转换工具软件“BmpCvtST.exe”。


  “BmpCvtST.exe”打开后，光光的，界面相当简洁。
6 W% l* ~1 e# L
' N+ i. }$ K2 T
  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。

" Z2 F7 S+ f  |( k' u
) A8 j; @7 q* n8 E6 Y1 W) K& [- W) X8 V  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。
/ B( I" o" m8 Y) p
8 R3 j3 Z# b& ~+ V0 b: g
  保存时，将可以根据提示，转换文件。
7 A3 O+ x, w. r9 g, j, P+ d  @
- Q/ @8 h$ P% v
  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。
+ U# G  G5 N& f8 C
' j! o2 J6 i* l: |
  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
; a. f1 z8 Q! o
3 _8 _; X' i6 [  c+ m
. W. O9 X' X0 t; Y; D' k1 H7 z& d; }  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。


6 a# I  G" d! n& U1 ]* S. ]8 U
  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。

  V1 D/ w3 m" e& s. w8 ^
* Y( J2 ?4 |0 ]2 S1 y9 H  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。


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


. f4 ?1 m+ S! H0 _  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。

! |; R9 O# o8 e6 Y4 |5 b, \: _
  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
  打开“background_new.c”，复制数组声明行。
0 c) @, K- F. f1 G" P- [

9 C& E8 K- V8 M; t) ?$ J  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。
# J, H- Z# I; e! @2 |4 U5 v4 M

  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
/ x. o# n3 n! x, a: Q' S
- N' k) T1 }' A2 v* t; I" O7 Q
0 B7 f7 x- U# D( r  需要更换原有的屏显函数。

) R( S/ _) y9 t7 r& W/ v
& j# p9 p+ h5 e% H* s  更换为函数IMAGE_SetBitmap()。

  C% d' F$ R0 `& x. X4 G; U" X
  新创建一个静态变量，标示“蝴蝶”循环显示状态。


7 v1 S: `0 q" {$ ^3 y  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。

# I2 c  R6 A, @# [" }7 [) J3 j
1 ^4 u) L8 }& M$ ?, w# y  打开文件“GUI_App.c”，需要修改两处程序。


; A$ r! ~/ P6 j  T. y1 S- `9 [  新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。

1 H- ~; L4 J+ w% V
. m6 Z' Y8 a& j0 s6 T6 T, f  下载程序到开发板。

9 u# {3 L" G1 I
( m# i% @. A9 ]  复位或重新上电，程序全速运行。


+ E% H& F- p% J5 }  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。
9 g# ?  v0 B) T3 s8 E& e
2 i0 T& X1 _0 p4 m: O
  至此，蝴蝶开始闪呀闪！本实验完成。
& U8 \7 {/ e: V
6 n! D5 Z4 }. |9 ]国际惯例，程序必须有！完整版本工程：
9 J: R5 K$ @9 C$ p, G TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件
* Z* V6 b& C& M9 N& g4 ^2 o
添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程）
* R+ ?) h- C$ |9 F& G TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34)

2018-7-23 23:06 上传

点击文件名下载附件
7 G+ p* Q8 c6 e3 H
5 Q' C( f6 V* x" b( i$ Y: y2 h
; G* `5 P5 [( J7 Q! T图片及工具附上：
$ U9 Z# {% L9 }" K0 t3 i+ C& b+ o 01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件


0 s$ A3 C1 o, i* z  J" G6 q& B3 ~1 y

7 ?, o! c" b! ?8 [

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢