Saturday, October 26, 2013

Node-Webkit-based Timer Application

I needed an app that I could use to set time limits on work periods, as well as, ensure unruly kids met their time-out obligations, and was fairly underwhelmed with the offerings available.  Probably the best app for OSX was the Classic Timer application, which is $0.99 on the App Store.  Generally this is a pretty reasonable price for so little functionality and I didn't hesitate to buy it the first time.  I quickly out grew the application when I need to do simple things like "add 30 seconds" to an ongoing timer.  My wife also need something similar, but is currently on a PC, and I sure as heck was not going to buy something that simple a second time.

So I endeavored to build my own timer.  Since I'm on a Node-Webkit kick, and it's cross platform, I thought it would be the perfect framework for writing such an application.  So, in about 3 hours worth of effort, here's what I was able to kick out:

The application was incredibly simple to write.   Note, that outside of the packaging provided by Node-Webkit, this application does not rely on any Node.js functionality.  It's basically a combination of a number of great open source frameworks:
  • JQuery - which is really only used to facilitate Bootstrap.
  • Bootstrap 3 - which provides the nice styling elements.
  • AngularJS - web framework for composing the application.
  • Buzz - a pretty simple and effective audio library that abstracts the HTML5 audio API.
The NW-Timer application demonstrates some pretty interesting things about the Node-Webkit application framework.

Window Options - as you can see, the toolbar is completely removed from the application.  It basically looks like a native application, minus the iconic Bootstrap style.  The frame (close, minimize, maximize buttons and title), as Node-Webkit refers to it, can also be removed.  I've also set the min, max, and default height and width of the application.  This is all done using the package.json manifest file:
 "name": "nw-timer",
 "version": "0.0.1",
 "main": "index.html",
 "description": "Timer application.",
 "window": {
     "title": "NW Timer",
     "width": 400,
     "height": 520,
     "min-width": 400,
     "max-width": 400,
     "min-height": 520,
     "max-height": 520,
     "toolbar": false,
     "frame": true

Playing Audio - one gotcha I encountered about Node-Webkit is that it does not natively play all the audio and video formats you might be accustomed to in Safari or Chrome due to licensing issues (documented here).  I started by using an MP3 format which worked great when I ran the application using Chrome (remember I had no Node.js dependencies), but didn't play in the Node-Webkit container.  This was because the format was simply not supported.  I converted the MP3 to OGG, configured Buzz to include the alternate format, and it worked perfectly.

Here's an example of using the Buzz framework to play the alarm:
# Instantiate a reference to the sound:
alarmSound = new buzz.sound "sounds/alarm", { formats: [ "ogg", "mp3" ] }

# Play the sound:
playAlarm = ->
    alarmPlaying = true

# Stop the sound:
stopAlarm = ->
    alarmPlaying = false

# Done!

Packaging the Application - finally, the only thing you have to do to convert this web application into a Node-Webkit application package is "zip" it up.  I created a tiny script to "build" the package (please note that I didn't care if unnecessary artifacts also make it into the package):
# Check to see if an older version of the package exists
if [ -f "Timer.nw" ]; then
  echo "Removing the old version of the timer application"
  rm Timer.nw

# Zip the contents of the directory
zip -r Timer.nw *

# Done!

Final Thoughts

I find building GUI applications using Node-Webkit far more enjoyable than using traditional Desktop application frameworks.  First, they are far easier and leverage a skillset that many of us have cultivated over the last decade (web development).  More importantly, Node-Webkit only provide the "Window", you are free to choose the development framework that best fits your needs (Ember, AngularJS, Backbone, Knockout, etc.).  Another thing that makes the framework appealing is access to all of those rocking HTML5 API's, particularly the embedded databases provided natively with Webkit.  I see very little reason why this framework could not be used to build Rich Internet Applications for businesses.

You are welcome to do whatever you want with the NW-Timer application (even sell it) as long as you attribute the source you use back to me (it's ASL 2.0).  More importantly, I hope you are starting to learn the value of the Node-Webkit framework as an alternative to traditional, platform-specific, Desktop technologies.


  1. You forgot to mention you actually used coffee script...

  2. Getting Cirrius...
    Very Funny :)


Note: Only a member of this blog may post a comment.