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

七哥 · 2018-07-23T14:52:49+00:00

本帖最后由 toofree 于 2018-7-24 17:09 编辑 / q& ~4 I7 I$ I/ ~+ k S 7 T! x1 a- N7 E% e. uSTM32 GUI高阶培训之实验二、蝴蝶闪呀闪，应用工程APP9 | r9 W% E" k% a) F) P- O3 N0 `4 ` 今天来体验一下，STM32CubeMX集成的ST emWin的强大，也就是本次培训重要的GUI部分。 / o5 A* B8 |$ ?4 U& E! l ' `; i, k1 }# A2 d' w6 Z/ Y 打开之前建好的，STM32CubeMX工程模板BSP。 3 \7 I7 q& p1 P: T% c" i6 U4 H% @ 建立过程参考前一贴——《STM32 GUI高阶培训之实验一、创建STM32CubeMX GUI工程BSP》0 N1 z& B9 M& K4 m https://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616765&fromuid=3072971 t9 n9 \" |& S" H (出处: 意法半导体STM32/STM8技术社区)' Q7 V. c: c4 ?' V' h % K) u* S/ M3 @; L. ^( @" x4 \8 M' N/ x. j$ G0 X' c. _4 H% q 打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。7 o. C, G- ~0 v) g 3 I! U2 G6 N! Z$ c! b) ~+ K1 I& a/ X a' p2 j8 n/ ]' e 打开STemWin窗口后，点“1”所示图标，添加一个图片零件。 3 w; d) j( y. j 9 v3 E% l- q9 y* Q + e" J& F/ H6 x4 e4 ]! z) H 修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。 9 t0 O4 |) P. w+ T8 o0 n4 k$ f 8 a! {0 ?: l9 Q8 D' A % ?# J8 e9 X8 n# }) v! _2 i; _. ^2 l( D 同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。: h2 v3 f! b+ A1 k/ T: k0 j9 G ; @1 E& G8 T( `5 V 1 U0 P$ h( M. \; i4 F 保存STemWin设置/ q5 z! R3 x' V ! V1 P" K. k" U t. ~" B9 v7 _1 |1 g8 T; X* M 提示已存在，是否替换，“确定”替换即可。' L ]0 H* ~9 R: w % j: O# D0 V8 T1 V 4 l4 y+ j! `2 E) x 重新生成Keil工程及代码。0 f( W" t; l" [. c6 @ 4 @8 X: I9 z6 \+ e1 X1 Z 4 u( p0 Q( z% A+ X Keil工程生成完毕，打开Keil工程。 / ]: y6 `" A# [5 }; M7 a0 N 3 g0 L6 U9 Q0 y' w # G5 J# `2 S. v" {7 a2 R E0 E 关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。 , a9 R: N. N3 m7 L 0 n# k0 s, U8 \' T) I7 w, \/ G; w8 `* e8 u' K 与STemWin设置时相同，只是两个虚框框，并没有要显示的图片。- A/ R0 D: T3 ~# ~7 Q! `9 K+ A 2 p/ i2 ?# P5 p3 a' X$ R& Q$ Y; O5 f + t4 j; x) K& C$ T+ ~6 ~ 在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景3 x* U0 E; d% ~) ?% N 蝴蝶图片等，当然也可以通过其它途径获得相应文件。" n+ D4 L" o5 R" Z: O 3 e+ I0 L* w6 D4 u - G$ G9 T) J/ T( u2 `1 k' i 打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。7 V/ Q% R. A, K- S, `* l& h3 a 4 Y2 L% T$ Z& f/ Q" l1 I + E4 x+ M6 `/ a! M, c2 P 打开转换工具软件“BmpCvtST.exe”。2 w# S3 b% {0 h4 z/ w0 ^ : s( N! Q3 | P: @ U$ e" h# l8 j& k% } “BmpCvtST.exe”打开后，光光的，界面相当简洁。 4 o+ v/ l& `! b. u4 A( _4 o / ~5 {8 s8 z0 ]( o0 Q) Y8 S3 n# Y9 q0 X0 _. Z 通过File下拉菜单的OPEN，浏览打开要转换的文件，如“background_new.png”。 $ k. q3 P3 M" |4 G( N 4 L5 K$ z( c0 I% t, } ! Y) W% ]% ?! f 打开后，可以预览图片效果，以及看到图片信息，图片大小800x480，ARGB格式。& e4 g$ f3 k. T0 ^+ Z! ~ 5 h6 g) R& Z- Q' |, w* h+ w $ u6 e7 _2 h4 r+ O* H7 N; \ 保存时，将可以根据提示，转换文件。 # _; l3 _- ~5 V' q* y a $ n( a A2 @' h3 @8 p4 S# |; W . P0 s5 U4 |" h: \1 P 选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。 : e( l( i$ f4 r+ P4 Y: B/ c1 Q I M# V1 \8 O! w9 j! Y! i8 y ) n T% f) M& O- a- k7 m P. T 选择第二项，带alpha通道（透明度）的真彩格式，R与B调换位置，alpha通道翻转。 8 ]( n& E3 T1 @0 W& A, U* l - l' z+ X4 L7 Z+ o7 h 4 l8 V/ [/ N8 \" p: L 用文件对比工具软件“Beyond Compare 4”，打开文件“background_new1.c”与“background_new.c”，对比是否一致。 8 ]8 ?1 s; [* `0 H- ? ' ]* J5 U+ k' z# `5 o ) D3 |, i' {2 g$ H* E) _ % d( O* F a- f% x* [2 d$ w8 ~ 经对比，两个文件数据都相同，仅文件名与文件内部相应的数据名称不同。说明我们转换的方法正确，与演讲老师的一致。8 L& Z9 N0 d0 F 那么我们就不再对其它“蝴蝶”图片做转换了，直接使用转换好的“.c”文件即可。 . i0 Z7 Z3 M% \; d( { 0 ^) y' j0 C1 m% l; Q: v 8 N4 B9 W5 S# K2 F. E1 D" P$ ^ 将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。 4 |. K# p: `' J1 h) H' p& P - C. y1 z& v9 J! Q% H$ X7 W3 z5 Q* Z$ B' p8 T 在Keil工具中添加文件夹，并重命名为“res”。8 a" w' R5 G: F" D4 B , U z. i: V4 U+ k9 n , g; c( Q# P- B$ U 将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。4 ^" R0 }! L& }1 ^ 1 c3 L V T0 b$ K& R0 M1 A# P5 |( l- W4 v! n2 z8 ? 现在开始修改工程源文件“GUI_App.c”和“WindowDLG.c”。8 } z, r& e8 S+ `; U, s& c 打开“background_new.c”，复制数组声明行。 : \3 |1 c9 z2 ~6 \3 j: a6 f . _+ V. T8 ^1 q 7 K, s: U, Y+ d/ U% m# z- U 打开文件“WindowDLG.c”，在第40行处，粘贴插入刚复制的数组声明信息，为了能在本文件中使用数组。 ; I+ P0 ?$ B; L ! n! d4 T5 N3 X * R& z# l( m3 d9 Q7 l* v 依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中( s T* y8 ~, [: F" l: } ' r& Q }4 ?- n , e$ D& ~/ q3 o7 o9 h 需要更换原有的屏显函数。 ' |1 w9 Y" p9 \% {7 p( X0 D 8 Z0 i9 A8 [" D% C1 N/ @ , d1 Z8 N. N! `9 _+ d6 l 更换为函数IMAGE_SetBitmap()。* ^8 e5 P* J8 P! N1 P% E/ y " j& q+ U8 `+ g4 T' z ! [7 s. R! p0 t. V' N$ h 新创建一个静态变量，标示“蝴蝶”循环显示状态。8 W$ P- z5 A3 p' | * V. o0 [/ V% J; K+ } 4 J5 Y, }6 h# t' @. U: L* r6 {# v 将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。 0 A5 c1 Y$ V9 r5 ?2 `: B4 U$ U % C# @ n% n# W3 v . I0 [# f- f, i6 d, o$ K 打开文件“GUI_App.c”，需要修改两处程序。 " l% q9 R+ e$ z2 R0 O1 j ) i4 w6 J, Z) q+ _5 `! G2 N( v ' K# g, K' Z/ y 新建显示窗口，并把显示窗口指针赋给WM_HWIN类型的hWin。修改定时1s，进行显示窗口更新。即每1s，执行一次_cbDialog(WM_MESSAGE * pMsg)函数，显示蝴蝶图片更换，butterfly_status状态随之改变一次。' J; B k- ]1 r( w6 \# }/ P0 ]) n0 R 0 \2 J0 X9 L: w4 L( {9 w 5 @& f$ d$ J) I, V8 h* @ 下载程序到开发板。 6 z5 [, _% o4 f+ D6 i Y$ T # F" ?3 u. c5 b" j/ V 3 ]+ b4 ~# X; K2 h- }+ ] 复位或重新上电，程序全速运行。" E" C8 F# O- [% C1 H3 d5 u7 H* c 7 I9 T! h7 y4 W8 w% N8 o5 P2 w% m2 n5 L. _ 观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。8 f1 x' y) [. h3 ~7 X7 r `5 @, {; j Y" ?3 y% G5 f- o" y4 Y, t9 u1 s& a+ V 至此，蝴蝶开始闪呀闪！本实验完成。 ' f, n' z& [2 z/ C0 ?8 B- s3 f . N$ ]5 I/ }$ w' K$ o3 }2 N8 |国际惯例，程序必须有！完整版本工程：8 l! b. ~3 W) f. s; {0 x7 C TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42) 2018-7-23 23:06 上传点击文件名下载附件 3 e% ~- _7 r( x2 T6 n# ^8 v1 N7 m4 f/ X$ n+ W 添加蝴蝶前版本工程：（添加蝴蝶后，想再次编辑STemWin时，只要一打开就会出错，不知道什么原因，因此附上模板工程） % k5 ^1 m! r* M9 _ TEST_STM32F769_DISCO_APP1.rar (17.75 MB, 下载次数: 34) 2018-7-23 23:06 上传点击文件名下载附件 9 E& ~' u8 g! E! T# g5 y$ U 3 j4 A6 B8 B( F, f" ^1 D k( c- O5 v, l0 w5 b- B 图片及工具附上：* j- h4 K+ J: m& A 01-assets.rar (362.18 KB, 下载次数: 14) 2018-7-24 00:15 上传点击文件名下载附件 , [/ [! R, A; n+ }( I0 t. F5 | " X- j+ r' S: g 8 I w# E0 z/ a9 W& H/ Z ; A9 B$ t( Q, W f. o' q7 }9 \/ W: P

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

