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

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

第一个要注意的地方。

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

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

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

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

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

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

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

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

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

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

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

1. void Screen2View:: DispAdcValue()
   
2. 
   
3. {
   
4. 
   
5. Unicode::snprintfFloat(textArea1Buffer,TEXTAREA1_SIZE,"%2.4f", AdcResult);
   
6. 
   
7. //textArea1.resizeToCurrentText();
   
8. 
   
9. //memset(textArea1Buffer,'\0',strlen(....) );
   
10. 
    
11. textArea1.invalidate();
    
12. 
    
13. }

复制代码

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

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

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

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

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

1. modelListener->UpdateClock(sTime.Hours,sTime.Minutes,sTime.Seconds);
   
2. 
   
3. 
   
4. 
   
5. analogClock1.setTime24Hour(sTime1.Hours,sTime1.Minutes, sTime1.Seconds);
   
6. 
   
7. 
   
8. 
   
9. void Screen2View:: DispAdcValue()//基于textarea控件固定宽度显示数据
   
10. 
    
11. {
    
12. 
    
13. //Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%d?u?s?", AdcResult);
    
14. 
    
15. 
    
16. 
    
17. Unicode::snprintfFloat(textArea1Buffer, TEXTAREA1_SIZE, "%2.4f", AdcResult);
    
18. 
    
19. //textArea1.resizeToCurrentText();
    
20. 
    
21. //memset(textArea1Buffer,'\0',….. );
    
22. 
    
23. 
    
24. 
    
25. textArea1.invalidate();
    
26. 
    
27. }
    
28. 
    
29. 
    
30. 
    
31. void Screen3View::UpdateCnt() //For progress Bar
    
32. 
    
33. {
    
34. 
    
35. if (UpdateCNT > 2000) {UpdateCNT = 0;}
    
36. 
    
37. //UpdateCNT comes from Timer Interrupt
    
38. 
    
39. textProgress1.setValue(UpdateCNT);
    
40. 
    
41. circleProgress1.setValue(UpdateCNT);
    
42. 
    
43. imageProgress1.setValue(UpdateCNT);
    
44. 
    
45. }
    
46. 
    
47. 
    
48. 
    
49. void Screen1View::IncDuty() //For TIM3-CH1
    
50. 
    
51. {
    
52. 
    
53. CCRValue+=100;
    
54. 
    
55. if (CCRValue > 50000)
    
56. 
    
57. {
    
58. 
    
59. TIM3->CCR1 = 50000;
    
60. 
    
61. }
    
62. 
    
63. else
    
64. 
    
65. {
    
66. 
    
67. TIM3->CCR1 = CCRValue;
    
68. 
    
69. }
    
70. 
    
71. }
    
72. 
    
73. 
    
74. 
    
75. void Screen1View::DecDuty()//For TIM3-CH1
    
76. 
    
77. {
    
78. 
    
79. CCRValue-=100;
    
80. 
    
81. if (CCRValue <0000)
    
82. 
    
83.   {
    
84. 
    
85. CCRValue = 0 ;
    
86. 
    
87. TIM3->CCR1 = 000;
    
88. 
    
89.   }
    
90. 
    
91. else
    
92. 
    
93.   {
    
94. 
    
95. TIM3->CCR1 = CCRValue;
    
96. 
    
97.   }
    
98. 
    
99. }
    
100. 
     
101. 
     
102. 
     
103. void Screen1View:: ModifyGraph() //for Dynamic grahph
     
104. 
     
105. {
     
106. 
     
107. uint16_t temp;
     
108. 
     
109. temp = GPIOB->IDR & 0x0010;
     
110. 
     
111. if (temp==0)
     
112. 
     
113. {
     
114. 
     
115. dynamicGraph1.addDataPoint(0);
     
116. 
     
117. // dynamicGraph1.invalidate();
     
118. 
     
119. }
     
120. 
     
121. else
     
122. 
     
123. {
     
124. 
     
125. dynamicGraph1.addDataPoint(99);
     
126. 
     
127. // dynamicGraph1.invalidate();
     
128. 
     
129. }
     
130. 
     
131. }
     
132. 
     

复制代码

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