Java FX clock goes SVG
May 22nd, 2007A nice looking clock in JavaFX reveals that transforming images in JFX still needs some work. But luckily SVG is rather easy to use, some small change to the script and you get this:
Note the second hand in comparision to the others.
The script-change:
var secondHand = Path {stroke: red, fill:new Color(0xDF, 0x0E, 0x08, 0xFF)
transform: bind rotate(t.seconds * 6,255,245)
d:[
MoveTo {x: 250, y: 300},
LineTo {x: 260, y: 300},
LineTo {x: 255, y: 50},
ClosePath {}
]
}
Update: I improved this a bit with nicer hands and proper(?) lightning, download the full script FxClock.fx
May 22nd, 2007 at 2:36 pm
Excellent fix! The change drastically improves the original example.
May 22nd, 2007 at 2:45 pm
Umm, it’s not SVG I think. Under the covers it seems to be translating the objects into Jazz (a zooming scenegraph) objects, which are then drawn on a 2D canvas.
I think in many ways it would be better if it were SVG, but c’est la vie.
Cheers,
Andrew
May 22nd, 2007 at 7:26 pm
Cool!
I considered drawing the clock hands in the code (the original code was like that) but I opted to do the whole thing in Photoshop. It’s inspired by one of the Google gadgets which is done that way. The one advantage is that it’s easy to deal with bitmapped images and you can change the look of the clock with no code changes.
I’m considering doing a vector based version, but have the elements drawn in something like inkscape and then read the SVG at runtime. There’s an SVG reader out there, but I had difficulty reading some SVG icons with it. There’s also Batik, so there’s a couple of options here.
I’m interested to see what the performance would be with the vector graphics, it could get tricky with some of the effects I have (specially the “shiny” translucent part of the face and the frame”. However, once it’s in vector graphics I could do cool things like change the angle of reflection and intensity as you move from daytime to nighttime.
June 5th, 2007 at 9:49 pm
I tried running the script, but nothing happens.
FXShell just terminates. How do you debug this stuff?
I developed it with the JavaFX pad - just checked, works fine, Carsten
June 7th, 2007 at 4:29 pm
The problem is not in the transforming of the images, it is in the antialiasing code as it relates to ImageView. If you do the following…
ImageView {
transform: //your transform here
image: Image {url: “http://sellmic.com/lab/dev/jfx/clock/images/minute_hand.png”}
antialias: false
}
You will see that the image is smoothed. However antialias: true or simply not listing the antialias property at all results in jagged, non aliased images.