Création d'une fonction de module d'écoute d'événement userpick

En plus de pouvoir lier des événements de widget à un code JavaScript personnalisé dans la section EVENEMENTS du volet DETAILS, vous pouvez écrire du code JavaScript dans la vue Home.js pour un codage personnalisé plus complexe. Dans cette section, vous allez utiliser la fonction de module d'écoute d'événement userpick pour qu'une fenêtre contextuelle Ionic s'affiche lorsqu'une pièce du quadrirotor est sélectionnée.

1. Cliquez sur la vue Home.js dans le volet PROJET. C'est là que vous allez écrire le code JavaScript personnalisé.

2. Les premières lignes de code à ajouter correspondent à un module d'écoute d'événement qui s'active lorsque les utilisateurs appuient sur le modèle. Un module d'écoute d'événement est une fonction déclenchée lorsqu'un événement donné se produit. Dans Vuforia Studio, l'événement userpick associé à un objet 3D est déclenché lorsqu'un utilisateur clique sur une pièce du quadrirotor dans Vuforia View. Des modules d'écoute d'événement supplémentaires sont disponibles dans le code disponible dans l'Annexe 1, l'Annexe 2 et l'Annexe 3.

3. Dans ce cas, les arguments correspondent aux éléments suivants : event correspond au clic, targetName fait référence au nom du modèle sélectionné, targetType correspond au type de widget sélectionné et eventData est un objet JSON dont la propriété d'occurrence fournit l'emplacement de l'arbre du modèle de la pièce sélectionnée.

4. Ensuite, à l'intérieur de l'écouteur d'événement userpick, vous allez ajouter du code qui dictera l'action déclenchée lors de la sélection d'un élément. L'argument eventData renvoyé est un objet JSON spécifique à la pièce. Il contient des données sur la cible sélectionnée, comme un élément de modèle, s'il était ajouté à un modèle. L'une des propriétés d'objet renvoyées est l'occurrence du modèle, définie sur la variable ion, qui indique l'emplacement de l'arbre du modèle de la pièce sélectionnée et permet de différencier les pièces les unes des autres. Vuforia Studio différencie ainsi les pièces sur lesquelles l'utilisateur clique. La variable currentSelection sera créée pour contenir les informations relatives à la pièce sélectionnée à partir de son nom et pathId sera utilisée dans le code. Dans ce cas, une fenêtre contextuelle Ionic doit s'afficher lorsqu'une pièce est sélectionnée. Ionic est un kit de développement logiciel (SDK) multiplateforme conçu pour aider les développeurs Web dans la création d'applications. Une fenêtre contextuelle Ionic est une boîte de dialogue qui s'affiche à l'écran lorsque vous cliquez sur une pièce. La fenêtre contextuelle est utilisée pour afficher les informations de la pièce dans la section suivante.

//
// 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. Cliquez sur Enregistrer pour mettre à jour le projet, puis sur Aperçu pour ouvrir un aperçu de l'expérience. Cliquez sur une pièce du quadrirotor. Une fenêtre contextuelle présentant le chemin d'occurrence de la pièce s'affiche dans la fenêtre d'aperçu. Si rien ne s'affiche, vérifiez que le code a été copié correctement.

6. Complétez cette étape en ajoutant une fonction entraînant la fermeture automatique de la fenêtre contextuelle après quelques secondes. Cette fonction se place directement à la suite du code affichant la fenêtre contextuelle.

// 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);