一、簡(jiǎn)介

物聯(lián)網(wǎng)HMI的組態(tài)軟件是數(shù)據(jù)可視化的重要工具，工程師可以通過(guò)圖形化界面來(lái)配置、監(jiān)控和管理現(xiàn)場(chǎng)采集的數(shù)據(jù)。目前，市面上大多數(shù)的組態(tài)軟件里的可視化控件庫(kù)都由設(shè)計(jì)師預(yù)先部署，用戶(hù)只能調(diào)用而不能完全自定義控件，導(dǎo)致可視化界面的使用便捷性和美觀度都受到限制。

然而，宏集的物聯(lián)網(wǎng)HMI所配套的JMobile Studio組態(tài)軟件不僅帶有設(shè)計(jì)師根據(jù)最新美術(shù)風(fēng)格設(shè)計(jì)的完善數(shù)據(jù)庫(kù)，也具有由JavaScript支持的Canvas畫(huà)布功能。通過(guò)調(diào)用Canvas控件以及簡(jiǎn)單的JavaScript編程，工程師可以輕松實(shí)現(xiàn)HMI界面的完全自定義，部署功能更豐富且美觀的顯示畫(huà)面。

二、宏集JMobile Studio介紹

宏集JMobile Studio是宏集HMI設(shè)備的專(zhuān)用IDE與組態(tài)軟件。JMobile Studio配合設(shè)備或x86設(shè)備中預(yù)裝的JMobile Runtime運(yùn)行環(huán)境，能使宏集物聯(lián)網(wǎng)設(shè)備成為支持幾乎所有工業(yè)現(xiàn)場(chǎng)協(xié)議的工控設(shè)備。

宏集JMobile Studio支持JavaScript編程，通過(guò)拖拽式的功能控件，輕松實(shí)現(xiàn)高自由度的畫(huà)面組態(tài)與邊緣計(jì)算。

此外，宏集的HMI可以配置OPC UA、MQTT等協(xié)議，輕松實(shí)現(xiàn)用戶(hù)的物聯(lián)網(wǎng)方案。

三、演示所需設(shè)備

1. 一臺(tái)宏集物聯(lián)網(wǎng)HMI、宏集物聯(lián)網(wǎng)網(wǎng)關(guān)或安裝有JMobile Runtime PC的x86設(shè)備，以作為可視化界面。此外，JMobile Studio組態(tài)軟件中內(nèi)置項(xiàng)目模擬器，可作測(cè)試使用；

2. JMobile Studio 組態(tài)軟件。

四、演示內(nèi)容

本次演示以JMobile Studio 組態(tài)軟件及內(nèi)置的項(xiàng)目模擬器為基礎(chǔ)，展示Canvas畫(huà)布功能控件的調(diào)用。通過(guò)幾個(gè)簡(jiǎn)單的JavaScript程序例程，說(shuō)明如何通過(guò)JMobile Studio 組態(tài)軟件實(shí)現(xiàn)在HMI畫(huà)面上繪制圖形和動(dòng)畫(huà)。

Canvas畫(huà)布的功能強(qiáng)大，具有圖形繪制、圖像處理、動(dòng)畫(huà)制作和數(shù)據(jù)可視化的功能，輕松實(shí)現(xiàn)動(dòng)態(tài)效果和復(fù)雜的人機(jī)交互。

以下是一些組態(tài)控件在宏集物聯(lián)網(wǎng)HMI上的展示效果：

? 宏集HMI組態(tài)控件動(dòng)畫(huà)效果圖示

五、配置過(guò)程

1.配置Canvas畫(huà)布控件

（1）JMobile Studio中新建基于宏集eX705 HMI的界面程序，如圖1所示。

圖1 新建項(xiàng)目

（2）在工具庫(kù)/控件中找到通用Canvas控件，拖拽到HMI界面中，如圖2所示。

圖2 調(diào)用Canvas控件 圖2 調(diào)用Canvas控件

（3）選中Canvas控件，在屬性欄的事件中找到繪制操作，點(diǎn)擊打開(kāi)操作列表，選擇JavaScript小組件。

