cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to unhighlight a 3D model using javascript

SOLVED
Highlighted
Marble

How to unhighlight a 3D model using javascript

Hi,

 

I have applied model item on top of the 3D model in Thingworx studio. I have to change the color(say red) of the 3D model on the button click and in the same way on the button click 3D model has to display the original color.

 

Can you please help me how to implement this.

I have tried this:

var colVar = $scope.view.wdg[model-item]['color'];

onBtnClick()

{

$scope.view.wdg[model-item]['color'] = "rgba(152,191,16, 1)";
}

onBtnClick()

{

$scope.view.wdg[model-item]['color']=colVar;

}

 

Thank you

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to unhighlight a 3D model using javascript

Hi ,

this should be possible with a restriction. There is a problem when the color is not set. So means when you set the color on your javascript code  to a value  example:

 

$scope.view.wdg['modelItem-2']['color'] = "rgba(255,0,255, 0.6)";

2018-06-26_18-56-53.jpg

 

then you will be not able later to set it back to  the corresponding  name in the Vuforia Studio UI :"unset -X" or "Color|Solid"- 

So was looking on different source I found one  comment

"I believe setting the color property to just quotes with nothing ('' or "") in js will cause the color to return to its default model value. However, in the past I found that this only worked in View, not with Studio Preview, so be sure to check using View."

==========

According this means that the attempt to unset the color value back to "X" will not work in Preview mode on chrom browser but it will work in Vuforia View on end device:

So I testeed the following :

 

$scope.setWidgetProp('modelItem-2', 'color', "");
...
$scope.view.wdg['modelItem-2']['color']="";
...
$scope.view.wdg['modelItem-2'].color='';
...

 

I could confirm that it seems not to work in Preview model in chrome but  I was able to verify that this is working fine in Vuforia View on android device!

So there is possible two solution approaches:

1.) simple ignore the behavior in preview mode and test then on end device

2.) When you define a new 3D modelitem - then set it to a color which is the same or similar to the color what the component originally has. 

One additional problem in your code is that setting of the variable colVar is undefined because when the code is called  the model is not loaded yet and the setting does not make  sense.

So I want to recommend here some construct like:

 

$rootScope.$on('modelLoaded', function() { 
$scope.my_status=0; // used to switch between old and highlight color
 $scope.colVar="";//this is the default for not set value
if (typeof ($scope.view.wdg['modelItem-2']['color']) != 'undefined' && ($scope.view.wdg['modelItem-2']['color']))  //save the old value
$scope.colVar = $scope.view.wdg['modelItem-2']['color'];
  else {console.warn(($scope.view.wdg['modelItem-2']['color'])); 
       }
  

 

So this code will be executed first when the model is loaded and all model and modelitem properties are available.

So I set the color property of specific model item and   defined a function which was applied of the click event of the modelitem .  Clicking on the model item will change now the color:

 

2018-06-26_19-46-44.jpg

2018-06-26_19-47-00.jpg

It will switch between old and new color

Here the whole relevant  code what I used to test the problem:

/////////////////////////////////////
$rootScope.$on('modelLoaded', function() { 
$scope.my_status=0;
 
$scope.colVar="";//this is the default for not set
if (typeof ($scope.view.wdg['modelItem-2']['color']) != 'undefined' && ($scope.view.wdg['modelItem-2']['color']))  
$scope.colVar = $scope.view.wdg['modelItem-2']['color'];
  else {console.warn(($scope.view.wdg['modelItem-2']['color'])); 
       }
  
 console.warn("on begin my_status="+$scope.my_status+"  color= "+$scope.view.wdg['modelItem-2']['color']);
 if($scope.colVar=="") console.warn("is not set - ColorSolid"); 
 });

$scope.onMyBtnClick= function()
{ 
  
  
  if ($scope.my_status <1) {
  $scope.view.wdg['modelItem-2']['color'] = "rgba(255,0,255, 0.6)";
  $scope.my_status=1;
  console.warn("my_status="+$scope.my_status+"  color= "+$scope.view.wdg['modelItem-2']['color']);
  }
  else
 {
 if($scope.colVar =="")

   $scope.setWidgetProp('modelItem-2', 'color',  "");
    
 else
 $scope.view.wdg['modelItem-2'].color=$scope.colVar;
 $scope.my_status=0;
  console.warn("my_status="+$scope.my_status+"  color= "+$scope.view.wdg['modelItem-2']['color']);
  }
 
};
1 REPLY 1

Re: How to unhighlight a 3D model using javascript

Hi ,

this should be possible with a restriction. There is a problem when the color is not set. So means when you set the color on your javascript code  to a value  example:

 

$scope.view.wdg['modelItem-2']['color'] = "rgba(255,0,255, 0.6)";

2018-06-26_18-56-53.jpg

 

then you will be not able later to set it back to  the corresponding  name in the Vuforia Studio UI :"unset -X" or "Color|Solid"- 

So was looking on different source I found one  comment

"I believe setting the color property to just quotes with nothing ('' or "") in js will cause the color to return to its default model value. However, in the past I found that this only worked in View, not with Studio Preview, so be sure to check using View."

==========

According this means that the attempt to unset the color value back to "X" will not work in Preview mode on chrom browser but it will work in Vuforia View on end device:

So I testeed the following :

 

$scope.setWidgetProp('modelItem-2', 'color', "");
...
$scope.view.wdg['modelItem-2']['color']="";
...
$scope.view.wdg['modelItem-2'].color='';
...

 

I could confirm that it seems not to work in Preview model in chrome but  I was able to verify that this is working fine in Vuforia View on android device!

So there is possible two solution approaches:

1.) simple ignore the behavior in preview mode and test then on end device

2.) When you define a new 3D modelitem - then set it to a color which is the same or similar to the color what the component originally has. 

