1 C  L; w" v0 L4 T8 [/ a4 G  B

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

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

  打开之前建好的，STM32CubeMX工程模板BSP。
  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
https://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
7 l1 G: ^8 G2 R( z3 v' X(出处: 意法半导体STM32/STM8技术社区)
  |7 ]$ n; w" l. Q  z* x: ~

  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。
7 A8 C3 |* f% z0 k5 K+ O3 l2 Q

  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。
# l* g/ E) `, N3 H. N& k
/ |$ v. T6 ?$ c( S; T6 t+ P! x( O
9 Z2 z% [0 G* Q5 E. A, g7 F  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。

/ J( F" s0 F% ^: K+ Q
6 Q  k- g+ E' p0 T  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。
7 A: Z8 N6 M6 e8 C5 K

4 w: E  E$ L: ^3 {5 _  保存STemWin设置
) e6 U* `: c. w1 N% c
9 n7 b6 {1 Z4 Z' P0 j) o5 M
  提示已存在，是否替换，“确定”替换即可。


  重新生成Keil工程及代码。
# p4 i6 ]# K% S

  Keil工程生成完毕，打开Keil工程。
! e2 p; v' ]& p) N. F+ p

: N6 g; T( a0 |" n. I/ U  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。


  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。
8 r6 m* }. z" ~3 P' ]

- d* R! Q! T2 s8 }; B+ l5 m  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
2 R1 ~8 J! O6 k, `4 }# I2 [# |" }蝴蝶图片等，当然也可以通过其它途径获得相应文件。
3 p! T9 m% J- ?# r1 z- ~5 U. T
! ]" k7 O) n& j2 W/ L- s+ z
4 U' g7 o. Q, a7 I  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。


  打开转换工具软件“BmpCvtST.exe”。

+ C( A# C$ q6 t; e: W5 m% O
  “BmpCvtST.exe”打开后，光光的，界面相当简洁。


  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。


  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。

% {+ H1 I/ n- F) b5 c
  保存时，将可以根据提示，转换文件。
/ {$ }8 q" a7 Y, ]

8 u9 [8 J+ N. n) K  {  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。


  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。

% O7 _5 v* K: I$ c/ Y6 T% @8 ^
  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。

0 d7 w. I9 V' L( w8 ?0 _, z' p7 w

& D. ^/ G  j: ?: l$ Z  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
5 r: c  X  p0 Z! O5 F7 Q1 ]- G$ ^那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。
' L4 |" N& ?7 h0 I- S

  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。
3 K6 H8 f4 G" S2 I+ o8 h  ~
2 B2 {7 [% |1 _3 U
  在Keil工具中添加文件夹，并重命名为“res”。
- W% E. P- l* R. y$ e+ E

5 }* t, D' j# s; K/ l. f% v4 Q  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。
7 c% m4 l1 ]1 n$ S2 f5 h

  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
2 j: ~3 o. g+ P  s# c/ l  打开“background_new.c”，复制数组声明行。

7 ?) [  \; n0 Z+ }5 y; O+ l
  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。


  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
- p" \, o* j/ T
, d/ C" k: @5 q  b, i7 P
0 j7 a  C+ U# N. G  需要更换原有的屏显函数。


  更换为函数IMAGE_SetBitmap()。
% A6 M& I+ W! n/ U
! B: }8 \+ t% v
: F4 O: I, D% n( |9 v  新创建一个静态变量，标示“蝴蝶”循环显示状态。
6 L6 _) t1 A+ ^
( |0 Y0 T6 ?6 p
$ G3 m3 r- O* \& F  U  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。
3 `; \; H# A# x3 e% U: v; g
% p; x% M- z6 e7 F& G7 S8 S4 Z/ p# U
  打开文件“GUI_App.c”，需要修改两处程序。


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

* Y! U9 j/ k, ]' v  i7 v5 V
' Z' h& i3 ]/ g% E4 G) N, D3 M9 o  下载程序到开发板。


  复位或重新上电，程序全速运行。
1 H+ u2 X- A9 i- P1 M1 ?. p9 r; r
( m. E9 [: P% [9 c. }4 b
% O/ x1 u( ~! W  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。
# }1 _( g5 E# v7 D

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

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

2018-7-23 23:06 上传

点击文件名下载附件

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

2018-7-23 23:06 上传

点击文件名下载附件

- e- z( l: X( B( w6 B( l2 X
图片及工具附上：
01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件
9 D. f: d4 l" B% q

4 k1 o' o: K2 z9 c+ o

: h- J( D) _0 M0 s

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