Skip to main content
W
whity16-Pearl
16-Pearl
April 25, 2018
Solved

Placeing animations on modelItems with javascript

  • April 25, 2018
  • 2 replies
  • 3484 views

Hello,

Since I have issues with the sequences in the HoloLens, I try to get a work around.

I have a Button, that invokes the function playStep(). The function starts with "modelItem-1". Then, the function moveAway() is invoked, which moves the modelItem and then makes it invisible. When the button is pressed again, it should automatically change to "modelItem-2" and start the same animation starting at its starting position, moving it up and making it invisible. Somehow I can’t get the script using a variable for the name “modelItem-1”. Can anyone help?

 

var modelItemCounter=1;
var timerId = -1;
var timingInterval = 30;
var angleIncrement = 45;
var ydelta = 0;
var speed = 0.01;
var modelItemVar;


$scope.app.playStep = function() {
  $scope.modelItemVar= "modelItem-"+modelItemCounter;
  console.log ("modelItem: "+ modelItemVar);
  var zpos = $scope.view.wdg[modelItemVar]['z'];
  $scope.moveAway();
}
$scope.moveAway = function()
{
  if (timerId > -1)
  {
    clearInterval(timerId);
  }
  timerId = setInterval(function()
                        {
    var stopPosition = $scope.view.wdg[modelItemVar]['z']+0.4;
    var zpos = $scope.view.wdg[modelItemVar]['z'];
    $scope.app.params.zpos= $scope.view.wdg[modelItemVar]['z'];
    $scope.$apply(function()
                  {
      $scope.view.wdg[modelItemVar]['z']=  $scope.view.wdg[modelItemVar]['z'] + speed;
      console.log($scope.view.wdg[modelItemVar]['z']);
      // $scope.app.params.zpos  = $scope.app.params.zpos + speed;
    }
                 );
  }
                        , timingInterval);
  setTimeout(function()
             {
    $scope.view.wdg[modelItemVar]['visible']=false;
    clearInterval(timerId);
    modelItemCounter++;
  }
             , 2000);
  }

Best answer by rperdigao

Hi,

I've made some small adjustments and used a 3D Label (instead of button) to trigger "playStep();" . It worked for me:

var modelItemCounter = 1;
var timerId = -1;
var timingInterval = 30;
var angleIncrement = 45;
var ydelta = 0;
var speed = 0.01;
var modelItemVar;


$scope.playStep = function () {
 debugger;
 modelItemVar = "modelItem-" + modelItemCounter;
 console.log("modelItem: " + modelItemVar);
 var zpos = $scope.view.wdg[modelItemVar]['z'];
 $scope.moveAway();
}

$scope.moveAway = function () {
 if (timerId > -1) {
 clearInterval(timerId);
 }
 timerId = setInterval(function () {
 var stopPosition = $scope.view.wdg[modelItemVar]['z'] + 0.4;
 var zpos = $scope.view.wdg[modelItemVar]['z'];
 $scope.app.params.zpos = $scope.view.wdg[modelItemVar]['z'];
 $scope.$apply(function () {
 $scope.view.wdg[modelItemVar]['z'] = $scope.view.wdg[modelItemVar]['z'] + speed;
 console.log($scope.view.wdg[modelItemVar]['z']);
 // $scope.app.params.zpos = $scope.app.params.zpos + speed;
 }
 );
 }
 , timingInterval);
 setTimeout(function () {
 $scope.view.wdg[modelItemVar]['visible'] = false;
 clearInterval(timerId);
 modelItemCounter++;
 }
 , 2000);
}



You've used $scope.modelItemVar in the start and referenced modelItemVar later.  Either use modelItemVar everywhere (what I did)... Or use $scope.modelItemVar everywhere.  

Hope it helps,

Ricardo Perdigao

2 replies

R
rperdigao5-Regular MemberAnswer
5-Regular Member
April 25, 2018

Hi,

I've made some small adjustments and used a 3D Label (instead of button) to trigger "playStep();" . It worked for me:

var modelItemCounter = 1;
var timerId = -1;
var timingInterval = 30;
var angleIncrement = 45;
var ydelta = 0;
var speed = 0.01;
var modelItemVar;


$scope.playStep = function () {
 debugger;
 modelItemVar = "modelItem-" + modelItemCounter;
 console.log("modelItem: " + modelItemVar);
 var zpos = $scope.view.wdg[modelItemVar]['z'];
 $scope.moveAway();
}

$scope.moveAway = function () {
 if (timerId > -1) {
 clearInterval(timerId);
 }
 timerId = setInterval(function () {
 var stopPosition = $scope.view.wdg[modelItemVar]['z'] + 0.4;
 var zpos = $scope.view.wdg[modelItemVar]['z'];
 $scope.app.params.zpos = $scope.view.wdg[modelItemVar]['z'];
 $scope.$apply(function () {
 $scope.view.wdg[modelItemVar]['z'] = $scope.view.wdg[modelItemVar]['z'] + speed;
 console.log($scope.view.wdg[modelItemVar]['z']);
 // $scope.app.params.zpos = $scope.app.params.zpos + speed;
 }
 );
 }
 , timingInterval);
 setTimeout(function () {
 $scope.view.wdg[modelItemVar]['visible'] = false;
 clearInterval(timerId);
 modelItemCounter++;
 }
 , 2000);
}



You've used $scope.modelItemVar in the start and referenced modelItemVar later.  Either use modelItemVar everywhere (what I did)... Or use $scope.modelItemVar everywhere.  

Hope it helps,

Ricardo Perdigao

    W
    whity16-PearlAuthor
    16-Pearl
    April 26, 2018

    Thanks Ricardo, that worked! In the preview everything looks fine, in the Hololens, the parts won’t disappear. Seems like “$scope.view.wdg[modelItemVar]['visible'] = false;” doesn’t work. I’ll try other commands.

     

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    April 26, 2018

    Hi, 

    Regarding to the question about hidding of 3D modelItems  in the sequnece. So for example this code will work on hololense :

    setTimeout( function () {
    var a1=var_arg1; //arguments to inline function

    $scope.$apply(function () {$scope.view.wdg[a1]['forceHidden'] = true;});
    $scope.$apply(function () {$scope.view.wdg[a1]['visible'] = false;});
    $scope.$apply(function () {$scope.view.wdg[a1]['forceHidden'] = false;});

    clearInterval(timerId);
    console.warn("started the timeoutfunction for "+ a1);
    } , 3000);

     I tested it and could verify that the 3D ModelItems are hidden after the 3 seconds.

    -another approach will be to use the transparency (opacity property set it e.g. to 0 or in loop form 1-0 to have some effect like fade out)

    So, regarding to your solution I have some points what I want to share.

    For example we can have the case that you deleted and created modelitems so that they will be not continues in this case , may be, in this  case  you need something where you can use a list and specify there how to move your modelitems via different sets of speed , direction .etc.:

    2018-04-26_16-59-47.png

     

    Here an example of code  (I tested it on hololens and it worked fine) and should demonstrate how such solution could look like:

    // $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available
// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available
var modelItemCounter =0;
var timerId = -1;
var ydelta = 0;
var number_objs=0; 
var model_size=0.5;
var ray_call_interval_count=0;

var animate_model_items = 
 {
 "modelItem-6": {
 "csys-axis" 	 	: "z",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 100
 },
 "modelItem-7": {
 "csys-axis" 	 	: "x",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 20
 }, 
 "modelItem-8": {
 "csys-axis" 	 	: "y",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 20
 },
 "modelItem-9": {
 "csys-axis" 	 	: "z",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 60
 }, 
 "modelItem-10": {
 "csys-axis" 	 	: "z",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 30
 }, 
 "modelItem-11": {
 "csys-axis" 	 	: "z",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 150
 },
 "modelItem-12": {
 "csys-axis" 	 	: "y",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 90
 }, 
 "modelItem-14": {
 "csys-axis" 	 	: "y",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 90
 },
 "modelItem-15": {
 "csys-axis" 	 	: "y",
 "speed" 		 	: 0.01,
 "angleIncrement" 	: 45,
 "timingInterval" : 30
 }, 
 };

$scope.app.playStep = function () {
// debugger;
var m_items=Object.keys(animate_model_items);
number_objs=Object.keys(animate_model_items).length;
if(modelItemCounter >= number_objs) return; //exti
 { console.log(" number_obj="+ number_objs);
 console.log(" m_items["+modelItemCounter+"]="+ m_items[modelItemCounter]);
 

 $scope.moveAway(m_items[modelItemCounter],animate_model_items[m_items[modelItemCounter++]]);
 
 }
};
////////////////////
$scope.moveAway = function (var_arg1,var_arg2) {
 // var_arg1 modelItemVar
 // var_arg2 modelItemObj
ray_call_interval_count=0;

 if (timerId > -1) { clearInterval(timerId);
 console.log("ClearInterval");}
 console.log("var_arg2[\'timingInterval\']=" +var_arg2['timingInterval']);
 
var original_position= $scope.view.wdg[var_arg1][var_arg2['csys-axis']];
 timerId = setInterval( function ( modelItemVar,modelItemObj) { 
 ++ray_call_interval_count;
 console.log("ray_call_interval_count="+ray_call_interval_count+"modelItemVar="+modelItemVar);
 
 var stopPosition = model_size/2;
 
 var current_pos = $scope.view.wdg[modelItemVar][modelItemObj['csys-axis']];
 
 var movementDifference= current_pos -original_position;
 if(Math.abs(movementDifference) > Math.abs(stopPosition))
 {clearInterval(timerId);
 console.warn("reached stop criteria!");}
 
 $scope.$apply((function (a1,a2) {
 console.log("apply a1="+a1);
 $scope.view.wdg[a1][a2['csys-axis']] = $scope.view.wdg[a1][a2['csys-axis']] + a2['speed'];
 console.log("set value for "+a1 +" to value" + $scope.view.wdg[a1][a2['csys-axis']]);
 // $scope.app.params.zpos = $scope.app.params.zpos + speed;
 })(modelItemVar,modelItemObj) //apply inline function
 );//applay funciton 
 
 }, var_arg2['timingInterval'],var_arg1,var_arg2); //end of interval
 
console.log ('timingInterval='+ var_arg2['timingInterval']);
 
 
setTimeout( function () {
 var a1=var_arg1; //arguments to inline function
 
 $scope.$apply(function () {$scope.view.wdg[a1]['forceHidden'] = true;});
 $scope.$apply(function () {$scope.view.wdg[a1]['visible'] = false;});
 $scope.$apply(function () {$scope.view.wdg[a1]['forceHidden'] = false;});
 
 clearInterval(timerId);
 console.warn("started the timeoutfunction for "+ a1);
 } , 3000); 
 
};
      Terms & ConditionsAccessibility statement