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

Community Tip - Your Friends List is a way to easily have access to the community members that you interact with the most! X

Controlling model item opacity using Select option

TM_9260611
11-Garnet

Controlling model item opacity using Select option

If I select modelitem-1 , it shows only that model item alone. But I want to show rest of the model items opacity in 0.5. 

 

Example: If I Select Modelitem-1 , It should show Modelitem-1 in Opacity 1 and Modelitem-2, Modelitem-3 Opacity as 0.5.

 

If I select Modelitem-2 , It should show the Modelitem-2 in Opacity 1 and ModelItem-1 and Modelitem-3 opacity as 0.5.

@sdidier @Priya 

How can I do that?. Any suggestion.

1 ACCEPTED SOLUTION

Accepted Solutions

Hello,

 

I would recommend to have a look to this thread :

https://community.ptc.com/t5/Vuforia-Studio/blinking-of-a-3d-image/m-p/657207

 

W can find a snippet of a blinking behavior with a 3D Image.

A similar behavior can be done with Opacity of a Model Item.

 

Best regards,

Samuel

View solution in original post

3 REPLIES 3

Hello,

 

To achieve this, I have used these threads in PTC Community about Select Widget:

https://community.ptc.com/t5/Vuforia-Studio/How-to-use-List-in-ThingWorx-Studio/td-p/522911

https://community.ptc.com/t5/Vuforia-Studio/What-is-the-format-for-quot-List-quot-in-the-Select-widget/m-p/550949

 

To populate the Select Widget, I have used the technics as explained in previous threads.

Nothing to add.

 

In Home.js node, I have created this Javascript function :

$scope.changeOpacity = function ()
{
  //console.warn($scope.app.view['Home'].wdg['select-1']);
  //console.log($scope.getWidgetProp('select-1', 'value'));
    switch ($scope.getWidgetProp('select-1', 'value'))
    {
      case '1':
        $scope.setWidgetProp('modelItem-1', 'opacity', 1);
    	$scope.setWidgetProp('modelItem-2', 'opacity', 0.5);
        break;
      case '2':
        $scope.setWidgetProp('modelItem-1', 'opacity', 0.5);
   		$scope.setWidgetProp('modelItem-2', 'opacity', 1);
		break;
      default:
        console.log(`Sorry, we are out of ${item}.`);
    }
}

 

In Select Widget node, in SELECT-DETAILS panel, in EVENTS section, in Value Changed event, JS button, call to this function is done : changeOpacity();

 

How is it working ?

  • Opacity Properties of Model Item 1 and 2 is set to values expected when Item 1 is selected
  • In Select Widget, Item 1 and Item 2 are displayed and returns values 1 and 2
  • Select Widget is setup also to have Item 1 select by default when running Experience
  • When changing Item in Select Widget, Javascript function is ran and Model Items Opacities are modified as expected.

Please find attached an example Project.

 

Best regards,

Samuel

Thanks @sdidier 

 

Its works fine. If i want to add blinking for 3 seconds. how to do with this code?.

 

 

Hello,

 

I would recommend to have a look to this thread :

https://community.ptc.com/t5/Vuforia-Studio/blinking-of-a-3d-image/m-p/657207

 

W can find a snippet of a blinking behavior with a 3D Image.

A similar behavior can be done with Opacity of a Model Item.

 

Best regards,

Samuel

Top Tags