Workday Clock

The Workday Clock was inspired by a Technology Connections's video on the benefits of analog clocks. I'd never been a fan of those; couldn't quite get behind the idea that the long hand should indicate the shorter unit of time, not to mention the reversal of direction that comes with the round shape (the hand moves down for the first 30 minutes and up for the second half).

However, the video changed my mind to an extent and crystallized an idea: the perfect clock should provide a visual representation of the length of each hour and the whole day, as well as make it easy to visualize time remaining to an appointment. However, there would be only one direction of travel, and any time outside of active work hours would not be shown. Although work happens at all hours of the day, watching the clock in the evening brings nothing but stress.

This clock is optimised perfectly to my needs, but should also be legible to someone else without lengthy explanations.

01.
While the ordinary clock represents the day and each hour as a circle, mine uses arch shapes, which conform better to the idea of a progress bar. The larger arch shows hours between 9:00 and 18:00, and the small one provides additional visualization for each hour as it passes.

In order to achieve the shape of the clock faces, I used a semi-circle conical gradient, where each colour section corresponds to one hour. As a pleasant coincidence, 180 degrees of the half-circle are easy to divide by the 9 hours represented, so every hour is equal to 20 degrees of the half-circle.

Over that, I overlaid a semi-opaque conical gradient which updates every minute to indicate the passage of time, and a final small opaque semicircle creates the underside of the arch.

The appointment feature adds yet another gradient layer to the middle of the stack. This solution allows for adding one custom section to the clock. This is fine for my purpose, since the appointment feature is only there to help visualise the time remaining before it starts.

The small arch representing one hour has the same basic structure, minus the appointment layer.

02.
The time-indicating layers of both arches are controlled by the function updateTime(), which runs once on page load and then once per minute. The interval is easy to adjust, but this project does not need higher precision.

The event handler for appointment submission converts hours to degrees of dome and creates a gradient section to cover the area on the clock between start and end times. There is a button that clears this layer. At first, activating the dialog without choosing appointment times could also be used to clear this layer, but allowing the user to leave either start or end time unselected was too prone to errors.

The appointment option is accessed through a jQuery dialog box, though if I was writing it today I would prefer the HTML dialog tag or a modal solution optimised for accessibility. Feedback from test users was invaluable in improving the behaviour of the appointment feature.

05.
A fun extra feature is the additional colour themes for the clock. The colours and backgrounds are encoded as css variables, so switching themes is as simple as swapping different :roots. This is handled in JavaScript through the setTheme() function.

06.
Since a lot of the functionality of the Workday Clock relies on changing graphic elements with JavaScript, the project is quite css-heavy, and makes full use of gradients, variables and positioning.

Although I don’t use the Workday Clock every day now, I feel that building it and becoming used to looking at its shapes has given me a better grasp on time and helped plan each working day.