IEC61499の人間とコンピュータの相互作用機能を拡張します

IEC61499の人間とコンピュータの相互作用機能を拡張します

IEC61499は、分散型産業用測定および制御システムの機能ブロック標準であり、機能図を使用して分散型制御アプリケーションを実装し、ソフトウェアのモジュール化とグラフィカルプログラミングを実現できます。

機能ブロックプログラミングにより、分散システムの設計、展開、および監視の効率が向上します。残念ながら、IEC61499標準は、ヒューマンコンピュータインタラクション（webHMI）機能ブロックをサポートしていません。

産業用制御システムのヒューマンコンピュータインタラクションインターフェイスソフトウェアは、大きく4つのタイプに分けられます。

• Windowsデスクトップシステムに基づいています。これは、Windowsデスクトップシステムに基づくプロセス制御やCNCコントローラーなど、過去の産業用自動化SCADAシステムで一般的に使用されている方法です。C＃、C ++プログラミング言語を使用します。
• android OSに基づくUIは、小型のモバイルデバイスのユーザーインターフェイスに適しています。現在、車の中央制御パネルなど、AndroidOSを使用する小さなコントローラーも多数あります。Javaプログラミング言語の使用
• QT C ++ UIテクノロジーに基づく小型デバイスは、C ++プログラミング言語に制限されているQTC ++ UIを使用します。
• WebベースのUI。これは、クロスプラットフォームのWebベースのUIテクノロジーです。パフォーマンス能力は非常に強力です。

最初の3つのテクノロジーは、完全にオープンなクロスプラットフォームテクノロジーではありません。制御システムのUIテクノロジーとしてTHML5を使用することをお勧めします。

このブログ投稿では、IEC61499アプリケーションのヒューマンコンピュータインタラクションインターフェイスを実現する方法を紹介し、IEC61499機能ブロック設計ツールを使用してwebHMI機能ブロックを構築します。

 

過去の試み

ファンクションブロックの本質は、ソフトウェアモジュールをグラフィカルな方法で記述する方法です。これは、オブジェクト指向プログラミングのクラスとインスタンスに対応します。したがって、機能ブロックを使用して、Webフロントエンド上のHTML5 / CSS / jsソフトウェアモジュールを含むさまざまなソフトウェアオブジェクトを記述することができます。実際、数年前、私たちはグラフィカルな方法を使用して、HTML5 / JavaScriptテクノロジーに基づくフロントエンドソフトウェアを記述しようとしました。具体的なアプローチは、一般的なHTML5コンポーネント（ボタン、入力ボックス、グラフィックディスプレイ、スライダー、LEDインジケーターなど）を標準化および標準化し、JavaScriptクラスを使用してこれらのコンポーネントを定義することです。この目的のために、C＃言語を使用してグラフィック編集ソフトウェアとNodeJS JavaScriptランタイムを作成し、グラフィック編集ソフトウェアを使用してグラフィックベースのアプリケーションを設計します。設計されたグラフィックネットワークは、NodeJSのJavaScriptのランタイムによって解釈および実行されます。

 

 当時、これらの実験は主にnodeJSベースのIoTアプリケーションの開発を目的としていました。IEC61499規格に目を向けると、以前の実験プロジェクトをIEC61499互換のWebHMI設計に変換しました。

IEC61499 WebHMIの実装

基本構造

 

webHMIを使用するIEC61499アプリケーションは、AppとwebHMIAppの2つのアプリで構成されています。アプリは、IEC611499機器のフォルテで実行されます。追加のWebサーバーサービスがIEC61499デバイスで実行されます。この実験プロジェクトでは、Golangで書かれたアプリケーションです。以下の機能があります。

• Webサーバー
• XML形式のロードファイルをFBNetwork.jsonファイルに変換します。WebAPIを介してフロントエンドWebページに配布されます。
•  IEC611499アプリとwebHMIアプリ間のプロトコル変換。

Webページのフロントエンドには、ランタイムrunningtime.jsとFBLib.jsが含まれています。FBlib.jsはwebHMI関数ブロックライブラリです。

技術特性

