More Fun with JavaFX: SnappRadio FX

Monday, October 20th, 2008

A while back Paul Lamere wrote a compelling music visualization experiment called SnappRadio. From the SnappRadio website:

“The Sun Labs Snapp Radio is a mashup of Radio Paradise, last.fm  and Flickr. When you listen to music from Radio Paradise or last.fm, Snapp Radio will collect images from Flickr that are related to the music you are listening to and display them as a slide show.”

In my persistent and unrelenting exploration of JavaFX (and with Paul’s permission), I offer up my latest effort: SnappRadioFX — a JavaFX front-end to SnappRadio.

The original version served up images in the browser, which is great for sure.  But in the spirit of RIAs, I’ve attempted to pull this application “out of the browser” and create a version using JavaFX replete with animations and sparkly effects. This version only supports listening to Radio Paradise, so if you want the full effect, bring it up before you launch the application (via Java Web Start). Note that it’s a bit of a download and it may report that it’s stalled out, but be steadfast — it will complete.

So here’s a screenshot with a few images:

Images come to the foreground as they enter, and then fill in to the left or right as old images fade into the background.

This version of the application supports the idea of “inspecting” an image. By clicking on an image, it will travel to the foreground and pause the image collector in the background.

From here, if you “mouse over” the image, a mock UI will spin into view, with each “button” corresponding to an action. A “glow” effect is applied to the currently selected action. The UI will “spin away” when your mouse leaves the image.  You can dismiss an inspected foreground image by clicking it.

I say “mock UI” since none of the buttons do anything at the moment.

So some fun stuff we have here I think. I’ll post the relevant source code later, but in the meantime here’s a quick look at some of the JavaFX tech involved:

  • Timelines and KeyFrames were used all over the place to control the animations and sub-animations.
  • Project Nile was used to create the UI “spinner”. It is an Adobe Illustrator file, not a static image.
  • Reflections were used similar to previous efforts to suggest a floor. I don’t know why I’m so enamored with this effect, but I am.

Here are some limitations I’ve found while working on this:

  • While it may look 3D — it is actually 2D.  JavaFX 3D doesn’t seem to exist yet (calling Java3D libraries as you would from straight Java doesn’t count).
  • Not only is it 2D, but it’s poor 2D. Modifying the “z-order” of JavaFX Nodes seems to be broken. I have read that “toFront” and “toBack” are currently not working so hopefully this will be fixed before 1.0. Anyway, to get around this, I tried to place images in such a way so that they didn’t overlap, which is one reason why the default image size is so small.  Even so, occassionally images will overlap in unepected ways.  Yuck.
  • This is my third (or so) semi-major dive into JavaFX, and I still am confounded by the unpredictable performance. Four out of five runs of the app may be smooth sailing, and then I’ll get a run with two second pauses between frames. Whaa? I hope this is a by-product of the preview build and that 1.0 will be more consistent.

Anyway, I think this is a fun little app. Many thanks to Paul for his permission to use the snappradio codebase to create this.

Tags:

2 Responses to “More Fun with JavaFX: SnappRadio FX”

  1. Paul wrote:
    October 21st, 2008 at 5:38 am |

    Looks great Sten – can’t wait to see the code. I did notice the performance issues, the animations would stutter more often than not. Also, the updating seemed to stop working for me after the first song. The song title would change when, but the images would no longer update.

    This is pretty impressive considering the lack of 3D and the Zorder issues. I hope you do a few more interations on this once the JavaFx platform stabilizes.

  2. Sten’s Blog » Blog Archive » SnappRadio FX Source Code wrote:
    October 23rd, 2008 at 1:12 pm |

    [...] Friends « More Fun with JavaFX: SnappRadio FX [...]

Leave a Reply