1. 引言

+ f  n5 k1 s, }TouchGFX 是专用于 STM32 的图形界面设计软件，可基于低成本开发优秀的图形界面，而且它已变的越来越流行。为了帮助客户更加深入地理解和使用 TouchGFX ，本文针对TouchGFX 屏幕切换的实现方式进行了介绍。通过简析基本例程“Transition Example”的源码，剖析其中切屏实现的流程；并简介了如何使用 TouchGFX Designer 快捷地修改屏幕切换模式，希望能帮助客户更好地使用 TouchGFX 切屏特色与功能。

9 }. N9 Q) v5 p, [: x
2. TouchGFX 屏幕切换功能
! H# u  `1 X& ]3 a5 \; @$ |2.1. TouchGFX Transition 类介绍
TouchGFX 框架中关于屏幕切换功能，实现了一个 Transition 基类和五个派生类，其关系如下图图 1 所示。其中，Transition 是切屏的抽象基类，定义了屏幕切换期间发生的基本事务。虚函数主要包括：Init（初始化）、tearDown（销毁，切屏完成需要的清理过程）、handleTickEvent（Tick 事件处理函数，主要用于完成切屏的动画效果）、invalidate（失效，用于重绘）等。五个派生类，其中 NoTransition 是最基本的派生类，它没有任何视觉效果，当前屏幕会直接被新屏内容替换。另外四个派生类则具有动画效果：BlockTransition、CoverTransition、SlideTransition 和 WipeTransition。
5 |1 X6 T, u: y5 M) Z6 p9 ?
5 U2 w4 i3 z+ q/ \) E4 o3 J8 T

