3 o; Y) F6 y" e7 U* L* \. \1 H$ S      当设备接外部传感器的时候，通过数据采样，需要在UI界面上将数据实时显示出来。这里以UI界面中的温度和胎压监测为例。还是以UI的MVP结构为基础，通过上位机串口发送数据，模拟实际传感器的测量数据，在UI界面上显示。
& y" p  i5 w7 l4 D# m; cOK，UI界面图如图1和图2所示：

图1

# g( i4 N3 u( H% j图2
要在UI程序架构里增加UART通讯，先在原理图中查找相应的接口，如图3所示：
: b' X5 ?/ m9 G$ K( [8 j3 o) Z/ C/ J
$ e: o/ N/ o: s  o9 u图3
" A0 z2 J  w4 qUSART3正好可以应用，连接好线，测试发现，这个接口不能使，原因尚未找到。然后找到了USART2接口，需要调整下短接电阻，如图4所示：
4 p  c4 s# U3 G; ~7 x; m
图4
经测试，这个接口是可以使用的。所谓有坑也得迈过去。
+ l8 I, B7 P0 e8 V
' Y: P' }, h) B4 ?. m* @+ s+ z
定义中断，如下所示：

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

复制代码

) k; t4 b' q( H: [& e因为程序使用的是FreeRtos的架构，所以还得在默认任务里添加中断。
/ R1 y) K- z" h- H9 L/ g

" w$ h7 S+ Q) h% l2 q简单测试一下，能收到数据，没有问题。下面修改UI的代码。

2 s+ w( D8 a, A9 J; s0 ^
现在Model.cpp 中完成数据采集，如下：
+ q4 }0 ]) j. ]9 W% r) g

1. void Model::setUartRxByte(uint8_t b)
   2 ]4 o* h: z- T" g
2. {
   ! G' F+ _$ b9 o6 [. M
3.     uartRxByte = b;
   
4. 
   
5.     if (modelListener != nullptr)
   ' Q* S% K7 b6 K. r7 O/ V5 H8 Q% d
6.     {
   
7.         modelListener->onUartRxByteChanged(b);
   4 u' i' @9 b/ P; I6 F+ b* \# i! h
8.     }
   
9. }

复制代码

% s- J4 m1 A+ H4 i
! C3 e6 A% g1 I) s$ y! o1 Dpresenter.cpp 完成中转，如下所示：
0 w$ Z+ X4 T! f, d. B+ z! I) }( x  R

1. void Screen1Presenter::onUartRxByteChanged(uint8_t b)
   
2. {
   $ y+ l* F8 p2 ]8 y
3.     view.updateRxValue(b);
   
4. }

复制代码

+ i# }* G% c& Q. M) s
8 ]7 N% F) O/ b9 I! u+ }4 f' Q然后在view.cpp 中完成数据显示，如下所示：
7 t5 }. d: R% J1 ]# ^. x  E8 m

1. void Screen1View::updateRxValue(uint8_t b)
   0 Z# {* _) b. U, @
2. {
   2 L- X% K4 \1 P
3.     // static uint8_t lastValue = 255;   // 不可能出现的初始值
     y9 t, |' {5 T
4. 
   2 A. F8 q6 W) t4 m# r7 R+ f$ _% y4 o! ~
5.     // if (b != lastValue)               // 只有变化才更新 UI
   5 a- D9 F) B# ~) B# |  ?0 c
6.     // {
   
7.     //     lastValue = b;
   + H# Z2 X3 @% `2 h6 D6 @2 n2 P
8. 
   
9.     //     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
   ' J: ?( ~& Y) b& M3 \! g0 R1 I
10.     //     textArea5.invalidate();
    8 S1 o. ]4 C% r/ F1 R1 ]3 U  z
11.     // }
    
12.     Unicode::snprintf(textArea5Buffer, TEXTAREA5_SIZE, "%d", b);
    5 U- R/ {/ o7 `
13.     textArea5.invalidate();
    : x4 \! S! d/ F  W  Z2 y
14. }

复制代码

( R- \5 z% {' R0 z9 P
最后的效果，通过串口助手发送数据，如图5：

图5
UI界面实时显示，如图6所示：
: R5 A5 b! Q5 w# }
0 T/ c" Q$ V# Q0 Z, h0 R5 Y图6
/ ^% q1 Z. \& a! K% c. u实际操作还是很好玩的，如图7所示：

8 D1 w! z7 C( ^2 ]7 E+ \, Q图7

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

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

好的