宏集JMobile Studio—實(shí)現(xiàn)HMI界面高自由度設(shè)計(jì)

一、簡介

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

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

二、宏集JMobile Studio介紹

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

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

此外，宏集的HMI可以配置OPC UA、MQTT等協(xié)議，輕松實(shí)現(xiàn)用戶的物聯(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)目模擬器，可作測試使用；

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

四、演示內(nèi)容

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

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

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

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

五、配置過程

1.配置Canvas畫布控件

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

圖1 新建項(xiàng)目

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

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

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

圖3 啟用Canvas控件的JavaScript功能

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

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

2.編寫JavaScript程序

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

通過Canvas的矩形函數(shù)調(diào)用，我們可以輕松實(shí)現(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ù)，我們也實(shí)現(xiàn)了圓形控件的繪制，簡單的代碼和演示效果如圖7、8所示：

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

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

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

不同的標(biāo)簽數(shù)據(jù)通過各類工業(yè)協(xié)議從現(xiàn)場采集到HMI中，我們通過定時(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)畫效果。該動(dòng)態(tài)餅圖的JavaScript代碼和演示效果如圖9、10所示：

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

六、總結(jié)

通過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還提供了豐富的圖形庫和工具，用戶可以通過拖拽組件、繪制圖形等方式，快速創(chuàng)建直觀的操作界面。

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

審核編輯 黃宇