Skip to main content
C
CD_77454651-Visitor
1-Visitor
November 1, 2021
Question

Toggle Opacity Using Button (Not Toggle Button)

  • November 1, 2021
  • 2 replies
  • 1829 views

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

2 replies

M
mcotora12-Amethyst
12-Amethyst
November 3, 2021

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

    T
    TonyZhang16-Pearl
    16-Pearl
    January 30, 2022

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

     

    Terms & ConditionsCookie settingsAccessibility statement