Skip to main content

視覚化の参照

1つの視覚化で複数の視覚化を表示する

重要

視覚化は、任意の深さにネストすることができます。フレームを使用するには任意の視覚化に切り替えるフレーム選択タイプは問題なく、フレーム参照される視覚化は 21 個を超えてはなりません。

メインの視覚化内で他の視覚化を参照するには、フレームまたはタブ要素を選択し、要素のウィンドウ ペインに表示します。

の場合、フレーム要素を使用すると、どの視覚エフェクトをどのタイミングで表示するかを自由にプログラムできます。一つの方法としては、フレーム要素は、その値に応じて自動的にスイッチをトリガーします。また、ユーザー入力後に入力アクションをトリガーし、視覚エフェクトを切り替える追加のコントロールをプログラムすることもできます。

さらに、タブ視覚化を参照する。タブ要素は、視覚化スイッチの事前設定されたコントロールを提供します。

詳細については、以下を参照してください。ユーザー入力の構成

メインの視覚化では、フレーム要素は実行時に参照されたフレームの視覚化の1つを表示します。ユーザーはラジオボタンフレーム内に表示される要素。

手順. ラジオボタン要素を使用してフレームの視覚化を接続する
  1. 新しい標準プロジェクトを作成するCODESYS

  2. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  3. の中で視覚化を追加ダイアログで名前を指定VisuMainクリック追加ダイアログを閉じます。

  4. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  5. の中で視覚化を追加ダイアログで名前を指定Visu1クリック追加ダイアログを閉じます。

  6. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  7. の中で視覚化を追加ダイアログで名前を指定Visu2クリック追加ダイアログを閉じます。

  8. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  9. の中で視覚化を追加ダイアログで名前を指定Visu3クリック追加ダイアログを閉じます。

    メインの視覚化に加えて、さらに 3 つの視覚化オブジェクトがあります。

  10. 開くVisu1物体。

  11. の中で可視化ツールボックス、の基本カテゴリを選択してドラッグし、ラジオボタン視覚化エディターに要素を追加します。

    そのプロパティ要素のビューが開きます。

  12. 四角形のプロパティを次のように設定します。

    • テキスト文章財産:Visu1

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:ライトグレー

    _visu_1_for_referencing.png
  13. オブジェクトをプログラムするVisu2それに応じて。

    . 長方形のプロパティ:
    • テキスト文章財産:Visu2

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:グレー

  14. オブジェクトをプログラムするVisu3それに応じて。

    . 長方形のプロパティ:
    • テキスト文章財産:Visu3

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:ダークグレー

  15. 開くVisuMain物体。

  16. の中で可視化ツールボックス、の基本カテゴリを選択してドラッグし、フレーム視覚化エディターに要素を追加します。

    そのフレーム構成ダイアログが開きます。

  17. の中で利用可能な視覚化窓エリア、視覚化名別タブでオブジェクトを選択Visu1。 で選択された視覚化、 クリック追加

  18. 次にオブジェクトを選択しますVisu2クリック追加選択された視覚化

  19. 次にオブジェクトを選択しますVisu3クリック追加選択された視覚化

  20. クリックわかりましたダイアログを閉じます。

    さて、フレーム要素は選択された3つの視覚化を参照します。参照(1)は、参考文献要素プロパティのフレーム要素。視覚化名に加えて、対応するインデックス値 (2) も表示されます。

    _visu_main_with_properties.png

    注: をクリックするとダイアログが開きます。設定値フィールドのボタン参考文献プロパティ。(3)を参照。選択された視覚化リスト。

  21. の中で可視化ツールボックス、の共通コントロールカテゴリーをドラッグしてラジオボタン視覚化エディターに要素を追加します。

    そのプロパティ要素のビューが開きます。

  22. の中でラジオボタンの設定ラジオボタン新規作成ボタン。

    この要素には選択できるスイッチが 3 つあります。

  23. ラジオ ボタンのプロパティを次のように構成します。

    • ラジオボタンの設定エリア [0]文章財産:Visu1

    • ラジオボタンの設定エリア [1]文章財産:Visu2

    • ラジオボタンの設定エリア [2]文章財産:Visu3

    _visu_main_for_referencing.png
  24. の中でPLC_PRGプログラムでは、アクティブな視覚化の数を表すローカル変数を宣言します。

                                        VAR
                                        iActiveVisu : INT; // Index of visu activated by the user
                                        END_VAR
                                    
  25. 選択してくださいラジオボタン要素の値フィールドと変数プロパティで、_cds_icon_three_dots.pngボタン。

  26. の中で入力アシスタントダイアログで、最近宣言した変数を選択します。その後、ダイアログを終了します。

    . の所有物ラジオボタン要素:
    • 変数PLC_PRG.iActiveVisu

  27. 選択してくださいフレーム要素の値フィールドをクリックします。フレーム変数を切り替える変数プロパティ。ここでも最近宣言した変数を指定します。

    . の所有物フレーム要素:
    • フレーム変数を切り替える変数財産:PLC_PRG.iActiveVisu

    制御変数はラジオボタン要素は、フレーム要素。ユーザー入力ラジオボタン要素はフレームの視覚化を切り替えます。

  28. クリックビルド → コード生成

  29. クリックオンライン → ログインアプリケーションを起動します。

    視覚化が開始されます。参照されている視覚化の1つがフレーム内で実行されています。選択されていないオプションをクリックすると、ラジオボタン要素を選択すると、視覚化によってフレーム内のコンテンツが目的の視覚化に切り替わります。

    _visu_reference_1_within_a_frame.png
    _visu_reference_2_within_a_frame.png
    _visu_reference_3_within_a_frame.png

この例では、スイッチフレーム変数は入力変数に接続されています。代わりに、IECコード内でスイッチフレーム変数をプログラム的に設定することもできます。

メインの視覚化では、フレーム要素は実行時にフレームの視覚化の1つを表示します。ユーザーはボタンを使ってフレーム内の表示を制御できます。ユーザー入力によってスイッチフレームの視覚化入力アクション。

手順. 視覚化のプログラミング
  1. 新しい標準プロジェクトを作成するCODESYS

  2. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  3. の中で視覚化を追加するダイアログで名前を指定VisuMainクリック追加ダイアログを閉じます。

  4. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  5. の中で視覚化を追加するダイアログで名前を指定Visu1クリック追加ダイアログを閉じます。

  6. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  7. の中で視覚化を追加するダイアログで名前を指定Visu2クリック追加ダイアログを閉じます。

  8. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  9. の中で視覚化を追加するダイアログで名前を指定Visu3クリック追加ダイアログを閉じます。

    メインの視覚化に加えて、さらに 3 つの視覚化オブジェクトがあります。

  10. 開くVisu1物体。

  11. の中で可視化ツールボックス、の基本カテゴリを選択してドラッグし、矩形視覚化エディターに要素を追加します。

    そのプロパティ要素のビューが開きます。

  12. 四角形のプロパティを次のように設定します。

    • テキスト文章財産:Visu1

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:ライトグレー

    _visu_1_for_referencing.png
  13. オブジェクトをプログラムするVisu2それに応じて。

    . 長方形のプロパティ:
    • テキスト文章財産:Visu2

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:グレー

  14. オブジェクトをプログラムするVisu3それに応じて。

    . 長方形のプロパティ:
    • テキスト文章財産:Visu3

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:ダークグレー

  15. 開くVisuMain物体。

  16. の中で可視化ツールボックス、の基本カテゴリを選択してドラッグし、フレーム視覚化エディターに要素を追加します。

    そのフレーム構成ダイアログが開きます。

  17. の中で利用可能な視覚化窓エリア、視覚化名別タブでオブジェクトを選択Visu1。 で選択された視覚化、 クリック追加

  18. 次にオブジェクトを選択しますVisu2クリック追加選択された視覚化

  19. 次にオブジェクトを選択しますVisu3クリック追加選択された視覚化

  20. クリックわかりましたダイアログを閉じます。

    さて、フレーム要素は選択された3つの視覚化を参照します。参照(1)は、参考文献要素プロパティのフレーム要素。視覚化名に加えて、対応するインデックス値 (2) も表示されます。

    _visu_main_with_properties.png

    注: をクリックすると、ダイアログを個別に開くことができます。設定値フィールドのボタン参考文献プロパティ。(3)を参照。選択された視覚化リスト。

  21. の中で可視化ツールボックス、の共通コントロールカテゴリーをドラッグしてボタン視覚化エディターに要素を追加します。

    要素が選択され、そのプロパティがプロパティビュー。

  22. 設定するテキスト文章不動産Visu1

  23. の中で入力設定マウスダウン時プロパティをクリック設定

    その入力設定ダイアログが開きます。

  24. 選択してくださいスイッチフレームの視覚化アクションとクリック_icon_arrow_right.png

    アクションは右側のウィンドウに表示されます。

  25. . アクションを設定します。
    • 選択してくださいローカル視覚化を切り替えるオプション。

    • 設定する視覚化の選択Visu1

    • クリックわかりましたダイアログを終了します。

    フォローアップアクションは、入力設定財産。

    入力設定マウスダウン時スイッチフレームの視覚化財産:0

  26. 別のものをドラッグボタン要素をビジュアライゼーションエディタに追加します。ボタンを適切に設定します。

    . ボタンのプロパティ:
    • テキスト文章財産:Visu2

    • 入力設定マウスダウン時スイッチフレームの視覚化財産:1

  27. 別のものをドラッグボタン要素をビジュアライゼーションエディタに追加します。ボタンを適切に設定します。

    . ボタンのプロパティ:
    • テキスト文章財産:Visu3

    • 入力設定マウスダウン時スイッチフレームの視覚化財産:2

  28. クリックビルド → コード生成

  29. クリックオンライン → ログインデバイスにインストールしてアプリケーションを起動します。

    ビジュアライゼーションが開始されます。参照されているビジュアライゼーションの1つがフレーム内で実行されています。いずれかのボタンをクリックすると、ビジュアライゼーションはフレーム内のコンテンツをそれぞれのビジュアライゼーションに切り替えます。

    _visu_1_in_runtime_action.png
    _visu_2_in_runtime_action.png
    _visu_3_in_runtime_action.png

