8 {; P" G9 ~5 p( P3 ]

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

! w5 W: v$ {# f$ ~1 L

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

  打开之前建好的，STM32CubeMX工程模板BSP。
& H" u, n6 ]' _4 x# N( W& _! a  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
- E& @5 M2 O, G3 R& {https://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
(出处: 意法半导体STM32/STM8技术社区)
1 ~. s% j- L8 m  O" g2 X
7 I% \; s( @. @& g1 {
  l' P, t3 H3 s) I  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
! _  |; i! n% B- G# L) C

: Y. W6 I  x4 h: B3 c6 I  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。
7 L& w1 \( o6 K# I% c! A' T
. K) ?  \& c# u  c! w
  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。


  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。
' x( [* g; k* c" k. i" d& U1 Y9 r
4 _: `8 f, c0 ]- X6 J3 b) \
$ W$ B- b) c8 o/ w8 G7 K  保存STemWin设置

  ]' c. E  o7 [5 S# O, u! O+ G7 l
+ C& L1 Q- j1 C2 F9 A  提示已存在，是否替换，“确定”替换即可。
; `, _0 F' Z9 Z, m) U, w
( G- _$ H2 F& U$ }; E- }) ]+ l  V
  j& l# T& I/ A- G( M  重新生成Keil工程及代码。
% ^# [  a3 M5 |

* F& q! V& O# e$ N( m4 \2 t  Keil工程生成完毕，打开Keil工程。
2 h+ y( L6 T& k# n! Z( J+ w! @7 C
$ @" \+ ~- p9 Q5 u
' ]! A& I4 P/ [( b: B7 R2 f  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。
# q8 Q  k2 [1 K% p+ E% `
8 Y. A, d5 T0 f1 f
# E) s! P  I% A3 m9 @- U; w  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。

+ r5 H. ]5 f6 K( J
  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
; ]. N  P2 W6 W! i) }; R5 m; x, I, k  t蝴蝶图片等，当然也可以通过其它途径获得相应文件。

: [" }9 W. P( [  A& C( L
  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。
2 `9 ?$ g' _# b5 N7 l4 k; P+ h: |

! K$ {" l4 A! @* `, @  打开转换工具软件“BmpCvtST.exe”。


; }9 t! ]& j9 \  “BmpCvtST.exe”打开后，光光的，界面相当简洁。
5 b7 A0 {0 j9 o, c% t

/ t1 J  y3 Q& z( j- n0 m7 f  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。


  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。
( e& G* e! [" m8 X, L

/ i" v% a+ U8 j$ z  保存时，将可以根据提示，转换文件。

% u: e) w+ B$ Y2 C
5 F! W8 I( `: \4 V  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。

) {7 ]7 {. [+ z: s& `7 G: }- n4 K
  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
" E+ z9 m0 n9 A

" C9 g+ I! f8 t  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。
- Q8 u0 R) D) e7 b: k
/ H' c- g$ W8 M+ L
* a' x1 @: s" f6 l) B
  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
: o1 C9 h3 @! A( R' O1 ?% y那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。
* o* B! z5 q1 X/ I

  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。
$ _7 _2 B4 G6 y2 J5 g- [8 u& ?

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


  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。
* J9 w* a- E, f+ n
& v+ w4 f/ w1 e
  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
  打开“background_new.c”，复制数组声明行。
9 m3 B* h# l/ ]' |
: {, Z- l2 o' ?7 w/ R1 Y
' a6 x' U0 e& R; q. n- i  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。
+ r  a3 K5 N( x% j' W: K  D/ J8 C
) g. ^" N0 D3 ~
6 @' V3 Z$ _/ f  M  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中

9 u* P( g# j6 l% |7 J
" W/ W2 ?( K% M: |4 g  H  需要更换原有的屏显函数。
1 B, O& c2 ?1 ^
  a5 F: T& b) A9 I
  更换为函数IMAGE_SetBitmap()。


4 S. I' j+ g5 \: y  I  Y  新创建一个静态变量，标示“蝴蝶”循环显示状态。

0 Q7 A' C! n/ R+ b8 ~
  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。


5 S) x% Y3 ?" B  打开文件“GUI_App.c”，需要修改两处程序。


, ]4 y& n5 c2 D$ k. n8 n: R  新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。

! P5 O: |% l+ Z4 L
' X6 l& _+ x) Z" U  下载程序到开发板。


  复位或重新上电，程序全速运行。
# Z. ]( Y) o% B6 a1 V; q4 y
/ w8 P. u6 _+ q& n
  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。
- @& G$ ~6 D% o* n. N) K
4 F: ~$ E& i3 R4 W
2 Y$ L! {' y% R3 j7 A7 Z8 G$ j  至此，蝴蝶开始闪呀闪！本实验完成。
/ q1 Y% I+ ]: K
9 u2 D( n- c" P0 w' ~7 N, o2 N, B国际惯例，程序必须有！完整版本工程：
TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件

+ b" K8 T$ C$ y$ K: k3 S添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程）
1 ]3 i$ T4 ~0 q TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34)

2018-7-23 23:06 上传

点击文件名下载附件
+ ~+ p( r- t+ w' D4 U
- d8 `) O% S1 e% s9 `4 e2 ~5 w
  Y8 t* m0 r7 N. x图片及工具附上：
01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件

$ j4 j7 t  {# V' a) F  o' O4 `


4 s7 N& c: M5 `7 i; l

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