Création et liaison de boutons Lecture et Réinitialiser
Dans la section
3D-Guided Service Instructions 101, vous avez créé des séquences d'illustration pour le modèle et ajouté l'attribut d'illustration aux pièces associées à la séquence.
Vuforia Studio utilise cet attribut pour déterminer la séquence de désassemblage à afficher sur le modèle. Dans cette expérience, si une pièce sélectionnée est associée à une séquence d'illustration,
Vuforia Studio rassemblera la valeur d'attribut de cette illustration et vous donnera la possibilité de lire la séquence d'illustration. Vous ajouterez également un bouton
Reset à l'expérience pour réinitialiser le modèle à tout moment. Vous ajouterez ces boutons au canevas 2D de l'expérience.
|
|
Si vous souhaitez comparer votre progression au code complet de cette section, vous le trouverez dans l' Appendix 6 sur GitHub. |
1. Accédez à la vue Accueil et ouvrez le canevas 2D.
2. Inversez l'orientation du canevas 2D.
| Il est recommandé que l'utilisateur qui affiche l'expérience conserve le téléphone ou l'appareil mobile dans une orientation paysage. |
3. Ajoutez un widget Bouton au panneau gauche du canevas.
4. Sous PROPRIETES du bouton, mettez à jour les éléments suivants :
◦ Texte : supprimez le texte de ce champ et laissez-le vide.
◦ ID Studio : remplacez cet élément par playButton.
◦ Cliquez sur JS en regard de l'événement Clic, puis saisissez playit(). Cette opération lie le bouton à une fonction de la section Home.js que vous créerez à une étape ultérieure.
5. Ajoutez un autre widget Bouton au panneau de droite.
6. Sous PROPRIETES du bouton, mettez à jour les éléments suivants :
◦ Texte : remplacez cet élément par Réinitialiser.
◦ ID Studio : remplacez cet élément par resetButton.
◦ Cliquez sur JS en regard de l'événement Clic, puis saisissez resetit(). Cette opération lie le bouton à une fonction de la section Home.js que vous créerez à une étape ultérieure.
7. Précédemment, vous avez créé une fenêtre contextuelle Ionic pour afficher le nom et le numéro d'une pièce donnée. Certaines pièces ont également un attribut nommé
illustration qui a été ajouté à la section
3D-Guided Service Instructions 101. Cet attribut
illustration contient le nom d'une séquence animée créée dans Creo Illustrate. Une séquence est une combinaison d'étapes nécessaires à l'exécution d'une certaine procédure. La séquence est incluse dans le fichier
.pvz chargé dans
Vuforia Studio. Les boutons
Lecture et
Réinitialiser vous permettent de démarrer ou de réinitialiser la lecture des séquences associées au modèle de quadrirotor.
| Les informations de cette section ne fonctionnent que si l'attribut illustration a été correctement rempli pour le modèle. Toute pièce ne disposant d'aucun attribut illustration ne pourra pas lire une séquence. |
a. Lorsque la fenêtre contextuelle disparaît, le widget playButton affiche le nom de la séquence (le cas échéant) de la pièce sélectionnée. Ajoutez le code ci-dessous à l'intérieur de la fonction closePopup après avoir exécuté popup.close() pour modifier la propriété Texte du widget playButton et modifier un objet appelé toPlay contenant des informations sur le modèle.
L'objet toPlay stocke le nom du modèle, qui est défini par l'argument targetName, et la séquence d'illustration du modèle. Les séquences d'illustration sont stockées en tant que fichiers .pvi dans les fichiers .pvz créés dans Creo Illustrate, puis sont importées dans Vuforia Studio avec le modèle terminé d'Illustrate. Le format de ces fichiers est 1-Creo 3D-(nom de la figure).pvi (sauf si vous avez modifié les options de publication, auquel cas Creo 3D peut ne pas être la chaîne pour le format de fichier). Dans cette expérience, la variable instructionName contient la valeur de l'attribut d'illustration de la pièce sélectionnée pour la figure dans Creo Illustrate qui contient la séquence animée. La valeur instructionName est ensuite appelée dans la chaîne de texte utilisée pour créer la propriété d'instruction dans l'objet 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. Cliquez sur Aperçu. Dans l'onglet Aperçu, cliquez sur le rotor avant gauche du quadrirotor lorsqu'il s'affiche. Vous devez observer une modification du widget playButton après la disparition de la fenêtre contextuelle. Essayez cette opération sur d'autres pièces pour voir la différence entre celles qui sont associées à des séquences et celles qui ne le sont pas.
c. Maintenant que vous avez modifié le texte du bouton, vous devez lier une fonction au bouton pour lire la séquence. Vous avez ajouté la fonction playit() en tant qu'événement JS de Clic pour le widget playButton. La fonction playit() définit la valeur de la propriété Séquence du modèle de quadrirotor pour qu'elle soit égale à la propriété instruction de l'objet du widget toPlayplayButton. Dans ce cas, quadcopter dans le code ci-dessous fait référence au nom du widget du modèle qui a été ajouté.
| Si l'ID Studio du widget n'a pas été remplacé par "quadcopter" précédemment dans le projet, ce code ne fonctionnera pas et vous devrez modifier le nom du modèle. |
Placez les éléments suivants en bas du code, car il s'agit d'une fonction distincte de 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. Lorsque la propriété Séquence est définie pour le modèle, le widget playButton doit signaler le démarrage de la séquence. Pour ce faire, vous pouvez utiliser un nouveau module d'écoute d'événements nommé sequenceloaded et les appels de service widget qui démarreront la lecture de la séquence. Comme dans la dernière étape, l'ID Studio du widget du modèle doit être défini sur quadcopter. Si ce n'est pas le cas, vous devez modifier le code. Placez le code suivant directement sous la fonction playit que vous venez de créer.
//
//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. Comme pour le widget playButton, un événement JS est également associé au widget resetButton. Cet événement JS est resetit(). Cette fonction autonome rétablit l'état d'origine du modèle, qu'il se trouve à la moitié de la lecture ou après une séquence finie. Pour cela, elle vide le contenu de la propriété Séquence du modèle de quadrirotor. Placez le code suivant sous l'écouteur d'événements sequenceloaded.
//
//resetit function
$scope.resetit = function () {
//
//set the sequence property of the quadcopter model to blank
$scope.view.wdg.quadcopter.sequence = ''
} //resetit function end
f. Lorsque vous avez ajouté l'intégralité du code à Home.js, cliquez sur Aperçu. Dans l'onglet Aperçu, cliquez sur le rotor avant gauche. Si cette section est exécutée correctement, la fenêtre contextuelle s'affiche, le bouton de lecture est renseigné avec le texte et la séquence de réparation démarre lorsque vous cliquez sur le bouton.
