Hide a 2D resource image and make it visible upon clicking button widget.

[jmackenzie]

Is there a way hide a 2D resource image widget upon launching an experience, and make it appear by clicking button widget? I'm new to Studio, so there may be a way to do this that I am missing.

Thanks!

Joe M.

[ytella · Accepted solution]

Hi Joe,

Following is one way to hide a 2D resource image widget:

• Drag Resource image on to 2d canvas.
• Select a source
• Uncheck the Visible property as shown below:

• Drag Button widget on to the canvas.
• Now add an application parameter with any name in the Data panel and set it's value to false. For example, click + sign next to Application parameters -> Type a name such as visibleparameter and set the value to false as shown below:

• Drag the binding icon infront of the visible parameter and drop it on the resourceImage and select the visible option as shown below:

• Now click on Home.js and write the below sample function:

          $scope.visibleImage = function() {

            $scope.app.params.visibleparameter = true;

          };

• Now click on the button widget on the 2D canvas. In the properties panel, click on JS which is next to click event and call the function as follows:

• Save and click on Preview.

Upon launching the experience, the Resource Image widget is not visible. It is only visible when we click on the Button.

Hope this helps!

[jmackenzie]

Hi Yamini,

Excellent instruction - thank you! Would it be easy to apply the reverse and have the images set to invisible upon clicking the button again?

Thanks!

Joe

[ytella]

Hi Joe,

Yes, the reverse button action can be done in many ways. One way could be adding another application parameter such as counter and set it's default value to 0. Now update the function code as follows in Home.js:

$scope.visibleImage = function() {

   if(($scope.app.params.counter % 2) == 0)

   {

     $scope.app.params.visibleparameter = true;

     $scope.app.params.counter++;

   }

   else

   {

     $scope.app.params.visibleparameter = false;

     $scope.app.params.counter++;

   }

};

In the above function, I set the visible parameter to true for every alternative button click. I have used a counter to distinguish the clicks. Alternatively, you can use a boolean variable to track the clicks.

Hope this helps!

[jmackenzie]

Awesome - thank you so much for the help!

Joe M.