一、簡介

物聯網HMI的組態軟件是數據可視化的重要工具，工程師可以通過圖形化界面來配置、監控和管理現場采集的數據。目前，市面上大多數的組態軟件里的可視化控件庫都由設計師預先部署，用戶只能調用而不能完全自定義控件，導致可視化界面的使用便捷性和美觀度都受到限制。

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

二、宏集JMobile Studio介紹

宏集JMobile Studio是宏集HMI設備的專用IDE與組態軟件。JMobile Studio配合設備或x86設備中預裝的JMobile Runtime運行環境，能使宏集物聯網設備成為支持幾乎所有工業現場協議的工控設備。

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

此外，宏集的HMI可以配置OPC UA、MQTT等協議，輕松實現用戶的物聯網方案。

三、演示所需設備

1. 一臺宏集物聯網HMI、宏集物聯網網關或安裝有JMobile Runtime PC的x86設備，以作為可視化界面。此外，JMobile Studio組態軟件中內置項目模擬器，可作測試使用；

2. JMobile Studio 組態軟件。

四、演示內容

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

Canvas畫布的功能強大，具有圖形繪制、圖像處理、動畫制作和數據可視化的功能，輕松實現動態效果和復雜的人機交互。

以下是一些組態控件在宏集物聯網HMI上的展示效果：

? 宏集HMI組態控件動畫效果圖示

五、配置過程

1.配置Canvas畫布控件

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

圖1 新建項目

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

圖2 調用Canvas控件 圖2 調用Canvas控件

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

圖3 啟用Canvas控件的JavaScript功能

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

圖4 調用JavaScript編輯

2.編寫JavaScript程序

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

通過Canvas的矩形函數調用，我們可以輕松實現豐富的靜態矩形繪制，簡單的代碼如圖5所示：

圖5 靜態同心矩型和交疊矩形的JavaScript演示代碼

編寫完成后打開組態軟件內置的HMI模擬器，顯示Canvas畫布的效果。結果如圖6所示：

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

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

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

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

（3）例程三：動態數據餅圖

Canvas控件不僅支持靜態的畫面顯示，也支持動態的動畫效果。通過調用采集得到的動態數據，可以實現生動的現場數據可視化。

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

圖9 用于數據動態演示的餅圖JavaScript代碼 圖10 用于數據動態演示的餅圖和條形圖的效果演示

六、總結

通過JMobile Studio組態軟件內置的Canvas控件，我們驗證了在宏集物聯網HMI或安裝了JMobile套件的x86設備中實現界面組件的自定義設計和突出顯示效果的功能。

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

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

審核編輯 黃宇