Facility Control

I figured out how to make a simple clock in Dashboard. Is there any way I can create another clock with an offset for different time zones?

Hi Matthew.

There is no built-in mechanism to change from one timezone to another but there is some power in the scripting engine to achieve your desired effect.

Copy and paste the code below into a new Custom Panel file and you'll see a timer that displays the current time in GMT, Eastern Daylight Time, and Pacific Daylight Time:

`
function padStr(str, len)

{

str = str + '';

while (str.length < len)

{

str = '0' + str;

}

return str;

}
function dateToTimezone(date, offsetInHours)

{

var zuluTime = date.getTime() + (date.getTimezoneOffset() * 60000); //getTimezoneOffset returns offset in minutes

var newTime = new Date(zuluTime + offsetInHours * 60 * 60 * 1000); //Create a new date object with the offset applied

return padStr(newTime.getHours(), 2) + ':' + padStr(newTime.getMinutes(), 2) + ':' + padStr(newTime.getSeconds(), 2); //Return in format HH:MM:SS

}

var currentTime = new Date();

var utcTime = dateToTimezone(currentTime, 0); //GMT

var edtTime = dateToTimezone(currentTime, -4); //Eastern daylight

var pdtTime = dateToTimezone(currentTime, -7); //Pacific Daylight

params.setValue('Timer_Display_UTC', 0, utcTime);

params.setValue('Timer_Display_EDT', 0, edtTime);

params.setValue('Timer_Display_PDT', 0, pdtTime);

`

#DashBoard

I know this is old, but I'm finding a need for this function again. Where do I past this code?
#DashBoard

You would put padStr and dateToTimezone into an tag and the var currentTime = new Date();

var utcTime = dateToTimezone(currentTime, 0); //GMT

var edtTime = dateToTimezone(currentTime, -4); //Eastern daylight

var pdtTime = dateToTimezone(currentTime, -7); //Pacific Daylight

params.setValue('Timer_Display_UTC', 0, utcTime);

params.setValue('Timer_Display_EDT', 0, edtTime);

params.setValue('Timer_Display_PDT', 0, pdtTime);

part into the task triggered by your clock timer.

I have attached a complete Custom Panel to demonstrate the idea.

<abs contexttype="opengear" style="">
<meta>
<params>
<param access="1" maxlength="0" name="GMT Time" oid="Timer_Display_GMT" stateless="true" type="STRING" value="" widget="default"/>
<param access="1" maxlength="0" name="EDT Time" oid="Timer_Display_EDT" stateless="true" type="STRING" value="" widget="default"/>
<param access="1" maxlength="0" name="PDT Time" oid="Timer_Display_PDT" stateless="true" type="STRING" value="" widget="default"/>
</params>
<style id="label-header" value="font:bold;size:Bigger;fg#FFFFFF;bg#000000;bdr:etched;txt-align:center;"/>
</meta>
<timer id="my-clock" pattern="HH:mm:ss" rate="500">
<timertask tasktype="ogscript">var currentTime = new Date();

var utcTime = dateToTimezone(currentTime, 0); //GMT
var edtTime = dateToTimezone(currentTime, -4); //Eastern daylight
var pdtTime = dateToTimezone(currentTime, -7); //Pacific Daylight

params.setValue('Timer_Display_GMT', 0, utcTime);
params.setValue('Timer_Display_EDT', 0, edtTime);
params.setValue('Timer_Display_PDT', 0, pdtTime);</timertask>
</timer>
<meta>
<api>function padStr(str, len)
{
str = str + '';
while (str.length &lt; len)
{
str = '0' + str;
}
return str;
}

function dateToTimezone(date, offsetInHours)
{
var zuluTime = date.getTime() + (date.getTimezoneOffset() * 60000); //getTimezoneOffset returns offset in minutes
var newTime = new Date(zuluTime + offsetInHours * 60 * 60 * 1000); //Create a new date object with the offset applied
return padStr(newTime.getHours(), 2) + ':' + padStr(newTime.getMinutes(), 2) + ':' + padStr(newTime.getSeconds(), 2); //Return in format HH:MM:SS
}</api>
</meta>
<table height="259" left="7" right="8" top="4">
<tr>
<label colspan="1" fill="both" insets="2,2,0,2" name="GMT" rowspan="1" style="style:label-header;" weightx="1.0" weighty="0.0" width="50"/>
<label colspan="1" fill="both" insets="2,2,0,2" name="Eastern Daylight" rowspan="1" style="style:label-header;" weightx="1.0" weighty="0.0" width="50"/>
<label colspan="1" fill="both" insets="2,2,0,2" name="Pacific Daylight" rowspan="1" style="style:label-header;" weightx="1.0" weighty="0.0" width="50"/>
</tr>
<tr>
<param colspan="1" expand="true" fill="both" insets="0,2,2,2" oid="Timer_Display_GMT" rowspan="1" style="style:timerLabel" weightx="1.0" weighty="1.0" widget="100" width="50"/>
<param colspan="1" expand="true" fill="both" insets="0,2,2,2" oid="Timer_Display_EDT" rowspan="1" style="style:timerLabel" weightx="1.0" weighty="1.0" widget="100"/>
<param colspan="1" expand="true" fill="both" insets="0,2,2,2" oid="Timer_Display_PDT" rowspan="1" style="style:timerLabel" weightx="1.0" weighty="1.0" widget="100"/>
</tr>
</table>
</abs>

#DashBoard

Perfect! Thanks so much!
#DashBoard