JavaFX Clock

javafx-clock.jpg

For my next JFX script I slightly modified the clock example Chris Oliver wrote, and added some artwork to it so it looks somewhat like one of the Google desktop gadgets I use. The gadget is very low res, so I decided to make the image files much bigger so users can resize it without it looking like a pixelated mess. I made the seconds hand jump every second instead of moving continuously, and like the gadget, it has a very quick animation that moves the hand back a bit to give it a “spring” feel.

The script is here:
http://sellmic.com/lab/dev/jfx/clock/Clock.fx

From JFXPad, you can just copy and paste that URL drag and drop the Clock.fx link into the ‘location’ text field then hit go, and the script will load and show the clock animation. (note: There’s some weird bug in JFXPad, were you can’t paste text)

I’m also thinking of making this a Glossitope gadget, but have to figure out how to load JFX in that environment.

Update to this entry in this post : JavaFX Clock update, now with transparency

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

18 Comments »

 
  • Tim Archer says:

    Very cool looking clock! Do the lighting effects move too (where the top half of the clock looks like it is splashed by light)?

  • Augusto says:

    Thanks Tim.

    The lighting effects are very static, the clock is basically a layered Photoshop image so the clock is composed of 4 images. The clock face, the seconds, minutes and hours hands, and the "pin" that holds the arms.

    The clock face has a layer in the Photoshop file with that "shiny" effect, so it's not an animated element. One idea would be to rotate that effect, maybe even make it darker or turn off when it's nighttime. A better approach would be to generate the effect (and maybe even shadows) dynamically in JavaFX. That's possible, but I'm not 100% sure how to do that with JavaFX yet (note that the Painter work being done in SwingX might be a fit for this).

  • Sakuraba says:

    wow!! This is looking insanely great.

    And so few lines of code.. I was very surprised.

  • Matej Koval says:

    Nice, but I resized it to 25% and it looks very ugly.

    Some anti-aliasing would be helpful there. I think it's a problem of JavaFXPad, or am I wrong?

  • Augusto says:

    Matej;

    It's not JavaFXPad, it's just the scale operation in Java2D doing that. There are options for image scaling in Java2D but I have no idea how you set those up in JavaFX. Good question for Oliver, maybe I should post it on the mailing list.

    However, what you can do now is apply a blur filter to the scene and voila, makes everything look good again.

    return Group {

    transform: [translate(5,5),scale(.25, .25)]

    filter: [GaussianBlur { radius: 5 }]

    (note remember to import javafx.ui.filter.*)

    The result looks good, but on my machine it seems to cause some considerable performance issues. More than likely is the second animation moving the seconds hand back.

  • Dan says:

    Looks really nice, Just a thought is they're any chance of them adding SVG support so you could just link to an SVG file and hence have the benefits of vector based graphics.

    Microsoft has XAML so it'd be good to get a decent SVG engine in there?

  • Augusto says:

    One of the JavaFX demos has an SVG reader already. I had mixed results with it, but for this application it was easier for me to draw the clock in Photoshop. You could also draw a lot of it in JavaFX code too. Obviously with Vector graphics, the resizing is much better.

    The original example is all vector drawn, btw.

  • carl says:

    Augusto,

    Really, nice.

    I was tinkering with the script and set the code from 60 to 600 where it reads:

    if running then

    [1..60]

    to

    if running then

    [1..600]

    My cpu usage was 50% to 55% percent and my fan kicked on.

    Are there performance things that we have to be aware about?

    With the current setting my laptop runs at about 8% to 20% usage.

    I'm sure Sun is aware of these things, but I just want to point this out. It has to at least perform the same or better than Flash. Although Flash can chew some serious CPU cycles too.

    I think JavaFX is starting to grow on me. Its kind of weird.

    -Carl

  • How to compile and run JavaFX programs in NETBEANS or ECLIPSE.

  • [...] nice looking clock in JavaFX reveals that transforming images in JFX still needs some work. But luckily SVG is rather easy to [...]

  • [...] This is an update to my preview entry “JavaFX Clock”. [...]

  • MMmmmhhh.. sustained 30% of Cpu usage on a P4 dual 3.2Ghz (winxp) ?!

    That's terrible.

    We're not on the right way, IMHO..

    Mik

  • Augusto says:

    One of the animations is done in a very suboptimal way, but not fixing for this example as I'm testing other stuff.

    As an exercise to the reader, you should be able to remove the 2nd second hand animation and that should make thing better. Keep in mind that when running on jfxpad it probably adds more overhead, as well as the fact that this stuff is interpreted. But most of the cpu usage issues are of my own making i think.

    Feel free to tweak around the code, i'm more interested in a vector based version. I'm also working on some video stuff that is a bit more interesting (and might integreate into jfx soon …)

  • huangbaihua says:

    i like it

  • knappyhead says:

    Augusto, is it possible to make the image translucent? like the window? or even better render different layers, layering is too proprietary.

  • Augusto says:

    Hi Jack, boring Sunday? :-)

    (yes you can make the whole window translucent)

  • [...] this once I try it out, there were a couple of projects (yes, one of them was a follow up to my JFX Clock example) I was working on using earlier versions of JFX but I’ve been waiting for the final [...]

 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>