一、概括

柿餅?zāi)＝M使用到的控件如下圖所標：

二、串口數(shù)據(jù)的獲取

開啟UART的JS代碼如下：

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

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

三、 animatedImag控件的使用

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

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

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

/* 此方法展示窗體前發(fā)生 */onShow:function(event){this.setData({animatedImage1 : 'start'});},/* 此方法關(guān)閉窗體前發(fā)生 */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}});

六、具體實現(xiàn)效果

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

效果如下：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。