Tuesday, September 11, 2012

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...

7 comments:

  1. Owww, that one looks good. And I need a new clock in our living room. But the original probably is expensive, so maybe a tablet with yours on it ;-)

    ReplyDelete
  2. As always, you knocked it out of the park! Gerrit, I always love to see what you come up with next. Keep 'em coming! :-D

    ReplyDelete
  3. It seems that you are using a rMBP! Any idea how to improve JavaFX apps on retina displays? My apps looks blurry!!!

    ReplyDelete
  4. Hi Ione,
    If you have an OS X app you could add the following row to your info.plst file of the app:

    NSHighResolutionCapable

    But like I said, it only works for JavaFX apps that are wrapped to OS X apps.

    Cheers,
    Gerrit

    ReplyDelete
  5. Thanks for the reply! It seems this only works for Swing applications with Apple Java 6. I added the NSHighResolutionCapable to the JavaFX Scene Builder and the improve went from pixelated ui to blurry... even with the fonts. No matter if i use Java 6 or 7 JavaFX applications doesn't take advantage of the retina resolution.

    ReplyDelete
  6. Very nice! Is possible compile in windows OS and MAC OS X and how? I'm not programer.

    ReplyDelete
    Replies
    1. Hi Robson,
      Well it's Java which means it runs on Mac, Windows and Linux... :)
      Cheers,
      Gerrit

      Delete