項(xiàng)目效果：
在OneNet平臺(tái)建立一個(gè)可視化界面，實(shí)現(xiàn)效果是下位機(jī)的溫度，濕度可以在該界面顯示，同時(shí)該界面可以控制下位機(jī)的燈亮與滅。
搭建環(huán)境:
軟件:keil(編寫C語言-修改硬件的程序)+onenet平臺(tái)（建立可視化界面-上位機(jī)功能）；
硬件:野火指南者開發(fā)板；
可視化界面：
含有折線圖，儀表盤和開關(guān)。
折線圖是顯示濕度值；儀表盤用來顯示溫度值；開關(guān)用來控制燈亮滅。
注意：每個(gè)控件都需要和產(chǎn)品的數(shù)據(jù)流有關(guān)聯(lián)。----“數(shù)據(jù)流選擇”
OneNET - 中國移動(dòng)物聯(lián)網(wǎng)開放平臺(tái)?注冊(cè)登陸進(jìn)入onenet平臺(tái)，點(diǎn)擊右上角-“控制臺(tái)”，進(jìn)入如下界面，點(diǎn)擊“多協(xié)議接入”，找到“MQTT協(xié)議”，添加產(chǎn)品，然后進(jìn)入下一個(gè)界面。
點(diǎn)擊這個(gè)新建的產(chǎn)品進(jìn)入到如下圖的界面，點(diǎn)擊“設(shè)備列表”，“數(shù)據(jù)流” 去建立設(shè)備和數(shù)據(jù)流，然后點(diǎn)擊“應(yīng)用管理”，跳轉(zhuǎn)到“數(shù)據(jù)可視化”界面。（具體網(wǎng)址：?物聯(lián)網(wǎng)平臺(tái)）
圖示1
進(jìn)入數(shù)據(jù)可視化界面，點(diǎn)擊“新建項(xiàng)目”，選擇2D-空白模板，然后建個(gè)名稱，開始編輯這個(gè)模板。?
?在畫布上面添加儀表盤，具體操作參看如下界面的標(biāo)示。?
點(diǎn)擊“數(shù)據(jù)”---〉“數(shù)據(jù)源選擇”（目的：數(shù)據(jù)和控件關(guān)聯(lián)關(guān)系），按照下圖的步驟創(chuàng)建，其中數(shù)據(jù)類型--onenet，名稱可任意設(shè)置，紅色橢圓標(biāo)記是參考前面“多協(xié)議接入”建立新產(chǎn)品時(shí)的產(chǎn)品ID，accesskey--來自產(chǎn)品概況（圖示1），設(shè)備--來自設(shè)備列表的設(shè)備名稱（圖示1），數(shù)據(jù)流--來自數(shù)據(jù)流模板（圖示1）{控件功能是什么對(duì)應(yīng)相關(guān)的數(shù)據(jù)流，比如：儀表盤--數(shù)據(jù)流為temperature，折線圖--數(shù)據(jù)流為humidity，開關(guān)--數(shù)據(jù)流為ledFlag}。
往下找到“數(shù)據(jù)”---〉“私有過濾器”，修改程序（可以參考官方的網(wǎng)址?OneNET - 中國移動(dòng)物聯(lián)網(wǎng)開放平臺(tái)），最終呈現(xiàn)的效果就是可以顯示標(biāo)題“溫度”和數(shù)值。
function?last(arr)?{
????var?len?=?arr???arr.length?:?0;
????if?(len)?return?arr[len?-?1];
}
return?[{
????value:last(data).value,
????name:?'溫度'? ?
}]
?相同的方法設(shè)置“基本折線圖”，放置相關(guān)控件，然后“數(shù)據(jù)”---〉“數(shù)據(jù)源選擇”---〉humidity（對(duì)應(yīng)項(xiàng)目的數(shù)據(jù)流），同時(shí)“數(shù)據(jù)過濾器”內(nèi)的程序改為：
data.forEach((item,?index)?=>?{
????item.x?=?item.update_at
????item.y?=?item.value
});
在“樣式”---〉“數(shù)據(jù)系列”--〉“系列名”---濕度。
同樣在“控制”中找到“按鈕”，放置該按鈕，然后在“樣式”--〉“數(shù)據(jù)系列”---〉“系列1”---〉“命令內(nèi)容”改為“LEDON”（單片機(jī)程序可以控制燈亮的命令），“系列2”---〉“命令內(nèi)容”改為“LEDOFF”，在“數(shù)據(jù)”---〉“數(shù)據(jù)源選擇”---〉對(duì)應(yīng)項(xiàng)目的數(shù)據(jù)流。
文章來源：http://www.zghlxwxcb.cn/news/detail-446367.html
這篇文章是參考了up主（學(xué)的很雜的一個(gè)人）B站視頻最終實(shí)現(xiàn)了我的效果（感謝），主要為了記錄這個(gè)實(shí)現(xiàn)過程，本文主要介紹可視化界面的控件實(shí)現(xiàn)的過程。文章來源地址http://www.zghlxwxcb.cn/news/detail-446367.html
到了這里，關(guān)于OneNet平臺(tái)使用可視化界面(MQTT協(xié)議)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