One additional problem in your code is that setting of the variable colVar is undefined because when the code is called  the model is not loaded yet and the setting does not make  sense.

So I want to recommend here some construct like:

 

$rootScope.$on('modelLoaded', function() { 
$scope.my_status=0; // used to switch between old and highlight color
 $scope.colVar="";//this is the default for not set value
if (typeof ($scope.view.wdg['modelItem-2']['color']) != 'undefined' && ($scope.view.wdg['modelItem-2']['color']))  //save the old value
$scope.colVar = $scope.view.wdg['modelItem-2']['color'];
  else {console.warn(($scope.view.wdg['modelItem-2']['color'])); 
       }
  

 

So this code will be executed first when the model is loaded and all model and modelitem properties are available.

So I set the color property of specific model item and   defined a function which was applied of the click event of the modelitem .  Clicking on the model item will change now the color:

 

2018-06-26_19-46-44.jpg

2018-06-26_19-47-00.jpg

It will switch between old and new color

Here the whole relevant  code what I used to test the problem:

/////////////////////////////////////
$rootScope.$on('modelLoaded', function() { 
$scope.my_status=0;
 
$scope.colVar="";//this is the default for not set
if (typeof ($scope.view.wdg['modelItem-2']['color']) != 'undefined' && ($scope.view.wdg['modelItem-2']['color']))  
$scope.colVar = $scope.view.wdg['modelItem-2']['color'];
  else {console.warn(($scope.view.wdg['modelItem-2']['color'])); 
       }
  
 console.warn("on begin my_status="+$scope.my_status+"  color= "+$scope.view.wdg['modelItem-2']['color']);
 if($scope.colVar=="") console.warn("is not set - ColorSolid"); 
 });

$scope.onMyBtnClick= function()
{ 
  
  
  if ($scope.my_status <1) {
  $scope.view.wdg['modelItem-2']['color'] = "rgba(255,0,255, 0.6)";
  $scope.my_status=1;
  console.warn("my_status="+$scope.my_status+"  color= "+$scope.view.wdg['modelItem-2']['color']);
  }
  else
 {
 if($scope.colVar =="")

   $scope.setWidgetProp('modelItem-2', 'color',  "");
    
 else
 $scope.view.wdg['modelItem-2'].color=$scope.colVar;
 $scope.my_status=0;
  console.warn("my_status="+$scope.my_status+"  color= "+$scope.view.wdg['modelItem-2']['color']);
  }
 
};