一、簡介

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

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

二、宏集JMobile Studio介紹

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

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

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

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

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

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

四、演示內(nèi)容

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

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

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

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

五、配置過程

1.配置Canvas畫布控件

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

圖1 新建項目

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

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

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

圖3 啟用Canvas控件的JavaScript功能

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

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

2.編寫JavaScript程序

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

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

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

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

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

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

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

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

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

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

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

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

六、總結(jié)

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

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

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

審核編輯 黃宇