基于图模型的HMI 设计

Posted 2021-08-29 姚家湾

 架构是骨骼，功能是肌肉，HMI 是皮肤。

  人机交互接口（HMI）是自动控制与物联网不可或缺的重要部分。在一个基于模型的物联网或者自动控制平台上如何构建HMI是一个富有挑战的课题。本文讨论如何使用图模型构建HMI模型，系统模型与HMI模型之间的相互操作。

  HMI 技术背景

1. HMI 基于图形化窗口技术，早期的HMI 大多数是基于Windows ，组态工具和HMI界面中的脚本程序都是Windows 编程语言，例如VB ，VC和C#，现在VB渐渐地退出了HMI舞台，大多数采纳C#，对于小型，低成本HMI 终端而言，曾经一度时期流行Arm +Windows/CE 的模式，后来转向的QT和android平台。后者使用java 编程。
2. 基于Web技术的HMI 逐渐开始流行，它们广泛使用html5/java script 作为脚本语言。HTML5 技术以及相当成熟，而且逐渐消除了浏览器之间的不兼容性。所以web HMI 技术也走向了使用化。出现了大量基于web技术的HMI 软件。
3. HMI 通常是一个独立于控制系统的软件，它们通过某种同行协议与控制系统交互，比如 OPC UA，MQTT，http协议。
4. 即便是采用了HTML 5技术，仍然摆脱不了少量编程的工作。这些语言并不是OT 工程师擅长和喜欢的。OT领域更倾向使用组态化HMI 工具。
5. HMI 工具软件与控制系统的接口广泛采纳了标准协议。不过HMI 的组态方式是各不相同的方法实现的。
6. 实现组态化，需要针对各种行业预先开发大量的可视化组件。而且在这些可视化组件没有开发出来之前，你的HMI 几乎没有人会采纳。这需要团队渡过一个漫长的死亡谷。

HMI 的建模

实现HMI 组态化的主要方法是建立HMI 的模型。有了模型就能够通过配置模型的属性来实现组态。HMI建模的方法可以有许多种，例如面向对象的类，自动控制中的功能块，OPC UA 模型等等。在我们的显示系统中，尝试采用与系统模型一样的建模方式-图模型。这样做的好处在于组态方法，概念，术语都系统组态方式相同。软件模块实现公用，学习曲线平坦。我们的尝试表明这是可行的。

HMI 单元的特点

1. HMI页面是一种分层结构，HMI有若干的的页面组成，页面中包含许多的UI单元，比如按键，文本框，图形等。也可以将若干的HMI 单元构建称为复合单元。
2. 每个HMI 元素都有一些属性可配置，它们包括 位置，大小，颜色，文字等等。
3. HMI 页面中可能具有多个类似的元素，例如，一个页面上有多个文本框，按键。

 HMI 的图模型

   从HMI 的上述特点可以看出，它们与系统中的图模型非常相似。我们完全可以使用系统的图模型来构建HMI 的模型。

例如下面是我们建立的一个HMI 的图模型。

​

​

 

模型中包括：

1. Index 主页面
   1. Textbox  Title标题
   2. TextBox : Alarm text告警文本
   3. TextBox CurrentText 电流参数文本
   4. InputBox  带按键的输入框 
   5. TextButton  带按键的输出框 
   6. PushSwitch   按键开关

在三个带有按键的节点，还有一个Function 子节点，定义了按键Click 时调用的方法。

​HMI 模型的优点

 使用系统信息模型构建HMI 模型的优点：

-能够自动生成HMI页面

-与系统模型设计使用同一个工具。软件实现的工作量减少了，使用更容易。

-便于HMI 和系统之间的交互。

底层UI组件（UI Widget）

HMI 最终需要通过HTML5 来呈现，它们就是UI 组件（也有人称为widget 小部件）。每一个 HMI 节点对应一个UI 组件。UI 组件是HTML5，SVG 图形，CSS和javascript 类组成的。

SVG

        SVG 称之为可伸缩的矢量图（Scalable Vector Graphics），它使用XML来描述图型。

在HTML5 网页中实现动画，绘图主要有两种方法，一种是利用canvas ,另一种就是使用SVG。

SVG 可以内嵌JavaScript 脚本实现动画图标。

相比其它的图像格式，SVG具有如下的特点：

• SVG文件是纯粹的XML， 可被非常多的工具读取和修改(比如记事本)。
• SVG 与JPEG 和GIF图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的，可在图像质量不下降的情况下被放大，可在任何的分辨率下被高质量地打印。
• SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)。
• SVG 可以与 Javascript 技术一起运行。
• SVG 是开放的标准。

下图是使用SVG 构建的SCADA 界面

java script 类封装

        在javascript 中很少使用类，不过在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

     在构建HMI 中， HMI页面上可能会使用多个相同类型的UI组件。所以进一步将UI组件封装成类。

