扩展IEC61499 的人机交互功能
IEC61499 是分布式工业测量和控制系统的功能块标准，它可以使用功能图来实现分布式控制应用程序，实现了软件的模块化，图形化编程。
功能块编程提高了分布式系统设计，部署和监控的效率。不过令人遗憾的是IEC61499 标准并没有支持人机交互（webHMI）的功能块。
工业控制系统的人机交互接口软件大致分为四种：
- 基于Windows 桌面系统。这是过去工业自动化SCADA系统中 常用的方式，例如过程控制和CNC 控制器，都是采用基于Windows 桌面系统。采用C#，C++ 程序设计语言。
- 基于android OS 的UI，android OS 为基础的UI 适合小型移动设备的用户界面。目前也有许多小型控制器采用android OS ，例如汽车中控面板。采用了java 程序设计语言
- 基于QT C++ UI技术更小型的设备采用了QT C++ 的UI，它仅限于C++程序设计语言。
- 基于web 的UI。这是一种跨平台，网络型UI技术。表现能力非常强大。
前三种技术并不是完全开放的，跨平台技术。我们更倾向使用THML5 作为控制系统的UI技术。
在本博文中介绍我们如何实现IEC61499 应用的人机交互界面，以及使用IEC61499 功能块设计工具来构建webHMI功能块。
过去的尝试
功能块的本质是一种采用图形化方式来描述软件模块的方式。它与面向对象程序设计中的类和实例相对应。因此，我们可以采用功能块方式来描述各种软件对象，其中也包括web 前端的HTML5/CSS/js 软件模块。事实上，在几年前我们曾经尝试使用图形化的方式来描述基于HTML5/JavaScript 技术的前端软件。具体的做法是将HTML5 的常用组件（诸如 按键，输入框，图型显示，滑杆，LED 指示灯等）规范和标准化，使用JavaScript中的类（class）来定义这些组件。为此，我们使用C# 语言编写了一个图形编辑软件和一个NodeJS的JavaScript 运行时，使用图形编辑软件来设计基于图形化的应用程序。将设计的图形网络在NodeJS中由JavaScript的运行时解释执行。
当时这些实验主要是为了开发基于nodeJS的物联网应用程序的开发。当我们的视线转向IEC61499 标准的时候，我们将以前的实验项目改造成为IEC61499 兼容的Web HMI 设计。
IEC61499 web HMI 的实现
基本架构
带有webHMI 的IEC61499 应用由App和webHMI App 两个App构成。App 在IEC611499 设备的Forte 中运行。IEC61499 设备中额外运行一个web server 服务。在本实验项目中是Golang 编写的应用程序。它具有下面几部分功能。
- 一个web server
- 将XML格式的load 文件转换成为FBNetwork.json 文件。通过web API 下发到前端网页中。
- IEC611499 App和webHMI app 的协议转换。
在网页前端包含了一个运行时runningtime.js和FBLib.js.其中FBlib.js 是webHMI功能块类库。
技术特点
- 使用4DIAC-IDE 开发webHMI 的功能块和应用.
- 使用Golang 编写了Web Server
- 对应每个webHMI功能块，建立javascirpt HMI 功能块类库
- 编写JavaScript runtime 装入功能块网络，建立JavaScript对象和HTML5 控件。运行功能块网络。
- 使用Bootstrap 作为网页设计的前端框架。
webHMI 功能块
可以使用现成的IEC61499 的开发工具4DIAC-IDE来设计webHMI 的功能块类型和WebHMI功能块应用。WebHMI 的功能块应用是在web 前端JavaScript 运行的。功能块的额内部算法和状态转换是由JavaScript类中实现的。因此，在4DIAC-IDE 中设计的webHMI 功能块相对比较简单。只要定义输入输出事件和数据就可以了。不需要定义内部ECC图和算法。
功能块类型
我们从一个实例来说明，如何在网页上设计一个按键和LED 指示灯的功能块网络。
webHMI 应用由webHMI 功能块网络构成。webHMI 应用完成后，导出app.load 文件。它是一个XML 格式的文档。
基于JavaScript的webHMI类库
JavaScript 类库
在上面的例子中，我们在webHMI.js 中定义了两个JavaScript类 Button_1和Indicator
JavaScript基本上并不是一个面向对象的程序设计语言，不过在ES6 Javascript 中提供了定义类的方式。例如：
我们使用class 来定义webHMI 的功能块。
class User {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(this.name);
}
}实例
使用JavaScript的类来实现HMI 功能块。例如
class Button_1 {
constructor(Name,Value,id,Text,Color) {
var b= $('<button id="'+id+'" class="btn btn-'+Color+'" onclick="FBList[\''+Name+'\'].Click()">'+Text+'</button>');
$("#panel").append(b);
this.Name=Name;
this.Value = Value;
console.log("b:value"+this.Value)
}
Click (){
this.Value=!this.Value;
WriteEventOut(this.Name+".Click");
}
getDataOut(FBDataOut) {
console.log(FBDataOut) ;
if (FBDataOut=="Status") {
console.log("Status:"+this.Value);
return this.Value;
}
}
}在构造函数中实现HTML 元素。并且实现了事件处理程序和getDataOut方法。
类的使用
btn=new Button(“button”,1,id,”myButton”,”info“)
在这里，按键的Color 使用了bootstrap 的btn-info 类属性。
webHMI功能块的HTML元素
webHMI功能块在web网页上呈现HTML5的元素，比如按键，图形，输入文本框，仪表盘等等。市面上有许多的HTML UI控件可供使用。比如jQWidgets，highcharts等UI库。为了简单起见，本实验采用bootstrap 架构。
bootstrap栅格系统
多个UI控件如何在Web网页上自动化布局是一个挑战。自动控制的页面更倾向采用单页面，并且在一个页面中显示更多的控件。在我们的实验项目中，采用bootstrap的格栅结构来布局UI控件。在bootstrap 的格栅系统中，分成为12列。可分为下列四种类型
在webHMI 功能块中指定功能块的大小.和在页面中的排列顺序。
。
| .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| col-xs-12 |
col-sm-12 |
col-md-12 |
.col-lg-12 |
| col-xs-8 |
col-sm-8 |
col-md-8 |
col-lg-8 |
| col-xs-6 |
col-sm-6 |
col-md-6 |
col-lg-6 |
| col-xs-4 |
col-sm-4 |
col-md-4 |
col-lg-4 |
webHMI 的UI元素插入到web 页面 。
webHMI 功能块库
任何一个广受欢迎的软件都具有强大的功能和完美的细节。要设计一个好的webHMI 功能块库需要工业控制的行业背景以及UI的深刻理解。在我们的实验系统中，只是实现了极少的HMI 功能块。实用化HMI 功能块库需要非常的丰富，而且不断地扩展。下面是我们实验系统中的一些HMI 功能块例子。
- 标题（title）
- 文本（Text）
- 输入框（Input）
- 按键（button）
- 按键面板 （button Panel）
- 图形面板 （graph Panel）
- 消息面板（message Panel）
- 数显面板（numerical display Panel）
- 表单面板（table Panel）
- 基本功能块（basic function block）
为了在webHMI 应用中实现常见功能，比如event，Math，IEC61131-3，net等功能块。可以在webHMI库中添加常用的功能块库。
正式版本可以开发更丰富的webHMI 功能块库，也可以应用更丰富的HTML UI控件，比如JQWigets，highcharts 。
简单javaScript运行时的实现
运行时的主要数据结构
连接表项
connect_item={
Source=FB.EventOut
Destination=FB.EventIn
}
或者数据连接
connect_item={
Source=FB.DataOut
Destination=FB.DataIn
}
连接列表（eventList）
connectList是connect_item 的数组。
功能块表（FBList）
所有功能块对象的列表。可以根据功能块实例的名称查询相应类的入口。
FBList=Array[FBName,FBClass]
- -新建FBClass 的方法
FBList[OBJName]=new Button_1(OBJName,0,id,params["Text"],params["Color"]);
- 应用FBClass 的方法
-FBList[“button”].Click()
公共函数
获取功能块网络表getFBNjson()
var connectList =new Array();
var FBList=new Array()
function getFNBJson(){
$.ajax({
type : "GET",
url : "/getFBNetwork",
contentType : "application/json",
dataType : "json",
complete:function(data) {
var id=0;
var FBNetwork= data.responseJSON;
FBNetwork.FBNetwork.forEach(element => {
var OBJName=element.Name;
var FBType= element.Type;
var params=new Array();
element.SourceList.forEach(p=>{
var value=p.Destination.split(".",2);
params[value[1]]=p.Source;
});
console.log(params)
switch (FBType) {
case "button_1":{
FBList[OBJName]=new Button_1(OBJName,0,id,params["Text"],params["Color"]);
id=id+1;
break;
}
case "indicator":{
FBList[OBJName]=new Indicator(OBJName,0,id,params["Text"],params["Color"]);
break;
}
}
});
FBNetwork.ConnectionList.forEach(conn=>{
connectList.push(conn);
})
}
})
}写输出事件（WriteEventOut）
事件处理采取了推送的方式，当一个功能块写一个输出事件时，查询所有的connect，执行Source 为该事件的功能块的eventActive函数。
function WriteEventOut(FB_EventOut) {
// console.log(FB_EventOut);
connectList.forEach(element => {
if (element.Source==FB_EventOut) {
var splitted= element.Destination.split(".",2);
// console.log(splitted)
FBList[splitted[0]].eventActive(splitted[1])
}
});
}读数据输入（ReadDataIn）
查询connectlist 表，找出数据源的功能块类，调用getDataOut方法。
function ReadDataIn(FB_DataIn) {
connectList.forEach(element => {
if (element.Destination==FB_DataIn) {
var splitted= element.Source.split(".",2);
result= FBList[splitted[0]].getDataOut(splitted[1]);
}
});
return result;
}
结论
使用基于HTML5技术的web服务器来扩展IEC61499 自动控制系统的HMI 是可行的，并且可以使用类似于IEC61499 功能块类似的方式来设计HMI 用户交互界面软件。
采用IEC61499 开发工具4DIAC-IDE 和JavaScript 类库，运行时的方式，省略了开发基于图形化程序编辑工具的开发，而且可以使控制工程师使用IEC61499 功能块应用类似的方式来设计HMI。这是一个两全其美的好事情。
我们的实验系统证明了这一点。