ST公司推出的用于图形界面开发的 TouchGFX Designer已经升级到4.20了。这两天我利用手头的STM32F429Discovery板对Touchgfx提供的部分控件功能做了些测试，把这个过程中遇到的一些问题做些整理,以备忘并顺便分享。

: x6 X* u/ K; W/ p6 f

我这次主要测试了TextArea,界面按键响应、动态图形【dynamic graph】、模拟时钟【Analog Clock】、进度条显示以及软件上添加虚拟函数的实现。涉及的界面有下面几个：【仅为测试，界面美丑略过】

2 q4 \6 b( r1 ^

第一个要注意的地方。

我使用的IDE是STM32CubeIDE。当我在相应hpp头文件里添加虚拟函数声明时，需要在IDE环境里专门对该头文件做个save操作，不然在cpp函数里写好相应函数后编译时总提示没有做函数声明。 举个例子说下，比方我要在Screen1View.cpp写一个IncDuty（）函数。

我们需在其对应的头文件里加上虚拟函数的声明。在头文件里添加了该虚拟函数声明后，需要手动对该文件做个SAVE操作【File菜单下选择Save】，否则老是编译出错，提示函数无声明，即像下面提示:

但别的cpp文件修改后倒不用单独做save操作，直接编译即可。这个地方因为要操作的文件较多，我多次忘记，直到编译提醒才知道。【不知该问题是否跟IDE有关？我没测试别的IDE。反正提醒下吧。】

; N& B4 b& O3 {' R& S

第2个要注意的地方，我这里通过TouchGFX designer的文本区域控件【textarea】显示STM32的某通道ADC转换值，用到了浮点。

: A% v6 R( N$ R6 f

" s; u! Q# X! n+ ]

刚开始我用的是这个函数：

Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%f",AdcResult);

, q8 P  w* H3 d+ J  M

结果总是出不来，但当我将AdcResult改为整型变量，通过%d可以显示正确结果。先怀疑过IDE方面浮点功能相关配置，经检查没问题。后来到TouchGFX在线服务站点搜索snprintf才有新的发现，如下图所示：

看来我的函数用错了，使用浮点有另外一个输出函数，即：

Unicode::snprintfFloat(textArea1Buffer, TEXTAREA1_SIZE, "%2.4f", AdcResult);

1 r5 b4 R+ L3 f2 U# I" c3 J. J

第3个要注意的地方，也是跟上面textarea输出显示有关的问题。

3 p* l) }" a; G& q9 Z8 u8 L

在它的属性那里有个Auto-size的选项，勾选与不勾选的实现代码是不一样的。一般为了简单点，可以不做勾选，自己手动拉个合适大小的框来显示字符及数据。比方还是以上面显示ADC输出电压值为例，其实现代码如下：

1. void Screen2View:: DispAdcValue()
   + S. Z$ y' |) E
2. 
   
3. {
   % ]- a& `  G6 R$ U
4. 
   + |/ H1 D  u( Q
5. Unicode::snprintfFloat(textArea1Buffer,TEXTAREA1_SIZE,"%2.4f", AdcResult);
   + V9 j/ X9 d4 \0 r
6. 
   
7. //textArea1.resizeToCurrentText();
   * i* e  M) W8 {, O
8. 
   
9. //memset(textArea1Buffer,'\0',strlen(....) );
   
10. 
    
11. textArea1.invalidate();
    
12. 
    4 k3 `4 e! `) Z& n7 m. l
13. }

复制代码

5 m% {8 `9 e; N6 T# g& q7 X* N1 y

如果说你希望勾选，你的代码就将上面的屏蔽语句加上即可，有兴趣可以自行试试。

再就是那个动态图形显示那个地方，显示的点数及修改样点值的频率都是可以调整的。我这里是让它动态显示一路PWM输出的方波，为了实现它，我在这个地方做了些来回调试才实现比较好的效果。

8 ]6 ~7 R( @) L5 a/ @+ A6 ]

