WebVisuとして実行

初期状況: 実行可能な視覚化VisuMainプロジェクトに視覚化マネージャーのタスク構成が作成されました。

1. 選択してください視覚化マネージャー物体。

   コンテキストメニューで、オブジェクトの追加 → WebVisuオブジェクト。

2. オブジェクトに名前を付けるwebvisu_app設定を確認します。

   それぞれのエディターがデフォルト設定で開きます。

3. 次のように設定します。

   • 視覚化を開始：VisuMain

   • .htmファイルの名前：webvisu_app

4. クリック使用された視覚化を表示。

   その視覚化タブが開きます。どのバリアントに対してどの視覚化オブジェクトがアクティブ化されているかが表示されます。

5. 必要に応じて、バリアントの視覚化を有効にしますwebvisu_app。

   ダウンロードするバリアントが選択されました。

6. デバイス エディターを開き、コントローラーの通信設定を構成します。

7. Web サーバーと WebVisu サポートを備えた適切なランタイムを使用してコントローラーを起動します。

8. アプリケーションをコンパイルし、ダウンロードして起動します。

   アプリケーションと Web サーバーは実行されています。

9. 次のアドレスで Web ブラウザを起動します。http://localhost:8080/webvisu_app.htm

   ウェブアプリケーションが表示されます。そこで視覚化がアクティブになり、コントローラーを操作できます。

要件: WebVisu を使用して視覚化を開始します。

1. JavaScript をサポートし、HTML5 キャンバスをサポートする現在のブラウザ (Microsoft Edge、Google Chrome、Mozilla Firefox など) を起動します。

2. Web ブラウザで次のアドレスを指定します。

   http://localhost:8080/webvisu.htm

   正式形式: http://<Web サーバーの IP アドレス>:<Web サーバーのポート>/<HTM ファイル名>

   <HTMファイルの名前>は、ウェブビズ物体。

   ページが表示され、アプリケーションのデータやアプリケーションが実行中であることがわかります。

要件: プロジェクトでは複数の実行可能な視覚化が利用可能である ( visu_main、visu_for_experts）。WebVisuオブジェクトは、各視覚化ごとに設定されます（WebVisu_main、WebVisu_for_experts）。対応するHTMLページの名前はwebvisu_mainそしてwebvisu_for_an_expert。

1. オブジェクトをダブルクリックWebVisu_main。

   WebVisu エディターが開きます。

2. 選択してくださいデフォルトページとして使用オプション。

   指定されたスタートページは、 HTMファイルの名前プロパティがデフォルトとして設定されています。

3. 現在の Web ブラウザを起動します (任意のコンピューター上)。

4. HTML ページの名前を指定せずに、Web ブラウザでコントローラの IP アドレスとポートのみを指定します。

   http://localhost:8080

   フォーマル：

   http://<WebサーバーのIPアドレス>:<Webサーバーのポート>

   デフォルトページwebvisu_main.htmが開きます。アプリケーションのデータが表示され、アプリケーションが実行中であることがわかります。

5. Web ブラウザで、別のデバイス (スマートフォンなど) の次のアドレスを指定します。

   http://localhost:8080/webvisu_for_an_expert.htm

   指定された視覚化webvisu_for_an_expert.htm開きます。

1. クリック表示 → ストアそしてサインインします。

2. 検索するCODESYS Security Agentダウンロードを開始します。

   パッケージがインストールされ、インストールされたパッケージ。

3. ダイアログを終了します。

1. デバイスの通信設定とゲートウェイを構成します。

2. クリック表示 → セキュリティ画面を選択し、デバイスタブ。

3. クリックそこにシンボルがあります。

   このビューでは、ネットワーク内で見つかったデバイスにインストールされている証明書について通知し、証明書を処理するためのコマンド アイコンを提供します。

4. 左側の情報リストで、安全な接続を確立するデバイスを選択します。

   接続チャネルに応じて、右側の情報リストにこのデバイスで利用可能な証明書が表示されます。例えば、 OPC UA サーバー、暗号化された通信、暗号化されたアプリケーション、 そしてウェブサーバー通信チャネル。無効（グレー表示）のチャネルは、（利用不可）証明書を持っていません。

5. この情報リストで、ウェブサーバーチャンネルをクリックして左側のシンボル。

   証明書設定のダイアログが開きます。

6. キーの長さ（例：3072）と有効期間（例：365日）を設定します。クリックわかりましたダイアログを閉じます。

   注：セキュリティ上の理由から、有効期間は可能な限り短くする必要があります。ただし、証明書を頻繁に更新するのは時間がかかります。証明書を長期間使用する必要がある場合は、セキュリティと利便性（証明書の更新頻度が低い）のバランスを慎重に取る必要があります。

   これでWebサーバーの証明書が作成されました。操作が完了すると、証明書のデータがタブに表示されます。

7. 次に、ランタイムとともにデバイスを再起動します。

8. 視覚化されたアプリケーションをダウンロードしてくださいCODESYS WebVisuこのデバイスに。

   デバイスは安全な接続の準備ができています。

1. ブラウザを開き、WebサーバーのURLアドレスを指定します（例：https://localhost:443/webvisu.htm）。

   URL の形式は次のとおりです。 https:// <IP アドレス/URL> :443/<HTM ファイル名>.htm。

   HTMLファイル名は、Visualization Managerの設定内の名前と一致する必要があります。ウェブビズオブジェクト。IPアドレスはデバイス構成から取得します。

   ブラウザが接続を確立します。証明書が信頼できない場合は、セキュリティに関する通知が表示されます。

2. リスクを認識した上で続行することを確認します。

   自己署名証明書を作成しました。その有効性は、例えば、拇印ブラウザにサムプリントを表示し、セキュリティ エージェントからの値と比較します。

   WebVisuページが起動します。ブラウザに表示される鍵マークは、安全な通信であることを示します。