Skip to main content
T
therealSy1-Visitor
1-Visitor
April 1, 2020
Solved

3D images binded to a slider

  • April 1, 2020
  • 1 reply
  • 5501 views

Hello,

 

Completely new to all of this and am trying to put together a use case for sharing computational fluid dynamic data in an AR sense.

 

I have a number of slices from our CFD package saved as .png images.  I can bring these into studio and "walk" round them on a mobile device overlaying a model but I would like them bound to a 2D slider widget so that when I slide the slider forwards and backwards they turn on an off.  In effect I would be sectioning the CFD data up and down a model with a slider.

 

If you can see the attached image you can see 4 slices correctly positioned.  When the experience loads up the first will be on and the other three not visible.  As the slider is moved to the right the first will not be visible and the next will turn on and so on allowing you to section forwards and backwards.

 

Many thanks for anyones help on this (or a better way of doing it!)

 

Thanks,

Sy

Best answer by sebben

Hi,

in this case it would make more sense to have just one 3DImage in the scene and you just load a new image if the slider value changes:

$scope.ChangeImages1 = function(){
 for(var i=1; i< 350; i++){
 if ($scope.app.view.Home.wdg["slider-1"].value == i){ 
 $scope.app.view.Home.wdg["3DImage-1"].src='app/resources/Default/vu_gauge'+i+'.svg';
 }
 } 
}

So you have just have to change the path in the code above.

1 reply

T
therealSy1-VisitorAuthor
1-Visitor
April 1, 2020

Having trawled through some of the other questions and answers I think I need to do this in Java.  whilst I have some limited coding experience it is mainly Swift and Python and I'm not even sure if this is the best route to go down.

 

I think I need to create a function which is then called via the Value changed event on the slider itself.

 

Essentially if I have a series of 3d images I need to be able to call them individually in the code based on the slider value. 

 

Essentially

 

if the slider value === 1

   3D-Image-[1].visible = true

   3D-Image-[all others].visible = false

 

if slider value ===2

  3D-Image-[2].visible = true

  3D-Image-[all others].visible = false

 

Is this along the right lines?

 

S
sebben14-Alexandrite
14-Alexandrite
April 2, 2020

Hi,

yes you can do it that way. Your function can look like this:

$scope.ChangeImages = function(){
 if ($scope.app.view.Home.wdg["slider-1"].value == 0){
 $scope.app.view.Home.wdg["3DImage-1"].visible = true;
 $scope.app.view.Home.wdg["3DImage-2"].visible = false;
 $scope.app.view.Home.wdg["3DImage-3"].visible = false;
 $scope.app.view.Home.wdg["3DImage-4"].visible = false;
 }
 if ($scope.app.view.Home.wdg["slider-1"].value == 1){
 $scope.app.view.Home.wdg["3DImage-1"].visible = false;
 $scope.app.view.Home.wdg["3DImage-2"].visible = true;
 $scope.app.view.Home.wdg["3DImage-3"].visible = false;
 $scope.app.view.Home.wdg["3DImage-4"].visible = false;
 }
 if ($scope.app.view.Home.wdg["slider-1"].value == 2){
 $scope.app.view.Home.wdg["3DImage-1"].visible = false;
 $scope.app.view.Home.wdg["3DImage-2"].visible = false;
 $scope.app.view.Home.wdg["3DImage-3"].visible = true;
 $scope.app.view.Home.wdg["3DImage-4"].visible = false;
 }
 if ($scope.app.view.Home.wdg["slider-1"].value == 3){
 $scope.app.view.Home.wdg["3DImage-1"].visible = false;
 $scope.app.view.Home.wdg["3DImage-2"].visible = false;
 $scope.app.view.Home.wdg["3DImage-3"].visible = false;
 $scope.app.view.Home.wdg["3DImage-4"].visible = true;
 }
 
}

 Make sure your StudioID's match the names in "" .

    Terms & ConditionsAccessibility statement