Tuesday, September 13, 2011

FxgConverter 2.0

To get nice graphics from a drawing program into java code i use Adobe Fireworks capability to export Adobe fxg files which i convert into Java2d code.
Because my old fxg converter was not the most beautiful coded piece of software i always knew that someday in the future i would have to recreate it.
Long story short...it's done...

This is the new fxg converter...

As you can see it looks very similar to the old version and i only changed the available options.
In the background i now use a complete new parser/translator combi written in Groovy
This new parser/translator combi is able to convert fxg code to 

The GWT code might still have some issues because i never used GWT. So if you encounter problems with the GWT code, please let me know so that i can fix it.

The idea behind the converter is that you could create your graphics in a drawing program like Adobe Fireworks or Adobe Illustrator and export the graphics to an Adobe fxg file. If you drag this file to the fxg converter it will show you a preview of the drawing for example like this...

Now you could select the language/dialect to which the converter should convert the graphics code and press convert.
During the conversion (which could take some time dependend on the image size) the converter looks like this...

And after the conversion is finished you will find the file that contains the converted code on your desktop.

The java file is in principle a custom component incl. resizing logic that you directly use in a ui editor like matisse in Netbeans. The Java component uses the converted graphics in the form of java BufferedImage objects. Each layer of the original drawing will be a BufferedImage with the name of the layer. In addition to the java file the converter will also export a file named JavaShadow.java. This file contains methods to create drop- and innershadows and will only be used if you uncomment the lines in the component code.

The javafx file is a javafx component that uses the converted graphics in the form of javafx Group objects. Each layer of the original drawing will be a javafx Group object with the name of the layer. In addition to the component file the converter will also export a file that uses the component so that you could directly see how you could implement the new javafx component in your code.

HTML5 Canvas:
The javascript file contains a canvas component that uses the converted graphics  in the form of context objects of <canvas> elements. In addition to the javascript file the converter will also export a html file that uses the canvas component so that you could see how you could implement the canvas component in your html page.

The gwt file contains in principle the same code as the HTML5 Canvas code with just a few differences. You should be able to directly use the created file in your gwt project. Like i said before, if you encounter problems, please let me know.

Since today (thursday, 15th of september) the FxgConverter2 also supports exports to GroovyFX which is in principle a groovier version of the JavaFX code.

Since friday, 16th of september the FxgConverter2 also supports exports to Android devices. It will create a custom view that contains the image and will be instantiated by an Activity.

Geertjan Wielenga from the Netbeans team at Oracle is also working on a plugin of the converter. Check out his progress here...

You could find the new FXG Converter 2 here on this blog on the right side...

Please keep in mind that the new converter only supports FXG 2.0 (it will also convert FXG 1.0 but you'll find problems with gradients).

That's it for today...so keep coding...


  1. Hi,

    I was wondering if the FXG Converter 2 is open source and if so, where the source can be found.

    I only found a link to a zipfile with the source of an earlier version.


  2. Hi Anonymous,
    The sources could be found on github : https://github.com/HanSolo/FxgTools
    Cheers, Gerrit

  3. Hi Gerrit,

    The codeon github doesn't seem to contain the source for the Fxg Converter 2 that I can launch through this blogpost or am I overlooking something?


  4. Hi K.,
    Well the fxg conversion is done by the fxg tools on github and the rest is just a UI that makes it possible to drag fxg files to a panel and pass the dragged fxg file to the fxg tools classes. So this should be easy to create which is the reason for not having the code open sourced somewhere. You could create this kind of UI easily on NetBeans with a few clicks.
    Cheers, Gerrit.

  5. Hi Gerrit,

    One of the reasons I was also interested in the sourcecode of the FXG Converter 2 was that is displays a nice flip switch component (for "export file") which I'm interested in.

    Can I find more info/source on that one somewhere?

    Cheeers, K.

  6. Hi K.,
    Well no problem, just send me a mail and i'll send you the swing component.

  7. Please could you add other export formats (like .ai, .eps and other vector formats) to your fxg converter? I'm sure a heck of a lot of people would call you a hero if you did that, since Adobe screwed up CS5 for those of us who draw with it by removing the vector export options.