0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

虹科工业物联网技术 来源:虹科工业物联网技术 作者:虹科工业物联网技 2024-05-30 13:38 次阅读

一、简介

物联网HMI的组态软件是数据可视化的重要工具,工程师可以通过图形化界面来配置、监控和管理现场采集的数据。目前,市面上大多数的组态软件里的可视化控件库都由设计师预先部署,用户只能调用而不能完全自定义控件,导致可视化界面的使用便捷性和美观度都受到限制。

然而,宏集的物联网HMI所配套的JMobile Studio组态软件不仅带有设计师根据最新美术风格设计的完善数据库,也具有由JavaScript支持的Canvas画布功能。通过调用Canvas控件以及简单的JavaScript编程,工程师可以轻松实现HMI界面的完全自定义,部署功能更丰富且美观的显示画面。

二、宏集JMobile Studio介绍

wKgaomZYD0-AVZD9AAT5-Tn42Co236.png

宏集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上的展示效果:

wKgZomZYD2OAW3z2AAVr8x3x8_I637.pngwKgaomZYD2OAE0oxAAPYRzqIhlw880.pngwKgZomZYD2OAYDaMAAGHG84jGxM971.png  宏集HMI组态控件动画效果图示

五、配置过程

1.配置Canvas画布控件

(1)JMobile Studio中新建基于宏集eX705 HMI的界面程序,如图1所示。

wKgZomZYD4eAF4SgAAD36Lk1094459.png图1 新建项目

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

wKgZomZYD5qAErCjABOtuhxG20U637.png图2 调用Canvas控件 wKgaomZYD6SAZVSnAAATj6f7KDM916.png图2 调用Canvas控件

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

wKgaomZYD8KAbEHqAACAFip5KlY217.png图3 启用Canvas控件的JavaScript功能

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

wKgZomZYD9uAEY1wAAA5-jQJFBg070.png图4 调用JavaScript编辑

2.编写JavaScript程序

(1)例程一:同心矩型和交叠矩形

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

wKgaomZYEAKACU4AAABhNam583o149.png图5 静态同心矩型和交叠矩形的JavaScript演示代码

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

wKgaomZYEBOAB9_fAABSqFx1FCM345.png图6静态同心矩型和交叠矩形画布在模拟HMI上的显示效果

(2)例程二:彩色圆形笑脸

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

wKgZomZYEDKAF6CdAACbt7NtlUI073.png图7 静态彩色笑脸的JavaScript演示代码 wKgZomZYED6AEi3hAABd-7nJGKQ972.png图8静态彩色笑脸画布在模拟HMI上的显示效果

(3)例程三:动态数据饼图

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

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

wKgZomZYEF6ACBzFAAEnA46I9MY577.png图9 用于数据动态演示的饼图JavaScript代码 wKgaomZYEGqAXnSfAAA3bge_kgM519.png图10 用于数据动态演示的饼图和条形图的效果演示

六、总结

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

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

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

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 物联网
    +关注

    关注

    2909

    文章

    44567

    浏览量

    372828
  • 组态软件
    +关注

    关注

    4

    文章

    231

    浏览量

    27048
  • HMI
    HMI
    +关注

    关注

    9

    文章

    587

    浏览量

    48539
  • Canvas
    +关注

    关注

    0

    文章

    16

    浏览量

    10981
