產(chǎn)品簡(jiǎn)介

可視化界面設(shè)計(jì)工具是輔助師生用來(lái)構(gòu)建物聯(lián)網(wǎng)應(yīng)用程序的一個(gè)教學(xué)工具，它采用圖形化界面來(lái)代替代碼開(kāi)發(fā)界面，通過(guò)拖拽、移動(dòng)一些控件與控件節(jié)點(diǎn)，來(lái)過(guò)完成一個(gè)頁(yè)面的設(shè)計(jì)。它非常適合物聯(lián)網(wǎng)初學(xué)者學(xué)者使用，其特點(diǎn)是通過(guò)低代碼編程降低學(xué)習(xí)門檻，同時(shí)在必要的時(shí)候也可以寫一些輔助代碼來(lái)完善和拓展物聯(lián)網(wǎng)應(yīng)用程序的功能。學(xué)生只需具備基本編程常識(shí)，不需要懂算法、語(yǔ)法、編譯、調(diào)試就能做出企業(yè)級(jí)的物聯(lián)網(wǎng)應(yīng)用。

產(chǎn)品功能

控件拖拽、屬性設(shè)置、連線、調(diào)式、部署、導(dǎo)入、導(dǎo)出、部署、可視化展示可視化界面設(shè)計(jì)工具由兩部分組成。一部分是編輯頁(yè)面，另一部分是展示頁(yè)面。登錄成功后就可以看到可視化界面設(shè)計(jì)工具的編輯界面，如下圖：

可視化界面設(shè)計(jì)工具

2.1 控件拖拽

唯眾可視化界面設(shè)計(jì)工具左側(cè)為控件區(qū)，提供物聯(lián)網(wǎng)可視化的相關(guān)控件，用戶從左側(cè)控件區(qū)選擇需要的控件，按住鼠標(biāo)左鍵后進(jìn)行拖拽到工作區(qū)相應(yīng)位置后放開(kāi)鼠標(biāo)左鍵，完成一個(gè)控件的拖動(dòng)；在工作區(qū)中選中任意控件進(jìn)行拖動(dòng)即可改變其位置。

2.2 屬性設(shè)置

在工作區(qū)中雙擊指定控件，即可彈出編輯屬性窗口，在參數(shù)修改框中修改、編輯參數(shù)后點(diǎn)擊【完成】按鈕，即可完成該節(jié)點(diǎn)屬性的編輯。

2.3 連線

連線功能即對(duì)工作區(qū)中每個(gè)控件進(jìn)行鏈接，按住鼠標(biāo)左鍵，從一個(gè)控件的鏈接點(diǎn)直接拖動(dòng)鼠標(biāo)到另一個(gè)控件鏈接點(diǎn)即可完成控件連線功能。

2.4 部署

所有控件設(shè)置、鏈接完成后，點(diǎn)擊右上角【部署】按鈕，將該流程進(jìn)行部署；部署后的流程即可進(jìn)行輸出調(diào)試或可視化頁(yè)面展示。

2.5 導(dǎo)出

編輯器提供導(dǎo)出功能，可以將本次設(shè)置好的場(chǎng)景功能直接導(dǎo)出成json文件，以便保存。

2.6 導(dǎo)入

編輯器提供導(dǎo)出功能，可以將之前導(dǎo)出的json文件，直接導(dǎo)入到編輯器中使用，不用再次拖控件、設(shè)置屬性。

2.7 可視化展示

用戶在項(xiàng)目部署完成后，可在debug頁(yè)面查看輸出結(jié)果進(jìn)行調(diào)試，輸出結(jié)果正?？梢蚤_(kāi)啟可視化頁(yè)面，以圖形化的形式展現(xiàn)物聯(lián)硬件數(shù)據(jù)。

導(dǎo)入演示項(xiàng)目

點(diǎn)擊右側(cè)

然后選擇【導(dǎo)入】按鈕，如下圖：

可視化界面設(shè)計(jì)工具

在新頁(yè)面中點(diǎn)擊【選擇要導(dǎo)入的文件】按鈕，選擇本地已準(zhǔn)備好的文件，點(diǎn)擊【導(dǎo)入】按鈕，實(shí)現(xiàn)導(dǎo)入，如下圖：

可視化界面設(shè)計(jì)工具

項(xiàng)目部署實(shí)現(xiàn)可視化

將導(dǎo)入的項(xiàng)目成功部署后即可實(shí)現(xiàn)可視化；點(diǎn)擊【部署】按鈕，將項(xiàng)目部署，點(diǎn)擊按鈕，點(diǎn)擊如下圖

完成部署后自動(dòng)打開(kāi)可視化頁(yè)面，當(dāng)傳感器的值發(fā)生變化時(shí)，如下圖

可視化界面設(shè)計(jì)工具

在新頁(yè)面中點(diǎn)擊【選擇要導(dǎo)入的文件】按鈕，選擇本地已準(zhǔn)備好的文件，點(diǎn)擊【導(dǎo)入】按鈕，實(shí)現(xiàn)導(dǎo)入，如下圖：

可視化界面設(shè)計(jì)工具