AVEVA™ InTouch HMI

MapApp ウィジェットとスーパータグを使用する

Save PDF

MapApp ウィジェットとスーパータグを使用する

Save PDF

Last UpdatedSep 25, 2024
3 minute read

MapApp ウィジェットを使用して、実行中のアプリケーションからグラフィックを含むマップを表示できます。ランタイム時にマップを使用すると、ユーザーはマップのさまざまな領域をパンすることや、ズームインまたはズームアウトして詳細表示のレベルを調整できます。一般的に、マップ内に配置されたグラフィックは、マップが示す領域内に配置されたビジネスアセットを表します。

詳細については、ウィジェットのヘルプの Map_App ウィジェットのプロパティを参照してください。

スーパータグと MapApp ウィジェットを統合して、WindowViewer または Web Client で表示できます。

InTouch HMI で MapApp ウィジェットを設定するワークフローに従ってください。

ステップ 1：スーパータグおよびスーパータグインスタンスを作成する

ステップ 2：スーパータグのグラフィックを作成する

ステップ 3：スーパータグのマップ設定を設定する

ステップ 4：MapApp ウィジェットを設定して使用する

ステップ 5：WindowViewer または Web Client で MapApp を表示する

スーパータグおよびスーパータグインスタンスの作成

MapApp ウィジェットは、スーパータグの詳細、およびWindowMaker のスーパータグペインで設定されたインスタンスの場所属性を使用します。

場所属性を追加するには：

スーパータグおよびインスタンスを作成します。

たとえば、アセット $Tank および Tank1 と Tank2 というインスタンスを作成できます。
各インスタンスに属性を追加します。たとえば、Flow（流量）や Temp（温度）などを追加します。
"Latitude"（緯度）や "Longitude"（経度）などの場所属性を追加します。
タグディクショナリを使用して属性値を設定します。

例:

Tank1 をダブルクリックしてタグディクショナリを開きます。以下のメンバー（属性）値を設定します。

Tank1\Flow = 11

Tank1\Latitude = 33

Tank1\Longitude = -114

Tank2 をダブルクリックしてタグディクショナリを開きます。以下のメンバー（属性）値を設定します。

Tank2\Flow = 21

Tank2\Latitude = 36.746

Tank2\Longitude = -119.773

アセットのグラフィックの作成

グラフィックツールボックスを使用して、アセットを表現するグラフィックを作成します。

例：作成されたグラフィックは Tank1Sym と Tank2Sym です。

グラフィックをアセットに追加する

グラフィックの名前を入力します。

または、グラフィックツールボックスからグラフィックをドラッグアンドドロップします。

例:

Tank1 アセットのグラフィックに Tank1Sym を使用します。

Tank2 アセットのグラフィックに Tank2Sym を使用します。

グラフィックには、アセットインスタンスのその他の属性（流量や温度など）への参照を設定できます。

アセットのマップ設定の構成

MapApp ウィジェットを使用して、各アセットインスタンスのマップ設定を構成します。

マップ設定を構成する

WindowMaker を開きます。
産業用グラフィックツールボックスペインで［ウィジェット］に移動し、［Map_App］をダブルクリックします。

［マップ設定］画面がキャンバス上のタブとして表示されます。
マップのソースの設定
1. ［追加］を選択します。
  
  ［ソース］グリッドに新しいエントリが作成されます。
2. ソースの名前を入力します。
3. プロバイダのリストからマッププロバイダ（Bing など）を選択します。
  これはオプションです。マッププロバイダを選択しない場合、MapApp はデフォルトの Map App プロバイダを使用します。
4. 設定値を入力します
  APIKey: An6Grh5_YKz-_CYnREoNn3nOaBU_rlnVEoc7o8HpSj3GWCvjseEguPvN3rJkZ95T
ズームレイヤーを設定します。

ズームレイヤーを使用すると、マップのズームパーセンテージを追加できます。

ズームレイヤーを追加するには
1. ［追加］を選択します。
2. ズームレイヤーの名前を入力します。ここで指定した名前は、［場所］タブの［レイヤー］カラムに反映されます。
  
  たとえば、Tank1 のレイヤーを Default と設定し、Tank2 を "State" として設定できます。
3. 最小および最大のズームパーセンテージを入力します。
  
  たとえば、State レイヤーの最小および最大ズームパーセンテージにそれぞれ 9% と 31% を設定した場合、グラフィック Tank2Sym は、ズームパーセンテージが 9% から 31% のときにのみマップに表示されます。
4. デフォルトのレイヤーを設定：デフォルトとして設定されたズームレイヤーは True を表示し、その他のエントリは False を表示します。
ズームレイヤーを削除するには、［削除］を選択します。

ズームレイヤーをデフォルトとして設定するには、［デフォルトに設定］を選択します。
場所の設定

各アセットの場所の詳細は、アセット設定画面で設定されたアセット属性値から取得されます。

レイヤー情報は、［ズームレイヤー］タブから取得されます。

たとえば、Tank1 のレイヤーを Default と設定し、Tank2 を "State」として設定できます。

この場合、グラフィック Tank2Sym は、ズームパーセントが 9% から 31% の場合にのみ表示されます。
［OK］を選択して保存し、ページを閉じます。

MapApp ウィジェットの埋め込み

マップ上に MapApp ウィジェットを表示するには、グラフィックに MapApp ウィジェットを埋め込む必要があります。

MapApp ウィジェットの埋め込み：

新規グラフィックを作成します（MyApp など）。
このグラフィックをグラフィックエディタで編集します。
グラフィックエディタ内の任意の場所を右クリックして、［産業用グラフィックの埋め込み］を選択します。
Galaxy ブラウザでグラフィックツールボックスの［ウィジェット］を選択します。
ウィジェットのリストから［Map_App］を選択します。
Map_App ウィジェットを選択してキャンバスに埋め込み、サイズを調整します。
Map_App ウィジェットのウィジェットプロパティを編集します。

［Config name］（設定名）は必須のフィールドです。少なくとも、ConfigName、CurrentZoom、InitialLatitude、InitialLongitude、および InitialZoom の属性値を更新することが推奨されます。

たとえば、次のように属性値を設定できます。

ConfigName = Default

CurrentZoom = 5

InitialLatitude = 33

InitialLongitude = -114

InitialZoom = 30
［OK］を選択します。
グラフィックを枠ウィンドウに埋め込み、ウィンドウを閉じて保存します。

WindowViewer または Web Client での MapApp の表示

設定したアセットと MapApp は WindowViewer または Web Client のいずれかで表示できます。

MapApp を WindowViewer で表示する

WindowViewer への高速切り替えを行い、MyMap グラフィックを含むウィンドウを開きます。
Map_App ウィジェットとスーパータグがマップの設定された場所に表示されます。
ズームパーセンテージを調整してマップをズームインまたはズームアウトします。

Web Client で MapApp を表示する

Chrome ブラウザをインストールしてデフォルトのブラウザに設定します。
WindowViewer が実行している状態で Web Client を起動します。
メニューから "MyMap" グラフィックを選択します。

Map_App ウィジェットとスーパータグがマップの設定された場所に表示されます。
ズームパーセンテージを調整してマップをズームインまたはズームアウトします。

AVEVA™ InTouch HMI