另外，我在组织模拟时钟代码时遇到的一个小问题。我用到Model::Tick里的modelListener功能。

: m8 @  v) h" W1 [7 `

有个地方本来应该是view.UpdateClock(hours,minutes,seconds);我看库里面绝大部分单词的首字母都是大写的，我就惯性地将view的首字母写成大写V了，编译没有直接提示出错，但就是结果出不来。这里各种API函数很多，初次使用者对他们都较陌生，这种比较隐蔽的问题难免会碰上。
% Q7 j- V% E4 @- L

我顺便把测试中用到的几个跟GUI这边有关的函数实现代码也贴过来，供有需要的人参考。

1. modelListener->UpdateClock(sTime.Hours,sTime.Minutes,sTime.Seconds);
   
2. 
   
3. 
   
4. 
   ; `. B; }5 z; |9 m( q4 }3 }! H
5. analogClock1.setTime24Hour(sTime1.Hours,sTime1.Minutes, sTime1.Seconds);
   7 j- ]" x6 p: U1 p& A: `
6. 
   . s5 L" v" `7 x0 H" n' V" D# v9 m
7. 
   * r! J. R8 G9 j9 m5 d1 `0 Y
8. 
   * ^( ]5 M3 y- v8 w: Z8 F$ s
9. void Screen2View:: DispAdcValue()//基于textarea控件固定宽度显示数据
   $ U& p9 U8 t; n7 p
10. 
    ( |6 b3 O1 t# }
11. {
    ) g3 v2 q6 N/ z- R" H0 A
12. 
    - X" H) r. K$ }/ A, }& V
13. //Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%d?u?s?", AdcResult);
    - p" [9 t" {4 s+ j! E
14. 
    
15. 
    
16. 
    ( S2 s; d* ]: W% f% i: j, r. n  G0 |! A
17. Unicode::snprintfFloat(textArea1Buffer, TEXTAREA1_SIZE, "%2.4f", AdcResult);
    " Y1 J- j9 h6 b5 h. P
18. 
    ; x) ~3 t) w* ?
19. //textArea1.resizeToCurrentText();
    
20. 
    . u8 Z& `7 ]  m$ g* J& d
21. //memset(textArea1Buffer,'\0',….. );
    
22. 
    
23. 
    
24. 
    & C% O0 V2 |/ m) J, u, ^
25. textArea1.invalidate();
    
26. 
    
27. }
    
28. 
    
29. 
    
30. 
    
31. void Screen3View::UpdateCnt() //For progress Bar
    
32. 
    , ?6 d! }+ S, k3 N* ^6 e. Y. N8 ]
33. {
    4 k7 g! e/ H$ i! }- }2 B. n  _
34. 
    
35. if (UpdateCNT > 2000) {UpdateCNT = 0;}
    5 O8 F# `# S( o3 U) S! X+ a
36. 
    
37. //UpdateCNT comes from Timer Interrupt
    
38. 
    
