; x6 c, x. C! u2 N) |      当设备接外部传感器的时候，通过数据采样，需要在UI界面上将数据实时显示出来。这里以UI界面中的温度和胎压监测为例。还是以UI的MVP结构为基础，通过上位机串口发送数据，模拟实际传感器的测量数据，在UI界面上显示。
OK，UI界面图如图1和图2所示：
0 j% M' t" _$ ~8 g3 e
图1

/ _; e* [  T# {6 \2 K( T; j图2
% t: q( A' d$ i# A( G; y/ e; m要在UI程序架构里增加UART通讯，先在原理图中查找相应的接口，如图3所示：

% I& e' D# f7 r4 H; ?图3
9 b! T9 v2 O6 FUSART3正好可以应用，连接好线，测试发现，这个接口不能使，原因尚未找到。然后找到了USART2接口，需要调整下短接电阻，如图4所示：
5 F" Y8 `" k  ~; u4 P
图4
经测试，这个接口是可以使用的。所谓有坑也得迈过去。
* p8 P5 @% \' H" M
0 a3 m0 T; v9 ]
6 C0 y5 M$ \/ R  G定义中断，如下所示：

1. TouchGFX_SetUartRxByte(aRxBuffer);
   
2.         HAL_UART_Receive_IT(&huart2, &aRxBuffer,1);

复制代码

因为程序使用的是FreeRtos的架构，所以还得在默认任务里添加中断。
. F5 u  `0 l! y/ c! n+ F

- f6 L! B, P; K" d/ S简单测试一下，能收到数据，没有问题。下面修改UI的代码。

8 p0 y7 F9 L' H# b/ ]& r2 f
现在Model.cpp 中完成数据采集，如下：
) \% [, I7 j  J( {! R$ V3 w

1. void Model::setUartRxByte(uint8_t b)
   1 x* ]; w1 n, w* }  z2 P, i1 }
2. {
   
3.     uartRxByte = b;
   
4. 
   3 v1 U. R1 d; y" A7 v! y1 j
5.     if (modelListener != nullptr)
   
6.     {
   
7.         modelListener->onUartRxByteChanged(b);
   
8.     }
   
9. }

复制代码

9 j# F3 R5 ^5 l5 C' gpresenter.cpp 完成中转，如下所示：

1. void Screen1Presenter::onUartRxByteChanged(uint8_t b)
   , K& ?$ A& ?2 G+ m" c& s" r- M
2. {
   & B% ]" }8 m2 m. T5 J; t" C
3.     view.updateRxValue(b);
   % |: q" S( P& I& c
4. }

复制代码

然后在view.cpp 中完成数据显示，如下所示：

1. void Screen1View::updateRxValue(uint8_t b)
   
2. {
     p: k5 N3 @- h4 o
3.     // static uint8_t lastValue = 255;   // 不可能出现的初始值
   6 t6 F: O' t( T/ g
4. 
   
5.     // if (b != lastValue)               // 只有变化才更新 UI
   
6.     // {
   & O- J' A' s/ \' T: Q8 L
7.     //     lastValue = b;
     v( U% b# r* Q" A- u, R5 k! x$ f( D
8. 
   ' L+ r  M6 b; w, k, u0 y" V
9.     //     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
   * R  ]- B  N2 p: s* G5 A5 g
10.     //     textArea5.invalidate();
    , g1 `/ j8 k: c" T0 ]1 R: h7 o
11.     // }
      F) p0 w, y' |# r( Y; _
12.     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
    
13.     textArea5.invalidate();
    . S- r' v& [1 o. u% [
14. }

复制代码

% C0 j/ _- Q! B" D5 L8 S9 m最后的效果，通过串口助手发送数据，如图5：

! K# _* k1 L/ X; Y1 t6 s图5
UI界面实时显示，如图6所示：

图6
实际操作还是很好玩的，如图7所示：
& I+ P# ]4 v1 x/ O' K1 [/ a. K; b
图7
7 N8 U- K8 M( g& G

完整做完之后可以打包发创客秀哈

<br /> <br />

好的