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

相关推荐
linweidong1 天前
物联网MQTT协议与实践:从零到精通的硬核指南
物联网·mqtt·websocket·嵌入式·iot·tdengine·工业物联网
根号三加载成功13 天前
物联网控制器:一台顶N台!路由器、PLC控制器、网关、工控机……
物联网·云计算·智能家居·工业自动化
极客小张15 天前
基于FreeRTOS的STM32工业级实时监控系统开发设计思路(多传感器融合+PyQt5远程控制)
stm32·嵌入式硬件·qt·机器学习·毕业设计·工业物联网·传感器
远创智控研发五部21 天前
EtherCAT至TCP/IP异构网络互联:施耐德M580 PLC对接倍福CX5140解决方案
数据采集·工业自动化·协议转换网关·网关模块·倍福plc
JIANGHONGZN21 天前
汽车电池智造关键一环!DeviceNet转Modbus RTU网关的实战突围
工业控制·工业自动化·协议网关·modbus rtu·devicenet
宏集科技工业物联网22 天前
洞察分享 | 工业自动化的未来已来:边缘计算如何成为新增长引擎?
自动化·边缘计算·工业物联网·工业自动化
宏集科技工业物联网1 个月前
应用案例 | 设备分布广, 现场维护难? 宏集Cogent DataHub助力分布式锅炉远程运维, 让现场变“透明”
远程控制·工业物联网·远程运维·工业自动化·工业软件
远创智控研发五部1 个月前
边缘计算网关提升水产养殖尾水处理的远程运维效率
物联网·远程监控·工业自动化·边缘计算网关·无线数传模块
JIANGHONGZN1 个月前
Ethernet/IP转DeviceNet网关:驱动大型矿山自动化升级的核心纽带
自动化·工业控制·工业自动化·ethernet/ip·协议网关·devicenet
远创智控研发五部1 个月前
工业智能网关保障冷冻仓储设备无人值守安全运行
物联网·远程监控·工业自动化·边缘计算网关