当设备接外部传感器的时候，通过数据采样，需要在UI界面上将数据实时显示出来。这里以UI界面中的温度和胎压监测为例。还是以UI的MVP结构为基础，通过上位机串口发送数据，模拟实际传感器的测量数据，在UI界面上显示。
: @$ }. g# ~! s6 `0 F# F' ^3 FOK，UI界面图如图1和图2所示：

. P0 O1 Q: g* Z" l' ]图1
; q& q7 ]4 u- W. y' R
图2
要在UI程序架构里增加UART通讯，先在原理图中查找相应的接口，如图3所示：

- C$ z1 u* R/ W4 f9 @9 V) m4 h8 V图3
USART3正好可以应用，连接好线，测试发现，这个接口不能使，原因尚未找到。然后找到了USART2接口，需要调整下短接电阻，如图4所示：

图4
经测试，这个接口是可以使用的。所谓有坑也得迈过去。
0 p9 Y$ V/ G! e4 q
: a  X  A9 n! A* k5 E+ A
1 ?. c( H  j& P2 l定义中断，如下所示：

1. TouchGFX_SetUartRxByte(aRxBuffer);
   6 T! D/ q* v* r9 l7 E
2.         HAL_UART_Receive_IT(&huart2, &aRxBuffer,1);

复制代码

- N' z% a3 ?5 U8 `$ [7 \: W1 q
: O% P7 f, |+ v( i, E因为程序使用的是FreeRtos的架构，所以还得在默认任务里添加中断。

. _  N7 P7 n) z4 [! j5 q) s$ L
: I2 W7 k2 l6 ?& m- M5 D简单测试一下，能收到数据，没有问题。下面修改UI的代码。
: ?1 t) p$ {& {6 P8 D! C
7 r; D  Q, D$ I
现在Model.cpp 中完成数据采集，如下：
2 R  h& U% @8 K$ |' Y1 _9 C

1. void Model::setUartRxByte(uint8_t b)
   1 k7 G6 H; ?8 B1 R/ D, t
2. {
   
3.     uartRxByte = b;
   ; c2 E, i  w1 ?' Q& M+ x$ f
4. 
     ]- \8 H( t' b( n1 x
5.     if (modelListener != nullptr)
   . L2 p! W8 \' q7 m9 {# k
6.     {
   
7.         modelListener->onUartRxByteChanged(b);
   
8.     }
   
9. }

复制代码

/ v: J" d' c5 Q" W! k3 r" u* Opresenter.cpp 完成中转，如下所示：

1. void Screen1Presenter::onUartRxByteChanged(uint8_t b)
   
2. {
   , e% n  K7 {+ N2 e6 ?$ C1 z
3.     view.updateRxValue(b);
   . S% v3 X& P2 X% _
4. }

复制代码

; O( c" H4 q# J; X
9 M5 Z/ ~2 e3 }6 w1 x2 `然后在view.cpp 中完成数据显示，如下所示：
5 y) d  T7 K( `4 q" u& t

1. void Screen1View::updateRxValue(uint8_t b)
   
2. {
   
3.     // static uint8_t lastValue = 255;   // 不可能出现的初始值
   
4. 
   
5.     // if (b != lastValue)               // 只有变化才更新 UI
   
6.     // {
   
7.     //     lastValue = b;
   ( x0 R/ K7 N5 X. p( y7 y- \
8. 
   
9.     //     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
   
10.     //     textArea5.invalidate();
    7 f5 R; h8 V$ T  c! d# R
11.     // }
    0 G/ b' M- C) J3 O! k
12.     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
    
13.     textArea5.invalidate();
    
14. }

复制代码

最后的效果，通过串口助手发送数据，如图5：

图5
- @8 J7 m+ K6 f$ mUI界面实时显示，如图6所示：
2 G1 K, p! k: P; s) V  s2 p- d
. l% U; @; k9 H: J, }$ \% D图6
实际操作还是很好玩的，如图7所示：
! X9 a2 A. y. Q
% X1 L) ~1 U% Z$ m# O/ ]图7

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

<br /> <br />

好的