一、概括

柿餅模組使用到的控件如下圖所標：

二、串口數據的獲取

開啟UART的JS代碼如下：

/* 此方法展示窗體前發生 */onShow:function(event){uart = pm.openSerialPort({ port: "uart0", baud: 115200 }); //打開串口0if(uart){ //UART接收函數uart.onData(function(data){thiz.RevUartData(data) //調用串口接收函數 })} },//串口接收解析RevUartData:function(data){var revdata_u;revdata_u = data.readInt8(0)*256+data.readInt8(1); //將傳來的兩個16進制轉化為具體的距離值（毫米）},

這里的revdata_u就是我們獲取到的距離值

三、 animatedImag控件的使用

animatedImag控件是用來播放圖片集的。屬性設置如下：

我們添加好事先準備好的圖片集，如下所示，只要讓這些圖片動起來就能達到動圖的效果。

對應的JavaScript代碼如下，一個是進入該page時讓圖片集啟動，形成動圖，一個是讓其在退出時停止。

/* 此方法展示窗體前發生 */onShow:function(event){this.setData({animatedImage1 : 'start'});},/* 此方法關閉窗體前發生 */onExit:function(event){this.setData({animatedImage : 'stop'}); },

四、Label控件的使用

Label控件主要是起到的是文本顯示的效果，當然也可以通過JS代碼來改變其顯示文字。

我們將獲得的距離值傳給用于顯示的label，JS代碼如下：

this.setData({label2 : {value :revdata_u, refresh:true}});

五、progressbar控件的使用

progressbar控件是用來顯示進度條的，我們可以使用它來形象的顯示出距離值得長短以及變化的大小。

利用獲取到的距離值來改變progressbar控件的進度的方法如下：

this.setData ({progressbar1 : {value : revdata_u , refresh : true}});

六、具體實現效果

這個模塊的實現很簡單，由于個人水平有限，也沒怎么弄UI方面的設計，代碼也沒怎么測試，只是可行，希望能給大家一個參考。

效果如下：

.工程下載地址：https://www.rt-thread.org/qa/forum.php?mod=viewthread&tid=10420&page=1#pid44021

總結

以上是生活随笔為你收集整理的柿饼模组 -- 实现超声波模块测距显示界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。