「再生」ボタンと「リセット」ボタンの作成とバインド

3D-Guided Service Instructions 101セクションでは、モデルのイラストレーションシーケンスを作成し、そのシーケンスに関連付けられている部品にイラストレーション属性を追加しました。Vuforia Studio はこの属性を使用して、モデル上でどの逆アセンブリシーケンスを表示するかを判断します。このエクスペリエンスでは、選択した部品にイラストレーションシーケンスが関連付けられている場合、そのイラストレーション属性の値が Vuforia Studio によって収集され、そのイラストレーションシーケンスを再生するためのオプションが表示されます。ここでは、任意のタイミングでモデルをリセットするための Reset ボタンもエクスペリエンスに追加します。これらのボタンは、エクスペリエンスの 2D キャンバスに追加されます。

◦ 「クリック」イベントの横にある「JS」をクリックして「playit()」と入力します。これにより、「Home.js」セクション内の関数にボタンがバインドされます (このセクションは、これ以降の手順で作成します)。

◦ 「クリック」イベントの横にある「JS」をクリックして「resetit()」と入力します。これにより、「Home.js」セクション内の関数にボタンがバインドされます (このセクションは、これ以降の手順で作成します)。

7. これよりも前のセクションで、特定の部品の名前と部品番号を表示するための Ionic ポップアップを作成しました。一部の部品には、3D-Guided Service Instructions 101で追加された illustration という名前の属性もあります。この illustration 属性には、Creo Illustrate で作成されたアニメーション化シーケンスの名前が保管されています。シーケンスとは、特定の手順を実行するために必要な複数のステップを組み合わせたものです。シーケンスは、Vuforia Studio にアップロードされた .pvz ファイルに保管されます。「再生」ボタンと「リセット」ボタンを使用すると、クワッドコプターモデルに関連付けられたシーケンスについて、再生の開始とリセットを行うことができます。

このセクションに記載されている情報は、モデルの illustration 属性が正しく設定されていることを前提としています。illustration 属性が設定されていない部品の場合、シーケンスを再生することはできません。

a. ポップアップが画面から消えると、選択した部品のシーケンスの名前が playButton ウィジェットに表示されます (該当する場合)。closePopup 関数内の popup.close() 行の下に、以下のコードを追加します。これは、playButton の「テキスト」プロパティを変更し、モデルに関する情報が保管される toPlay というオブジェクトを編集するためのコードです。

toPlay オブジェクトには、targetName 引数によって定義されたモデル名と、モデルのイラストレーションシーケンスが保存されます。イラストレーションシーケンスは、Creo Illustrate で作成された .pvz ファイル内に .pvi ファイルとして保存され、Illustrate で作成されたモデルとともに Vuforia Studio にインポートされます。パブリッシングオプションを変更していない場合、これらのファイルの名前は「1-Creo 3D- (フィギュア名).pvi」という形式になります (パブリッシングオプションを変更した場合は、ファイル名で「Creo 3D」という文字列が使用されない可能性があります)。このエクスペリエンスでは、Creo Illustrate 内のフィギュアに対して選択された部品のうち、アニメーション化シーケンスが保管されている部品のイラストレーション属性の値が、instructionName 変数に保管されます。この instructionName 変数の値は、toPlay オブジェクトで指示プロパティを作成するためのテキストの文字列内に取り込まれます。

//
//change the Text property of the playButton to the instructionName variable, which was created from the JSON data of the model
$scope.view.wdg.playButton.text = instructionName;
//
// create an object for the playButton called toPlay. This object will have properties of model, which will be the name of the object that
//is clicked on and instruction, which will add the proper syntax for calling a sequence, based off the instructionName variable, into Studio
$scope.view.wdg.playButton.toPlay = { model: targetName,
instruction: 'l-Creo 3D - ' + instructionName + '.pvi' };

b. 「プレビュー」をクリックします。「プレビュー」タブにクワッドコプターが表示された後、前部左側のローターをクリックします。ポップアップが画面から消えると、playButton の表示が変わります。これをほかの部品でも試して、シーケンスが関連付けられている部品と関連付けられていない部品の違いを確認してください。

c. ボタンのテキストが変わったことを確認した後、シーケンスを再生するための関数をボタンにバインドする必要があります。playit() という関数は、playButton ウィジェットの「クリック」という JS イベントとして追加されています。playit() 関数により、クワッドコプターモデルの「シーケンス」プロパティの値が設定されます。このプロパティは、playButton の toPlay オブジェクトの instruction プロパティに相当するプロパティです。この場合、以下のコードに記述されている quadcopter は、追加されたモデルウィジェットの名前を参照します。

このウィジェットの「Studio ID」が、プロジェクトの初期の段階で「quadcopter」に変更されていない場合、このコードは機能しません。その場合、このコード内でモデルの名前を変更する必要があります。

コードの最後に、以下の関数を追加します。これは、userpick 関数とは別の関数です。

//
//create the playit function to bind a sequence for the model to the play button
$scope.playit = function () {
//
// if there is information in the created toPlay object to say that there is an illustration attribute for the part
if ($scope.view.wdg.playButton.toPlay != undefined)
//
// set the sequence property for the quadcopter model to be equal to the value of the instruction property of the toPlay object
$scope.view.wdg.quadcopter.sequence = $scope.view.wdg.playButton.toPlay.instruction;
} // playit function end

d. モデルの「シーケンス」プロパティを設定した後、開始するシーケンスのシグナルを playButton ウィジェットで発信する必要があります。これを行うには、sequenceloaded という新しいイベントリスナーと、シーケンスの再生を開始するためのウィジェットサービス呼び出しを使用します。上記のコードの最終行のように、モデルウィジェットの「Studio ID」を「quadcopter」に設定する必要があります。このように設定しない場合は、コードを編集する必要があります。上の手順で作成した playit 関数の下に以下のコードを配置します。

//
//sequenceloaded event listener triggers when the sequence property is updated
$scope.$on('sequenceloaded', function(event) {
//
// call a widget service to trigger the quadcopter model to play all steps for the given sequence
twx.app.fn.triggerWidgetService('quadcopter', 'playAll');
}); //serviceloaded event function end

e. playButton ウィジェットと同様に、resetButton にも JS イベントが関連付けられています。この JS イベントは、resetit() という名前になっています。このスタンドアロン関数により、シーケンスの再生中か再生後かに関係なく、モデルが元の状態にリセットされます。クワッドコプターモデルの「シーケンス」プロパティを空白にすると、モデルが元の状態にリセットされます。sequenceloaded イベントリスナーの下に次のコードを配置します。

f. すべてのコードを「Home.js」に追加した後、「プレビュー」をクリックします。「プレビュー」タブが表示された後、前部左側のローターをクリックします。このセクションの手順を正しく実行すると、ポップアップが表示され、「再生」ボタンにテキストが表示されます。「再生」ボタンをクリックすると、修復シーケンスが開始されます。