Skip to main content

基本的な手順

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

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

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

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

自分で開発した HTML5 コントロールまたは外部ソースから取得した HTML5 コントロールを統合できます CODESYS プログラミングシステム。そのためには、以下のように進めてください。

手順. 準備

  1. を作成 JavaScript という名前のファイル ElementWrapper.js HTML5 コントロール用です。または、HTML5 API サンプルからエレメントラッパーファイル (たとえば、の JS ファイル) をコピーします HTML5DemoButton (要素)。

  2. JS ファイル内のラッパーオブジェクトの名前を変更します。名前はあらかじめ定義されており、次のような要素名で構成されています ElementWrapper それに追加しました。

    重要

    ファイル名は常に ElementWrapper.js。そして、実行時にフレームワークによって生成されるラッパーオブジェクト呼び出しには、次のロジックに従って要素に割り当てられる名前が必要です

    <element name>ElementWrapper

    要素の JS ファイルでは、ラッパーオブジェクトの名前が新しいコントロールと一致します。

    次のコードフラグメントは、これを示しています HTML5DemoButton コントロール:

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. エレメントの実行に必要なすべてのファイルを指定します。これらはスタイルシートファイル (CSS) でもかまいません JavaScript ファイル (JS) または画像ファイル (SVG)。

  4. エレメントイメージの作成 (ElementImage.svg)。インストール後、エレメントはに表示されます。 ビジュアライゼーションツールボックス 表示。

手順. プログラミングシステムへの統合

  1. の CODESYS、XML ファイルを作成します (.html5control.xml) 一般情報付き。

    ヒント

    HTML5 コントロールエディタのオプションについては、「」の章で説明しています。HTML5コントロールエディター「。

  2. HTML5 コントロールのプロパティの、へのマッピングを作成します。 CODESYS ビジュアライゼーションエレメントのプロパティ。

  3. インターフェーステキストをローカライズします。

  4. エレメントを取り付けます。

  5. 要素に署名します。

ヒント

ステップバイステップの指示に従ってください 推奨開発プロセス デバッグに関する詳細な推奨事項が記載されています。

このセクションの内容: