Crear una función de vigilante de eventos userpick

Además de poder enlazar eventos de widget para personalizar código de JavaScript en la sección Eventos del panel DETALLES, se puede escribir código JavaScript en la vista Home.js para codificación personalizada más compleja. En esta sección, se utiliza la función de vigilante de eventos userpick para indicar que aparezca un elemento emergente de Ionic aparezca cuando se seleccione una pieza del cuadricóptero.

1. Pulse en la vista Home.js del panel PROYECTO. Aquí es donde se escribe el código JavaScript personalizado.

2. Las primeras líneas de código que se añadirán serán un vigilante de eventos para cuando los usuarios pulsen en el modelo. Un vigilante de eventos es una función que se activa cuando se produce un evento determinado. Vuforia Studio tiene un evento relacionado con objetos 3D denominado userpick que se activa cuando un usuario pulsa en una pieza del cuadricóptero en Vuforia View. En el código proporcionado en el Apéndice 1, el Apéndice 2 y el Apéndice 3, hay más vigilantes de eventos disponibles.

3. Para los argumentos de este caso, event es el acto de pulsar, targetName hace referencia al nombre del modelo seleccionado, targetType corresponde al tipo de widget que se selecciona y eventData es un objeto JSON con la propiedad de aparición que da la ubicación del árbol de la pieza seleccionada.

4. A continuación, dentro del vigilante de eventos userpick, añadirá código que dictará lo que ocurre cuando un usuario selecciona algo. El argumento eventData que se devuelve es un objeto JSON específico de la pieza. Contiene datos sobre el objetivo seleccionado, de forma similar a un elemento de modelo que se añade a un modelo. Una de las propiedades del objeto que se devuelve es la occurrence del modelo, definida en la variable ion, que proporciona la ubicación del árbol del modelo de la pieza seleccionada y se utiliza para diferenciar las piezas entre sí. Así es como Vuforia Studio diferencia las piezas en las que se pulsa. Se creará la variable currentSelection para mantener la información sobre la pieza seleccionada a partir de su nombre y pathId y se utilizará a lo largo del código. En este caso, debería aparecer un elemento emergente de Ionic cuando se selecciona una pieza. Ionic es un SDK multiplataforma para desarrolladores web que ayuda a crear aplicaciones. Un elemento emergente de Ionic es un cuadro de diálogo que aparece en la pantalla cuando se pulsa en una pieza. El elemento emergente se utilizará para mostrar información de la pieza en la sección siguiente.

//
// 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. Pulse en Guardar para actualizar el proyecto; a continuación, pulse en Vista previa para abrir una vista previa de la experiencia creada hasta el momento. Pulse en cualquier parte del cuadricóptero. En la ventana de vista previa debería aparecer un elemento emergente con la ruta de aparición de la pieza. Si no aparece nada, compruebe que el código se haya copiado correctamente.

6. Para ello, añada una función que provoque que el elemento emergente se cierre por sí mismo después de unos segundos. Inclúyala justo después del código que muestra el elemento emergente.

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