Tuesday, June 16, 2009

Inkscape and JavaFX - Almost there

I was recently on a panel at JavaONE and a developer ask about support for open source tools and JavaFX. He was interested in exporting JavaFX content from Inkscape and possibly GIMP. Of course this is a perfectly reasonable idea. At the time, no one on the panel had a good answer for him. I did a little looking after the conference and found that Inkscape allows content to be saved in a format that JavaFX can work with, but with a number of limitations. Here are the details:

I am on a Mac, so the instructions are Mac specific, but the basics steps should help anyone interested.

1) Install Macports
While Inkscape has an OS X installer, we require the devel version of inkscape and macports makes it easy to install the devel version. Here is a link for macports.

2) Install Inkspace
Open up a terminal and install Inkscape with macports.
sudo /opt/local/bin/port install inkscape-devel

(My installation of macports is at /opt/local/bin, yours might be different)

3) Launch Inkscape
On my machine Inkscape can be launched from the terminal by typing:

4) Install Netbeans
In case you are not set up for JavaFX develoment you can download and install Netbeans with the JavaFX pluging here.

Creating Content
Once Inkscape is open draw some basics shapes. The following screen shot shows some sample content which uses a few different types of objects and gradients.

Go ahead and save the content in Inkscape's flavor of SVG. Inkscape crashed a few times on me, so it is a good idea to save your work in format Inkscape is going to be happy with. Also save a copy of your content as a *.fx file. This file contains a javafx class which can be used in your JavaFX application. Here is a screen shot of my content.fx file open in Netbeans.
Look at all the errors!
[Update: Check the comments for an update on the status of the exported JavaFX code]

It seems that Inkscape is exporting a version of JavaFX which is no longer supported. It looks like some pre 1.0 version to me. Anyway, here are some basic tips to get the class to compile against JavaFX 1.2:
  1. Remove all bad import statements.
  2. Add the import statement 'import javafx.scene.shape.*;'
  3. Rename your class to start with a capital letter and make sure it is in the package you want it in.
  4. Remove the keyword 'private' from any method that uses it.
  5. change CurveTo to CubicCurveTo.
  6. Remove the Frame at the end of the file.
  7. Add the keyword 'override' to the function create().
  8. Change the property 'transform' to 'transforms' for the class Group.
Once the class compiles create a script to display the content, mine looks like this:
Stage {
title: "Application title"

width: 640

height: 480

scene: Scene{ content: [Content{}] }

And here is a screen shot:

That's not even close!

Looks like a number of features are yet to be implemented, the stroke paint was not honored, the radial gradient is missing and the stokeWidth did not get set.

But in all honesty, this is a really good start, and it is excellent to see JavaFX included in Inkscape at all. If there are any developers who are familiar with JavaFX and the Inkscape code base, this would be a really nice feature have improved.


Jon A. Cruz said...

FYI, as of svn revision 21610 I've updated things to export without any more errors for JavaFX 1.2.

Of course, the missing parts are still missing. Just log some individual bugs on them http://www.inkscape.org/report_bugs.php

lxx said...

Inkscape 0.4.6
I don't see any "Save as .fx" in "Save as" dialog.

somewaytoluebeck said...

Nice Introduction.

Could you please tell me where to put in the code:

function run(){
Stage {
title: "Application title"
width: 640
height: 480
scene: Scene{ content: [Content{}] }
} //Stage

because I dont get it working :(

Thanks a lot