Crear configuraciones de color
En la última sección, aprendió a usar el parámetro de aplicación model para cambiar la configuración del modelo en la experiencia. A continuación, creará un parámetro de aplicación denominado color que funciona de forma similar. Sin embargo, se deben crear algunos scripts para habilitarlo.
En esta sección, se creará un objeto que contenga colores RGBA, al que accederá Vuforia Studio. Una vez obtenido el color del objeto, se transferirá a la función setColor. La función setColor cambiará el aspecto del modelo al color especificado para el parámetro de aplicación color.
1. Pulse en Home.js e introduzca lo siguiente:
//
// object to hold color possibilities
var colorPalette = {
'red' : 'rgba(255,0,0,1);',
'green' : 'rgba(0,255,0,1);',
'blue' : 'rgba(0,0,255,1);',
'yellow' : 'rgba(255,255,0,1);',
'purple' : 'rgba(255,0,255,1);',
'cyan' : 'rgba(0,255,255,1);',
'white' : 'rgba(245,245,245,1);',
'black' : 'rgba(10,10,10,1);'
}
El objeto colorPalette se utilizará para contener todos los colores posibles con los que se puede configurar el modelo. Se ha añadido una lista de colores básicos a esta experiencia; no obstante, puesto que Studio interpreta códigos de colores RGBA, se pueden añadir colores adicionales a la experiencia deseada.
2. A continuación, creará la función setColor que definirá el color deseado para el cuadricóptero. Si se define un color en el parámetro de aplicación color, se activará el código dentro de la sentencia IF.
a. En función del valor que se indique en el parámetro de aplicación color, se seleccionará un valor RGBA en el objeto colorPalette y se establecerá como una variable con el nombre paintColor.
b. Si el color indicado es un valor válido en colorPalette, se activará la promesa de la API de PTC Metadata. Para determinar si se cumple la promesa, se crea una variable denominada toPaint que se convierte en una lista de las piezas que tienen el atributo painted con un valor de true. A continuación, si hay piezas que cumplen los criterios, la representación 3D TML cambia el color de esas piezas y lo establece en el valor de paintColor.
c. Si se rechaza la promesa, se registrará una sentencia de error en la consola.
d. Introduzca el código siguiente en Home.js:
//
// function for setting the color based on the color app parameter
$scope.setColor = function (model) {
//
// if color is defined, set color
// check if there is a part that can have its color changed
if ($scope.app.params.color != undefined) {
var paintColor = colorPalette[$scope.app.params.color];
if (paintColor != undefined)
PTC.Metadata.fromId('quadcopter')
.then((metadata) => {
//
// create variable named toPaint to become an array of ID paths that fit the input text
// "like" will look for a partial text match to what is typed in. use 'same' to get an exact match
var toPaint = metadata.find('painted').like('true').getSelected();
//
// if statement for determining parts that have the painted attribute and setting their color using the tml 3d renderer
if (toPaint != undefined && toPaint.length > 0 ) {
toPaint.forEach(function(p) {
tml3dRenderer.setColor(model+ '-' +p,paintColor);
}) // for each end
} // if statement end
}) //.then end
//
// catch statement for if this operation fails
.catch((err) => { console.log("metadata extraction failed with reason : " + err) })
} // end of if statement for paintColor
} // end of setColor function
3. Ya se han creado las funciones que cambian el color del modelo, pero aún no se las ha llamado. Para que esta función se produzca en cuanto se cargue Studio, es necesario crear una función de vigilante de eventos modelLoaded. Como su nombre indica, cuando el modelo se carga en Studio, se ejecuta el cuerpo de esta función. En este caso, cuando se carga el modelo, se activa la función setColor para que los modelos especificados establezcan su color en función de la configuración.
//modelLoaded event listener triggers when the model has completed loading
$scope.$on('modelLoaded', function (event,model) {
//
// call setColor function to change the color of the model
$scope.setColor(model)
}) // modelloaded end
4. Esto completa la creación de scripts para esta sección. Para probar el código, introduzca uno de los colores que se han creado en el objeto colorPalette como valor para el parámetro de aplicación color. Pulse en Vista previa y observe cómo ha cambiado el color del modelo. En nuestro ejemplo, se utiliza el amarillo. Si cambia el color del modelo, significa que esta sección se ha completado correctamente.
| Este método funcionará a pequeña escala, pero si hay muchos modelos con varias configuraciones, no funcionará debido al límite de modelos que se pueden añadir a Vuforia Studio. Continúe con este caso práctico de gemelo digital para averiguar cómo utilizar el servicio IRS (Identity Resolution Service) ThingWorx a fin de crear experiencias escalables. |
A continuación, empezará a trabajar con el
servicio IRS (Identity Resolution Service).
