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

Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X

how to show complete model again after hiding some sub-parts

jkramer
11-Garnet

how to show complete model again after hiding some sub-parts

Hi,

 

I want to make an experience where modelItems can be hidden by tapping on them, and where I have a restore-button that shows all modelItems again.

I am using a simple js for hiding the modelItems:

$scope.Hide= function(val) {
   $scope.view.wdg[val]['visible']=false;
}

This works fine, by using this call:

Hide('name-of-the-modelItem')

So far, so good.

However, for showing all models I made a modelItem of the complete model, and I called this function (almost identical to the Hide function):

$scope.Show= function(val) {
  $scope.view.wdg[val]['visible']=true;
}

But... this does not work on the modelItem that I made of the complete model, only on sub-assy-modelItems.

Is this a bug, or are the visible-properties of the sub-modelItems blocking the correct display of the 'visible'-property of the total-model-modelItem??

The point is, I could call the Show-function for all sub-modelItems one by one from a new function, but that's more work, more code... and this experience will be used on a model with quite a few subassies.

Thanks,

Jaap

ACCEPTED SOLUTION

Accepted Solutions

Oops.  Sorry, I didn't scroll down far enough. 

 

Here's all the code:

 

// Hide all elems containing text defined in variable genericStepText
$scope.app.hideElemsIfContains(genericStepText);

// Show specific elements containing text defined in variable specificStepText
$scope.app.showElemsIfContains(specificStepText);

 

$scope.app.hideElemsIfContains = function(testExpression) {
var allElems = document.getElementsByTagName('*');
for (var i = allElems.length; i--; ) {
if(allElems[i].id.indexOf(testExpression) !== -1){
$scope.setWidgetProp(allElems[i].id, "visible", "false");
}
}
}

 

$scope.app.showElemsIfContains = function(testExpression) {
var allElems = document.getElementsByTagName('*');
for (var i = allElems.length; i--; ) {
if(allElems[i].id.indexOf(testExpression) !== -1){
$scope.setWidgetProp(allElems[i].id, "visible", "true");
}
}
}

 

The semicolon ; and close bracket ) that are coloured red above don't need to have a space in between them.  Not if it's important or not, but the message keeps converting them to a 😉 so I had to put the space in there.

 

Allan

View solution in original post

7 REPLIES 7
jmikesell
15-Moonstone
(To:jkramer)

I belive modelItems override the model visibiltiy. And having two model items trying to control the same parts, say at two different assembly levels like you tried, causes weird problems. I would recoment trying the code below.

 

$scope.showAll = function () {
    labels = document.querySelectorAll('[id^="modelItem"]'); //all items that start with modelItem
            for (i = 0; i < labels.length; i++) {
                console.log(labels[i].id); //will write ids to console for checking
                $scope.view.wdg[labels[i].id]['visible'] = true;
            };
}

Thnx for this one!

I tried it, but it seems that the line 

labels = document.querySelectorAll('[id^="modelItem"]');

doesn't work, although I made sure my modelItems have a name starting with modelItem...

Is there a way of inquire the type of the widget? That would make it independent of the name.

Any suggestions?

Thnx!

 

 

Here's some code that our Java guru wrote for me to use in an experience.  The idea was to hide/show a mix of 3D models and/or 3D images in an AR service experience. I used a naming convention for all of the items and then defined variables to say what to look for.  This bit of code was inside a loop that incremented though each step in the service procedure:

 

// Hide all elems containing text defined in variable genericStepText
$scope.app.hideElemsIfContains(genericStepText);

// Show specific elements containing text defined in variable specificStepText
$scope.app.showElemsIfContains(specificStepText);

 

Hope this helps.

 

Allan

Thanks I was looking for something for that. However... I think this is a call to a custom js function. It doesn't work in my case. Do you have the code for the function showElemsIfContains??

Thanks,

Jaap

Oops.  Sorry, I didn't scroll down far enough. 

 

Here's all the code:

 

// Hide all elems containing text defined in variable genericStepText
$scope.app.hideElemsIfContains(genericStepText);

// Show specific elements containing text defined in variable specificStepText
$scope.app.showElemsIfContains(specificStepText);

 

$scope.app.hideElemsIfContains = function(testExpression) {
var allElems = document.getElementsByTagName('*');
for (var i = allElems.length; i--; ) {
if(allElems[i].id.indexOf(testExpression) !== -1){
$scope.setWidgetProp(allElems[i].id, "visible", "false");
}
}
}

 

$scope.app.showElemsIfContains = function(testExpression) {
var allElems = document.getElementsByTagName('*');
for (var i = allElems.length; i--; ) {
if(allElems[i].id.indexOf(testExpression) !== -1){
$scope.setWidgetProp(allElems[i].id, "visible", "true");
}
}
}

 

The semicolon ; and close bracket ) that are coloured red above don't need to have a space in between them.  Not if it's important or not, but the message keeps converting them to a 😉 so I had to put the space in there.

 

Allan

@AllanThompson can you provide some examples of what you are passing to the function for "testExpression", for example if you wanted all items starting with "modelItem" what would you pass? Or if you want all items containing "cable"?

 

Thanks for sharing that is a nice bit of code.

Hi,

 

I got things working nicely with this code in Home.js:

 

$scope.Hide = function(val) {
  $scope.view.wdg[val]['visible']=false;
}

$scope.showAll = function() {
  $scope.app.showElemsIfContains("modelItem");
}

$scope.app.hideElemsIfContains = function(testExpression) {
var allElems = document.getElementsByTagName('*');
for (var i = allElems.length; i--; ) {
if(allElems[i].id.indexOf(testExpression) !== -1){
$scope.setWidgetProp(allElems[i].id, "visible", "false");
}
}
}

$scope.app.showElemsIfContains = function(testExpression) {
var allElems = document.getElementsByTagName('*');
for (var i = allElems.length; i--; ) {
if(allElems[i].id.indexOf(testExpression) !== -1){
$scope.setWidgetProp(allElems[i].id, "visible", "true");
}
}
}

I added this call in the Events > click > js-box of a modelItem or a button in order to hide a modelItem:

 

 

Hide('modelItem_name-of-my-model');

where modelItem_name-of-my-model should be the name of the modelItem that you want to hide. In my example, the name of your modelItems should begin with 'modelItem', because the function showAll calls  showElementsIfContains with the search string 'modelItem'.

And I use this in the Events > click > js-box of a button in order to show all modelItems again:

showAll();

Hope this helps... thnx again, Allan, for sharing your code!

Jaap

 

 

 

 

 

 

 

Announcements

Top Tags