• 4DIAC-IDEを使用して、webHMI機能ブロックとアプリケーションを開発します。
•  Golangで書かれたWebサーバー
• 各webHMI機能ブロックに対応して、javascirptHMI機能ブロックライブラリを確立します
• JavaScriptランタイムを記述して、関数ブロックネットワークをロードし、JavaScriptオブジェクトとHTML5コントロールを構築します。機能ブロックネットワークを実行します。
• WebデザインのフロントエンドフレームワークとしてBootstrapを使用します。

 

webHMI機能ブロック

既製のIEC61499開発ツール4DIAC-IDEを使用して、webHMI機能ブロックタイプおよびWebHMI機能ブロックアプリケーションを設計できます。WebHMIの機能ブロックアプリケーションは、WebフロントエンドJavaScriptで実行されます。関数ブロックの内部アルゴリズムと状態遷移は、JavaScriptクラスに実装されています。したがって、4DIAC-IDEで設計されたwebHMI機能ブロックは比較的単純です。入力と出力のイベントとデータを定義するだけです。内部ECCグラフとアルゴリズムを定義する必要はありません。

機能ブロックタイプ

例から、Webページ上のボタンとLEDインジケータの機能ブロックネットワークを設計する方法を説明します。

 

 

   webHMIアプリケーションは、webHMI機能ブロックのネットワークで構成されています。webHMIアプリケーションが完了したら、app.loadファイルをエクスポートします。XML形式のドキュメントです。

JavaScriptベースのwebHMIクラスライブラリ

JavaScriptライブラリ

上記の例では、webHMI.jsで2つのJavaScriptクラスButton_1とIndicatorを定義しています。

JavaScriptは基本的にオブジェクト指向のプログラミング言語ではありませんが、ES6Javascriptはクラスを定義する方法を提供します。例えば：

 クラスを使用して、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“）

ここで、ボタンの色は、ブートストラップのbtn-infoクラス属性を使用します。

webHMI関数ブロックのHTML要素

webHMI関数ブロックは、ボタン、グラフィック、入力テキストボックス、ダッシュボードなどのHTML5要素をWebページに表示します。市場には多くのHTMLUIコントロールがあります。jQWidgets、highcharts、その他のUIライブラリなど。簡単にするために、この実験ではブートストラップアーキテクチャを使用します。

ブートストラップグリッドシステム

 

Webページ上の複数のUIコントロールのレイアウトを自動化する方法は課題です。自動制御されたページは、単一のページを使用する傾向があり、1つのページにより多くのコントロールを表示します。私たちの実験プロジェクトでは、ブートストラップのグリッド構造を使用してUIコントロールをレイアウトします。ブートストラップのグリッドシステムでは、12列に分割されています。次の4つのタイプに分けることができます

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機能ブロックの例です。

• 題名
• テキスト
• 入力ボックス（入力）
• ボタン
• ボタンパネル（ボタンパネル）
•   グラフパネル
•   メッセージパネル（メッセージパネル）
•   デジタル表示パネル（数値表示パネル）
• テーブルパネル
• 基本機能ブロック

イベント、数学、IEC61131-3、ネット、その他の機能ブロックなど、webHMIアプリケーションに一般的な機能を実装するため。一般的に使用される機能ブロックのライブラリをwebHMIライブラリに追加できます。

公式バージョンでは、より豊富なwebHMI関数ブロックライブラリを開発でき、JQWigetsやhighchartsなどのより豊富なHTMLUIコントロールを適用することもできます。

単純なjavaScriptランタイムの実装

実行時の主なデータ構造

テーブルエントリに参加

connect_item = {

Source = FB.EventOut 

宛先= 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）

イベント処理はプッシュ方式を採用しており、ファンクションブロックが出力イベントを書き込むと、すべての接続が照会され、ソースがイベントであるファンクションブロックの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を拡張することが可能であり、HMIユーザーインターフェイスソフトウェアは、IEC61499機能ブロックと同様の方法で設計できます。

 ランタイムモードでは、IEC61499開発ツール4DIAC-IDEおよびJavaScriptライブラリを使用して、グラフィカルプログラム編集ツールの開発を排除し、制御エンジニアがIEC61499機能ブロックを使用して同様の方法を適用してHMIを設計できるようにします。これは、両方の長所を備えた良いことです。

   私たちの実験システムはこれを証明しています。