chronometer

[Burubae]

Hi community!!

I need your help please.

i need to insert a chronometer that counts the time it takes to complete a checker. into a display value widget.

i found this code but it does not work.

$scope.chronometer = function () {
require(['lib/easytimer/dist/easytimer.min.js'], function (easytimer) {
var timer = new easytimer.Timer();
});
var timer = new Timer();
timer.start();
timer.addEventListener('secondsUpdated', function (e) {
$('#basicUsage').html(timer.getTimeValues().toString());
});
$scope.view.wdg['valueDisplay-3'].value = timer;
};

what can i do for fix it?

thanks for your help

[tincescu · Accepted solution]

Hello.

You can make use of the getTime function of javascript.

Just call it when you start your activity and update it as long as your activity is running.

The flow is like this. When you start your activity, you save the date in the startTime variable.

Then we have a function which calls itself every 100ms called UpdateTimer.

It stores the date in the CurrentTime variable then computes the difference between CurrentTime and startTime.

The difference is the time consumed by your activity.

var startTime;



$scope.StartTimer = function()
{
	startTime = new Date().getTime();
}

$scope.UpdateTimer = function()
{
  	var currentTime = new Date().getTime();
  	var distance = currentTime - startTime;

    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
    $scope.view.wdg['valueDisplay-3'].value = $scope.PadZeros(hours) + ":" + $scope.PadZeros(minutes) + ":" + $scope.PadZeros(seconds); 
  
  
    $scope.intervalPromise = $interval($scope.UpdateTimer, 100, 1, true);    	
}


$scope.PadZeros = function(value)
{
  	if((value.toString()).length < 2) return "0" + value.toString();
  	return value;
}

angular.element(document).ready(function () {
	$scope.init();
});
  
$scope.init = function()
{     
  	$scope.StartTimer();
  	$scope.UpdateTimer();
}

[Burubae]

Thank you so much for your help. it works perfectly

[tincescu]

Glad I could help.

[RolandRaytchev]

Hi @Burubae ,

I think the javascript suggested by @tincescu  it is a good solution.

But still I  was curious why your javascript was not working. Ok , on point is that you need to load it and the js loading differs from node.js. 

Here, I used a function to add it to the document head

document.getElementsByTagName('head')[0]

but this was not working the first time. After some tests found that the reason is that the secondsUpdated was fired but values in Studio are not updated and requires an extra call of the 

$scope.$applyAsync(()=>{
// here the code which should be updated   ....
}

so that at the end it was working.

In this case I have the following dispaly in preview:

The js code used here is:

////////////////
//this function will load the javascript library
 $scope.asyncLoadScript = function (fname) {
  return new Promise((resolve, reject) => {
    if(fname) {
      console.log("inside the promise");
      var head = document.head || document.getElementsByTagName('head')[0],
          script = document.createElement('script');
      script.async = true;
      script.onload = resolve;
      script.onerror = reject;
      script.type = 'text/javascript';
      script.src=fname;
      head.appendChild(script);
    }
  });
}
////
//---------------START Loading the API----------------------- 
 
$scope.timer={}
$scope.chronometer = function() {
console.log("chronometer started");
//save the easitimer/easytimer.min.js to the project upload folder 
// but you can use any other location     
$scope.asyncLoadScript("app/resources/Uploaded/easytimer/easytimer.min.js").then(
 function() { 
              console.log("easytimer was loaded successfully") 
                //console.warn( document.getElementsByTagName('head')[0])
              $scope.timer =  new easytimer.Timer();
              $scope.timer.start({precision: 'seconds'});
              $scope.timer.addEventListener('secondsUpdated', function (e) {
              $scope.$applyAsync(()=>{
                   console.log("==> secondsUpdated event! called $scope.setWidgetProp value with timer="+ $scope.timer.getTimeValues().toString());
                   $scope.setWidgetProp('valueDisplay-2', 'value', $scope.timer.getTimeValues().toString());
                 $scope.setWidgetProp('valueDisplay-1', 'value', $scope.timer.getTimeValues().toString());
    
                           });                            
      
                });}, 
     function() { console.log("there something went wrong");} );
}
//---------------END Loading the API-----------------------
$scope.$on('$ionicView.afterEnter', function() {//called this event when the 2d elemets are loaded
   $scope.chronometer();
})