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

Expand & Collapse Sidebar

AS16
12-Amethyst

Expand & Collapse Sidebar

Hi all,

 

I have a 2D project and I want to use a feature of expanding and collapsing the sidebar when user click on "☰ List of Instruction" button. The sidebar containing a list of instructions for assembly process using checkbox. 

 

The idea is, after the first step being played, user have to click on "☰ List of Instruction" button to check on the checkbox for the step that has been done. After that, the sidebar will automatically collapse and the next step will automatically play the assembly process. Then the user must repeat the same step as before which is checking the checkbox and next step automatically being played. 

 

Is it possible to do this?

 

Thank you in advance. 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
sebben
11-Garnet
(To:AS16)

You can just uncheck the visible property of the gridLayout and it will not show up in the beginning.

View solution in original post

7 REPLIES 7
sebben
11-Garnet
(To:AS16)

Hi,

 

an easy way to do that would be to just show and hide the gridLayout. You can write two functions like this:

$scope.showPanel = function(){
  $scope.view.wdg["gridLayout-1"].visible = true;
}

$scope.hidePanel = function(){
  $scope.view.wdg["gridLayout-1"].visible = false;
}

 

Then call showPanel(); from the button Click event and hidePanel(); from the Selected event of the checkboxes.

Also link the Selected event to the Play and Forward service of your model.

 

I hope this helps.

AS16
12-Amethyst
(To:sebben)

@sebben Thank you for your help. But I want the checkbox being displayed only when user click on the "List of Instruction" button. 

 

For now, it being displayed from beginning. The checkbox will collapse when I click on the checkbox. 

 

Thank you. 

sebben
11-Garnet
(To:AS16)

You can just uncheck the visible property of the gridLayout and it will not show up in the beginning.

View solution in original post

AS16
12-Amethyst
(To:sebben)

@sebben Thank you so much for your help 🙂

RolandRaytchev
20-Turquoise
(To:AS16)

Additonally to solution provided by  @sebben  I want to mention the option to use popup widget. I remember that I used in an old project for similar task  different numbers of  popus as conainer for different checkbox lists.

Also , it  is possible to use an repeat widget where the data is commming from a service - but this requires a service to collect or to generate data (only in javascript).  The most simple solution is to use static list of checkbox widget added to the popup as shown on the picture :

2021-02-02_11-50-57.jpg

The popup could be shown via call like:

 

$timeout($scope.$root.$broadcast('app.view["Home"].wdg["popup-1"].svc.showpopup'),100);
//or hide it
$timeout($scope.$root.$broadcast('app.view["Home"].wdg["popup-1"].svc.hidepopup'),100);

 

@RolandRaytchev Thank you so much for your explanation. Really appreciate it!  

And I really want to know how this sophisticated animated sidebar be done. (around 4s and 28s) 😃

With Ionic? or CSS?

 

Note: https://community.ptc.com/t5/Vuforia-Studio/Showing-animation-in-select-widget/m-p/643465 found this afterward.

 

Announcements

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection