宏集JMobile Studio—实现HMI界面高自由度设计

一、简介

物联网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控件

(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(分布式控制系统)等进行通信,实现实时数据采集和可视化展示。用户可以根据需要定义控制逻辑,比如设置报警、趋势和计划表等,从而实现对生产过程的自动控制。

相关推荐
镭眸14 天前
叉尖避障新科技:因泰立科技ILS-T52三维深度成像激光雷达
人工智能·激光雷达·1024程序员节·工业自动化·无人叉车·镭眸·leimou
学步_技术23 天前
自动驾驶系列—自动驾驶HMI交互设计:车与人沟通的未来之路
人工智能·自动驾驶·交互·hmi
巨蟹数字科技1 个月前
北京数字孪生工业互联网可视化技术,赋能新型工业化智能制造工厂
智能制造·数字孪生·工业互联网·工业物联网·工业元宇宙·北京·三维可视化技术
巨蟹数字科技2 个月前
半导体器件制造5G智能工厂数字孪生物联平台,推进制造业数字化转型
数字孪生·工业互联网·工业物联网·工业机器人·5g智能工厂·三维可视化系统·半导体器件制造
巨蟹数字科技2 个月前
电子元件制造5G智能工厂物联数字孪生平台,推进制造业数字化转型
数字孪生·工业互联网·工业物联网·工业机器人·5g智能工厂·三维可视化系统·电子元件制造
巨蟹数字科技2 个月前
电线电缆制造5G智能工厂物联数字孪生平台,推进制造业数字化转型
数字孪生·工业互联网·工业物联网·工业机器人·5g智能工厂·智慧工厂数字孪生·电线电缆制造
巨蟹数字科技2 个月前
洗衣机制造5G智能工厂物联数字孪生平台,推进制造业数字化转型
数字孪生·工业互联网·工业物联网·工业机器人·5g智能工厂·工业数字孪生·洗衣机制造
巨蟹数字科技2 个月前
整流器制造5G智能工厂物联数字孪生平台,推进制造业数字化转型
智能制造·数字孪生·工业互联网·工业物联网·三维可视化大屏·5g智能工厂·整流器制造
巨蟹数字科技2 个月前
发动机制造5G智能工厂工业物联数字孪生平台,推进制造业数字化转型
数字孪生·工业互联网·工业物联网·智慧工厂数字孪生·三维可视化系统·工业数字孪生·发动机制造
巨蟹数字科技2 个月前
变压器制造5G智能工厂工业物联数字孪生平台,推进制造业数字化转型
数字孪生·工业互联网·工业物联网·5g智能工厂·智慧工厂数字孪生·制造业数字化转型·变压器制造