Skip to main content

チュートリアル：冷蔵庫コントローラーの視覚化

このチュートリアルでは、プロジェクトにビジュアライゼーションを追加し、ビジュアライゼーションの要素を制御プログラムの変数にリンクする方法を示します。

準備

このチュートリアルはサンプルプログラムに基づいています RefigeratorControl、「はじめてのプログラム」で作成されました CODESYS「」の章完成したプログラムは、のインストールディレクトリにもあります。 CODESYS の中に Projects サブフォルダー。

詳細については、以下を参照してください。 初めてのCODESYSプログラム

ビジュアライゼーションの作成

. ビジュアライゼーションは、次の3つのビジュアライゼーション画面で構成されています。

  • Visualization：冷蔵庫の制御要素と表示

  • Diagnosis：設定履歴と実際の温度、パラメータ設定

  • Live Visu：冷蔵庫でのアニメーション

  1. デバイスツリーで、 Application オブジェクト。

  2. をクリックします [プロジェクト] → [オブジェクトを追加] → 視覚化 コマンド。

  3. 名前を次のように指定してください Live_Visu。

  4. 名前を使用してさらに2つのビジュアライゼーションを作成します Diagnosis と Visualization。

視覚化の構造 Visualization

この画面は、冷蔵庫の制御要素と表示要素で構成されています。

_visu_img_tutorial_refrigerator_elements_control.png

  • _1_r.png: 実際の温度の数値表示

  • _2_r.png: 実際の温度を表示するポインタ

  • _3_r.png: 設定温度の数値表示

  • _4_r.png: 設定温度設定用ポテンショメータ

  • _5_r.png: コンプレッサーランプ用ラベル

  • _6_r.png: コンプレッサーオン用ランプ

  • _7_r.png: 信号灯用ラベル

  • _8_r.png:「ドアを閉めて」信号用ランプ

  • _9_r.png: 冷蔵庫のドアを開閉するためのスイッチ

  1. ビジュアライゼーションを開きます Visualization エディターで。

  2. をドラッグ 四角形 ビジュアライゼーションエレメントをエディターに追加。

    . 次のプロパティを変更します

    • テキスト → テキスト: Actual temperature: %2.1f °C

    • テキスト変数 → テキスト変数: Glob_Var.rTempActual

  3. ドラッグ メーター180° エディターへの視覚化要素。

    . 次のプロパティを変更します

    • 価値： Glob_Var.rTempActual

    • スケール → スケールエンド: 20

    • スケール → メインスケール: 5

    • スケール → サブスケール: 1

  4. ドラッグ 矩形 エディターへの視覚化要素。

    . 次のプロパティを変更します

    • テキスト → テキスト: Temperature presetting: %.1f °C

    • テキスト変数 → テキスト変数: Glob_Var.rTempSet

  5. をドラッグ ポテンショメーター ビジュアライゼーション要素をエディターに追加。

    . 次のプロパティを変更します

    • 変数: Glob_Var.rTempSet

    • バックグラウンド → 背景色: 黄色

    • ポインター → カラー: 赤

    • スケール → サブスケールの位置: 外向き

    • スケール → スケールスタート: 3

    • スケール → スケールエンド: 13

    • スケール → サブスケール: 1

    • スケール → メインスケール: 1

    • [ラベル] → ユニット: °C

    • [ラベル] → スケールフォーマット (C 構文): %.0f

    • [ラベル] → ラベルの最大テキスト幅: 21

    • [ラベル] → ラベルの高さ: 15

  6. をドラッグ [ラベル] ビジュアライゼーション要素をエディターに入力します。

    . 次のプロパティを変更します

    • テキスト → テキスト: Cooling compressor

  7. ドラッグ ランプ エディターへの視覚化要素。後ろに配置します Cooling compressor 文章。

    . 次のプロパティを変更します

    • 変数： Glob_Var.bCompressor

  8. ドラッグ ラベル エディターへの視覚化要素。

    . 次のプロパティを変更します

    • テキスト → テキスト: Signal (beep)

  9. ドラッグ ランプ エディターへの視覚化要素。 「Signal（beep）」というテキストの後ろに配置します。

    . 次のプロパティを変更します

    • 変数： Glob_Var.bSignal

    • バックグラウンド → 画像: red

  10. ドラッグ 矩形 エディターへの視覚化要素。

    . 次のプロパティを変更します

    • テキスト → テキスト: Door open

  11. をドラッグ ロッカースイッチ ビジュアライゼーションエレメントをエディターに。

    . 次のプロパティを変更します

    • 変数： Glob_Var.rDoorOpen

視覚化の構造 Diagnosis

この画面では、温度曲線を監視し、パラメータを最適化できます。

