Skip to main content
J
jmackenzie5-Regular Member
5-Regular Member
December 4, 2017
Solved

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

  • December 4, 2017
  • 2 replies
  • 4321 views

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.

Best answer by ytella

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!

2 replies

Y
ytella17-PeridotAnswer
17-Peridot
December 4, 2017

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!

J
jmackenzie5-Regular MemberAuthor
5-Regular Member
December 4, 2017

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

Y
ytella17-Peridot
17-Peridot
December 5, 2017

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!

    J
    jmackenzie5-Regular MemberAuthor
    5-Regular Member
    December 5, 2017

    Awesome - thank you so much for the help!

    Joe M.

      Terms & ConditionsCookie settingsAccessibility statement