圖3 啟用Canvas控件的JavaScript功能

（4）下方彈出腳本一欄，即可通過(guò)JavaScript語(yǔ)言編寫(xiě)Canvas畫(huà)布的程序。初始默認(rèn)調(diào)用一個(gè)畫(huà)出藍(lán)色矩形的例程，可直接刪除。

圖4 調(diào)用JavaScript編輯

2.編寫(xiě)JavaScript程序

（1）例程一：同心矩型和交疊矩形

通過(guò)Canvas的矩形函數(shù)調(diào)用，我們可以輕松實(shí)現(xiàn)豐富的靜態(tài)矩形繪制，簡(jiǎn)單的代碼如圖5所示：

圖5 靜態(tài)同心矩型和交疊矩形的JavaScript演示代碼

編寫(xiě)完成后打開(kāi)組態(tài)軟件內(nèi)置的HMI模擬器，顯示Canvas畫(huà)布的效果。結(jié)果如圖6所示：

圖6靜態(tài)同心矩型和交疊矩形畫(huà)布在模擬HMI上的顯示效果

（2）例程二：彩色圓形笑臉

同樣地，調(diào)用圓弧函數(shù)，我們也實(shí)現(xiàn)了圓形控件的繪制，簡(jiǎn)單的代碼和演示效果如圖7、8所示：

圖7 靜態(tài)彩色笑臉的JavaScript演示代碼 圖8靜態(tài)彩色笑臉畫(huà)布在模擬HMI上的顯示效果

（3）例程三：動(dòng)態(tài)數(shù)據(jù)餅圖

Canvas控件不僅支持靜態(tài)的畫(huà)面顯示，也支持動(dòng)態(tài)的動(dòng)畫(huà)效果。通過(guò)調(diào)用采集得到的動(dòng)態(tài)數(shù)據(jù)，可以實(shí)現(xiàn)生動(dòng)的現(xiàn)場(chǎng)數(shù)據(jù)可視化。

不同的標(biāo)簽數(shù)據(jù)通過(guò)各類(lèi)工業(yè)協(xié)議從現(xiàn)場(chǎng)采集到HMI中，我們通過(guò)定時(shí)器實(shí)時(shí)采集標(biāo)簽的數(shù)據(jù)，并在Canvas控件中以上述標(biāo)簽的數(shù)據(jù)作為變量，實(shí)時(shí)動(dòng)態(tài)地改變各數(shù)據(jù)的占比，實(shí)現(xiàn)餅圖的動(dòng)畫(huà)效果。該動(dòng)態(tài)餅圖的JavaScript代碼和演示效果如圖9、10所示：

圖9 用于數(shù)據(jù)動(dòng)態(tài)演示的餅圖JavaScript代碼 圖10 用于數(shù)據(jù)動(dòng)態(tài)演示的餅圖和條形圖的效果演示

六、總結(jié)

通過(guò)JMobile Studio組態(tài)軟件內(nèi)置的Canvas控件，我們驗(yàn)證了在宏集物聯(lián)網(wǎng)HMI或安裝了JMobile套件的x86設(shè)備中實(shí)現(xiàn)界面組件的自定義設(shè)計(jì)和突出顯示效果的功能。

除了Canvas控件，JMobile Studio還提供了豐富的圖形庫(kù)和工具，用戶(hù)可以通過(guò)拖拽組件、繪制圖形等方式，快速創(chuàng)建直觀的操作界面。

同時(shí)，用戶(hù)還可以輕松與工業(yè)控制設(shè)備如PLC（可編程邏輯控制器）、DCS（分布式控制系統(tǒng)）等進(jìn)行通信，實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)采集和可視化展示。用戶(hù)可以根據(jù)需要定義控制邏輯，比如設(shè)置報(bào)警、趨勢(shì)和計(jì)劃表等，從而實(shí)現(xiàn)對(duì)生產(chǎn)過(guò)程的自動(dòng)控制。

審核編輯 黃宇