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

How to select model components in a 3d model without explicit definition of model Items?

SOLVED

How to select model components in a 3d model without explicit definition of model Items?

In Vuforia studio the best way to work with 3d model components is to define explicit modelitems (widget modelItem). So this will be easy way to access the componets and to change their properties

e.g.: $scope.setWidgetProp("modelItem-1", "color",  "rgba(128,0,0,1)");

 

This will  change the modelItem-1 property color to brown – and will display the component which is specified by this modelItem to brown color.

Another way to do this is something like :

$scope.view.wdg['modelItem-1']['color'] = "rgba(128,0,0, 1);";//brown
$scope.view.wdg['modelItem-1']['opacity'] = 0.5;//set transparency to 0.5
//or for the same 
$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", 0.5); //set transparency to 0.5

But in some cases during the development could  be helpful to be able to manipulate the component or request information about them without defining of model Items.

So, for example if we want to select an component and see some information about the component and change the color of it

var PICK_COLOR  = "rgba(255,0,0,1)";
...
$timeout( //timeout block 1
  function() { //timeout function 1
    angular.forEach( //==== for each 3d model block
                     // this will call the function below for each 3d model 
        $element.find('twx-dt-model'), function(value, key) { //for each 3d model block function
       //=====================================================================================
        angular.element(value).scope().$on('userpick',function(event,target,parent,edata) {
          // start the $on() listener 'userpick' + function definition
          //=================================================================================
          
          var pathid = JSON.parse(edata).occurrence;
	  $scope.currentSelection = target + "-" + pathid;  
          // create a component selection e.g. "model-1-/0/0/3/2"
          console.log("twx.app.isPreview() ="+twx.app.isPreview() );
          //print an info if is called in preview mode and could be checked if required
          
           try{tml3dRenderer.setColor($scope.currentSelection,   PICK_COLOR);}
           catch (ex) {console.warn("Exception 1 in tml3dRenderer.setColor()=>"+ex);}
           //will set the color of the selected component  
           } //end of mobile device
        modelItemsList.push($scope.currentSelection);
        } //end is in array
      
  
 //=================================================================================	
	 }); // finish the $on() listener 'userpick' + function definition
  }      //finish for each 3d model block function
    );   //  finish for each 3d model block
 //=================================================================================
 } ,50);   // finishtimeout block 1 and function

2018-11-06_13-12-34.jpg2018-11-06_13-13-25.jpg2018-11-06_13-12-46.jpg

In case that you use PICK_COLOR  = "rgba(255,0,0,0)";

On the most mobile devices it will hide the component

 

Calling of the tml3dRenderer.setColor(…, undefined); will set the component color back to default - example

tml3dRenderer.setColor(‘model-1-/0/0/3/2’, undefined);

 Another point is that when we know the model name and know the component ids we can also set the color or hide components without explicit definition of model items.

For example for a particular  model we have an json file:

{	"/0/0/2"  :"rgba(255,0,0,1);",
        "/0/0/0"  :"rgba(128,0,0,1);",
	"/0/0/5"  :"rgba(128,0,128,1);", 
	"/0/0/3/0":"rgba(0,255,0,1);", 
	"/0/0/6"  :"rgba(255,200,0,1);", 
	"/0/0/3/1":"rgba(0,0,0,0);",
	"/0/0/7/0":"rgba(0,0,0,0);", 
	"/0/0/7/1":"rgba(0,0,0,1);" 
 }

The model to which this json file was created is placed in Vuforia Studio as model widget with name=model-1 

We can then read this json file (from prject->src\phone\resource\Uploaded folder) with some construct like (below) and set the color property of the components (also change the visibility - for the components with alpha channel =0)

Here an example :

//========================================================
// reading a json file with component setting for the components
//========================================================

$scope.setCompProps=function() {
var FILES_MODEL_COMP = {
  'model-1':'comp_info.json'
};

$scope.compJSON_Data = new Array();

angular.forEach(FILES_MODEL_COMP, function(jsonFile, target) { console.log("angular.forEach jsonFile = "+jsonFile + ", target="+target);
  $http.get('app/resources/Uploaded/' + jsonFile).success(function(data, status, headers, config) {
    $scope.compJSON_Data[target]=data;
// in this case is $scope.compJSON_Data['model-1']= of the json structure file here the content'comp_info.json';

 angular.forEach(data , function(color, path_id){
console.log("target="+target+" --> color = "+color + ",path_id="+path_id);
tml3dRenderer.setColor(target+'-'+path_id, color);
   
});//end for each function

  })
  .error(function(data, status, headers, config) {console.log("calling in foreach 1 failed");
  });
});
};

So when we start for this particular model the test code it will change the display of the model according to the setting of the comp_info.json  file

2018-11-06_14-36-52.jpg

2018-11-06_14-14-34.jpg

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to select model components in a 3d model without explicit definition of model Items?

Hi, 

Unfortunately  ,  I do not have information about  official documentation beyond the PTC Vuforia Studio Help.

Here I want to refer to 2 old but helpful documents:

VuforiaStudioCSS_V0.11-1.pptx  - describes some CSS techniques

VuforiaAngularJS.pdf - some javaScript techniques and API

=======

One possible option to discover functionality / but attention - this could be often not supported functionality/ is to review the objects in the Chrome console mode

Not supported means that it mostly works fine but there is no guarantee that it will work in the next releases and PTC development will not pay attention to maintain the further compatibility of this API. 

Example:

In preview Strg-Shift-I to open the chrom debugging console:

And do some console.warn(obj_to_check)... and expand the object in the console -here in example the $scope - object:

2018-11-22_12-29-15.jpg

8 REPLIES 8

Re: How to select model components in a 3d model without explicit definition of model Items?

Great Job! It's working perfectly!

I believe that it would be great to have a full JS/CSS documentation, cause right now I know how much potencial is behind Studio!

 

Highlighted

Re: How to select model components in a 3d model without explicit definition of model Items?

Hi,

I have a problem with tml3drenderer.setColor - in preview mode everything works great, but when I publish this solution for hololens or mobile nothing is colored. Can you advise me, what can be still wrong? Or is it even possible to use this method in final experience?

 

var lastHighlight = '/';
$scope.setComponentHighlight = function(path, turnOn){
  var src='model-2-' + path;
  $timeout(function(src, turnOn, lastHighlight){    
  	try{ 
    	console.log('In timeout Highlihting: ' + turnOn);
  		if(turnOn == true){
    		console.log('Setting color for:' + src);
  			tml3dRenderer.setColor(src, 'rgb(255,7,7)');
  		} else if (turnOn == false) {
    		console.log('Clean color for component: '+ lastHighlight);
    		tml3dRenderer.setColor(lastHighlight, 'rgb(192,192,192)');
  		}
  	} catch (ex) {
  		console.warn("Exception 1 in tml3dRenderer.setColor()=>"+ex);
  	} 
  }.bind(null, src, turnOn, lastHighlight),50);
  lastHighlight = src;
}

Re: How to select model components in a 3d model without explicit definition of model Items?

Hi,

actually I tested it already before posting it on Android on HoloLens and so far I remember it was working

Let me check it , please, again today or tomorrow and provide a feedback soon.

Thanks

Re: How to select model components in a 3d model without explicit definition of model Items?

so, I checked it and could verify that your code  @mziemniewicz was working in Preview but was not working on IOS and Android. My code was still working. so checked what is the difference-- you used rgb instead of rgba function. So when changed  accordingly then it worked also on end devices IOS and Android.

/////////////
$scope.acknowledge = function () {console.log("Acknowledge Requested");};
/////////////////////////
//some tests
var lastHighlight = '/';
$scope.setComponentHighlight = function(path, turnOn){
  var src='model-2-' + path;
  $timeout(function(src, turnOn, lastHighlight){    
  	try{ 
    	console.log('In timeout Highlihting: ' + turnOn);
  		if(turnOn == true){
    		console.log('Setting color for:' + src);
  			tml3dRenderer.setColor(src, 'rgba(255,7,7,1)');
  		} else if (turnOn == false) {
    		console.log('Clean color for component: '+ lastHighlight);
    		tml3dRenderer.setColor(lastHighlight, 'rgba(192,192,192,1)');
  		}
  	} catch (ex) {
  		console.warn("Exception 1 in tml3dRenderer.setColor()=>"+ex);
  	} 
  }.bind(null, src, turnOn, lastHighlight),50);
  
  lastHighlight = src;
}
//////////

$scope.someTest1 = function() {$scope.setComponentHighlight('/0/0/3/2',true);
                               $scope.setComponentHighlight('/0/0/2',true);
                               $scope.setComponentHighlight('/0/0/3/1',true);}

 

 

Re: How to select model components in a 3d model without explicit definition of model Items?

Hi, 

Unfortunately  ,  I do not have information about  official documentation beyond the PTC Vuforia Studio Help.

Here I want to refer to 2 old but helpful documents:

VuforiaStudioCSS_V0.11-1.pptx  - describes some CSS techniques

VuforiaAngularJS.pdf - some javaScript techniques and API

=======

One possible option to discover functionality / but attention - this could be often not supported functionality/ is to review the objects in the Chrome console mode

Not supported means that it mostly works fine but there is no guarantee that it will work in the next releases and PTC development will not pay attention to maintain the further compatibility of this API. 

Example:

In preview Strg-Shift-I to open the chrom debugging console:

And do some console.warn(obj_to_check)... and expand the object in the console -here in example the $scope - object:

2018-11-22_12-29-15.jpg

Re: How to select model components in a 3d model without explicit definition of model Items?

Many thanks also from my side, great work!

I used and modified the code to hide parts in order to reach the parts, that are hidden underneath.

 

else if (currenttool=="eraser"){

              …

try{tml3dRenderer.GetObject($scope.currentSelection).GetWidget().ApplyOccludeOpacity(0,0);}

catch (ex) {console.warn("Exception 1 in tml3dRenderer.setColor()=>"+ex);}

 

Everything works fine.

 Now I want to add a button, that “resets” the model, sothat all the parts are shown again.

I tried the code from here: model reset, but this didn’t do the job.

 

It works when I load another sequence and reload the former sequence, but I think that’s not the nicest way.

Anyone got any Ideas?

Re: How to select model components in a 3d model without explicit definition of model Items?

Hi @whity,

my version of the reset was this one - but it has a less sense in your application case:

 

/==================================================================
 $scope.popoverEndFunc = function(modelItem,popover) {
        	var modelItemId = modelItem;
        	var thePopover  = popover;
        	return function() {		
          		thePopover.remove();
              console.log("dismissF :: modelItemId"); console.warn(modelItemId);
    var OCLUDE_VAL=0;     	 
            if($scope.app.params['SEL_MODE'] == 'RESET') 
            { 
               if(twx.app.isPreview() == true) 
                   { //only operation for preview 
                   try{  
                   tml3dRenderer.GetObject($scope.currentSelection).GetWidget().ApplyOccludeOpacity(OCLUDE_VAL,1.0);  
                      } 
                   catch (ex) {console.warn("Exception2 in tml3dRenderer.GetObject().GetWidget().ApplyOccludeOpacity(); => "+ ex); }
                   }
                   { //mobile device
                  try{
                  tml3dRenderer.setColor($scope.currentSelection, undefined);
                  } catch (ex) {console.warn("Exception 3 in  tml3dRenderer.setColor(); => "+ ex); }            
                  }             
            }
              $scope.currentSelection = undefined;
                   
        	}
 }; //end definition of popoverEndFunc ()
//====================================================================

because the requirement is to select the component - here in manual selection- so far I see it is not that what you need here. It will work if the component is selectable - but when we can access it - it will not work. But what you can do this using a technique as described in  "How to select model components in a 3d model without explicit definition of model Items?"

 

The difference in you case is not use instead of rgba() value  the value "undefined"

 

//========================================================
// reading a json file with component setting for the components
//========================================================

$scope.setCompProps=function() {
var FILES_MODEL_COMP = {
  'model-1':'comp_info.json'
};

$scope.compJSON_Data = new Array();

angular.forEach(FILES_MODEL_COMP, function(jsonFile, target) { console.log("angular.forEach jsonFile = "+jsonFile + ", target="+target);
  $http.get('app/resources/Uploaded/' + jsonFile).success(function(data, status, headers, config) {
    $scope.compJSON_Data[target]=data;
// in this case is $scope.compJSON_Data['model-1']= of the json structure file here the content'comp_info.json';

 angular.forEach(data , function(color, path_id){
console.log("target="+target+" --> color = "+color + ",path_id="+path_id);
//tml3dRenderer.setColor(target+'-'+path_id, color);   
//replace by
tml3dRenderer.setColor(target+'-'+path_id, undefined);
});//end for each function
}) .error(function(data, status, headers, config)
{console.log("calling in foreach 1 failed"); }); }); };

This means you need a some kind of json list of the assembly- assembly bom. I am currently considering the possibility to use Java Toolkit for Creo View. You can easily create for any pvz files (containsing an  assembly)  a Json object which impies  a  list with any syntax of properties - depneding of the JavaToolkit program implemtation

 

Re: How to select model components in a 3d model without explicit definition of model Items?

There is also related post about how to blank dynamicaly components (may be could be helpful)

https://community.ptc.com/t5/Studio/ApplyOccludeOpacity-doesn-t-work-in-Hololens/m-p/604780#M5439