Frontend Needs Interactive Clock

[00hello]

The clock that's used in node_lite to browse backwards and forwards through time needs to be implemented in this repo.

[00hello]

@georgebatalinski

This is the original

Demo
Codepen
Github
API

There are a few changes between ours and the original. These changes mainly have to do with connecting the clock with a unix timestamp so it can represent not just the time, but the date as well.

The original was just a clock. It didn't keep track of the date. It took the Unix timestamp and stripped the date portion. The clock represents the time elapsed since midnight in milliseconds. So it's always "today" no matter how far back or forward in time the hands move, either on their own or by the user moving them.

But since every event in Grassland is associated with the entire unix timestamp (millisecond precision), below our clock, there's a calendar. And instead of just Timepicker.getTime(), we have Timepicker.getTimestamp()

[00hello]

The current version of the clock behaves like this...

Left to itself, the clock always moves forward in real-time, one second per second.

When the application starts, the clock's date and time is set to the user's local date and time. So, if left to itself, the date and time shown will always be the actual date and time.

If the user drags the hands backwards or forwards, the date and time will adjust accordingly, as well as whatever digital twin data is being shown to the user.

Once the user stops dragging, the clock and calendar's time and date will continue moving forward at one second per second. Only now, it'll be starting from whatever date and time the user had moved the clock to.

[00hello]

Clicking the "Now" button return the clock's date and time back to the actual date and time.

Note that the "Now" button in the GUI is the "okButton" in the code

Line 383

okButton.innerHTML = 'Now';

[00hello]

The function that moves the clock forward is the moveClockDateForward() function on line 536.

this.moveClockDateForward = function(elapsedMilliseconds) {

		if (isDragging) return +clockDate; // Don't move clock hands forward if they're being dragged

		var selectedMilliseconds = clockDate.getMilliseconds();
		// add elapsedMilliseconds to clockDate
		clockDate.setMilliseconds(selectedMilliseconds + elapsedMilliseconds);

		selectedHours = clockDate.getHours();
		selectedMinutes = clockDate.getMinutes();
		selectedSeconds = clockDate.getSeconds();
		selectedMilliseconds = clockDate.getMilliseconds();
		
		isPM = selectedHours >= 12;
		if (selectedMilliseconds <= 100) updateClockPointers(); // Since the clock has 1 second precision, if the current millesconds are less than 100, we'll assume we've crossed a point where we should move the hands 
		

		if (selectedSeconds < 5) updatePickedTime(); // Since pickedTime only has minute precision, if the current seconds are less than 5, we'll assume we've crossed a point where we should update pickedTime

		return +clockDate;

	};

The moveClockDateForward function changes the timepicker's clockDate variable. Which is simply a javascript "Date" object.

The only place the moveClockDateForward function is called is from the app.js file on line 489

_animate(rAFTimestamp=0) {

    ...

    this.clockTimestamp = this.timepicker.moveClockDateForward(elapsedMilliseconds);

    ...

    this._animationFrame = window.requestAnimationFrame(this._animate.bind(this));

}

It's called when the page first loads. Then it's called every few milliseconds thanks to window.requestAnimationFrame(callback), which is a universal javascript function that "...tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation right before the next repaint."

Its callback is passed a timestamp which is the number of milliseconds since the page was first loaded. That's the rAFTimestamp ("request Animation Frame Timestamp"). We use that to determine how far to move the clock forward.

_animate(rAFTimestamp=0) {
    ...
    // find out how long it's been since this was last called
    var elapsedMilliseconds = rAFTimestamp - this.lastRAFTimestamp;
    // move clock's time forward by {elapsedMilliseconds}
    this.clockTimestamp = this.timepicker.moveClockDateForward(elapsedMilliseconds);
    
   ...
}

[00hello]

In practice, our clock is never in "ClockMode" as far as the original timepicker's API by ZulNs is concerned. This is because our "isClockMode" variable is always false.

So the updateClockTime function on Line 249, which would normally be set as the callback to an interval and called every 1000 milliseconds, is never called.

line 475 if (isClockMode) secondTimer = window.setInterval(updateClockTime, 1000);

[00hello]

A screen recording of just the clock https://youtu.be/abTjadxJVMk