Skip to main content
J
jdcar1-Visitor
1-Visitor
July 27, 2019
Solved

Highlight part when button pressed

  • July 27, 2019
  • 2 replies
  • 3664 views

Hi,

I am trying to achieve functionality similar to the vuforia studio motorbike welcome experience. I want to be able to press a 3D image button, and have a section of my 3D model highlighted a different colour. There are three different sections that I want to have their own button.

My process so far has been: create 3 figures within Creo Illustrate, one highlighting each part. I then uploaded the .pvz to studio, along with the 3 .pvi files individually and did not select a sequence in the model widget.

I then added the following lines to my Home.js

 

$scope.firsthighlight = function() {
$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/l-Creo 3D - TestFigure1.pvi';
$scope.view.wdg["model-1"].svc.play = true;

 

with the function call firsthighlight(); in my click js for the image button.

This seems to do nothing and I'm not sure why, any help would be appreciated!

Thanks

Best answer by AllanThompson

A more flexible way to do this would be to just use JS in the experience to change the display of model item widgets that represent each item you want to highlight.  In fact that's the example they give in the Studio help on why to use the model item widget: http://support.ptc.com/help/vuforia/studio/en/#page/Studio_Help_Center%2FWidget3DModelItem.html%23

 

With the model item, if you need to highlight something else, then you can just make it a model item.  If you do it using Illustrate, then if you want to highlight something else, you'll need to go back into Illustrate, create the new figure, export the PVZ, bring it into Studio and then do all the changes.  Note that you may need to restructure the sBOM in Illustrate to get the structure that you need in the model for highlighting sub-assemblies.

 

So then you can write a generic function to change the colour:

$scope.highlightgreen= function(widget) {

  $scope.view.wdg[widget]['color'] = "rgba(0,255,0,1)";

}

 

and you call it from the button click action:

highlightgreen('modelItem-1');

 

You'll need to account for all the other items on screen as this will just change the colour of the model item, it won't make everything else transparent.  Lot's of different ways to approach that, but definitely more flexible than doing it in Illustrate.

2 replies

A
AllanThompson16-PearlAnswer
16-Pearl
July 27, 2019

A more flexible way to do this would be to just use JS in the experience to change the display of model item widgets that represent each item you want to highlight.  In fact that's the example they give in the Studio help on why to use the model item widget: http://support.ptc.com/help/vuforia/studio/en/#page/Studio_Help_Center%2FWidget3DModelItem.html%23

 

With the model item, if you need to highlight something else, then you can just make it a model item.  If you do it using Illustrate, then if you want to highlight something else, you'll need to go back into Illustrate, create the new figure, export the PVZ, bring it into Studio and then do all the changes.  Note that you may need to restructure the sBOM in Illustrate to get the structure that you need in the model for highlighting sub-assemblies.

 

So then you can write a generic function to change the colour:

$scope.highlightgreen= function(widget) {

  $scope.view.wdg[widget]['color'] = "rgba(0,255,0,1)";

}

 

and you call it from the button click action:

highlightgreen('modelItem-1');

 

You'll need to account for all the other items on screen as this will just change the colour of the model item, it won't make everything else transparent.  Lot's of different ways to approach that, but definitely more flexible than doing it in Illustrate.

J
jdcar1-VisitorAuthor
1-Visitor
July 29, 2019

Thank you for the reply.

I never considered the model item widget since I hadn't used it before. I've implemented your solution which was much simpler than using Illustrate sequences.

One issue for me currently is being unable to reset the color of the model to what it originally was (not a solid color). Is this possible to do with javascript?
Thanks!

A
AllanThompson16-Pearl
16-Pearl
July 29, 2019

Yep.  Just set color = ""

R
RolandRaytchev21-Topaz I
21-Topaz I
July 28, 2019

Hi @jdcar , 

 

I believe the intention behind your code is to call a step which use an effect in Creo Illustrate like flashing sequence for  highlighting a part .

As mention by  @AllanThompson  you can do this easily by javaScript with modelitem

Alternatively, I want to point how to make your original intention to work. In this case you need a script which will call a particular step for specific sequence and  model widget

 E.g. you can use an  additional JavaScript function  - here an example  showing a demo definition of this functionality  e.g. $scope.app.playModelStep :

 

...
//calling this code after the model Loading is completed
$rootScope.$on('modelLoaded', function() { 
 //start here the new function for Sequnece Figure 1 for model-1 widget with step 3
$scope.app.playModelStep("Figure 1","model-1",3,true)
 
})

//////////////
//definition of the new function function
$scope.app.playModelStep = function (sequence,modelName,step_number,play) {
//sequnece -sequnece name e.g. TestFigure1 - as shown in UI
//modelName - model name e.g. model-1
//step_number - set this number to current step
//play true/false execute play for the model
 
$scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'sequence', '');});


 $timeout(function () {
 $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'sequence', 'app/resources/Uploaded/l-Creo 3D - '+sequence +'.pvi');}); 
 },50);

 $timeout(function () {
 
 $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'currentStep', parseInt(step_number));});
 
 if(play) //check if play should be applyed
 
 $timeout(function () {angular.element(document.getElementById(modelName)).scope().play(); }, 100);
 }, 500);
};
//////////////////////////////////

 

Terms & ConditionsAccessibility statement