Creare configurazioni di colori

Nell'ultima sezione è stato illustrato come è possibile utilizzare il parametro di applicazione model per modificare la configurazione del modello all'interno dell'esperienza. A questo punto si procede alla creazione di un parametro di applicazione color che funziona in modo analogo. Tuttavia, è necessario creare uno script per attivarlo.

In questa sezione viene creato un oggetto contenente colori RGBA a cui accederà Vuforia Studio. Dopo che un colore è stato recuperato dall'oggetto, viene passato alla funzione setColor. La funzione setColor cambia l'aspetto del modello applicando il colore specificato per il parametro di applicazione color.

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

L'oggetto colorPalette viene utilizzato per contenere tutti i colori possibili per configurare il modello. È stato aggiunto un elenco di colori di base a questa esperienza, ma poiché Studio è compatibile con i codici colore RGBA, è possibile aggiungere altri colori all'esperienza.

2. Il passo successivo consiste nella creazione della funzione setColor da utilizzare per impostare il colore desiderato per il quadrirotore. Se un colore è definito nel parametro di applicazione color, il codice all'interno dell'istruzione if viene attivato.

b. Se il colore immesso è un valore valido in colorPalette, viene attivata la promise dell'API PTC Metadata. Per determinare se la promise è soddisfatta, viene creata una variabile toPaint, che diventa un elenco delle parti che hanno l'attributo painted con il valore true. A questo punto, se sono presenti parti che soddisfano tali criteri, il renderer 3D TML cambia il colore di quelle parti specifiche in modo da riflettere il valore in paintColor.

//
// 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. Le funzioni che cambiano il colore del modello sono state create, ma non sono state ancora chiamate. Affinché questa funzione venga eseguita non appena si carica Studio, è necessario creare una funzione del listener di eventi modelLoaded. Come suggerisce il nome, quando il modello viene caricato da Studio, il corpo della funzione viene eseguito. In questo caso, quando il modello viene caricato, la funzione setColor viene attivata per i modelli specificati per impostarne il colore in base alla configurazione.

//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. Tutti gli script necessari per questa sezione sono stati completati. Per testare il codice, immettere uno dei colori creati all'interno dell'oggetto colorPalette come valore per il parametro di applicazione color. Fare clic su Anteprima per vedere come è cambiato il colore del modello. Per il nostro esempio è stato utilizzato il colore giallo. Se il colore del modello risulta cambiato, questa sezione è stata completata correttamente.

Questo metodo funziona su scala ridotta. Nel caso in cui siano presenti molti modelli con più configurazioni, il metodo non funzionerà a causa del numero limite di modelli che è possibile aggiungere a Vuforia Studio. Proseguire con questo caso di utilizzo di digital twin per scoprire come utilizzare Identity Resolution Service e ThingWorx per creare esperienze scalabili.