请选择 进入手机版 | 继续访问电脑版

你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

STM32F769I-DISCO开发板GUI学习内容(四)_课后动手实验

[复制链接]
wolfgang 发布时间:2018-7-21 12:00
本帖最后由 wolfgang2015 于 2018-7-21 12:06 编辑
- A( S/ ?5 n+ k% I" Z" T1 v, B+ w* |' r# J' ~. V, j1 W6 L" `. I/ Q8 V
在之前的LTDC、DSIHOST、FMC、图形中间件搭建环境好并验证成功之后,要实现图形化还需要很便捷的图形界面实现工具,加速图形应用的开发,下面这个动画,不断切换蝴蝶颜色的案例,怎么做呢?
Viedo1_0_20180721093657.gif
                              
培训视频中的方法:
  就是将图片调入内存中,不断切换图片局部的图形内容来实现;
工具呢?还用emWin一行一行代码写并作下载调试?有没有所见即所得的方法?一次下载就能完成?
答案是有,ST官方已经集成在CubeMX中,并以Lib文件形式免费使用
  R" U1 B6 c5 Z* w! P% P1 r
1)  图形的框架搭建
CubeMX进入配置(configuration)标签栏,选择“Middlewares”中的“Graphics”—〉进入弹出窗口的“Graphics”---->使能External Tool中的 Use GuiBuilder Tool。
60.jpg
然后在STemWin中选择图形应用模式为Window,点击Execute
61.jpg
即可进入STemWin的图形编辑界面:
62.jpg
添加两个Image图层background和butterflay
分别如下图设置name、xpos、ypos、xSize、ySize
63.jpg
64.jpg
然后就保存,默认的保存位置在CubeMX工程项目中的
STemWin\app\WindowDLG.c
65.jpg
通过CubeMX生成代码的按钮,即可生成工程关联代码:
66.jpg
之前的HelloWorld生成的代码主要区别在
  1. void GRAPHICS_MainTask(void) {
    3 J8 e3 R) w& S1 Z! q* o7 z7 i
  2.   ......
    & @+ z7 ], i: D* w0 y/ r- X6 U
  3.   CreateWindow();) o5 p0 H$ K6 U% `+ Z
  4.   ......1 C" _6 e+ r# y3 W
  5. }
    . ?, g1 J3 V$ c# _  Y$ q8 l0 H
复制代码
CreateWindow调用实体在新保存WindowDLG.c文件中,emWin GUIBuilder已经将电脑中编辑的图形界面,生成可由编译工具编译的C代码。这里图形环境的框架就在Cubemx和emWin GUIBuilder的帮助下搭建好了。要实现上边视频的内容,就要对框架中的内容进行素材填充和逻辑代码调整。

) d1 d  Z9 L7 \7 ~- y5 g  c

4 D* Z7 X+ H) c% P& U
2)素材的转换
   在实验视频中,官方提供了动手实验的素材:01-assets.7z,其中包括
background.png、butterfly_blue.bmp、butterfly_green.bmp、butterfly_pink.bmp、butterfly_yellow.bmp 等文件
视频中给出的方法是将png、bmp文件转换为数组存放在.c文件中供框架调用以便液晶屏根据代码界面显示内容。
{Cubemx生成项目}\Middlewares\ST\STemWin\Software目录中已经提供了将图形文件转换为.c文件的工具,如下图:
67.jpg

- T# P$ ]6 f! V( [  I' u
分别用BmpCvtST工具打开PNG、BMP文件
68.jpg
另存为C文件
69.jpg
Background.png转换的格式为:“True Color With alpha, r/b swapped, alpha inverted ”
70.jpg
其余的butterfly*.bmp转换格式为:“High color whit Alpha[565], read and blue swapped”
71.jpg

6 _" Y3 C, k+ z; x) z0 H+ a, w
这是素材转换就准备好了,为什么格式不一样可以同时使用?这里的答案已经在直播视频中,请诸位在直播中去寻找。

8 T3 ]* Q% L6 f6 z

3 Z* q8 x3 u8 Y" l! {$ k
3)控制逻辑修改
用IDE打开工程,把对应的C代码引入工程中
72.jpg
修改STemWin/APP如下文件的内容:
73.jpg
. F) c4 {4 V$ ?1 X
修改后的内容分别如下:
GUI_APP.c文件中
  1. void GRAPHICS_MainTask(void) {2 `2 S) G  d( ~: u, {: ~
  2.   ……
    $ x  E5 I; [% z1 X
  3.   WM_HWIN hWin = CreateWindow();3 g  t; W: g. q6 Q: ^. g
  4.   while(1) {          [& B- Z  e% g' ]
  5.     WM_InvalidateWindow(hWin);
    ) g' \7 ~, X: h, H/ q
  6.     GUI_Delay(1000);
    ' K5 M0 Q9 \1 x$ ~
  7.   }
    + U( [  U) b6 R
  8.   ……9 h$ F, R0 K2 J* y, S4 Q/ e
  9. }
    $ i, G/ s9 F0 f+ d
复制代码
WindowDLG.c文件中
  1. //引入图片文件
    5 O' a$ {2 I8 ~
  2. // USER START (Optionally insert additional defines)
    ) ]' k, g+ x8 p( Z0 w' r! G2 e6 [, X
  3. extern GUI_CONST_STORAGE GUI_BITMAP bmbackground;4 U& A- ]: h1 j; T2 |: q
  4. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_blue;# T9 S& h* R5 K% \# P! f
  5. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_green;
    # Y2 e: p2 u' W  a. S
  6. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_pink;
    & e4 Y8 h/ e2 p! Z1 i
  7. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_yellow;4 t5 J) D! ~6 j7 i; J; l, ^- U
  8. // USER END# h( a0 F$ s7 a9 Q1 `& H. }3 z# v
  9. …….
      D* d& P$ g. N, m# b
  10. //定义图片状态
    6 ]" |1 M) @) `) w
  11. // USER START (Optionally insert additional static code)
    ; }6 W0 v" }- Q* t) m% b1 e# g
  12.    static int butterflay_status=0;
    9 F' g( p. m. [4 ~' D
  13. // USER END0 q* Y9 S" s# g' B% C5 r; i( @
  14. ……
    : R# ?5 u: e; `, A/ x
  15. //修改显示控制
    & o2 }% g. u& x5 y* v( o
  16. static void _cbDialog(WM_MESSAGE * pMsg) {
    4 B& ?- A* h; q3 x+ t. B4 w
  17. ……; g; J, V' d  c! D. Y# L6 q
  18. switch (pMsg->MsgId) {0 {: J; z: O# M( J% Y/ s
  19.   case WM_INIT_DIALOG:. `0 p3 t2 K/ K5 z6 x/ ^$ B" c4 P
  20.     hItem = WM_GetDialogItem(pMsg->hWin, ID_IMAGE_0);
    & x+ B4 o# |2 Y" w
  21.     IMAGE_SetBitmap(hItem, &bmbackground);$ ~% m& X* ^1 O# @
  22. * A6 w& G" Y% L  ^- P# `. W
  23.     hItem = WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    ' N$ z: t, ]+ u$ [# Q* w
  24.     IMAGE_SetBitmap(hItem, &bmbutterfly_blue);
    0 q- W; Y$ E# y2 t" N3 K5 p
  25.         
    " S& a) g4 F1 |# O. V$ \( C
  26.     break;# z! l3 |( O/ G, U; L$ F4 u
  27.   default:! Y8 S+ e% g5 d7 _, z  l
  28.           if (butterflay_status==0){
    ( }( o6 |- h) C3 |) w& @  m4 M
  29.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
      X# d' J% r) b' r
  30.                   IMAGE_SetBitmap(hItem, &bmbutterfly_green);+ y' X$ d# f) V7 |1 @' ^
  31.                   butterflay_status=1;, y% f( P4 b# _5 J
  32.           }else if (butterflay_status==1){
    1 H- [( c& T$ B. j& n3 N3 v
  33.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    " X! R- E' h5 W. g! m2 j+ a: c& Z
  34.                   IMAGE_SetBitmap(hItem, &bmbutterfly_pink);: Y4 h& x+ W0 u
  35.                   butterflay_status=2;+ H, p, i) q& g! t
  36.           }else if (butterflay_status==2){6 o3 g" Y( f1 R" }
  37.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);5 M- T7 `( n/ L. d! v
  38.                   IMAGE_SetBitmap(hItem, &bmbutterfly_yellow);* ?  d# y* u$ x0 q# E9 ?# }
  39.                   butterflay_status=3;( p. D4 V0 Q* k
  40.           }else {
    " Q; _8 S+ i9 ]) y$ {
  41.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
    9 S( l& w- J. z1 I
  42.                   IMAGE_SetBitmap(hItem, &bmbutterfly_blue);$ a' w* `& x( T2 x; N# }; m
  43.                   butterflay_status=0;
    $ }6 }! ?. X4 k+ O
  44.         }: `/ f$ j- Z/ T+ q7 f2 \, n
  45.     WM_DefaultProc(pMsg);; A4 c- Y) e8 r( |2 r" I
  46.     break;. }' K& [( j* H" Z) x9 Y# f5 z
  47.   }/ b$ m5 ^7 \( o3 b; O/ \2 h) [
  48. }. `' A- S* `  L/ h& l0 h
  49. …….
    ! O' z/ f) f8 J% }7 T# X
复制代码
% o# i4 n+ L" A4 q
编译工程并下载到开发板中,即可实现上面GIF文件所展示的GUI图形显示功能。

0 h. _2 c- t1 s3 q4 J6 ?7 Q  p. G
在Cubemx、GUIBuilder、BmpCvtST等工具的辅助下,加快了GUI应用的实现。虽然是一个Demo已经完整地展示了图形框架的搭建、素材转换、以及控制逻辑修改等方法流程;对于学习GUI工程实现有很大的帮助;
/ x2 X! R" q: G
5 K& U) ]4 F8 l. \3 d3 U! b