39. textProgress1.setValue(UpdateCNT);
    4 Y- \9 O' \! v5 {- G3 [! F: T, \
40. 
    4 m( H' `( O# K! \# @
41. circleProgress1.setValue(UpdateCNT);
    , `  {  I5 T7 ^1 K
42. 
    
43. imageProgress1.setValue(UpdateCNT);
    
44. 
    8 H  n4 X1 V# L. W( A
45. }
    ! }7 F# @3 f3 T0 d
46. 
    
47. 
    
48. 
    
49. void Screen1View::IncDuty() //For TIM3-CH1
    
50. 
    ' C1 o! P/ ~- g, d0 R
51. {
    
52. 
    
53. CCRValue+=100;
    
54. 
    0 W% _! h0 j- I9 k' u
55. if (CCRValue > 50000)
    $ O' |; v+ ?9 ]; Y1 N( a
56. 
    7 I, A' q5 }+ b) {6 p
57. {
    
58. 
    ) Y$ H) X4 w# v# K; M  r0 T
59. TIM3->CCR1 = 50000;
    4 C: c5 F7 f2 C3 Y$ _' \
60. 
    
61. }
    
62. 
    
63. else
    
64. 
    
65. {
    
66. 
    9 S1 }& T# \: [. a
67. TIM3->CCR1 = CCRValue;
    ! _  i1 Y8 q! ?, B' x, a
68. 
    
69. }
    - W6 v* {. ?6 e4 x8 L
70. 
    & M  m% [; y5 F4 ^
71. }
    
72. 
    * o7 N" O3 H! c
73. 
    
74. 
    
75. void Screen1View::DecDuty()//For TIM3-CH1
    
76. 
    0 @( i9 I# [9 O- `' F; u
77. {
    $ y, ^" g$ r/ M+ R0 s
78. 
    
79. CCRValue-=100;
    
80. 
      x& P$ W5 Y. X( C1 ^& A, @
81. if (CCRValue <0000)
    
82. 
    # j1 V' _* W' Q% l# ]" F1 y
83.   {
    5 ?  C$ B# x; o) ^% C
84. 
    . ~) `  `4 |* C& C2 f! s
85. CCRValue = 0 ;
    
86. 
    
87. TIM3->CCR1 = 000;
    
88. 
    
89.   }
    
90. 
    0 D  g4 T4 J3 H, q% K) e
91. else
    
92. 
    
93.   {
    ' [% h3 F( G- S
94. 
    
95. TIM3->CCR1 = CCRValue;
    8 t7 D+ u9 d* U8 `& Q
96. 
    3 t& `4 s1 W/ Z) q/ m1 c
97.   }
    ! L3 H2 e2 e0 g  @  |- ?; T
98. 
    
99. }
    
100. 
     $ x4 q) Q! w7 R2 |
101. 
     7 W% X! ~; K: R4 ?0 k: `
102. 
     
103. void Screen1View:: ModifyGraph() //for Dynamic grahph
     ) L; x; a. S8 t; w, F
104. 
     & p8 t, v% g  I$ q+ d
105. {
     
106. 
     
107. uint16_t temp;
     0 r" |8 e$ K' e
108. 
     
109. temp = GPIOB->IDR & 0x0010;
     
110. 
     
111. if (temp==0)
     , r3 I* B" y! R$ M
112. 
     
113. {
     
114. 
     # |4 {# ?5 E9 F& O
115. dynamicGraph1.addDataPoint(0);
     
116. 
     
117. // dynamicGraph1.invalidate();
     # \( b  P; ?) c
118. 
     0 I, Z+ x- w  C( q5 ^7 A' K& Q
119. }
     2 J6 C% ]1 C/ I* g7 u; O
120. 
     8 y" l6 f, C# }/ n
121. else
     
122. 
     6 d  @% ?# e5 @3 {% Q
123. {
     
124. 
     
125. dynamicGraph1.addDataPoint(99);
     
126. 
     
127. // dynamicGraph1.invalidate();
     
128. 
     2 p- ^$ ]* x. ?, w- t  S5 ]! U
129. }
     % h. X% I$ b- J7 t: J
130. 
     
131. }
     
132. 
     

复制代码

) N' ?% E. a7 `/ T& {$ k9 L, D
3 _( C8 ?# C; [4 g0 m0 c9 w9 s. b$ G  T

最后补充下，当我加入第4个页面屏的内容时，电脑上模拟下还行，基于STM32F429开发板已经没法正常稳定运行了，毕竟资源有限。当然，不同的人设计4个页面所涉及的内容及任务数可能大相径庭，可能的结果这里不好说绝对。不过，我的测试过程中运行上文中提到的前3个页面内容及功能是没有问题的,下方放了个效果视频供查看。

* ~, y8 P- j% i' j
; B* v" p& u& o