Blogs / Tech Blog

Time Chooser Components

Time Choosers Thumbnail
A montage of our time choosers. (click for webstart demo)

The notion of time is central to both of our products at Palantir, and there are many instances in which the user needs to specify a certain point in time. Although there are simple ways to create choosers (you could use a JSpinner that uses a SpinnerDateModel or simply use multiple JComboBox objects), I decided to experiment with writing some more visual time chooser components. These components are fairly experimental — they aren’t used in either product yet and I coded them up pretty quickly so I could get some feedback.

You can see these choosers in action in our
webstart demo
. The source code is available in the JAR.

If anyone has any feedback or suggestions as to how these choosers could be improved (or any ideas on how to make a better time chooser altogether) please leave a comment and let me know!

Meanwhile, if you want to know a little bit more about these choosers and how I went about designing them, read on…

There are basically three different time choosers that I created — the clock box, the clock, and the time strip. All of these choosers can be configured in a variety of different ways (check out the “All Choosers” tab in the webstart demo to see an assortment of them).

Clock Box

clockbox.png

The clock box time chooser was inspired by the time chooser used in a Windows PIM called Ecco Pro (it’s really old — from 1993 — and has long since been discontinued, but apparently a lot of people think it was one of the greatest PIMs ever and still continue to use it). I first learned of Ecco Pro while reading Dreaming in Code, which is a book that documents the development process of an open-source PIM called Chandler. The positive description of Ecco Pro in the book led me to read more about it online, where I found that some people thought that its interface for choosing times was really good. This made me think that it would be worth trying to reproduce — I found screen shots of the original Ecco Pro chooser on a Chandler mailing list, and simply tried to code an equivalent control in Java.

The clock box works by laying out units of time in the form of a clock. You can then click on any unit of time to select it (there is also keyboard and scroll wheel support). The component also supports an animation where, when it is first displayed, all of the numbers start at the center and then float out to their final location.

The clock box can be used in several different ways. One way is to simply lay out multiple clock box components in a panel that users can manipulate directly. Another way is illustrated in the image above, where there are two separate buttons (the hour and minute fields) that can be clicked to display its corresponding clock box. A third approach is taken by a component called MultiClockBoxChooserButton, a single button that, when clicked, displays multiple clock boxes sequentially in the same space so that the user can choose an hour, a minute, and then an AM/PM value from one control (you can see this component in the “All Choosers” tab in the webstart demo).

Clock

clock.png

The clock chooser is simply a Java implementation of an analogue clock. However, this particular version was inspired by the clock that Apple uses in the “Date & Time” preference pane in System Preferences in Mac OS 10.4 (it remains the same in Leopard). The actual time choosing is done by the hands and the AM/PM text component, so the background is fully pluggable — the left one above uses a custom JComponent to draw the clock using Java paint methods, while the right clock uses an ImageIcon of the Palantir logo as its background.

As far as the implementation goes, the clock is actually a composite chooser, since each hand is actually a chooser in its own right. Clicking on a clock hand makes it selected, and you can drag it to change the time (you can also use the arrow keys and scroll wheel to control the currently selected hand). The component supports roll behavior (incrementing the minute past 60 will cause the hour to increment) and smooth hand incrementing, where the minute and hour hand will gradually increment in units under a full step as the unit smaller than it increments.

Incidentally, creating the component that manually draws the clock background took more trigonometry and physics than anything else I’ve done in a while — I think this was the first time since college that I had to do things like examine the Z component of a cross product of two vectors, use arctans to compute lengths, and determine drawing points using sines and cosines.

Time Strip

timestrip.png

The time strip is a component that I just thought up — no solid source of inspiration here. It’s basically just the clock box component laid out in a linear fashion rather than a circular one. Each chooser is basically represented as a strip that contains all of the possible time values. You can change the current selection by clicking on the desired time or by using the arrow keys / scroll wheel. When using the keyboard, you can use the right and left arrow keys to switch between choosers for different units.

This implementation is a vertical one, but it would obviously be fairly trivial to make a horizontal version as well. As with all of the other choosers, this one can be made to show up as a popup originating from a single button in order to preserve space.

Moving forward

As stated in the introduction, these time chooser components are fairly experimental and are not yet used in either product — one of the main goals of this post is to get some feedback about what people think of these components. How might these components be used effectively in real applications? For example, I think the analogue clock can be a great visual representation of time, but users would probably get pretty frustrated by it if it was the only way they could choose a time. Could these time choosers be combined with each other (or with completely new components) to make them more effective? What are the main drawbacks of these choosers? What other approaches could be used to represent time and allow users to easily choose times themselves?

Any feedback would be appreciated — leave a comment to let us know what you think.

Other Blogs