Whilst browsing r/filemaker, we came across a question about building a running clock in FileMaker Web Direct:
I've got a running clock JavaScript that works when opening from FileMaker, but can't run correctly on Web Direct because of the GetDate() function. I was wondering if anyone had a solution to pulling the date from the server so the clock will be uniform everywhere.
After spending about an hour experimenting, we produced a working solution. Here's the full FileMaker Let calculation:
Let (
[
_ts =
( GetAsNumber ( Get ( CurrentHostTimestamp ) )
- GetAsNumber ( Timestamp ( "1/1/1970" ; "00:00:00" ) )
+ Floor ( Get ( CurrentTimeUTCMilliseconds ) / 1000 )
- GetAsNumber ( Get ( CurrentTimestamp ) ) ) * 1000 ;
_html =
"
<!DOCTYPE html>
<html>
<head>
<script>
function startTime(today) {
var start = new Date(" & _ts & ");
setInterval(function(){
var delta = new Date() - start;
if(today) {
var today = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
today.getHours(),
today.getMinutes(),
today.getSeconds(),
today.getMilliseconds() + delta
);
} else {
var today = new Date(
start.getFullYear(),
start.getMonth(),
start.getDate(),
start.getHours(),
start.getMinutes(),
start.getSeconds(),
start.getMilliseconds() + delta
);
}
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ':' + m + ':' + s;
}, 100);
}
function checkTime(i) {
if (i < 10) {i = '0' + i};
return i;
}
</script>
</head>
<body onload='startTime()'>
<div id='txt'></div>
</body>
</html>
" ;
_result =
Case (
PatternCount ( Get ( ApplicationVersion ) ; "Web" ) ;
"data:text/html;base64," & Base64Encode ( _html ) ;
"data:text/html," & _html
)
] ;
_result
)Paste the above code into any web viewer and it will produce a running FileMaker Web Direct clock.
How It Works
The script makes use of Get(CurrentHostTimestamp). This keeps any client — whether using Web Direct or FileMaker Pro — in sync, as the time source is consistent between clients.
The _ts variable converts a FileMaker timestamp into an epoch timestamp required by JavaScript.
Handling Timer Slippage
The JavaScript var delta is required because setInterval() is not guaranteed to run at the exact millisecond value you specify. This variable calculates the slippage and compensates accordingly. We initially didn't include this and noticed that within five minutes, our Web Direct clock and system clock were out of sync by several minutes.
References
- Get(CurrentHostTimestamp) — FileMaker Help documentation
- FileMaker Epoch Method — FileMaker Community thread
- JavaScript Clock — W3Schools example
- JavaScript Timer Slippage — Stack Overflow discussion