Zenn
💭

CODESYS Example Project を調べてみた #4

2024/11/30に公開
codesys
tech

CODESYS HTML5 Controlを学ぶ

今回は、CODESYS HTML5 Controlの使い方、開発方法をExample Projectから学んでいきたいと思います。CODESYS HTML5 Controlは、独自のUIアイテムをJavaScriptで実装できる機能のようです。今回の調査にあたって、以下の資料も参考にしました。

セットアップ

以下の手順でセットアップできます。ただし、今回はDevice Updateを実行しただけではビルドできず、不足しているライブラリの追加ダウンロード（ERRメッセージ横のダウンロードボタン押下）が必要でした。

  1. プロジェクトコードをダウンロード
  2. .projectをダウンロード
  3. DeviceをUpdate
  4. 不足ライブラリのダウンロード（＃１を参照）

ここで、プロジェクト中のVisualizationを開くと、Errorが表示されました。HTML5 Controlで作成したアイテムを使うには別途インストールが必要でした。ここで少しつまずいたのですが、アイテムをインストールするには、開発環境でProjectをすべて閉じた状態である必要がありました。Example Projectを開いたままだと、「Visual Element Repository」の選択肢が表示されません。

  1. 開いているプロジェクトを閉じる
  2. Tool > Visual Element Repositoryをクリック
  3. Installしたいファイル(.xml)を選択

Visual Elementをインストールした後は、Visualizationを選択したときにSVGイメージが表示されるようになりました。

Example Projectの動作

Example Projectには、Main画面と個別のHTML5 Controlのサンプル画面x8種類で構成されています。サンプル画面はあまり複雑なことはできず、テキスト入力フォーム・テーブル・コンボボックスのへ数値や文字が入力ができたり、バーゲージやドーナツゲージがスライドバーに対応して動くようなものでした。実際の画面は以下のような見た目でした。実行周期の設定のせいか、あまりぬるぬる動きませんでした。

Visu_DemoDonutGauge
Visu_DemoTable

Example Projectのコード

Exampleコードのメイン処理PLC_PRG(PRG)は内部で初期化するのみでした。
Visualizationの画面設定について、DonutGaugeを確認するとType of elementにHTML5DemoDonutGaugeが設定されていました。Value, TargetValueプロパティがあり、PLC_PRG中の変数に紐づけられていました。
一度アイテムをつくれば、他の標準で使用できるアイテムと同様な使い勝手のようです。

HTML5 Controlのコード

Example Project内のファイル構成は以下のようにUIアイテムごとに分かれていました。.xmlファイル、ElementImage.svg、ElementWrapper.jsはすべてのUIアイテムで共通で、外部ライブラリを使いたい場合は、min.jsをダウンロードしているようです。インターネットやLAN内のコンテンツサーバにアクセスできる環境であればローカルに無くてもよいのかもしれません。

HTHM5_Example/
│   HTML5_DemoControls.project
│
├───Html5DemoBarGauge
│       BarGauge.html5control.xml
│       BarGauge.js
│       d3.v4.min.js
│       ElementWrapper.js
│
├───HTML5DemoButton
│       HTML5DemoButton.html5control.xml
│       ElementWrapper.js
│       ButtonStyle.css
│
...

## 開発手順

　開発で手順については、CODESYS Online Helpが参考になります。基本は以下の手順で進めます。

 1. `ElementWrapper.js`ファイルを作成する。
 2. CSS, JS, SVGなどの要素実行に必要なファイルを準備する。
 3. `ElementImage.svg`にツールボックスに表示させる要素画像を作成する。
 4. CODESYS HTML5 Control Editorで`.html5control.xml`を作成する。
 5. HTML5 Control PropertyとCODESYS Visualization Propertyのマッピングを作成する。
 6. 要素をインストールする。
 7. 要素に署名する。（署名無しの場合、コードGenerate時にWarningが出るそうです。）
 
HTLM5 Control EditorでDemoDonutGaugeのXMLファイルを開くと以下の設定が確認できます。
![HTML5 Control Editor General](https://storage.googleapis.com/zenn-user-upload/900d723a2858-20241130.png)

![HTML5 Control Editor Control Properties](https://storage.googleapis.com/zenn-user-upload/8d14d5149ebd-20241130.png)

　Control Propertyでは、例えばBar Foregroud Propertyがあり、SetForegroundColorメソッドに関連図けられているようです。JSファイルで対応部分を探すと以下の該当部分がありました。

```JavaScript: DonutGauge.js
    DonutGauge.prototype.SetForegroundColor = function (col) {
        this.BarForegroundColor = col;
    };
ElementWrapper.js
    SetForegroundColor: function(value, type, typeid){
		console.log("SetForegroundColor:" + value +"--")
    if (typeof this.d != "undefined")
    this.d.SetForegroundColor(value);  
    },

this.dがDonutGaugeのインスタンスで、DonutGauge.js側のSetForegroundColorを読んでいました。ほかのメソッドも同様な構造を持っているようです。

今回の学びと気づき

  • リッチなUIを作ろうとおもうとHTML5 Control Editorのような開発フレームワークがあると便利。
  • CallMethodが実際に呼ばれるタイミングはよくわからなかった。多分Property Typeで指定されているInitializeやUpdateとCODESYS内のEventが対応していると思う。

まとめ

  • HTML5 Control Editorを使ったUIアイテムの開発手順はCODESYS Online Helpを読む。
  • 開発したUIアイテムはインストールして利用する。

Discussion