How to compare Date/Time in HABPanel?

Apps & Services HABPanel
,
1

I created a widget for displaying weather information like many others.
Now, I integrated the Astro-Binding and like to use it besides other thing, to display different icons for day and night.

Using Openweather and the corresponding Condition_ID, I created this piece:

<div class="row">
  <div id="weather-table">
    <div class="col-md-3">
      <div ng-if="itemValue('Condition_ID') >=200 && itemValue('Condition_ID') <=240">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + '200' + '.svg#Layer_1'}}"> </use> </svg> </div>
  		<div ng-if="itemValue('Condition_ID') >=300 && itemValue('Condition_ID') <=330">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + '300' + '.svg#Layer_1'}}"> </use> </svg> </div>  
  		<div ng-if="itemValue('Condition_ID') >=500 && itemValue('Condition_ID') <=540">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + '500' + '.svg#Layer_1'}}"> </use> </svg> </div>
  		<div ng-if="itemValue('Condition_ID') >=600 && itemValue('Condition_ID') <=630">
       	<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + '600' + '.svg#Layer_1'}}"> </use> </svg> </div>
   		<div ng-if="itemValue('Condition_ID') >=700 && itemValue('Condition_ID') <=790">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + '700' + '.svg#Layer_1'}}"> </use> </svg> </div>
   		<div ng-if="itemValue('Condition_ID') == 800">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + itemValue('Condition_ID') + '.svg#Layer_1'}}"> </use> </svg> </div>
   		<div ng-if="itemValue('Condition_ID') == 801">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + itemValue('Condition_ID') + '.svg#Layer_1'}}"> </use> </svg> </div>
   		<div ng-if="itemValue('Condition_ID') == 802">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + itemValue('Condition_ID') + '.svg#Layer_1'}}"> </use> </svg> </div>
   		<div ng-if="itemValue('Condition_ID') == 803">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + itemValue('Condition_ID') + '.svg#Layer_1'}}"> </use> </svg> </div>
   		<div ng-if="itemValue('Condition_ID') == 804">
     		<svg id="weather-icon" ><use xlink:href="{{'/static/icons/weather/' + itemValue('Condition_ID') + '.svg#Layer_1'}}"> </use> </svg> </div>
     	</div>    
    <div class="col-md-2">
      <div class="text-left"><span id="weather-temp">{{'%.1f' | sprintf:itemValue('Temperature')}}</span><span id="weather-temp-sign">°C</span></div>  
    </div>
  </div>
</div>

With the Astro Binding, I have the sunset and sunrise times.
Is there a possibility to use the ‘now’ information and compare it with the sunset/sunrise time directly in HABPanel, or do I need to have a special rule created and setting some flag?

Example for my idea:

<div ng-if="now.isAfter(Sunset_time)">
[put code for night icons here]
</div>
2

I’m not an expert on JavaScript but I do know that now in Rules is only available in Rules. Everything you see in HABPanel is either implemented there in JavaScript or it asks OH for the information through the REST API and now is not exposed through the REST API.

3

The current time isn’t exposed in the template’s scope.
Another solution would be to use the NTP binding to keep the current date and time in an item.
Example item (from the demo package):

DateTime CurrentDate            "Date [%1$tA, %1$td.%1$tm.%1$tY]"   <calendar>  { channel="ntp:ntp:demo:dateTime" }

Then:

<div>Current time: {{itemState('CurrentDate') | date:'HH:mm'}}</div>
<div>Sunrise: {{itemState('Sunrise_Time') | date:'HH:mm'}}</div>
<div>Sunset: {{itemState('Sunset_Time') | date:'HH:mm'}}</div>
<div ng-if="itemState('CurrentDate') < itemState('Sunrise_Time') ||
            itemState('CurrentDate') > itemState('Sunset_Time')">Night time</div>
<div ng-if="itemState('CurrentDate') >= itemState('Sunrise_Time') &&
            itemState('CurrentDate') <= itemState('Sunset_Time')">Day time</div>

This way you’re using your client’s local time, which is probably a good thing (for instance if you switch timezones it will be wrong).

4

Thanks for the reply. Also, a good idea.
In the meantime, I implemented a virtual switch which provides the state of the day to me.