D/A clock...

Aloha...
Time for another short blogpost...last week I was skimming the web for nice designs and found the following clock from Alvin Aronson...

I was completely fascinated by the simplicity of that clock. But not only the design of that clock is nice, also how it's implemented is great. When the time changes, the segments of the seven segment display will move in and out of the background plate. In the original version (which is only available as prototype) this movement takes a couple of seconds. There is also a little video on youtube.
And those of you who read my blog on a regular basis know what comes next...

Exactly...I created that clock in JavaFX and on the next image you could see the result...

If you would like to see it in action you might want to check the short screen video that I have posted on youtube. The version that you'll find in the source code below is really big because I put that on my 23" screen. I have to say that it's not really perfect but ok. The interesting part on creating this control was not the visual design but the behavior. I animated the shadows of the segments to create the effect of moving in and out which was not so easy as it sounds. The problem is that the dropshadow is really big and could overlay the next segment. So I had to make sure that the shadows will look correct. And even if it does not look very graphic intense you have to know that each segment contains 4 chained shadow effects which makes the animation of that effects a bit more complex but not too hard.

If you like to know how this was done please check out the sources here

Please keep in mind that you have to update the value of -fx-skin: in the css file if you put the files into a package.

Hope to see some of my readers at Java One in San Francisco...

Keep coding...