N* h% G1 h/ s& ]; n      当设备接外部传感器的时候，通过数据采样，需要在UI界面上将数据实时显示出来。这里以UI界面中的温度和胎压监测为例。还是以UI的MVP结构为基础，通过上位机串口发送数据，模拟实际传感器的测量数据，在UI界面上显示。
OK，UI界面图如图1和图2所示：

/ ?1 |, [) z) J图1

图2
0 v3 T6 U. h- f/ F" ?7 o% f" T( ^要在UI程序架构里增加UART通讯，先在原理图中查找相应的接口，如图3所示：
2 }; [/ i+ w# X- _3 t5 _$ `( N
  L  z6 g6 u$ S  S+ B' {图3
USART3正好可以应用，连接好线，测试发现，这个接口不能使，原因尚未找到。然后找到了USART2接口，需要调整下短接电阻，如图4所示：
  e' t% X$ x+ Y7 A* C2 R" a% D" g
图4
- ^& V- ?( U1 j( }经测试，这个接口是可以使用的。所谓有坑也得迈过去。

" @+ c( {9 |  R3 A
0 ^2 V- l6 W& j1 l% G8 x: B0 Z2 r4 b, [定义中断，如下所示：

1. TouchGFX_SetUartRxByte(aRxBuffer);
   , g1 H, I5 H$ m% e
2.         HAL_UART_Receive_IT(&huart2, &aRxBuffer,1);

复制代码

& I1 ]4 v: b1 \% D& z2 L  y, j
因为程序使用的是FreeRtos的架构，所以还得在默认任务里添加中断。

4 J& r  M, {3 D& N" h
9 b' c# c7 E) w  f9 \" |简单测试一下，能收到数据，没有问题。下面修改UI的代码。
9 x- ?1 I) R! ]/ q# U1 r, @

现在Model.cpp 中完成数据采集，如下：

1. void Model::setUartRxByte(uint8_t b)
   , v; P1 C, s4 `* x
2. {
   
3.     uartRxByte = b;
   . p: x2 C  V$ N/ ]
4. 
   
5.     if (modelListener != nullptr)
   
6.     {
   
7.         modelListener->onUartRxByteChanged(b);
   
8.     }
   9 G: z1 |& ^, n% F$ t3 |% u+ S
9. }

复制代码

1 m4 n$ B9 C9 F8 j' mpresenter.cpp 完成中转，如下所示：

1. void Screen1Presenter::onUartRxByteChanged(uint8_t b)
   
2. {
   ' @; u, D9 W' X4 y, v& ]
3.     view.updateRxValue(b);
   % r) B: C+ j8 C( G( h
4. }

复制代码

/ [% J, Z  Q& j! i+ m2 s2 L4 Q, a0 X0 I
然后在view.cpp 中完成数据显示，如下所示：
* c, p' T4 i* B8 H

1. void Screen1View::updateRxValue(uint8_t b)
   
2. {
   : C- E) h/ _& ?( B, V2 }
3.     // static uint8_t lastValue = 255;   // 不可能出现的初始值
   
4. 
   
5.     // if (b != lastValue)               // 只有变化才更新 UI
     x* f3 p* z1 J/ P, A9 Z
6.     // {
   
7.     //     lastValue = b;
   . P8 L- o+ C& T
8. 
   
9.     //     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
   
10.     //     textArea5.invalidate();
    / {7 B% |' A6 @, V
11.     // }
    ; z" {  G6 x+ [$ `: x
12.     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
    & G) S& P/ h5 G1 b) _3 C1 j: e
13.     textArea5.invalidate();
    
14. }

复制代码

: ~) K, H5 S0 e- y" y/ A6 W! c
1 I, I3 h; b' _0 p( r; W8 z! P最后的效果，通过串口助手发送数据，如图5：

) i. c  o/ z, a* y* E, d图5
% y! q" U2 Z0 X  `UI界面实时显示，如图6所示：

图6
实际操作还是很好玩的，如图7所示：

图7

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

STMCU-管管 发表于 2025-12-12 11:17
完整做完之后可以打包发创客秀哈

好的