Timer Widget / Countdown Widget with Alexa (Date Difference)

[BoBo (Fabian)]

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

[MDAR (Stuart Hanlon, UK importer of Velbus hardware)]

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

DateTime Conversion

Overview In openHab there are different ways to handle Date/Time values. DateTimeType A DateTime Item carries a DateTimeType. Joda DateTime By default Rules use a Joda DateTime class to represent time, most notably now. Epoch The lowest common denominator when working with time is to get at the epoc value. Epoc is the number of milliseconds that has passed since 1 January 1970 GMT and stored in a long. With epoc, one can compare two dates together, convert a Joda DateTime to a DateTi…

Time of Day Events - An easy approach

A very frequent problem when writing rules is how to determine if it is currently DAY Time of NIGHT Time in order your rules to take different paths . Many solutions have already been provided in the community forum, some more easy than others. A very simple approach would be just to follow the daily events using the Astro binding. This is based on the fact the Sun Rise will ALWAYS follow Sun Set and vice versa. The same logic applies for any event during the day. eg Night time will always co…

[BoBo (Fabian)]

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.

[MDAR (Stuart Hanlon, UK importer of Velbus hardware)]

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?

[BoBo (Fabian)]

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.

[ysc (Yannick Schaus)]

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

Does this help?

[BoBo (Fabian)]

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?

[ysc (Yannick Schaus)]

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

[BoBo (Fabian)]

@ysc

browser dev tools console

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.