A distinctive clock as app. Sortof.

A while back, someone on my twitter stream posted a link to the “QLOCKTWO”. I was immediately taken with it. Not to the tune of a thousand dollars, mind you, but taken none the less.

With my GalaxyTab sitting in its display stand on my desk, I thought that clock would be an ideal little app.

Armed with Jonathan Stark’s very nice Building Android Apps with HTML, CSS, and JavaScript and a few hours on an airplane, I thought it would be a fun little project.

And it was.

[Photo]

Word Clock

The basic 10x10 display came together quickly, followed by a few evenings tinkering with various options (different sizes, fonts, colors, embedded messages, date options, etc.)

[Photo]

Word Clock (with message and date)

The local storage API means that you can go away and come back to the same clock (the designs are random otherwise), the manifest means that it should continue to work when you're offline. It's all good.

Alas, neither JQTouch nor PhoneGap lived up to my modest expectations. I wasn't able to build a settings UI with JQTouch; the alignment of labels and inputs was mystifying. In fairness, I'm prepared to believe that had as much to do with my general inability to design UIs as JQTouch.

PhoneGap, on the other hand, just hasn't matured enough to meet my needs. I'm not saying it won't, it's an impressive bit of kit, but it's not there yet. I need the ability to read the hardware buttons on the Android; I get the impression that there are workarounds for this shortcoming, but I didn't investigate too deeply. I also need the ability to detect when the device is running on A/C power and to control screen brightness. I'm sure it can be done, but I've exhausted my interest for the moment.

If you want to see it in action, I've put it up at http://apps.nwalsh.com/wordclock. The source code is on github.

[Photo]

Word clock tablet

A few notes:

  1. You can access the settings panel by clicking on any letter on the clock.

  2. The clock updates every five minutes, so I don't think it puts too much of a drain on the battery of your device (if you run it on your device). But YMMV.

  3. The placement of words and interstitial letters is random, but there are a number of constraints. Given a configuration, the code tries to find a layout that satisfies all the constraints. If it fails, it tries again. If it fails 800 times in a row, it gives up.

    It's easy to overconstrain the problem (putting a long message on a small face, for example), but the initial configuration isn't overconstrained. If you get the overconstrained error message on your initial attempt to load the clock, just hit reload.

Share and enjoy.

Comments:

Norm,

Looks great on my Android LG Ally. Have you played with http://jquerymobile.com at all? It's still in alpha, but it's coming from the jquery folk, and I like how they're trying to include more than just iPhone and Android in their plans.

Posted by bobdc on 18 Jan 2011 @ 02:42pm UTC #

Very nice indeed.

How about a proper open-source license, though? I'd suggest a simple 3-clause BSD.

Posted by John Cowan on 18 Jan 2011 @ 02:44pm UTC #

Yes, a proper copyright and license are clearly needed. I'll try to clean up those loose ends this evening.

Posted by Norman Walsh on 18 Jan 2011 @ 03:50pm UTC #

Interesting to see that it seems to work flawlessly in FireFox (3.6), but fails in IE (in IE8 anyway -- it only seems to draw the first char in the N x N array). Haven't looked at the code yet to see what's wrong there.

Posted by Derek Read on 21 Jan 2011 @ 01:41am UTC #

It works on iPad too :)

Posted by SinDoc on 31 Jan 2011 @ 04:06pm UTC #
Comments on this essay are closed. Thank you, spammers.