6 _. x3 H5 D! L/ k* |: Q
真正的工程应用会使用其他方法解决Demo中几个问题:
1、占用内部Flash太大;
2、图片的更换需要更新工程代码;
3、可以将STM32F769I的设备引用进来,充分利用硬件的特性;
比如:JPG硬件加速、SD卡设备读取外部文件等等,
GUI这个技术含量颇高的功能已经掌握后,STM32F769IDisco的其他应用拓展正等着诸位前去逐一熟悉。
3 E& H& F9 a; i$ J: ^& u* W
+ ~$ _$ C$ c3 M( _  R
STM32F769I-DISCO开发板GUI学习内容(一)_课前知识预习
" f" y$ b0 ~+ d$ ~STM32F769I-DISCO开发板GUI学习内容(二)_课前硬件基础5 E) c) i( Y' a% ], W5 ]
STM32F769I-DISCO开发板GUI学习内容(三)_课前预习之CubeMX篇(上)
2 Z0 W3 @( M1 ySTM32F769I-DISCO开发板GUI学习内容(三)_课前预习之CubeMX篇(下)
! |+ R, Q2 f6 `0 T; J
收藏 评论4 发布时间:2018-7-21 12:00

举报

4个回答
jinglixixi 回答时间:2018-7-22 09:27:47
点赞!
591745543 回答时间:2018-12-27 17:45:34
学习中
Kevin_G 回答时间:2018-12-29 11:02:09
学习中
liu888888 回答时间:2019-1-14 13:10:05
学习中
关于意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新和工艺
招聘信息
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
关注我们
st-img 微信公众号
st-img 手机版