8 o- n, }' C8 J0 v% P

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

  今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。
; \( s) v. y& W& f1 \
' C0 ]: Y- v) d! I  打开之前建好的，STM32CubeMX工程模板BSP。
  建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》
1 D* S8 x5 v3 Jhttps://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=307297
(出处: 意法半导体STM32/STM8技术社区)
8 p: P* A+ `. N2 A, c0 x9 s4 Z2 v, C  M
- U# Q; W6 z' W
9 q# O  R1 M: K! J  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。


  打开STemWin窗口后，点“1”所示图标，添加一个图片零件。


  修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。
1 @( o; R9 w( @# y
; J5 K+ [6 P, j8 j  z8 c8 }7 T
, H3 ~& N- X& m1 Q2 ?/ y8 N1 s  同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。

& ^6 [( l0 u) d  S" J0 e, o
  保存STemWin设置

4 p$ @3 ]8 @+ H% S& o) f
! z0 f& H% W$ x8 y' Y7 l  提示已存在，是否替换，“确定”替换即可。
2 t2 i: e5 w: z3 p7 \2 W* u3 t

  重新生成Keil工程及代码。
  v. H! g. U' e. D1 O- c$ G
0 D3 Y- i0 K' f# v  K+ D% p
  Keil工程生成完毕，打开Keil工程。
5 L  G2 t0 {4 L0 c$ A
8 G" m) g2 F& p& H- B
2 D3 L& {+ y) H! v$ ~  o  关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。
+ n# C5 h  h' S4 Z

  与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。
3 n( E. P( N, ?4 P
0 W5 `1 M1 I9 B7 F/ M* a- T3 ~3 m
  在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
8 @  T: g) @! ^2 l# Z蝴蝶图片等，当然也可以通过其它途径获得相应文件。

9 i8 a2 }$ P3 c0 Y! L' H# e6 I
) d1 ~; u8 z/ N  打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。
- H) f0 H8 ], C
3 ^8 p; u. e" R6 v+ T$ ^* s
0 h* x4 ?; Z2 k. Q, L; T. N  打开转换工具软件“BmpCvtST.exe”。
0 b9 v) P% }5 G, v( G! q* l9 l
# u+ }0 K9 ?" e; j) E
  “BmpCvtST.exe”打开后，光光的，界面相当简洁。
( W% G( E7 u5 M- U% R$ s$ X

  通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。
, h3 d# q- o3 g
9 a0 M6 v2 a( g: a
2 o% S- t0 M- v8 D- ^  打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。
- z# n3 ]( a, L1 J

/ q' `0 U! c9 L4 Q- p, M$ j  保存时，将可以根据提示，转换文件。


8 K6 t' |5 I2 I4 x7 L2 p  选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。

  p& Q4 U8 q$ a; j/ y% b3 P
  选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。
! [8 z: [- {" t

4 h; C' W- ~  H. u* e) c  用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。



  经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。
那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。
1 T1 I: d9 w0 l, U

! [& r6 D, l" R0 F& o  将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。


, y, H( v* q% X  `8 h4 e0 i  在Keil工具中添加文件夹，并重命名为“res”。
; `4 p9 K: ]) N0 N+ I2 b' |9 b
* R0 L, {; L1 z/ g. c/ i2 W8 G/ d
7 D. E* a: g- n/ z4 g6 U  将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。


  现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。
  打开“background_new.c”，复制数组声明行。
$ _6 h# @/ F6 h. X3 W0 C, D/ o
2 K( F" p( |1 P9 h: s5 B3 \1 X
9 j4 ~) I) A- t5 K9 U* v  打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。
+ p7 N: ~" q- z1 j7 H+ v( h4 O
+ f* H2 F; f/ K2 }
  依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中
! X# o  |& v# H: c# O8 O
. s/ T1 ~5 J5 t+ B* d
  需要更换原有的屏显函数。


) T  L3 U# u- V' F  更换为函数IMAGE_SetBitmap()。

* s; ?+ t& ]/ i& r
! ]& [0 \8 x5 \) K! h  D  新创建一个静态变量，标示“蝴蝶”循环显示状态。


" W0 K5 H! Y0 c' B+ g2 i/ v  \  将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。

! B. I* ]4 A% [( k: q
& \: g' U9 r9 S- h; R% s  打开文件“GUI_App.c”，需要修改两处程序。


! x" i; c+ K9 y( C7 V: s1 U% K5 r: a  新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。
. _" X2 a! _) E4 f' J6 |
# S) x- R# T: c
  下载程序到开发板。
9 `( ]$ {. d  P" Q& r6 z
; u) x+ E' V0 [2 d: l* |
3 V1 X. l( b/ V% F, F5 Z  复位或重新上电，程序全速运行。
* x7 r$ U) _8 I' z3 S- E
1 r3 M; _/ d; D5 ], n5 a" e2 {
  观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。
+ f/ g6 K$ w( ]0 |8 V7 I

' `- l+ H9 o7 Y7 A4 P5 X# b  至此，蝴蝶开始闪呀闪！本实验完成。
( J6 o: a$ ~! n" q  q
国际惯例，程序必须有！完整版本工程：
& O! }3 r9 @+ O8 u. {4 ? TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

2018-7-23 23:06 上传

点击文件名下载附件

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

2018-7-23 23:06 上传

点击文件名下载附件


3 o! o5 I( S+ O& o2 E; _图片及工具附上：
01-assets.rar (362.18 KB, 下载次数: 14)

2018-7-24 00:15 上传

点击文件名下载附件
. T/ l; J% Z- F/ j  \
% s7 k# _, Q1 _7 y1 K) m# b+ K2 h
7 M3 g( U, Q# `! n3 [
+ b0 u5 B. t& F9 H; P8 A  a

支持下

帮顶，学习下

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

谢谢分享

谢谢~~~

谢谢