チュートリアル：クライアントアニメーションの使用

を使用して新しい標準プロジェクトを作成します CODESYS Control Win コントローラ。

を追加 視覚化 アプリケーションの下にあるオブジェクト。名前を選択してください。 Visu_Main。

エディターで視覚化マネージャーを開き、 クライアントアニメーションとネイティブ要素のオーバーレイをサポートする オプション。

を開きます PLC_PRG エディター内のプログラム。

次のコードを宣言エディターに入力します。

PROGRAM PLC_PRG
VAR
    iSelection : INT; // to switch the referenced visualization page
    xVisible: BOOL; // auxiliary variable to toggle the menu bar
    iMenuPos : INT := -300; // position of the menu bar
    xToggle: BOOL; // button variable to toggle the menu bar
END_VAR                            

次のコードを実装に入力します。

IF xToggle THEN
    xToggle := FALSE;
    IF xVisible THEN
        xVisible := FALSE;
        iMenuPos := -300;
    ELSE
        xVisible := TRUE;
        iMenuPos := 0;
    END_IF
END_IF                           

を挿入します Visu_Menu アプリケーションの下の視覚化。

オブジェクトプロパティを開きます。 視覚化 タブ、設定 ビジュアライゼーションサイズ に 幅 300インチで、 高さ 180 個の。

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

を選択 高度 のオプション プロパティ 見る。

左上隅に、ボタンを追加します。 幅 300と 高さ 60の。

ボタンに「Visu1」というラベルを付けます。フォントサイズを24に設定します。

を開きます 入力設定 → OnMouseClick プロパティ。

を選択 STコードを実行する アクション。

次のSTコードを入力します。

PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;                            

をセットする ボタン状態変数→デジタル変数 プロパティに PLC_PRG.iSelection=0。

名前の付いたボタンをさらに 2 つ追加 Visu 2 と Visu 3。

のボタンプロパティを編集 Visu2 (P)LC_PRG.iSelection = 1) と Visu3 (PLC_PRG.iSelection = 2)。

結果：

を挿入 Visu1 アプリケーションの下のビジュアライゼーション。

オブジェクトプロパティを開きます。 視覚化 タブ、設定 ビジュアライゼーションサイズ に 幅 800インチで 高さ 600 個の。

画面の背景色を変更します（たとえば、ライトグレー）。

を挿入 [ラベル] ビジュアライゼーション画面にオブジェクトを入力し、その要素に名前を付けます (例: Visu 1)。

さらに 2 つのビジュアライゼーションを挿入 Visu2 そして Visu3 アプリケーションの下。と同じ方法でプロパティを編集します。 Visu1。

のプロパティを開きます Visu_Main 視覚化。 視覚化 タブ、設定 ビジュアライゼーションサイズ に 幅 800インチで 高さ 600 個の。

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

を挿入します フレーム 視覚化への要素。

を追加 Visu1 (インデックス 0) Visu2 (インデックス 1)、および Visu3 (インデックス 2) ビジュアライゼーション。

のプロパティ値を設定します 位置 次のように： バツ = 0、 Y = 0、 幅 = 800、 と 高さ = 600。

の値を設定します スイッチフレーム変数 → 変数 プロパティへ PLC_PRG.iSelection。

を挿入 ボタン 要素をビジュアライゼーションに含めます。

のプロパティ値を設定します 位置 次のように： バツ = 0、 Y = 0、 幅 = 800、 と 高さ = 600。

の値を設定します テキスト→ テキスト プロパティへ =。

の値を設定します テキストプロパティ → フォント プロパティへ Arial; 36。

を開きます 入力設定 → OnMouseClick プロパティ。

を選択 STコードを実行する アクション。

次のSTコードを入力します。

PLC_PRG.xToggle := TRUE;

の値を設定します ボタン状態変数 → デジタル変数 プロパティへ PLC_PRG.xVisible。

を挿入します Visu_Menu からの視覚化要素 現行の企画 視覚化へのカテゴリ。

のプロパティ値を設定します 位置 次のように： バツ = 0、 Y = 0、 幅 = 300、 と 高さ = 180。

の値を設定します 絶対的な動き → ムーブメント → X プロパティへ PLC_PRG.iMenuPos。

の値を設定します ステート変数 → 見えない プロパティへ not(PLC_PRG.xVisible)。

のプロパティ値を設定します アニメーションの長さ に 2000。

結果：

プロジェクトをビルドし、PLCにダウンロードします。

プロジェクトを開始します。

ブラウザで、ビジュアライゼーションに接続します（http://localhost:8080）。

ビジュアライゼーションで、メニューボタンをクリックします。

メニュー項目を選択します。