Controlling model item opacity using Select option

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