Crear y enlazar los botones Reproducir y Redefinir

En 3D-Guided Service Instructions 101, creó secuencias de ilustración para el modelo y añadió el atributo de ilustración a las piezas asociadas a la secuencia. Este atributo se utilizará para indicar a Vuforia Studio qué secuencia de desmontaje debe mostrar en el modelo. En esta experiencia, si una pieza seleccionada tiene una secuencia de ilustraciones asociada, Vuforia Studio reunirá dicho valor de atributo de ilustración y se le ofrecerá la opción de reproducir la secuencia de ilustración. También se añadirá un botón Reset a la experiencia para redefinir el modelo en cualquier momento. Estos botones se añadirán al lienzo 2D de la experiencia.

7. Previamente, creó un elemento emergente de Ionic para mostrar el nombre y el número de artículo de una pieza concreta. Algunas piezas también tendrán un atributo denominado illustration que se añadió en 3D-Guided Service Instructions 101. El atributo illustration contiene el nombre de una secuencia animada que se creó en Creo Illustrate. Una secuencia es la combinación de los pasos necesarios para efectuar un determinado procedimiento. La secuencia se incluye en el fichero .pvz que se carga en Vuforia Studio. Los botones Reproducir y Redefinir permiten reproducir o redefinir la reproducción de las secuencias asociadas con el modelo de cuadricóptero.

La información de esta sección solo funciona si se ha rellenado correctamente el atributo de illustration para el modelo. Si una pieza no tiene un atributo de illustration, no podrá reproducir una secuencia.

a. Cuando desaparece el elemento emergente, el widget playButton muestra el nombre de la secuencia (si procede) de la pieza seleccionada. Añada el código siguiente dentro de la función closePopup después de la ejecución de popup.close() para cambiar la propiedad Texto de playButton y editar un objeto llamado toPlay que incluye información sobre el modelo.

El objeto toPlay almacena el nombre del modelo, que se define mediante el argumento targetName, y la secuencia de ilustración del modelo. Las secuencias de ilustración se almacenan como ficheros .pvi dentro de los ficheros .pvz que se crean en Creo Illustrate; a continuación, se importan a Vuforia Studio con el modelo completado de Illustrate. El formato de estos ficheros es 1-Creo 3D- (nombre de figura).pvi, a menos que se hayan cambiado las opciones de publicación, en cuyo caso Creo 3D podría no ser la cadena para el formato de fichero. En esta experiencia, la variable instructionName contiene el valor del atributo de ilustración de la pieza seleccionada para la figura de Creo Illustrate que contiene la secuencia animada. A continuación, se llama al valor instructionName en la cadena de texto que se utiliza para crear la propiedad de la instrucción en el objeto 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. Pulse en Vista previa. Cuando se abra la ficha de vista previa, pulse en el rotor frontal izquierdo del cuadricóptero cuando aparezca. Se debe observar un cambio en playButton después de que desaparezca el elemento emergente. Pruebe con otras piezas para ver la diferencia entre las que tienen secuencias asociadas y las que no.

c. Ahora que se ha cambiado el texto del botón, se debe enlazar una función al botón para reproducir la secuencia. Como recordará, se añadió la función llamada playit() como evento de JS Pulsar para el widget playButton. La función playit() define el valor de la propiedad Secuencia del modelo de cuadricóptero igual que la propiedad de instruction del objeto toPlay de playButton. En este caso, quadcopter en el código siguiente hace referencia al nombre del widget de modelo que se ha añadido.

Si el valor de ID de Studio del widget no se ha cambiado al cuadricóptero anteriormente en el proyecto, este código no funcionará y será necesario cambiar el nombre del modelo en el código.

Coloque lo siguiente al final del código, ya que es una función independiente 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. Una vez definida la propiedad Secuencia del modelo, el widget playButton debe señalar la secuencia de inicio. Esto se puede lograr mediante el uso de un nuevo vigilante de eventos llamado sequenceloaded y las llamadas al servicio de widgets que iniciarán la reproducción de la secuencia. Como en el último paso, el valor de ID de Studio para el widget del modelo debe definirse en quadcopter; de lo contrario, el código deberá editarse. Coloque el código siguiente justo debajo de la función playit que acaba de crear.

//
//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. Al igual que el widget playButton, resetButton también tiene un evento de JS conectado. Este evento de JS se denomina resetit(). Esta función independiente redefine el estado original del modelo, tanto si se encuentra a mitad de la reproducción como después de una secuencia terminada. Esto se produce al actualizar la propiedad Secuencia del modelo de cuadricóptero para que esté en blanco. Coloque el código siguiente debajo del vigilante de eventos 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. Una vez que el código se haya añadido completamente a Home.js, pulse en Vista previa. Cuando se abra la ficha de vista previa, pulse en el rotor frontal izquierdo. Si esta sección se ha completado correctamente, aparecerá el elemento emergente, se incluirá texto en el botón de reproducción y la secuencia de reparación se iniciará cuando se pulse en el botón.