モデルからのポップアップへの属性の追加

Ionic ポップアップが正常に作成されると、このプロジェクトの3D-Guided Service Instructions 101セクションで Creo Illustrate 内のモデル用に作成した属性メタデータを追加できるようになります。これを行うには、バージョン 8.5.13 以降の Vuforia Studio に付属している PTC Metadata API を使用します。

1. PTC Metadata API を使用して、モデルの JSON データから属性を呼び出します。このバージョンの API では、.then メソッドが使用されます。このメソッドでは、モデル用のメタデータが存在する場合に、コールバック関数を使用してそのデータが取得されます。

//
//Look at model and see if it has metadata. If it does, then execute the below code and create an object called metadata
PTC.Metadata.fromId(targetName)
.then ( (metadata) => {

b. このコードの 12 行目から 41 行目までを選択し、「インデント」ボタンをクリックします。これにより、8 行目から 30 行目までがインデントされます。これらの行が実行されるかどうかは、promise が成功するかどうかによって異なるため、上記の PTC API 関数内にこれらの行が配置されます。

c. 以下のコードを 43 行目に挿入して、PTC API 関数の最後に括弧を追加します。これにより、コード行の終りを明示的に定義してエラーを回避することができます。

}) //end brackets for PTC API and .then
//
//catch statement if the promise of having a part with metadata is not met
.catch( (err) => { console.log('metadata extraction failed with reason : ' +err) })

2. メタデータ属性からデータを取得するには、PTC Metadata API の get 関数を使用する必要があります。metadata.get 関数を呼び出すと、モデルのすべてのメタデータが取得されます。この場合、Creo Illustrate で追加された部品の属性から構成されるすべてのメタデータが取得されます。metadata.get 関数で pathID 変数を使用すると (この変数には、部品のオカレンスデータが格納されます)、選択した部品に対してデータのインデックスが作成されます。メタデータ API 関数の完全なリストについては、エクスペリエンスへの CAD メタデータの組み込みを参照してください。この関数を使用して、以下に示す変数の値を取得することができます。

//
// create variables based on attribute names from Creo Illustrate for this model. use metadata.get to obtain the data from the JSON properties for this occurrence.
var partName = metadata.get(pathId, 'Display Name');
var instructionName = metadata.get(pathId, 'illustration');
var partNumber = metadata.get(pathId, 'partNumber');

3. ポップアップの template プロパティの定義を変更します。属性データが Vuforia Studio にすでにインポートされているため、partNumber 変数と partName 変数をクリックすると、これらの変数の値が Ionic ポップアップに表示されます。より詳しい情報を表示するため、コメントも以下のように編集されています。

//
// adds an ionic popup when a part is clicked. Show the part number and name of the selected object.  </br> adds a line break between the two variables
var popup = $ionicPopup.show({
template: '<div>' + partNumber + '  </br>' + partName + '</div>',
scope: $scope
}); //end of ionic popup

4. 「保存」をクリックして「プレビュー」を開き、新しい情報がポップアップに追加されていることを確認します。ステップが正常に完了している場合は、以下のようなイメージが表示されます。