A few days ago I decided to enter the MIX 10K competition.
My entry is named ColorClock 10K. If you like it, please vote for it!
- The application requires .NET 3.5 SP1. If you don’t have this version, please install it before the next step. This is a once-only installation.
- Open this link in Internet Explorer to install and start the ColorClock.
- Drag the clock to move it on your desktop.
- Resize the clock using the triangle in the bottom right corner.
- Set the options by clicking on the circle in the top right corner.
- Set a label that will be displayed in the clock’s tooltip.
- Set a time offset to display another time. For example, from Switzerland, set –9 hours to display the Seattle time.
- Change the skin by clicking on the MIX10K label.
- Navigate to GalaSoft in your browser by clicking on my name.
- Exit the application by right-clicking on the clock.
The contest is really interesting. It is organized by Microsoft in the context of the MIX conference 2009 (in Las Vegas, 18-20 March 2009). Using Silverlight or Windows Presentation Foundation (as a ClickOnce or XBAP application), you must create an application, any application you like but… using only 10 Kbytes of code. The default files generated by Visual Studio don’t count in the 10K, but if you modify any of them (for example App.xaml, App.xaml.cs) or if you add icons, images, anything, it will be counted. In my case, I only modified the Window.xaml and Window.xaml.cs. After all modifications, I end up with:
My choice was quite fast: Because most entries so far are made in Silverlight, I decided to do my application in WPF. I love this rich framework, and I also love the ClickOnce deployment method, which is not very well known, and in my opinion not used enough to deploy simple .NET applications. The ClickOnce experience is quite nice in I think, for example the application can be set to heck with the server it comes from if there is a new version, and to prompt the user.
Additionally, using WPF for the application gives me an extra rich framework, with less “tweaks” than in Silverlight, and a really fantastic user experience (transparency, animations, Expression Blend for the design, endless freedom).
The clock is inspired from the Swiss made “ChromaChron” clocks that were a huge trend in Europe in the 70’s and 80’s. These clocks (originally developed in 1971 by Tian Harlan, an architect, engineer and artist) have 12 areas, each with one different color and representing one hour, and a cache rotating in front of these areas.
Photo copied from http://www.coolhunting.com/archives/2006/11/the_chromachron.php
They are fantastic to fight stress. Instead of worrying about the exact minute (and this in an age where digital clocks were The Big Thing), you got an approximate of the time, and this with soothing colors. It works like this: The cache has an opening (30° corresponding to one hour, or 360° / 12) which rotates in front of each of the “hour colors” alternately. When the opening is on one color only, it means a full hour (see examples below). When you see half of one “hour color”, and half of the next, it is half past. If you see 25% or one and 75% of the other, it is 15 past, etc etc. Very fast you get a nice “feel” of what time it is, and the estimate can be as precise as a few minutes.
ColorClock 10K features
- Two skins: I integrated two very different look&feels in the application. The default one is heavily inspired by my friend and fellow WPF Disciple Jeremiah Morrill. Thanks Jer for inspiring me to build another skin in the existing application. Switching from one skin to the other is done by clicking on the “MIX10K” label.
- Indication of time: After all this is a clock :) As explained, the cache and the colors visible indicate the time:
- Resizing: The clock can be resized (using the small colored triangle in the bottom right corner) from 200 pixels to 600 pixels
- Moving: Simply click and drag the clock to reposition it .
- Half transparency: The clock is half transparent when the mouse is not over it, which makes it non-obtrusive. When the mouse passes over the clock, it becomes fully opaque with a smooth animation.
- Start the GalaSoft webpage: By clicking on my name, you start your favorite browser and navigate to my webpage www.galasoft.ch
- Setting options: Click on the small colored dot in the top right corner to expand the options.
- Set a “label” for the clock (for example, “Home”, “Chicago”, “New Delhi”). The label is displayed in the tooltip when the mouse is over the clock.
- Time offset: Set a number of hours and minutes expressing the offset between the computer time and the clock’s time. For instance, if my computer is in Switzerland and I set -9 hours, the clock shows the Seattle time.
- Saving the clock’s position, size, skin, label and time offset.
- Animations: The Clock features animations. When it starts, or when you set a time offset, the cache rotates smoothly. As mentioned before, the transition between half transparent and fully opaque is also smooth. Finally, when you right-click on the clock, the clock “falls away” like an autumn leave and the application exits.
- Saving CPU: To preserve your CPU’s power, the clock switches to high frame rate for high speed animations, and very low frame rate for low speed animations.
- Exit the application by right clicking anywhere on the clock.
My final version weighs 9.70KB (9943 bytes).
The very first version I wrote was fully functional, but with only one skin, no options, and without animations (except the cache’s rotation). Amazingly, without any formatting, I was already well under 10K! This left me thinking and very soon I came up with the desire to implement more features, and to refine the user experience. .NET is really rich, and it is easy to find the classes you need without having to write custom code. Additionally, new constructs (such a the “using” statement for disposable objects, anonymous delegates and lambda expressions, implicit properties, the “var” keyword) allow to write concise and nonetheless readable code.
Of course the next step made the code far less readable: Removing all non absolutely necessary white spaces, making variables, attributes, method names etc as short as possible, putting all the code on one single line. Still, the code can easily be reformatted in Visual Studio using Ctrl-E, Ctrl-D (Format Document command) if needed.
The source code can be downloaded here.