userpick イベントリスナー関数の作成

「詳細」枠の「イベント」セクションでカスタムの JavaScript コードにウィジェットイベントをバインドできるだけでなく、「Home.js」ビューでより複雑なカスタム Javascript コードを入力することができます。このセクションでは、クワッドコプターの特定の部品が選択されたときに、userpick というイベントリスナー関数を使用して、Ionic ポップアップを表示するシグナルを発信する方法について説明します。

1. 「プロジェクト」枠の「Home.js」ビューをクリックします。このビューで、カスタムの JavaScript コードを入力することができます。

2. 最初に入力するコード行が、ユーザーがモデルをタップしたかどうかを判断するイベントリスナーになります。イベントリスナーは、特定のイベントが発生したときにトリガーされる関数です。Vuforia Studio には、3D オブジェクトに関する userpick というイベントが付属しています。Vuforia View でクワッドコプターの特定の部品をユーザーがクリックすると、このイベントがトリガーされます。付録 1、付録 2、および付録 3に記載されているコードでは、追加のイベントリスナーを使用できます。

3. 引数について説明します。event はクリック操作を判断するための引数、targetName は選択されたモデルの名前を参照するための引数、targetType は選択されたウィジェットのタイプに対応する引数、eventData は選択された部品のモデルツリーの場所を指定するオカレンスプロパティを持つ JSON オブジェクトを示す引数です。

4. 次に、userpick イベントリスナー内で、ユーザーが何かを選択したときに実行する動作を制御するコードを追加します。イベントリスナーから返される eventData 引数は、部品固有の JSON オブジェクトです。この引数には、モデルに追加されたモデルアイテムの場合と同様に、選択されたターゲットに関するデータが格納されています。返されるオブジェクトプロパティの 1 つに、ion 変数に設定されるモデルの occurrence があります。このプロパティにより、選択された部品のモデルツリーの場所を特定し、部品同士を区別できるようになります。こうした仕組みにより、ユーザーがクリックした部品が Vuforia Studio によって区別されます。currentSelection 変数は、名前および pathId から選択された部品に関する情報を保持するために作成され、コード全体で使用されます。この場合、部品を選択すると、Ionic ポップアップが表示されます。Ionic は、アプリケーションを作成する Web 開発者用のクロスプラットフォーム SDK です。Ionic ポップアップは、特定の部品をクリックしたときに画面に表示されるダイアログボックスです。次のセクションでは、ポップアップを使用して部品情報を表示します。

//
// variable to pull the value for the occurrence property in the eventData JSON object from the model. Create variable for the currently selected part
var pathId = JSON.parse(eventData).occurrence
$scope.currentSelection = targetName + "-" + pathId

// adds an ionic popup when a part is clicked. Show the pathId of the selected object
var popup = $ionicPopup.show({
template: '<div>' + pathId + '</div>',
scope: $scope
}); //end of ionic popup

5. 「保存」をクリックしてプロジェクトを更新し、「プレビュー」をクリックして現時点のエクスペリエンスのプレビューを表示します。クワッドコプターの任意の部品をクリックします。クリックした部品のオカレンスパスを示すポップアップがプレビューウィンドウに表示されます。何も表示されない場合は、コードが正しくコピーされているかどうかを確認してください。

6. 最後に、数秒経過後にポップアップを自動的に閉じるための関数を追加します。この関数は、ポップアップを表示するためのコードのすぐ下に追加します。

// create a function to close the popup.
var closePopup = function (popup) {

//
// function for returning that the popup will be closed using the .close() method
return function() {
//
//close the popup
popup.close()
} // return end
} // closepopup function end

//
//call the $timeout service which will call the function for closing the popup after 3 seconds (3000 ms)
$timeout(closePopup(popup), 3000);