Skip to main content
B
Burubae1-Visitor
1-Visitor
March 2, 2020
Solved

chronometer

  • March 2, 2020
  • 2 replies
  • 2230 views

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

Best answer by tincescu

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

 

 

(view in My Videos)

 

2 replies

T
tincescu5-Regular MemberAnswer
5-Regular Member
March 3, 2020

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

 

 

(view in My Videos)

 

    B
    Burubae1-VisitorAuthor
    1-Visitor
    March 6, 2020

    Thank you so much for your help. it works perfectly

    T
    tincescu5-Regular Member
    5-Regular Member
    March 6, 2020

    Glad I could help.

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    March 3, 2020

    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:

     

    2020-03-03_13-27-43.jpg

    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();
})
      Terms & ConditionsCookie settingsAccessibility statement