一、简介

物联网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上的展示效果：

 

 

 

 

五、配置过程

1.配置Canvas画布控件

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

 

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

 （3）选中Canvas控件，在属性栏的事件中找到绘制操作，点击打开操作列表，选择JavaScript小组件。

（4）下方弹出脚本一栏，即可通过JavaScript语言编写Canvas画布的程序。初始默认调用一个画出蓝色矩形的例程，可直接删除。

2.编写JavaScript程序

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

通过Canvas的矩形函数调用，我们可以轻松实现丰富的静态矩形绘制，简单的代码如图5所示：

 

编写完成后打开组态软件内置的HMI模拟器，显示Canvas画布的效果。结果如图6所示：

 

（2）例程二：彩色圆形笑脸

同样地，调用圆弧函数，我们也实现了圆形控件的绘制，简单的代码和演示效果如图7、8所示：

 

（3）例程三：动态数据饼图

Canvas控件不仅支持静态的画面显示，也支持动态的动画效果。通过调用采集得到的动态数据，可以实现生动的现场数据可视化。

不同的标签数据通过各类工业协议从现场采集到HMI中，我们通过定时器实时采集标签的数据，并在Canvas控件中以上述标签的数据作为变量，实时动态地改变各数据的占比，实现饼图的动画效果。该动态饼图的JavaScript代码和演示效果如图9、10所示：

六、总结

通过JMobile Studio组态软件内置的Canvas控件，我们验证了在宏集物联网HMI或安装了JMobile套件的x86设备中实现界面组件的自定义设计和突出显示效果的功能。

除了Canvas控件，JMobile Studio还提供了丰富的图形库和工具，用户可以通过拖拽组件、绘制图形等方式，快速创建直观的操作界面。

同时，用户还可以轻松与工业控制设备如PLC（可编程逻辑控制器）、DCS（分布式控制系统）等进行通信，实现实时数据采集和可视化展示。用户可以根据需要定义控制逻辑，比如设置报警、趋势和计划表等，从而实现对生产过程的自动控制。