Timer Widget / Countdown Widget with Alexa (Date Difference)

Hello Openhab community,
I have the problem that I want a widget that shows me the remaining time of my Alexa timer. I tried to calculate the difference with two items and then output the result. in a rule that would be easy but then I would have status changes every second. so i tried to write a widget with an additional javascript. My best result was this:

timer.js

angular
    .module('app.widgets')
    .controller('MyWidgetCtrl', testCtrl);

testCtrl.$inject = ['$scope', 'OHService'];
function testCtrl($scope, OHService) {
  var vm = this;
  vm.myvalue = "testing123";

  OHService.onUpdate($scope, 'AAktuellesDatum', function () {
    var item1 = OHService.getItem('AktuellesDatum');
    var item2 = OHService.getItem('BasementEchoNextTimer');
    if (item1) {
      vm.myitem = item2.state - item1.state;
    }
  });

}

Widget

<div oc-lazy-load="['/static/timer.js']">
  <div ng-controller="MyWidgetCtrl as myctrl">
		<input class="form-control" type='text' ng-model="myctrl.myitem" />
  </div>
</div>

But the two dates cannot be subtracted. The current update would be just as high as with the rule. So it would be better if the widget is updated secondarily and takes the current time itself.
Since I have no idea about JavaScript, it is difficult for me to understand how I have to write the script.

Any ideas? thank you for reading

I’ve only just discovered epoch time format, would using that make the maths work?

I think DLS rules can happily convert DateTime Items to Epoch

Thank you for your answer. I find out that my Sonos one can’t get the next timer value. Sometimes it works, but most the time the Sonos one get the value of the current time. I think so it isn’t possible to display a date that difference is negativ.

Thanks also.

I thought you said it was a Time remaining until an Alexa alarm?

Rather than a Sonos thing.

For the Alexa issue, isn’t it just a sum like remaining time = Alexa Timer as Epoch - now as Epoch

Where does the Sonos come into this?

1 Like

The Sonos one have a builtin Alexa.I thought this alexa does not have the “next timer” feature.

I tell the sonos one that it should set a timer and the build in Alexa handle it. But the time I get for the “next timer” channel on this Thing is the current time not the time wenn the timer ends.

And yes i thing it should just be this simple for remaining time.

1 Like

https://www.w3schools.com/howto/howto_js_countdown.asp

Does this help?

1 Like

This does help. Thank you. This is my simple counter now:

timer.js

var myApp = angular.module('myApp',[]);
var promise;

myApp.controller('MyController', ['$rootScope', '$scope', 'OHService', '$interval',
function($rootScope,$scope, OHService, $interval) {
  
  var itemName = 'CalPrivatTimeS0';
  var item = OHService.getItem(itemName);
  var countDownDate = new Date(item.state).getTime();
  
  var updateClock = function() {
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    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);
    
    //write time variable
    $scope.clock  = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s "; 
    if (distance < 0) {
      clearInterval(promise);
      $scope.clock = "EXPIRED";
    }
    
  };
  promise = $interval(updateClock, 1000,0,false);
  updateClock();
}]); 

Widget

<div oc-lazy-load="['/static/timer.js']">
  <div ng-controller="MyController">
  <strong>{{ clock }}</strong>
  </div>
</div>

Result:

This is really nice, but if i reload the page this was shown:

I can’t reload the page. Only if i enter the page from an other, the timer appears.

I found out that is a problem with OHService. If I use var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime(); as the ref time I can reload.

Any ideas?

1 Like

Not without some error output from the browser dev tools console, I’m afraid.

Chrome Browser Console give this error:

TypeError: Cannot read property 'state' of null
    at updateClock (asd.js:13)
    at Object.<anonymous> (asd.js:33)
    at Object.invoke (vendor.js:42)
    at R.instance (vendor.js:91)
    at n (vendor.js:66)
    at g (vendor.js:59)
    at vendor.js:59
    at vendor.js:656
    at vendor.js:132
    at m.$eval (vendor.js:147)

I have never developed web applications. If you tell me about browser dev tools console I have no idea what that is. I hope I still found the right output.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.