Toggle Opacity Using Button (Not Toggle Button)

[CD_7745465]

Hello,

I am a beginner to Vuforia and JS programming, so I believe I have a rather straightforward and maybe even an easy question to answer.

I am looking to program a button that will toggle visibility of a model part between 3 "modes".  It will start being fully visible.  One click will make the part 50% transparent.  A second click will make the part invisible.  And a third click will bring it back to its original, opaque representation.

I believe this can be achieved with a simple function to increment a variable that tracks the transparency, but I can't figure out how to do it.

I have been able to make a button to change to 50% transparency and another to change back to 0% transparency, but I do not want to make too many buttons for the 2D overlay, as I plan to eventually scale this button to multiple parts for a more complex model.

Attached is my code, the first four functions are for buttons that hide, show, 50% transparency, return to opaque (0% transparency).  The newToggle function at the bottom is my attempt that does not work to perform this 3-mode toggle function with a standard button.

Thanks in advance for any help!

-Chris

[mcotora]

Hi @CD_7745465 

Please go over following posts:

1. Shows how to do this with a button:

https://community.ptc.com/t5/Vuforia-Studio/Controlling-Model-Item-Opacity-Using-Toggle-Button/td-p/539564

2. Through script, fading away:

https://community.ptc.com/t5/Vuforia-Studio/How-to-change-transparency-of-objects-through-script/td-p/617057

Let me know if you have questions or having issues implementing it.

Thank you.

Marius

[TonyZhang]

Hi @CD_7745465 ,

I used a variable as a counter to track how many times a button gets clicked.

Divide it by 3 and get 3 types of remainder in cycle as the number increments.

Set the opacity value of your model according to the remainder should do the trick.

See below example:

let i = 0; // i equals how many times the button gets clicked
$scope.onClick = () => {
	i++;
    //debug
  	console.log(i + " time(s) button got clicked");
  
  	let val = i % 3 //val will be one of the values in 0, 1, 2
    //0: initial state or 3rd click opaque
    //1: 1st click 50% transparent
    //2: 2nd click invisible
    
    //debug
    console.log("the remainder of No of clicks divided by 3 is " + val);
  
  	switch(val) {
		case 0:
			$scope.setWidgetProp('modelName', 'opacity', 1);
			break;
		case 1:
			$scope.setWidgetProp('modelName', 'opacity', 0.5);
			break;
        case 2:
        	$scope.setWidgetProp('modelName', 'opacity', 0);
        	break;
	}
};