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

How to create Sliding Buttons and there sequences

SOLVED
Amethyst

How to create Sliding Buttons and there sequences

I want to learn how to create the sliding buttons as there in the image also how the sequence steps have been created oppo

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: How to create Sliding Buttons and there sequences

Hello manojpandey


for sliding panels I am using a CSS:

.panel-hide {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh
}

.panel-show {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh
}

Then it is up to you how you assign these styles via JS. You can for example call a function under  Play button (or in "Play Started" event under model) which will check step number for displaying/changing a specific widgets - for example simple way via switch:

$scope.setStepWdgs = function() {
    var step = $scope.view.wdg['model-1']['currentStep'];
    switch(step) {
      case 4:
        // Display panel on start of step #4:
        $scope.view.wdg['panel-1']['class'] = "panel-show";
        break;
      case 5:
        // Hide panel on start of step #5:
        $scope.view.wdg['panel-1']['class'] = "panel-hide";
        break;
      default:
        /*some code for common steps*/
    }
}

Tomas

 

PS: This code is only example I didn't try it 😅

View solution in original post

3 REPLIES 3

Re: How to create Sliding Buttons and there sequences

These have most likely been done using CSS animations to animate out the panels.  I've used something similar in the past, but really it was just a test to see how it worked.  It's all explained at W3 schools: https://www.w3schools.com/css/css3_animations.asp 

 

Hope this helps.

Highlighted

Re: How to create Sliding Buttons and there sequences

Hello manojpandey


for sliding panels I am using a CSS:

.panel-hide {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh
}

.panel-show {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh
}

Then it is up to you how you assign these styles via JS. You can for example call a function under  Play button (or in "Play Started" event under model) which will check step number for displaying/changing a specific widgets - for example simple way via switch:

$scope.setStepWdgs = function() {
    var step = $scope.view.wdg['model-1']['currentStep'];
    switch(step) {
      case 4:
        // Display panel on start of step #4:
        $scope.view.wdg['panel-1']['class'] = "panel-show";
        break;
      case 5:
        // Hide panel on start of step #5:
        $scope.view.wdg['panel-1']['class'] = "panel-hide";
        break;
      default:
        /*some code for common steps*/
    }
}

Tomas

 

PS: This code is only example I didn't try it 😅

View solution in original post

Re: How to create Sliding Buttons and there sequences

Did you make 2 similar panel widgets for sliding it and giving them different classes? How did you trigger the sliding of panels by js?

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