_visu_img_tutorial_refrigerator_diagnosis.png

  1. [ラベル] 見出しの要素

  2. トレース 温度曲線を表示するための要素

  3. 四角形 値を表示する要素

  1. ビジュアライゼーションを開きます Diagnosis エディターで。

  2. ドラッグ ラベル エディターへの視覚化要素。

    . 次のプロパティを変更します

    • テキスト → テキスト: Refrigerator Diagnosis & Service Menu

    • テキストプロパティ → フォント: Arial, Standard, 18

  3. ドラッグ 痕跡 エディターへの視覚化要素。

  4. クリック Diagnosis_Trace1 の値 痕跡 財産。

    The トレース構成 ダイアログが開きます。

  5. 選択してください MainTask で タスク。

  6. クリック 変数を追加 リンク。

    変数がトレースに追加されます。変数設定がダイアログに表示されます。

  7. 選択する Glob_Var.bCompressor 変数の場合。

  8. 追加します Glob_Var.rTempSet と Glob_Var.rTempActual トレースへの変数。その他の設定については、デフォルト値を使用できます。

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

  10. ドラッグ 矩形 エディターへの視覚化要素。微量元素のすぐ隣に配置します。

    . 次のプロパティを変更します

    • テキスト → テキスト: %s

    • テキスト変数 → テキスト変数: PLC_PRG.rHysteresis

  11. を設定します OnMouseDown エレメントの入力構成。 入力構成 → OnMouseDown → 設定。

    ザル 入力設定 ダイアログが開きます。

  12. を割り当てます 変数の書き込み アクションへのコマンド。デフォルト値を受け入れてクリックします わかった。

  13. ドラッグ ラベル エディターへの視覚化要素。最初の長方形の上に配置します。

    . 次のプロパティを変更します

    • テキスト → テキスト: Hysteresis Regulator

  14. 両方の要素のサイズと位置を調整します。

  15. 両方を選択します 矩形 と ラベル 要素をコピーして貼り付けて複製します。

  16. . コピーした要素のラベルと変数を調整します。

    • [テキスト]: Compressor Efficiency

      テキスト変数: Simulation.P_Cooling

    • [テキスト]: Environment Efficiency

      テキスト変数: Simulation.P_Environment

    • [テキスト]: Environ. Efficiency DoorOpen Sim

      テキスト変数: Simulation.P_EnvironmentDoorOpen

    • [テキスト]: Time until Beep for DoorOpen

      テキスト変数: Glob_Var.timDoorOpenThreshold

    • [テキスト]: Time until Beep for Compressor On

      テキスト変数: Glob_Var.timAlarmThreshold

の構造 Live-Visu 視覚化

この画面には、冷蔵庫の表示が含まれています。冷蔵庫は、いくつかのポリゴンタイプの視覚化要素で構成されています。冷蔵庫のドアは、閉じた状態と開いた状態の両方で描画されます。両方のドアは、単一の要素のグループで構成されています。

_visu_img_tutorial_refrigerator_elements.png

  1. ビジュアライゼーションを開きます Live_Visu エディターで。

  2. 選択してください ポリゴン のビジュアライゼーションエレメント ビジュアライゼーションツールボックス 表示。

  3. エディターで数回クリックして、サーフェスを作成します。右クリックして、コーナーマークの追加を停止します。

  4. コーナーマークを必要な位置に移動すると、 _1_r.png 要素 (1) が形成されます。

    _visu_img_tutorial_polygon1.png

  5. 要素を選択します。

    . 次のプロパティを変更します。

    • カラー → グラデーションカラーを使う: _cds_icon_checked.png

    • 外観 → ラインスタイル: 見えない

  6. をクリックします [カラー] → グラデーションカラーを使う プロパティ。

  7. 色を選択してください グレー ために カラー1 の中に グラデーションエディター ダイアログ。

    _visu_img_tutorial_polygon2.png

  8. 他のすべての要素を ポリゴン 視覚化要素。

  9. 閉じたドアの要素をグループ化します (_2_r.png、 _3_r.png、および _4_r.png) と開いたドアの要素 (_5_r.png、 _6_r.png、 _7_r.png、および _8_r.png)。これを実行するには、を押します シフト キーを押して [] をクリックします。 視覚化 → グループ 要素を選択するコマンド。

  10. 完成した冷蔵庫が形成されるように要素を一緒に移動します。開いたドアを閉じたドアに正確に配置します。

  11. 「を選択Open doors「グループ。

  12. プロパティで、をダブルクリックします ステート変数 → 見えない 入力フィールド。

  13. 押す F2 入力アシスタントを開きます。

  14. で 変数 カテゴリを選択し、 rDoorOpen 変数 (下) Application → Glob_Var)。

  15. で変数を否定する NOT (—> NOT Glob_Var.rDoorOpen)。

    の場合 rDoorOpen 変数がFALSE（ドアが閉じている）の場合、要素は非表示になります。次に、下にあるドアが表示されます。

    いつ rDoorOpen 変数は FALSE (ドアが閉まっている)、エレメントは見えません。すると、下にあるドアが見えるようになります。

  16. . から次の要素をコピーします Visualization 画面:

    • 温度設定用ポテンショメータ

    • 設定温度を表示するための長方形

    • Door open スイッチ

    • Cooling compressor ランプ

    • Signal (beep) ランプ

  17. クリップボードから要素を挿入します Live_Visu 視覚化画面。

  18. 要素を減らし、冷蔵庫に置きます。

    _visu_img_tutorial_refrigerator_complete.png

オンラインモードでの視覚化（シミュレーション）

視覚化が完了したら、シミュレーションモードでテストします。

  1. をクリックします [オンライン] → シミュレーション コマンド。

  2. をクリックします [オンライン] → ログイン コマンド。

    ダイアログが開き、アプリケーションを作成してダウンロードするように求められます。

  3. クリック はい ダイアログを確認します。

  4. クリック デバッグ → 開始。

  5. ビジュアライゼーションを開きます Live_Visu エディターで。

    冷蔵庫はオンラインモードです。

  6. スイッチでドアを開け、温度とアラームを監視します。画面のパラメータを変更します Diagnosis 温度曲線で反応を観察します。

このセクションの内容: