Placeing animations on modelItems with javascript

[whity]

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);
  }

[rperdigao · Accepted solution]

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

[whity]

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.

[RolandRaytchev]

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.:

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); 
        
};