+ C1 s+ N9 _$ D( H4 m9 b# b( m
7 G& \# m2 t: w1 H

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

: `  E2 ?5 I6 t- F/ _3 R0 m

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

* d# f$ ^8 C2 W$ V" N2 J  打开之前建好的，STM32CubeMX工程模板BSP。
  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
https://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
(出处: 意法半导体STM32/STM8技术社区)

0 B+ k; Y9 j  J1 L+ E. D) r/ A3 r
  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
; ~% Q9 J% p1 i- j( T6 t

- ?' p' ^8 t8 S2 U; L/ d  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。
* q! ]; G1 M% q0 n7 u+ }

  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
- |) k& M8 R( D6 R
- S! E6 l/ ]$ Y' {! s
  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。
  }8 }$ X( p  P% r
! W+ i, E$ B$ `/ D. h: b
  保存STemWin设置

2 S3 n3 V; ^/ b4 t3 u
  提示已存在，是否替换，“确定”替换即可。
' j) f% O- e% Y

  重新生成Keil工程及代码。


' e$ l- z, }# M. h1 h) P  Keil工程生成完毕，打开Keil工程。
& z; O( u3 {" k! f5 P4 c" }
" t& }0 Q' \1 X
  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。
: p7 O" F: a$ d1 }- P
3 n0 J* L; {6 b
+ L- M" O- r% Z2 i1 q) o  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。
# X7 m/ z5 `7 b$ B2 @$ X
6 b9 Y; W4 _# X$ Q
  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
蝴蝶图片等，当然也可以通过其它途径获得相应文件。

* @7 q3 d8 u5 V+ j8 K- J/ L5 R( r
+ }0 I8 e, C8 n; O5 f" h+ H0 D. m4 Q  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。

7 p. T( P3 n) A  x9 j1 K
  打开转换工具软件“BmpCvtST.exe”。
" s' R. \0 \; {1 Q4 N2 G0 f

) i# i* R8 G$ q) {+ J  “BmpCvtST.exe”打开后，光光的，界面相当简洁。


  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。
9 m, S& M! _+ p

  [" ]: T" j/ r& |% a% \. _6 r  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。
$ o; M* C3 y0 T

  保存时，将可以根据提示，转换文件。
1 r4 K9 @# e" ?+ i

$ Z2 x7 q/ M: X  O  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。

1 e4 P! I% V: ~" a6 w3 r/ P  p5 [
+ k' j) Q4 u) m  j/ ^  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
! t% M* {; ~; F% m5 E" o; j! T

  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。


0 A; Q: R, D( p4 Y; a" P3 B
  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。
" C/ _( |6 D6 ^! T
' U& E  B. z3 j8 t
' E8 A6 O2 ~; \$ `" V& B$ O3 c% v  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。

! e6 s: Q. V4 k0 B4 d$ ~7 ^$ j2 {
  在Keil工具中添加文件夹，并重命名为“res”。
# F. u' m6 L$ F
' p* e- s* N$ S& }( n
  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。
; ]; B7 v7 }! w" \9 x

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

: W2 T+ a( W! j2 f% S/ K
  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。

# _0 R- M+ R* o
( G+ r( D, y5 [/ H  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
' \2 {, A" T/ l) Z) }/ w7 Y) [
: ], p* ]" r) ~  ?: ]8 ^
  需要更换原有的屏显函数。


  更换为函数IMAGE_SetBitmap()。


  新创建一个静态变量，标示“蝴蝶”循环显示状态。

2 a2 x: G+ J/ n+ x% ~' G
' h8 n2 r& @% P, k$ G& b  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。


' w5 M3 F2 R: g) O) t: X2 [9 p  打开文件“GUI_App.c”，需要修改两处程序。


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

1 C/ l5 `0 s5 n- {/ Z; {4 `
- @. d! y/ ]+ _7 G- u. r3 o2 u$ `  下载程序到开发板。
; V" i5 ]/ q6 ~) Z5 A% N* x
* w( x2 D; C6 O2 j; D- R; |
1 ?  c$ M2 S; \5 F! E  复位或重新上电，程序全速运行。
; Q' Y/ S/ Y/ b6 S( v* Q$ ?
3 A/ u  P7 m, Y4 M( @' \
% b# b4 m% G9 `. `" G4 q  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。


4 T, I5 T1 l3 h  至此，蝴蝶开始闪呀闪！本实验完成。

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

2018-7-23 23:06 上传

点击文件名下载附件
( E$ H& w7 p5 V' ~  [$ g# _0 x$ C$ u; i
添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程）
1 B% W8 r4 S& M5 K TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34)

2018-7-23 23:06 上传

点击文件名下载附件


. R' P( y( H+ `8 w5 `3 z# P图片及工具附上：
01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件




# n: X" l. T# U( v& ]

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