make only model item visible

[GianVal]

Hi, I want to make only a specified model item visible and make the rest of the model invisible. how to do this in JS?

[VladimirN]

 Hi,

Have a look at the suggested solutions here: https://community.ptc.com/t5/Vuforia-Studio/Cannot-hide-Model-Item-with-Visible-Property/td-p/684845

[sebben]

Hi,

I noticed that when you try to hide the model and just want to show the modelItem it wont show up.

So what you have to do is first set the modelItems visible property to false and after a short time set it to true again like this:

$scope.showModelItem=function(){
  $scope.view.wdg["model-1"].visible =false;
  $scope.view.wdg["modelItem-1"].visible =false;
  $timeout(function () {
  $scope.view.wdg["modelItem-1"].visible =true;
  }, 10);
}

[GianVal]

Thank you. That's the goal. I suppose that this method can work, but I would prefer a JS promise/callback method. What do you think?

[RolandRaytchev]

Hi @GianVal ,

here as additional informaiton to your issue. Here is a sample script which will set visibility for all modelItems containing some string and all other modelitems will be set to !value - means when setting is true the other items will set to false  and vice versa. Possibly it could be helpful:

//================================
$scope.setModelItemsVisibility=function(str,value){
 
  var wdgs=$scope.app.view.Home.wdg; 
  for(wdg in wdgs)
  { // console.warn(wdgs[wdg])
    if(hasWdgProp(wdgs[wdg],'idpath')) {
      if( wdg.indexOf(str) !=-1) { //console.log("this widget "+value+"::"+wdgs[wdg]['widgetName']+" is a modelitem");
                           $scope.setWidgetProp(wdg,'visible',value);
                                     $scope.$applyAsync();
                                   }
      else {
          console.log("widget NO "+value+"::"+wdgs[wdg]['widgetName']+" is a modelitem");
          $scope.setWidgetProp(wdg,'visible',!value);
                                     $scope.$applyAsync();
                }
    }
  }
};
//================================================================

and then later call e.g. in the modeLoad event when the model is loaded completely :

//when the modelis Loaded
$rootScope.$on('modelLoaded', function() { 
$scope.setModelItemsVisibility('inner',true);
})

here we will set the visibility to true of all modelItems when the name contains the string inner and all other modelitems will be set to false- invisible

[GianVal]

Thank you! I can work on it with your advice.

Anyway, I'll try to explain to you what is my goal: I set up a dropdown menu (select) listing some model items. every time I click on one of these elements I want to only show the selected one, hiding the others. 

Any other advice? Can you explain me the function of $scope.$applyAsync(); command?

Many thanks

[sebben]

Hi,

you can try it like this:

var array = ["modelItem-1","modelItem-2","modelItem-3"]
var title = []; 
for(var i = 0; i < array.length; i++)
{ title[i] = { display: array[i], value: array[i] }; }

$scope.$on("$ionicView.afterEnter", function (event) {
$scope.view.wdg["select-1"].list = title;
  
});
$scope.showModelItem=function(selectedModelItem){
  console.log($scope.view.wdg["select-1"].value);
  $scope.view.wdg["model-1"].visible =false; // you need this if not every part of your model has a modelItem
  for(var i = 0; i < array.length; i++){
  $scope.view.wdg[array[i]].visible =false;
  }
  $scope.view.wdg[$scope.view.wdg["select-1"].value].visible =true;   
}