のためにタブ参照されているビジュアライゼーション間のナビゲーションは自動的に提供されます。参照されているビジュアライゼーションのうち最初のものが最前面に表示され、他のものはその背後に隠れています。ユーザーは自動的に提供されるタブを使って、ビジュアライゼーション間を移動できます。

手順. タブ要素の設定
  1. 新しい標準プロジェクトを作成するCODESYS

  2. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  3. の中で視覚化を追加ダイアログで名前を指定VisuMainクリック追加ダイアログを閉じます。

  4. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  5. の中で視覚化を追加ダイアログで名前を指定Visu1クリック追加ダイアログを閉じます。

  6. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  7. の中で視覚化を追加ダイアログで名前を指定Visu2クリック追加ダイアログを閉じます。

  8. デバイスツリーでアプリケーションを選択し、クリックしますオブジェクトの追加 → 視覚化

  9. の中で視覚化を追加ダイアログで名前を指定Visu3クリック追加ダイアログを閉じます。

    メインの視覚化に加えて、さらに 3 つの視覚化オブジェクトがあります。

  10. 開くVisu1物体。

  11. ドラッグ矩形視覚化エディターに要素を追加します。

    そのプロパティ要素のビューが開きます。

  12. 四角形のプロパティを次のように設定します。

    • テキスト文章財産:Visu1

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:ライトグレー

    _visu_1_for_referencing.png
  13. オブジェクトをプログラムするVisu2それに応じて。

    . 長方形のプロパティ:
    • テキスト文章財産:Visu2

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:グレー

  14. オブジェクトをプログラムするVisu3それに応じて。

    . 長方形のプロパティ:
    • テキスト文章財産:Visu3

    • テキストプロパティフォント財産:タイトル

    • 通常状態塗りつぶし色財産:ダークグレー

  15. 開くVisuMain物体。

  16. の中で可視化ツールボックス、の基本カテゴリを選択してドラッグし、フレーム視覚化エディターに要素を追加します。

    そのフレーム構成ダイアログが開きます。

  17. の中で利用可能な視覚化窓エリア、視覚化名別タブでオブジェクトを選択Visu1。 で選択された視覚化、 クリック追加

  18. 次にオブジェクトを選択しますVisu2クリック追加選択された視覚化

  19. 次にオブジェクトを選択しますVisu3クリック追加選択された視覚化

  20. クリックわかりましたダイアログを終了します。

    さて、タブ要素は選択された3つの視覚化を参照します。参照(1)は、参考文献要素プロパティのフレーム要素。視覚化名に加えて、対応するインデックス値 (2) も表示されます。

    _visu_main_with_properties.png

    注: ダイアログを開くことができますフレーム構成をクリックするとダイアログが独立して表示されます設定値フィールドのボタン参考文献プロパティ。(3)を参照。選択された視覚化リスト。

  21. の中で可視化ツールボックス、の共通コントロールカテゴリーをドラッグしてタブ視覚化エディターに要素を追加します。

    そのプロパティ要素のビューが開きます。

  22. タブのプロパティを次のように構成します。

    • タブ幅財産:40

    • 参考文献Visu1ヘッダ財産:Visu1

    • 参考文献Visu2ヘッダ財産:Visu2

    • 参考文献Visu3ヘッダ財産:Visu3

    _visu_within_a_tab.png
  23. クリックビルド → コード生成

  24. クリックオンライン → ログインデバイスにインストールしてアプリケーションを起動します。

    視覚化が開始されます。参照されている視覚化の1つが実行中です。タブ要素。タブをクリックすると、それぞれの視覚化に切り替わります。

    _visu_within_a_tab_in_runtime.png