[复制链接]

七哥发布时间：2018-7-23 22:52

技术帖
文章封面:	-
文章简介:	-

本帖最后由 toofree 于 2018-7-24 17:09 编辑

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
(出处: 意法半导体STM32/STM8技术社区)

  打开工程后，双击选择“GRAPHICS”组件，弹出设置窗口，在STemWin项目下，直接点“Execute”启动STemWin。

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

修改图片零件属性，名称、长、宽等信息，此图为背影图片，需要满幅显示，因此长宽为800、480。

同理，添加将来的“蝴蝶位置”，先占个位。位置起始坐标250、200，图片的坐标是从左上角为（0，0）开始，与显示器的坐标设置是相同的。但不同于图片的坐标，一般图片的坐标是从左下角为（0，0）开始。

保存STemWin设置

提示已存在，是否替换，“确定”替换即可。

重新生成Keil工程及代码。

Keil工程生成完毕，打开Keil工程。

关键的两个文件“GUI_App.c”、“WindowDLG.c”。先编译，下载到目标板，看一下是什么效果。

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

在717的“STM32图形界面 GUI高阶实战演练”时，在演讲窗口右下角，下载过一个压缩包“http---cache.gensee.com-ftuploadcz159-TVP8j3G43e-814044454.7z”，名字比较长。这个压缩包是，显示程序所需要用到的转换工具、背景
蝴蝶图片等，当然也可以通过其它途径获得相应文件。

