I’ll post a software mini project for a change. My wife asked me the other day if I would know where she could download a count down timer application. She is a teacher, teaching first grade this year, and she needed a visual timekeeper for activities in her class. The idea was to display the timer on their fancy interactive whiteboard while the kids were working on something. This immediately sounded like a project to me.

 To cut things short, here are the links to the web  pages.

English version: timer.htm

Finnish version: ajastin.htm

For some reason my first thought was to create a Windows application, and that’s what I did first. I have some experience on Windows Phone applications development, and I have Microsoft Visual Studio 2012 installed on my pc. It took a couple of days worth of work to finalize a C# WPF .NET application that looks a lot like the web application pictured above. It was only after the windows app had been tested and I was ready to deploy it that I realized that the policies set by her IT department prevented her from installing the application. Of course! How could I not think of that!

On with an alternative strategy then. This time using Javascript and SVG on a web page. I chose these as I had been working with them earlier.

The application presents a dial of 60 minutes, some controls to set the time and a green sector animating the remaining time. The time starts running with a press of the Start button. When the set period has elapsed there is a bell sound and the time is reset. You can choose if you want the time to run clockwise or counterclockwise. The windows version had also the ability to set the color, but I ran out of steam with the second version.

The application is currently available in English and Finnish versions.  The solution consists of two files only, the web page timer.htm and a sound file bell.mp3. You can save these to your local computer using the “save as” of your browser, and use the local version as well.

It is easily translatable to other languages, with only little understanding of web programming needed. In the beginning of the timer.htm file there are strings that can be translated as needed.

I have tested it thoroughly on Mozilla, and partially on Internet Explorer and Chrome. For Internet Explorer version 9 or higher is required. Internet Explorer still has some minor issues, like saving the page does not save the audio file. And it means that a saved file will not play the bell sound. The sound can be saved manually via this link. Internet Explorer 9 does not implement scroll bars so a text box is displayed instead.

I had fun testing the application on different browser versions. I have Windows 8 Pro and Hyper-V virtualization installed on my PC so I was able to use a virtualized Windows 7 and IE9 combination for that. These and other combinations are available for free for browser testing at modern.ie, courtesy of Microsoft.  There is also a nice blog post from Rey Bango from Microsoft explaining the basics here.