收藏 人收藏

    评论

    相关推荐

    HMI应用于物联网的前景 HMI未来发展趋势与挑战

    HMI应用于物联网的前景 随着物联网(IoT)技术的快速发展,人机界面HMI)在物联网领域的应用前景日益广阔。HMI作为连接人与机器的桥梁,其在物联网中的作用不仅仅是展示数据,更是
    的头像 发表于 12-06 10:26 314次阅读

    H60.XYZTR5六自由度并联机构

    、生物科技等微纳操作领域。 H60.XYZTR5六自由度并联机构 H60.XYZTR5系列六自由度并联机构压电纳米定位台,是X、Y、Z、θx、θy、θz六轴运动定位台,内置高可靠性压电陶瓷作为驱动源,通过六支压电促动器的协调伸缩,配合先进的控制算法
    的头像 发表于 11-21 10:33 170次阅读
    H60.XYZTR5六<b class='flag-5'>自由度</b>并联机构

    物联网工控屏通过 S7 ETH 协议采集西门子 1200 PLC 数据

    上周我们分享了HMI通过S7 MPI协议采集西门子400 PLC数据的操作步骤。本周,我们将继续带来干货,重点介绍
    的头像 发表于 06-21 16:02 523次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>物联网工控屏通过 S7 ETH 协议采集西门子 1200 PLC 数据

    干货分享:物联网HMI通过S7 MPI协议采集西门子400PLC数据

    物联网HMI集成了多个驱动来适配西门子200、300、400、1200、1500、LOGO等系列PLC,本文主要介绍
    的头像 发表于 06-13 13:39 573次阅读
    干货分享:<b class='flag-5'>宏</b><b class='flag-5'>集</b>物联网<b class='flag-5'>HMI</b>通过S7 MPI协议采集西门子400PLC数据

    基于FPGA EtherCAT的六自由度机器人视觉伺服控制设计

    和增强系统处理图像的实时性,本文提出了一种伊瑟特的六自由度机器人视觉伺服控制系统,将摄像头集成到基于 Zynq的伊瑟特主站上,提高了视觉伺服的实时性.经测试,该平台能够对视觉检测目标的变化做出及时的反应
    发表于 05-29 16:17

    PLC+HMI触控一体机助力构建物料自动分拣系统

    DC系列PLC+HMI触控一体机集成了参数设置、数据显示、设备监控等功能,可通过曲线和动画形式展示自动化控制过程,并支持逻辑编程,帮助构建高效的物料自动分拣系统.
    的头像 发表于 05-08 10:52 581次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>PLC+<b class='flag-5'>HMI</b>触控一体机助力构建物料自动分拣系统

    eX200系列工控屏—全能, 极致性价比的创新之作

    新一代eX200系列HMI重磅来袭!高性价比和多元功能的完美融合,为企业提供All-in-one物联网解决方案。
    的头像 发表于 04-24 15:58 401次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>eX200系列工控屏—全能, 极致性价比的创新之作

    基于FPGA的六自由度机器人视觉伺服控制方案设计

    ​ 机器人视觉系统的硬件选择直接影响图像采集,图像的质量和后期的处理,并影响整个控制系统的实时性,所以应根据要求和这些硬件性能,严格选择硬件。基于伊瑟特的六自由度机器人视觉伺服控制系统主要包括摄像头、Zynq、存储、显示、通信等模块。
    发表于 04-24 10:31 476次阅读
    基于FPGA的六<b class='flag-5'>自由度</b>机器人视觉伺服控制方案设计

    【插针机HMI开发】用AWTK开发人机界面

    AWTK介绍致远电子的AWTK是开源GUI引擎,提供了AWTK-C、AWTK-MVVM和AWTK-HMI等多种解决方案来实现界面编程。其中AWTK-C解决方案使用
    的头像 发表于 04-19 08:23 568次阅读
    【插针机<b class='flag-5'>HMI</b>开发】用AWTK开发人机<b class='flag-5'>界面</b>

    eX700M系列HMI实现港口设备数据上云

    eX700M系列HMI帮助国内某信息化公司实现港口设备的数据采集、处理和上云,推动港口设备信息化。
    的头像 发表于 04-17 11:03 372次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>eX700M系列<b class='flag-5'>HMI</b><b class='flag-5'>实现</b>港口设备数据上云

    Web HMI快速实现PLC数据的远程监控

    随着web技术的快速发展,越来越多的PLC设备集成web服务器。Web HMI帮助某自动化龙头企业轻松访问和连接西门子PLC中的web服务器,实现PLC内部关键数据的监控。
    的头像 发表于 03-27 10:49 597次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>Web <b class='flag-5'>HMI</b>快速<b class='flag-5'>实现</b>PLC数据的远程监控

    新一代Web HMI:开启远程监控新时代

    新一代Web HMI拥有强大的硬件配置和丰富的硬件接口,出厂自带Chromium浏览器,基于web服务器便可轻松访问工业控制系统(如PLC、上位机等),实现远程监控,给你全新的工业
    的头像 发表于 03-20 14:20 416次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>新一代Web <b class='flag-5'>HMI</b>:开启远程监控新时代

    小型PLC应用于浮动封盖机

    提供开放性和灵活性的工业控制解决方案,仅通过1个控制面板和1个紧凑型PLC,控制来自不同制造商的13种不同电机,实现传送带不停止情况
    的头像 发表于 02-28 13:20 255次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>小型PLC应用于浮动封盖机

    无线自由:探索AGV无线充电技术的自由度优势

    随着技术的不断进步,电磁场模拟、智能化算法与物联网技术的融合和集成,将进一步扩展AGV无线充电的自由度。无线充电不仅仅作为一种供能手段,更成为实现AGV高效、智能化运营的核心部件。这些技术的结合,不仅推动自动引导车在各个行业中能够发挥出更大的潜能,同时还带来了经济效益和技
    的头像 发表于 01-19 11:22 542次阅读

    干货丨探索物联网HMI的端口转发和NAT功能

    端口转发和NAT功能常用于内网穿透,实现内部网络和外部网络之间的数据传输,工作人员通过外部网络便可安全访问到内网设备,实现设备的状态监测。接下来小编将为大家介绍支持端口转发和NAT功能的
    的头像 发表于 01-17 11:01 491次阅读
    <b class='flag-5'>宏</b><b class='flag-5'>集</b>干货丨探索物联网<b class='flag-5'>HMI</b>的端口转发和NAT功能