2 o8 C& J5 y  k, n9 B7 k

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

  今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。
1 l" K4 @5 [3 \0 C: y3 x
  打开之前建好的，STM32CubeMX工程模板BSP。
6 P- d. f7 e6 n  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
https://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
' u( a1 q5 ~$ u/ q% d! I(出处: 意法半导体STM32/STM8技术社区)
& F: K) O  ^+ f8 \
- t% \% z+ L1 u8 a( t5 L- ~
( U# |$ u# U# C2 A# L" G  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。


% x4 y( C# u& ?  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。


# _& T1 Y. N, S4 @% j5 K  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
+ g0 ?4 y/ E  U! [

/ L( }/ m  [  W" p; G5 [, M# Y  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。

% T2 o$ i( K5 m" m1 L1 u6 M* x
' M5 H( v9 Y% M  {- l  保存STemWin设置

$ d! b4 L. O5 |; u" ]' l8 `
4 q0 g' s' i. q! M  提示已存在，是否替换，“确定”替换即可。
4 Z+ I+ `5 g0 ]  d- w- ?. {
( i; }; N( H; m. O) Y) e# x# a
  重新生成Keil工程及代码。
; U5 t( L) m  k
+ N$ a1 ~6 r% p/ t5 I6 q
( w/ ~2 N+ x9 C- x: m: X! f) d  Keil工程生成完毕，打开Keil工程。

& }2 f/ V# x# T+ g5 Z/ a6 s: c
  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。
/ ^. i$ U: a# \& ?* G0 |

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

. X9 A: f) u* J% @3 P! F$ d
. v% {; {" n% _: ~- R7 h  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
" }# L% u% C# w蝴蝶图片等，当然也可以通过其它途径获得相应文件。
/ [) L! O8 G7 `( I( f$ }2 O

  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。
( m. Q: I8 a/ T% s$ ?1 M4 c
) _1 [/ {, |( E; Q& y' }3 R% g1 h
  打开转换工具软件“BmpCvtST.exe”。


& A; o' V! W7 V2 x  “BmpCvtST.exe”打开后，光光的，界面相当简洁。
3 A8 V0 i0 |3 _3 \$ x! J, y! y: F
2 z# e- m1 O' S5 I* f# f
" T; }+ w, C# G  N0 H& D: i  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。
; V- i! Q% |. E% h9 ^
5 q- [1 `. D9 C+ c8 w4 U+ E+ L! D& K
  P$ s, u( s, j3 Z" O4 U  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。


" i( `: a7 ^( ?5 t9 `  保存时，将可以根据提示，转换文件。

2 |1 M, v7 T" o5 O
  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。
& w( t1 V6 {5 Y- C" b
  u/ l7 m% i: e0 s. F5 e0 A
  d5 R, \" N+ ^* x' A* ]  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
. k  }3 f$ @  ~5 v

  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。
/ w" c8 u! m6 z) ~( F1 v


  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
% [& `6 ^8 A: D( E! j那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。

2 G" r4 o2 G& j1 r% R
& h3 L; T: w6 N0 D. }  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。
% O3 I/ j) k5 t: A9 @' }6 C  {7 t

, e7 D2 G+ ^' z3 u, Y  在Keil工具中添加文件夹，并重命名为“res”。
1 }0 z" `0 j1 h# E% S0 h( @8 j
9 j& {( Y% K" {% r( p2 ?
& J- e+ M& I& M% J  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。
5 Q7 ]- e& |& ~# [2 ^- D+ l: }1 S
; X2 }5 Q: u$ R% {' l- m6 J* i
  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
. Z5 F$ F8 u" G5 y  打开“background_new.c”，复制数组声明行。


& d1 t6 l3 y! I( t  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。

* _5 L5 y! q5 q3 q9 @/ G! y
# L& K# S7 ]8 Z/ a7 g  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
" f! w  [; \/ p$ a3 ^

& R4 a; i! L, m  需要更换原有的屏显函数。

, ]( T8 s! i0 \" g  L* F
  更换为函数IMAGE_SetBitmap()。


/ n" R2 ]  b$ Y  新创建一个静态变量，标示“蝴蝶”循环显示状态。
* I1 N- @5 u) Z4 f8 Z

& s+ o- J* j9 S  ^  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。
- x& s9 q" m  A" L2 _2 ^. }
  c' b) \. S" b: y5 \
  打开文件“GUI_App.c”，需要修改两处程序。


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


$ G# t; U4 T4 {' l) Y# h4 S  下载程序到开发板。

  L; j: s& Z& _! `
& H" ^6 h/ C, r5 j% C' k/ `' l  复位或重新上电，程序全速运行。

) @7 z3 q: o" ]
  ?$ \5 D3 d; R  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。
% Y0 `# n0 w7 s

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

+ T2 r3 w8 i% H0 _7 T" |, o  S国际惯例，程序必须有！完整版本工程：
) B0 W1 ^0 ~$ n3 Q3 i; d4 Y TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件

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

2018-7-23 23:06 上传

点击文件名下载附件
( e2 b, R% q. p5 v) S
8 v, S% i+ m1 \6 a" ]; [
1 w' u- b9 N/ q图片及工具附上：
01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件
: N. ~! w2 V% v9 _

' P$ w# ?2 o/ }0 @
* J/ I* G* e7 K6 n1 O

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