一个文本框CLASS的例子：

class TextBox{

    constructor(WidgetInfor) {
      Option =WidgetInfor；
    this.Option = Option;
    $("#hmi").append("<div class=\\"hmi text-"+Option.Color+"\\" id=\\""+Option.Name+"\\">"+Option.Text+"</div>")
    $("#"+Option.Name).css({  
    "top":this.Option.Position.y+"px",
    "left":this.Option.Position.x+"px",
    "font-size":this.Option.FontSize,
    "align":this.Option.Align,
    "background-color":Option.BackgroundColor,
    "width":this.Option.Size.width+"px",
    "height":this.Option.Size.height+"px",
    "color":this.Option.Color
     }) 
    }
    PutAttribute(Name,Value){
      if (Name=="Text")
      $("#"+this.Option.Name).text(Value);
    }
  },

HMI 界面的图形化编辑工具

          使用图形化编译软件来编辑HMI界面，可以导入HMI 模板，填入各种属性参数，确定UI 图形在页面的位置，大小等等。这个HMI编辑程序也是基于HTML5 技术实现。

HMI 界面的自动生成

                一旦建立了HMI 界面之后，前端页面打开时，读取HMI 模型的属性。自动地构建HMI页面。HMI页面是由各个UI 组件构成。它们是通过HMI 类的实例化来实现的。

      对应的HMI 界面是这样的，有点丑，但是可以优化。 

HMI 组件和系统模型的交互

   信息模型几乎都是静止的数据结构。要通过信息读取，订阅/发布，事件通知等方式实现HMI 组件与系统模型的交互。 

组件通过后台访问系统模型。浏览器前端与后台服务器之间可以采用HTTP，websocket，socket.io等多种协议实现信息交换。在我们的实验系统中，使用socket .io实现双向消息通信，它是建立在web socket 之上的消息系统（HMI Message）。

被动型HMI组件和主动型HMI 组件

  

       只接收外部发生的信息的组件称为被动型组件，比如标题（Title），输出文本框（textbox），数据表格，图形曲线显示，仪表盘是被动型组件。

          向其它模型主动发送数据，调用其它节点的方法的组件都是主动型节点。例如按键，输入文本框，滑杆等组件都是主动型HMI组件。

HMI Message 消息格式

被动型组件接收消息

  被动型组件通过下面几种方式接收外部的数据：

订阅数据（subscribe）

订阅某个节点的属性，当该属性更新时，系统向该组件发送数据。

        在上面的例子中，一个TextBox和电表的电流建立订阅关系。订阅和事件通知需要HMI 控件的属性与目标节点建立订阅或者事件通知关系。这样在实现多变量HMI控件时，能够明确属性的映射关系。

例如下面的图中，一个曲线显示控件订阅了两个节点的属性。

订阅事件（Notify Event）

        与某个事件建立订阅关系，当事件发生时，系统向该组件发送数据。

方法的结果（Function Result）

        由主动型组件调用方法的结果调度到被动型组件中。 

主动型组件的消息发送

                主动型组件将主动向系统发送调用方法（Call Function） 调用的方法有两类：

第一类是调用系统API的方法，比如读取某一个节点的属性（getAttribute），读取历史数据等等。

常用的系统API

• getAttributes

         读取某个或者某一类节点的某个属性当前值

• getAttributesHistory

      读取某个或者某一类节点的某个属性某一时间段的历史数据

• putAttributes

      设置某个或者某一类节点的某个属性。

• waitEvent

     等待某个或者某一类节点产生的事件。

• notifyEvent

      向某个或者某一类节点发送的事件。

• publushData

     发布数据。

• subscribeData

    订阅数据。

另一类是调用某个节点的方法，比如调用motor 节点的 start 方法。

                例如， 我们要在HMI 面板上输入电机的速度。于是我们建立一个inputValue 的HMI控件，它内部包含了一个文本框TextBox 和一个按键（button）。当按键click时，调用putAttribute 方法。发送textbox的值到motor节点的Speed 属性。

 getAttribute 方法

     getAttribute 方法要相对复杂一点。涉及到如何返回，返回给HMI 控件的哪一个属性？所以在Message 中要确定属性的名称。

HMI和后端的消息格式（sendHMessage）：

   $("#"+this.Option.Name+"_btn").click(()=>{
      SendHMIMessage({
        Name:this.Option.Name,
        ID:this.Option.ID,
        Method:this.Option.Method,
        Arguments:[this.Option.Argument,"Text"]
      }) 
   });

结束语

        由于篇幅有限，我们只是粗略地讨论了如何采用系统统一建模方式来构建HMI模型的若干问题。这个演示系统目前可以Work 了。主要是用来检验图模型数据库的物联网系统的可行性，以及各种模型，模板，协议的设计与选择。感兴趣的朋友可以交流。      

   要真正实现产品化还有许多事情要做。