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

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

Toggle Opacity Using Button (Not Toggle Button)


Toggle Opacity Using Button (Not Toggle Button)



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!



Hi @CD_7745465 


Please go over following posts:

1. Shows how to do this with a button:

2. Through script, fading away:


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

Thank you.


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 = () => {
  	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
    console.log("the remainder of No of clicks divided by 3 is " + val);
  	switch(val) {
		case 0:
			$scope.setWidgetProp('modelName', 'opacity', 1);
		case 1:
			$scope.setWidgetProp('modelName', 'opacity', 0.5);
        case 2:
        	$scope.setWidgetProp('modelName', 'opacity', 0);


Top Tags