Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X
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
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.
Marius
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;
}
};