自动化的自动化(1)--OPCUA2HTML5

现在的自动化工程师是令人沮丧的,他们努力地实现各个行业的自动化系统,自己却停留在敲键盘的手工劳作的阶段,该解放自己了。这就是"自动化实现自动化"的话题。

OPC 统一架构(简称 OPC UA)是现代工厂自动化中用于机器通信的标准化安全解决方案。跨平台标准基于OPC基金会的规范,现在得到了所有知名机器和系统制造商以及所有常见PLC制造商的支持,如西门子、博世力士乐、艾伦布拉德利、倍福等。

HTML5 是 Web 技术的当前标准,所有主要浏览器都支持它。HTML5 的一个重点是实现丰富的 Web 应用程序。这是浏览器中交互式 Web 应用程序的演示,这些应用程序在设计和交互方面与已建立的桌面应用程序一样强大。

还有什么比将这两个广泛使用的标准结合起来更自然的呢,例如构建一个平台,实现 OPC UA 到 HTML5 自动映射?成为一个类似web SCADA 系统人机界面的OPCUA 客户端。实现"自动化(系统)的自动化(构建)" 的目标。这是一个令人兴奋的话题,同时面临不小的挑战。

2023年是AI 大语言模型的元年,AIGC必将在工业领域得到广泛的应用,甚至改变工业自动化的某些传统。其中一个重要的应用将是信息模型的生成,转换。研究OPCUA 2 HTML5 技术有助于实现OPCUA 2 HMI 的自动化。

基本思路

在OPCUA 信息模型中增加少量的HMI 信息,实现OPCUA 信息模型自动转换成基于HTML5的web 应用。是Web SCADA 类似的系统完全依赖OPCUA 模型生成。节省了大量系统组态的工程设计工作。

OPCUA 信息模型

OPC UA 模型的主要元素

  1. 对象(Object)
  2. 变量(Variable)
  3. 方法(Method)
  4. 告警(Event&Alarm)
  5. 视图(views)

上面的元素已经在许多文章中介绍过了,这里不在重复,唯有视图介绍的比较少。

在OPCUA 模型中,它的作用是在一个大的地址空间中,限制可见节点和引用。在一个大的OPCUA 服务器中,信息模型是相当复杂的,有大量的节点和引用。 并不是所有的节点都是观察者感兴趣。不同的观察者对不同的一组节点感兴趣。

views 是一个节点类型,它的内部设置了文件夹对象,并通过Organizes 引用指向信息模型中的对象,变量或者方法。

另一方面,views 对OPCUA 信息模型进一步组织。客户端能够利用views 来构建HMI架构。

物理设备的信息模型

简单的自动化控制系统有下列几种:

单一设备系统

一台设备构成的系统。

多设备系统

由多台设备构成的系统

分层系统

由多台设备构成,系统被分为多个子系统。形成分层结构。比如一个传送机构中包含了多个电机和传感器。

单一设备系统的信息模型

单一设备系统模型包括:

  • 特征
  • 操作
  • 告警、事件
  • HMI 信息
特征

为了能够在HMI 中明显地显示设备重要的特征,我们将设备的特征分为两类:

外部特征

外部特征是在HMI 页面的突出位置显示的特征。显示的方式可以是仪表盘,数显面板。外部特征被称为状态。

内部特征

更多设备的内部内部属性。包括数据的历史趋势图。

操作

操控面板,对应OPCUA 的方法(Method)。操作页面分为:

  • 按键面板
  • HTML5 已有大量的Button组件。
  • packML面板
  • PackML 最初是为包装行业制定的标准,但是目前已经远远地超出了PackML 的范畴,它俨然成为机器控制的通用接口标准。
  • 2020年11月11日,OPC 基金会发布了PackML 的配套规范(OPC 30050: PackML - Packaging Control)。意味着可以使用OPCUA 信息模型来构建PackML 模型了。基于OPCUA PackML 的模型可以对应HTML5 的PackML HMI 面板。
告警

对应OPCUA 的Alarm ,condition 和event 模型.

历史趋势

显示某些数据的历史演变趋势图。

HMI 信息

与HMI相关的某些信息。

多设备系统

多设备系统除了单一设备系统具有的信息模型之外,有一个系统视图(system views)。它是系统中设备和部件的布局图,使用图形符号表示部件,并且包含了表示工艺流程,逻辑关系的连线。

系统视图 可以使用图形工具制作的2D 图形,可以使用SVG,DXF 等格式。比如类似的P&ID 图形。点击系统视图中的图标:

  • 如果图标是一个多设备子系统,跳转到该子系统的系统视图页面
  • 如果是单一设备系统,跳转到该设备的外部特征显示页面

分层系统

分层系统中的每一个子系统有一个系统视图,分层显示。

HML5 页面结构

HTML5的主要页面

系统视图

系统视图可以是系统架构图,现场设备布置图,工艺流程图等图形,它们使用CAD 或者图形编辑工具绘制,格式可以为DXF,SVG 等结构化描述的图形。每个图符号能够实现点击选择。并且包含了一些元数据,可以实现元数据的显示。比如设备名称,外部特征,设备状态,告警等。

为了统一起见,单设备系统的系统视图可以是一个设备图形符号的系统视图。

状态监督

使用HTML5 仪表 UI ,例如JQwidgets

操作控制

按键面板。对应对象中包含的Method。

系统告警

使用HTML5 表格(jqxGrid )。

数据分析

显示系统/子系统的详细特征。并且可以显示数据的趋势信息。例如使用jqxChart。

总结

在设想的系统中,工程设计中只要绘制系统、子系统的系统视图。其它都通过标准的HTML5 UI元素实现。

实现"自动化的自动化",自动化人将自己从手劳作中解放出来!这是值得探索的课题。

相关推荐
酷酷的威朗普29 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
xcLeigh15 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
ZhaiMou1 天前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5
懒羊羊我小弟3 天前
CSS回顾-CSS选择器详解
前端·css·html·css3·html5
逸曦穆泽3 天前
html5 实现视频播放
前端·音视频·html5
xcLeigh3 天前
HTML5实现剪刀石头布小游戏(附源码)
前端·html·html5
Java Fans3 天前
从零开始打造个人博客:我的网页设计之旅
css·html5
贩卖纯净水.4 天前
HTML5和CSS3新增特性
前端·css3·html5
不爱说话郭德纲4 天前
理解 Object.create 并正确使用 Object.create
前端·javascript·vue.js·es6·html5
伏飞而行5 天前
七、利用CSS和多媒体美化页面的习题
前端·css·html5