Customizable Clock and Countdowns for Production, in a Web Browser

Accurate clocks and countdowns can be a huge help when it comes to keeping services and productions on time. In our control rooms, we use these clocks:

943

They’re made by a company called ESE and they are basically network-based POE-powered NTP clocks. Because they are synced to NTP (Network Time Protocol), they are all in sync to the exact same time down to the second. We like them because they are big and grab your attention. We have them mounted above the multiviewers in each control room along with a couple of others in the actual tech booths out in the auditoriums.

But what about everyone else, like the band or people on stage? We don’t have clocks like this where they can easily see. And, the ESE clocks just tell the time, they don’t count down to a specific time.

I decided to do something about that. We have a server in the video rack room that has a video out connection into the video systems. It’s just a simple output of the secondary monitor. So, I figured it would be pretty easy to display a clock in a browser, and run it full screen on that secondary monitor, that feeds into the video router where I can then easily send it to any screen in the system that needs it.

I found some examples online and eventually came across this article where someone had created a full screen clock: https://www.nayuki.io/page/full-screen-clock-javascript

clockThis computer’s time is synced to NTP, so it stays in sync with the clocks in the control rooms, too.

I quickly decided to take this a step further and incorporate some countdowns. I had a couple of self-imposed restrictions though:

  1. I wanted the countdowns to be customizable as our needs change, not just always count down to the same date/time.
  2. I didn’t want to run a web server just to accomplish this, in order to pass new data to the locally running page/JavaScript.

I decided an easy method would be to have a separate JavaScript file that defines some countdown data, and include that in my main clock page, and just refresh the page to get the new data. I set the page to reload every 30 seconds by putting this in the <head> of the HTML:

<meta http-equiv="refresh" content="30">

I want my volunteers to be able to easily change this countdown data, without having to know JavaScript. Time for Dashboard! My directors have a Dashboard Custom Panel that I created for them which they use every week. It has a myriad of control options for them, so it was simple to just add another tab for the new countdowns.

countdowns_

Dashboard has a built in date picker and time picker, which makes it super easy.

I added two options in addition to the date and time, publish time, and expire time.

countdowns_publishtime
I limited it to these few options, between 2 minutes and 7 days. This determines when the countdown will appear on the screen.
countdowns_expiretime
When a countdown expires, it turns red so it grabs your attention.

When the user clicks, “Update”, it runs a simple function that grabs all of this data, writes the JavaScript into a string, and then saves that into a file using the ogscript.saveToFile function. The file is saved to a common Dropbox folder that the server running the web page clock has access to.

countdowndata

clock-and-countdowns.png
Here it is in action. The countdowns automatically update when the page reloads every 30 seconds.

 

I’ve made the files available on my Github, if you can benefit from them! We will be giving this a trial run on Sunday.

One thought on “Customizable Clock and Countdowns for Production, in a Web Browser

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s