Community Tip - You can subscribe to a forum, label or individual post and receive email notifications when someone posts a new topic or reply. Learn more! X
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
Solved! Go to Solution.
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)";
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:
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']); } };
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)";
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:
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']); } };