Start animation via JavaScript

[DG_10787729]

Hello everyone!

I'm trying to start a specific step from an animation/sequence when a certain criteria (e.g. value (from Thingworx) is 50).

I've used the code from a different post/question as a reference for a similar issue of mine (which works fine now):
https://community.ptc.com/t5/Vuforia-Studio/i-have-9-buttons-for-each-animation-and-want-to-disable-playback/td-p/625384

I've already tried to call the "playModelStep"-function (with params) from a filter, which I've added to a gauge.

The function should be called, when the value matches the criteria, but when I look at the console (in Preview), it says that the function is undefined. I've tested it with another function and it works. Now, I don't know if it is because I tested it with a function that doesn't need any params or because it doesn't use any e.g. $scope.params.

Edit: It doesn't work anymore (idk why...)

I've also tried to call the "playModelStep"-function, with either a $scope.$watch(DataChange event) or a $scope.$on(DataChange event), but then I get this "message"...

here's my code:

// variables
$scope.counter = 0;
$scope.buttonStatus = false

// Button Visibility functions
{
  $scope.instBtnVis = function() {
    // if visible param is checked then the value = null (not true nor false)
    if($scope.app.params.switchInstBtnVis == null) {
      $scope.app.params.switchInstBtnVis = false;
    }
    else {
      $scope.app.params.switchInstBtnVis = !$scope.app.params.switchInstBtnVis;
    }
  }
}

// reset/hide Instructions
{
  $scope.resetInstWdgs = function() {
    $scope.counter = 0;
    $scope.app.params.resource = "app/resources/Uploaded/blank.png";
    $scope.setWidgetProp('btn_nextInst', 'visible', false);
    $scope.setWidgetProp('btn_prevInst', 'visible', false);
    $scope.setWidgetProp('btn_rerunInst', 'visible', false);
    $scope.app.params.switchInstCloseBtnVis = false;
  }
}


//-------------------------------------------

$scope.unloadInst = function() {
  $scope.$applyAsync(() => {
    if(parseInt($scope.counter) == 1) {
      $scope.app.params.resource = "app/resources/Uploaded/blank.png";
    }
  });
}

$scope.$on('stepstarted', function(evt, arg1, arg2, arg3) {
  $scope.buttonStatus = true;
  $scope.setWidgetProp('btn_nextInst', 'visible', false);
  $scope.setWidgetProp('btn_prevInst', 'visible', false);
  $scope.setWidgetProp('btn_rerunInst', 'visible', false);
  $scope.app.params.switchInstCloseBtnVis = false;
});

$scope.$on('stepcompleted', function(evt, arg1, arg2, arg3) {
  $scope.buttonStatus = false;
 
  if(parseInt($scope.counter) == 5) {
    $scope.setWidgetProp('btn_prevInst', 'visible', true);
    $scope.setWidgetProp('btn_rerunInst', 'visible', true);
    $scope.app.params.switchInstCloseBtnVis = true;
  }
  else if(parseInt($scope.counter) == 1) {
    $scope.setWidgetProp('btn_nextInst', 'visible', true);
    $scope.setWidgetProp('btn_rerunInst', 'visible', true);
    $scope.app.params.switchInstCloseBtnVis = true;
  }
  else if(parseInt($scope.counter) != 0) {
    // not possible outside of this else if, because when a function finishes it also counts as "stepcompleted"
    
    $scope.setWidgetProp('btn_nextInst', 'visible', true);
    $scope.setWidgetProp('btn_prevInst', 'visible', true);
    $scope.setWidgetProp('btn_rerunInst', 'visible', true);
    $scope.app.params.switchInstCloseBtnVis = true;
  }
});

$scope.rerunInst = function() {
  if(!$scope.buttonStatus) {
    $scope.playModelStep("Abbildung 1", "instructions_animation", $scope.counter, true);
  }
}

// it will play for "app/resources/Uploaded/l-Creo 3D - Abbildung 1.pvi"
// in model widget "instructions_animation"
// the step number 1 - 4

$scope.nextInst = function() {
  
  // because of "Anleitung" Button
  $scope.unloadInst();
  
  if(!$scope.buttonStatus) {
    // will play only if $scope.buttonStatus == false
    
    $scope.counter++;
    $scope.playModelStep("Abbildung 1", "instructions_animation", $scope.counter, true);
  } 
}

$scope.prevInst = function() {
  
  $scope.unloadInst();
  
  if(!$scope.buttonStatus) {
    $scope.counter--;
    $scope.playModelStep("Abbildung 1", "instructions_animation", $scope.counter, true);
  } 
}

//----------------------------
$scope.playModelStep = function (sequence, modelName, step_number, play) {
  // sequence - sequence name e.g. TestFigure1 - as shown in UI
  // modelName - model name e.g. model-1
  // step_number - set this number to current step
  // play - true/false execute play for the model

  $timeout(function() {
    
    $scope.$applyAsync(() => {
      $scope.setWidgetProp(modelName, 'sequence',  'app/resources/Uploaded/l-Creo 3D - ' + sequence + '.pvi');
    });
  }, 50);

  $timeout(function() {
     
    $scope.$applyAsync(() => {
      $scope.setWidgetProp(modelName, 'currentStep', parseInt(step_number));
    });

    if(play) {
      // check if play should be applied
      
      $scope.app.params.resource = "app/resources/Uploaded/instruction" + (step_number-1) + ".jpg";
      $timeout(function() {
        angular.element(document.getElementById(modelName)).scope().play();
      }, 100);
    }
    
  }, 500);
};

$scope.test = function() {
  console.log("works");
}

//-----------------------------------------
/*$scope.$watch("app.mdl['SubscribeTest'].events['DataChange.A1D']['eventData']", function() {
  var eventData = $scope.app.mdl['SubscribeTest'].events['DataChange.A1D']['eventData'];
  if(eventData == 50 && !$scope.buttonStatus) {
    $scope.app.playModelStep("Abbildung 1", "instructions_animation", 3, true);
  }
  console.log("works");
});*/

$scope.$on('app.mdl["SubscribeTest"].events["DataChange.A1D"]', function() {
  var val = $scope.app.mdl["SubscribeTest"].events["DataChange.A1D"]["eventData"];
  if (val == 50 && !$scope.buttonStatus) {
    $scope.playModelStep("Abbildung 1", "instructions_animation", 3, true);
  }
  console.log("works");
});

SubscribeTest -> thing
A1D -> thing-property (auto-refresh is activated)

Software:
ThingWorx 9.6.1-b253
Vuforia Studio 9.25.6 (9.25.6.0)

I would really appreciate some help.