- R$ a) {# v5 A/ D9 u BlockTransition 将屏幕分成 8x6 份块，在屏幕切换时会每次随机重绘其中的 2 个块，比较节省 MCU 资源，适合性能不高的 MCU；CoverTransition 的动画效果是“新屏画面从一个方向移动过来，直至完全覆盖原屏幕内容”；SlideTransition 的动画效果是“新屏与原屏拼接在一起，（原屏在前，新屏在后）从指定的方向滑过来”；WipeTransition 的动画效果是“新屏内容从一个方向展开（有一种擦除原屏，露出新屏的效果）”。BlockTransition、CoverTransition、SlideTransition 和 WipeTransition 均在 handleTickEvent 函数中实现各自风格的动画效果，tearDown 函数中则销毁切屏过程中创建的用于动画的临时快照控件等。下面我们首先生成Transition 例程，并对例程源码相关部分做进一步的分析。
5 Z  G; a* C2 [1 C! l: n3 M

  O" W- C. Z/ D) L. o$ O5 ]' x, @2.2. TouchGFX Transition 例程
运行 TouchGFX Designer，选择 Examples；通过 Select Board Setup 选择 STM32H735G DK 板（也可以是 TouchGFX 适用的其它板件）；从众多例程中选择“Transition Example”例程；将 Application name 改为 Transition_Example，如下图图 2 所示，然后点击 Create 创建工程。
3 l$ o: o; U5 r5 E9 n

; p3 X+ y( u& H0 p4 I

/ _8 E1 \+ }2 O5 Y/ E
进入 TouchGFX Designer 主界面后，会看到画布上有四个方向按钮和一个背景图片，如下 图图 3 所示。我们对界面不做更改，直接选择 Designer 右下角 (Run Target)在目标板上运行。该操作将会复制 TouchGFX 框架文件，生成配置文件、makefile、代码及资源文件（images、fonts、texts），然后编译链接、烧录目标板并运行。程序运行起来后，您可以熟悉一下该例程应用，该应用有 5 个屏幕画面，一个主屏及上下左右 4 个屏幕。点击方向按钮会进行相关方向的切屏。例程中切屏方式是 SlideTransition 模式。下面我们解读一下相关代码，再对Transition 模式进行修改。
3 }7 U2 f: w/ v8 {* n& X- a; w
/ [; u8 {$ {0 m3 Q% o  |
6 D* Q3 @4 i! f% c
" [! L2 n( H. c/ J' ]

2.3. 例程代码解读与切屏模式修改
2.3.1. 关键代码流程
& |/ b0 ]+ |% J/ R8 ~6 b 切屏操作是由点击按钮触发的，我们以右向按钮 为例，一步步查看调用过程。首先我们可以确定当前屏幕是 MainView 类，MainView 继承自 MainViewBase，该 MainViewBase 由Designer 自动生成。它已经包含了四个按钮、一个背景框和一个背景图片。按钮点击的处理函数为 buttonCallbackHandler。详细代码如下：

1. // MainViewBase.hpp
   
2. class MainViewBase : public touchgfx::View<MainPresenter>
   4 i4 k2 l* R7 w1 s: k, S. N
3. {
   
4. public:
   $ U; v& \7 @3 G0 \# r
5. MainViewBase();
   2 m9 @+ S, }2 A& _
6. virtual ~MainViewBase() {}
   - B; ~$ G" n3 W5 |# c
7. virtual void setupScreen();
   7 b" f: J2 f* U5 Q% C- m1 P# X
8. protected:
   
9. FrontendApplication& application() {
   7 z: D- Z# ^4 c8 H- t, o8 L
10. return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    3 C* I( k$ K) i( ~
11. }
    9 K* B9 B% |2 Z" Y$ Q
12. /* Member Declarations */
    
13. touchgfx::Box __background;
    : x% T1 _: }0 r! k9 f: {$ Y3 f/ w3 x
14. touchgfx::Image backgroundMain;
    ; T, O; v5 |; Z8 A5 J* y" V
15. touchgfx::Button buttonUp;
    
16. touchgfx::Button buttonDown;
    2 G; K' }7 G7 T1 W% k1 J/ z
17. touchgfx::Button buttonRight;
    
18. touchgfx::Button buttonLeft;
    
19. private:
    - g2 R* o6 C8 \( V: |- z/ |- r' H1 s9 l! A
20. /* Callback Declarations */
    
21. touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&>
    # m* Q" g9 H% o0 \0 U! w
22. buttonCallback;
    
23. /* Callback Handler Declarations */
    
24. void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    2 S* Y( U& m/ u$ m/ E
25. };

复制代码

; {8 [' u( h7 T* N% m; @
我们再来看该按钮处理函数，这里右向按钮调用了 application 对象的
7 X6 ^$ w1 U1 z" B1 e, K

1. gotoRightScreenSlideTransitionEast 函数：
   $ E# u- D6 z% p. L7 U1 l$ n& L' o
2. // MainViewBase.cpp
   
3. void MainViewBase::buttonCallbackHandler(const
   
4. touchgfx::AbstractButton& src)
   5 s( {2 l$ S8 g7 ]8 Q% M3 x+ P
5. {
   4 `  R1 k" }7 h& w; ~$ |
6. if (&src == &buttonUp)
   3 X' N+ [: s) R
7. {
   
8. //GotoScreenUp
   7 q4 Y. ]$ G# G3 |, E3 h: z
9. //When buttonUp clicked change screen to Up
   
10. //Go to Up with screen transition towards North
    0 \' B) C) ?$ ^: m- i' W) q$ k
11. application().gotoUpScreenSlideTransitionNorth();
    
12. }
    
13. else if (&src == &buttonDown)
    $ Y1 t# V5 }) Y* W
14. {
    7 R' H0 {' v  R7 e4 G. ~
15. //GotoScreenDown
    - v. L* B9 W* {3 d3 o
16. //When buttonDown clicked change screen to Down
      y, Z8 t/ K5 k# [, s
17. //Go to Down with screen transition towards South
    + A1 v7 U; d2 J' t) x& |
18. application().gotoDownScreenSlideTransitionSouth();
    
19. }
    6 h/ u* R7 P. t/ G' l* }* H
20. else if (&src == &buttonRight)
    6 Q' e5 G% ?& T8 C$ y
21. {
    / W' q) t' r7 p7 l# m  u; N& S
22. //GotoScreenRight
    
23. //When buttonRight clicked change screen to Right
    " h" C' j& M5 m6 c! L5 g% ]" L1 ~
24. //Go to Right with screen transition towards East
    
25. application().gotoRightScreenSlideTransitionEast();
    
26. }
    $ B: H* y$ z/ T" C9 D8 E2 _
27. else if (&src == &buttonLeft)
    
28. {
    
29. //GotoScreenLeft
    
30. //When buttonLeft clicked change screen to Left
    
31. //Go to Left with screen transition towards West
    
32. application().gotoLeftScreenSlideTransitionWest();
    
33. }
    
34. }

复制代码

在 FrontendApplicationBase 中，gotoRightScreenSlideTransitionEast 接口通过transitionCallback 跳转到 gotoRightScreenSlideTransitionEastImpl 函数。具体过程，首先application 事务处理过程中会调用 handlePendingScreenTransition，再转至函数evaluatePendingScreenTransition，经 transitionCallback 完成对函数 gotoRightScreenSlideTransitionEastImpl 的调用（更多的关于 Callback 的介绍请参阅相关文档或 LAT）。如下图图 4 所示：
7 W, N( n" @7 N
% W7 D% G# ~+ R" \! c( E. T


完整版请查看：附件 STM32GUI TouchGFX Transition 屏幕切换功能简介_v1.0.pdf (547.24 KB, 下载次数: 39)

2023-2-14 20:47 上传

点击文件名下载附件
$ i9 ?0 {+ {0 O9 @' o4 X9 F
1 M3 s" D) n: Z2 L2 o

# `2 d( a3 B* @: O
/ Y  V! J; ?( P* G' ^0 m$ I, q
( Z0 k- U% Q# O* b+ u0 q6 t

支持一波，已下载
- h5 u) [6 E' h! f* a