打开压缩包可以看到，图片已经转好了“.c”文件，解压缩到本地文件夹（路径随意定，能找到就行）。接下来，将验证一下通过视频学习的转换方法，转个把文件验证即可，不必每个文件都转。

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

“BmpCvtST.exe”打开后，光光的，界面相当简洁。

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

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

保存时，将可以根据提示，转换文件。

选择“.c”格式，文件名定为“background_new1.c”，为了不与已有的文件“background_new.c”造成冲突。

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

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

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

将几个图片的“.c”文件存放到，工程的STemWin文件下，“TEST_STM32F769_DISCO_APP\STemWin\App\res”，“res”文件夹需要用户自己新建。

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

将““TEST_STM32F769_DISCO_APP\STemWin\App\res”文件夹下的图片“.c”文件添加进来。

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

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

依此类推，将5个文件数组声明信息全部复制到文件“WindowDLG.c”中

需要更换原有的屏显函数。

更换为函数IMAGE_SetBitmap()。

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

将4种显示状态，分别一一列出来。按butterfly_status值来显示当前，通过改变butterfly_status的值，下次按新值进行状态轮转。

打开文件“GUI_App.c”，需要修改两处程序。

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

下载程序到开发板。

复位或重新上电，程序全速运行。

观察程序运行后的显示效果，可以看到4个颜色的蝴蝶，开始每1秒切换显示一次。

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

国际惯例，程序必须有！完整版本工程：

TEST_STM32F769_DISCO_APP.rar (18.39 MB, 下载次数: 42)

赞收藏 1 评论6 发布时间：2018-7-23 22:52

6个回答

zero99 回答时间：2018-7-24 10:53:55

支持下

赞评论

CC4 回答时间：2018-7-24 11:00:00

帮顶，学习下

赞评论

supermanandy 回答时间：2018-8-1 14:57:30

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

赞评论

myxiexing 回答时间：2018-8-2 23:06:01

谢谢分享

赞评论

lf01221116 回答时间：2018-8-29 20:13:07

谢谢~~~

赞评论

swapkernel1111 回答时间：2021-12-31 13:03:33

谢谢

赞评论

所属标签

应用
GUI

STM32团队

意法半导体微控制器和微处理器拥有广泛的产品线，包含低成本的8位单片机和基于ARM® Cortex®-M0、M0+、M3、M4、M33、M7及A7内核并具备丰富外设选择的32位微控制器及微处理器。关注该话题即可发布文章！

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

所属标签

STM32团队

最新内容

相似技术帖