推奨開発プロセス

テンプレートとしてのデモコントロール

HTML5 API サンプルをコンピューターにダウンロードします。次に、デモではエレメントラッパーを使ってコントロールします JavaScript ご利用いただけます。

のコピーを使用することをお勧めします ElementWrapper.js HTML5 の例をテンプレートとして使用し、HTML5 コントロールに名前と機能を適合させます。

詳細については、「」を参照してください。例:HTML5-API

HTML5 コントロールの機能のテスト

最初に HTML デモページで HTML5 コントロールをテストすることをお勧めします。HTML5 コントロールは、何も表示されなくてもブラウザに表示できます ElementWrapper スクリプトと機能をテストできます。作成を開始します JavaScript ファイル (ElementWrapper.js) 機能が正常にテストされた後に限ります。

注記

にとって CODESYS Visualization バージョン 4.8.0.0 以降では、JS ファイル ElementWrapper 新しい HTML5 コントロールが作成されると自動的に作成されます。含まれているのはフレームワークだけです。要素固有の機能は次のステップで追加する必要があります

HTML ページを作成する TestControl.html に追加インストールせずにスクリプトをテストするには CODESYS。

HTML ページの構造

<!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

追加ファイルを含める (JavaScript このテストページに HTML5 コントロール用のファイルまたはスタイルシートファイル。これらのファイルは、レイアウトや追加機能を提供するファイルです
これは、ソースを利用できるようにするためのスクリプトのインポートに相当します。
コード例
```
<link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>
```
これは次の行の上に挿入できます。
```
<script type="text/javascript" src="ElementWrapper.js"> 
 </script> 
```
要素を表示 (なし) ElementWrapper) をブラウザで開き、機能をテストします。
テストが正常に完了したら、作成を開始できます JavaScript ファイル (ElementWrapper.js)。

の作成 `ElementWrapper`

をプログラムする ElementWrapper スクリプト。

サンプルコードでは、テキストと色の付いたボタンを作成します。HTML5 コントロールはフレームワークによって作成されたスペースを完全に埋めることができるため、サイズは 100% に設定されています。さらに、 IFrame HTML5 コントロールごとに作成されます。そのため、HTML5 コントロールをに直接追加できます。 document.body。

サンプルコード

var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

HTML ページを使用して HTML5 コントロールをインスタンス化して表示できます。 Test.html そして ElementWrapper スクリプト。
で個々のメソッドをテストすることもできます ElementWrapper を使う loop タイマーを介して起動される関数。
ザル ElementWrapper スクリプトは機能を提供します。

HTML5 コントロールの作成

これで、HTML5 コントロールを作成できます。これには HTML5 コントロールエディターが役立ちます
1. で一般的なタブで新しい要素を設定します。
2. でコントロールプロパティタブで目的のプロパティを指定します。
3. タイプの新しいプロパティを作成する [変数]。メソッドコール列に、目的のメソッド名を指定します。
  これが変数がコントロールのメソッドに転送される方法です。
  ヒント
  機能に慣れるには、HTML5 コントロールエディターで例を開くと便利です。
  詳細については、以下を参照してください。参照：HTML5コントロールエディター
4. でローカリゼーションタブで、コントロールのインターフェーステキストをさまざまな言語にローカライズします。
  テキストはローカライズされています。エレメントはさまざまな言語にローカライズできます
5. 設定をコントロール名で保存し、にインストールします CODESYS ビジュアライゼーション要素リポジトリ。
  これを行うには、コマンドアイコン。
  詳細については、以下を参照してください。 HTML5コントロールの最初のインストール
HTML5 コントロールをビジュアライゼーションで使用できるようになりました。

HTML5 コントロールを使用する

を作成 CODESYS ビジュアライゼーションを含むプロジェクトを作成し、新しい要素をビジュアライゼーションエディターにドラッグします。
要素のプロパティを設定し、新しいコントロールに表示する変数を割り当てます。
アプリケーションをコンパイルして起動します。そして、WebVisu でビジュアライゼーションを開始します
オンラインモードでビジュアライゼーションを監視できます。

HTML5 コントロールのデバッグ

次のセクションでは、HTML5 コントロールにブラウザーでエラーがないかどうかを確認する方法について説明します。

この機能を有効にするには、デバッグパラメータを指定して URL を呼び出す必要があります DebugHTML5=true:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

手順. ブラウザでのデバッグ

Right-click the page in the browser. Select the "Inspect" option in the context menu which opens.
ザル DevTools ブラウザページが開きます。
をクリックします [ソース] タブ。
Sources tタブには、ファイル elementwrapper<index>.jsがあるツリー構造が表示されます。インデックスが自動的にファイル名に付加され、コントローラ上での一意性を確保します。.
このファイルは、ランタイムシステムの次の場所に保存されます。 PlcLogic/visu フォルダー。
バグ修正を実装してテストする最も簡単な方法は、ランタイムシステムに保存されているファイルに必要な変更を加えることです。
1. を変更 ElementWrapper デバッグ用ファイル。
2. 選択してください [リロード] ブラウザーのオプション。
  エレメントが更新され、テストできます。
3. ヒント
  ローカルで始めるのがおすすめ CODESYS Control ランタイムとして。ランタイムはユーザーのコンピューター上でローカルに実行されます。これにより、エクスプローラーでランタイムシステムフォルダーを開き、外部のテキストエディターで JavaScript を開いて編集することができます。
  elementwrapper<index>.js
4. ブラウザで機能をデバッグするには、コンストラクタまたはメソッドにブレークポイントを設定します。このためのデバッグオプションについてはよく理解しておく必要があります
エラーが特定され、修正されました。テスト要素が正しく動作するようになりました
テストJavaScriptの elementwrapper<index>.js 変更を元の ElementWrapper.js ファイルに移す。
HTML5 コントロールを再インストールします。
変更が有効です。要素はそれに応じて動作します

例

以下のリンク先のページには、HTML5 コントロールに関連するさまざまな機能の例が掲載されています。

注記

サンプルプロジェクト: HTML5 API

使用される API 呼び出しについては、次の開発者向けリファレンスで説明されています。

参照：HTML5コントロールの開発

このセクションの内容: