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

[jkramer]

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

[jmikesell]

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;
            };
}

[jkramer]

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!

[AllanThompson]

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

[jkramer]

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

[AllanThompson · Accepted solution]

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

[jmikesell]

@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.

[jkramer]

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