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 

• Java2D
• JavaFX 2.0
• HTML5 Canvas
• GWT
• GroovyFX (based on JavaFX 2.0)
• Android

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.


Java2D:
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.


JavaFX:
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.


GWT:
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.


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


UPDATE 2:
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...

Groovy graphics...

I know i know...it's nearly a month ago the last time i blogged about something but i just can tell you i have learned a lot in the last month...
Those of you who follow me on twitter know it already i started playing with Groovy and the only thing i can say about it is ... IT REALLY ROCKS !!!
It might not be the one and only solution for everything but it makes you so much more productive, it's amazing.


Thanx to Dierk König and Andres Almiray who motivated me to choose the groovy way of life.


Two weeks ago i was at Canoo (which is btw a really really nice company) again in Basel (CH) and during the two days of my visit Dierk came up with the idea of using an Adobe fxg file as resource for the design of a component. This means you have to parse the file in process instead of preprocessing the file. This idea lights my fire and i started looking into Groovy to create a new fxg parser. 


Well Groovy and XML really is a dreamteam, so creating the parser was really not a big deal. After the parser was finished i started looking into a so called translator which translates the converted fxg data into different languages. First of all i started with Java2D which was easy, after it was ready to go HTML5 Canvas, GWT followed.


So now the new Parser-Translator duo is able to convert Adobe fxg files into files for all those languages. It's not completely finished because i have to come around the 64kb barrier for methods/classes in Java but i'll fix this asap and will use the new converter to replace the current one.


A few days ago Dean Iverson asked me if it would be possible to create also JavaFX 2.0 output and so i started looking into this. Yesterday i finished the export to JavaFX 2.0 and was really happy about it.
So excited that i could not sleep which let leave the bed around 4:30 AM to get my ideas into code.


The idea came from Dean Iverson and was about creating a JavaFX 2.0 component on the fly using an Adobe fxg file so a similar idea like the one from Dierk König. First of all i was not sure if i could easily realize but this morning i knew i could and so i started coding.


The result is 450 lines of Groovy code that makes it possible to parse a fxg file live and return JavaFX Groups for each layer of the fxg file. 


Here is a little screenshot of a JavaFX component using a fxg file on the fly:

And all you need to realize this is the following piece of JavaFX code...

public class FxgTest extends Application
{
    @Override
    public void start(Stage stage) {
        Test component = new Test(400, 400);
        Scene scene = new Scene(component, 400, 400);
        stage.setTitle("FXG -> JavaFX (live)");
        stage.setScene(scene);
        stage.show();
    }

    public class Test extends Parent {
        public Test(int width, int height) {
            String fxgFile = "/FILE.FXG";
            FxgFxParser parser = new FxgFxParser();
            Map groups = parser.parse(fxgFile, width, height, true);
            getChildren().addAll(groups.values());
        }
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

If you now start the application, it will load the given fxg file, parse and convert it and display it on the stage. If you would like to play with this stuff you need to have the JavaFX 2.0 beta installed otherwise it won't run. 
If you are on a Mac you need to be a member of the Java Partner Program of Oracle to get the Mac version of the JavaFX 2.0 beta. You will also need Groovy 1.8 installed to play with the code but you could easily download it at Codehaus and install it without a problem.
The code itself is hosted at github and could be found here:


git://github.com/HanSolo/FxgFXParser.git


Well it's not the biggest blogpost but i'm really excited about it and so it was worth the time to write it...


The SteelSeries 3.9.4 is also nearly finished and will be released soon...


At the moment i'm writing this Dean wrote me that FXG files exported by Adobe Illustrator do not convert nicely so i'm on that now and will hopefully fix it soon.
FXG Files exported by Adobe Fireworks should be fine (don't ask me why they export different kind of FXG dialect)


Keep coding and enjoy the upcoming weekend,


Gerrit

FXG Converter update...

Aloha...

Due to my work on the html5 canvas version of the steelseries i had the same problem as a year ago where i started to create the java swing version of the steelseries library...converting graphics to code (it seems to be a never ending story).

After i made some progress converting the java swing code to html5 canvas, last week i decided to spend some time to add html5 canvas support to the fxg converter. I'm sure Adobe will add an export to canvas in future releases of Fireworks but today it's not possible to do that.

So here we go, the FXG converter now supports conversion from fxg to html5 canvas. It supports the FXG spec 2.0 except text (which will not be placed correctly in the converted canvas) and winding rules in paths (i only have one file where this leads to some drawing problems in canvas).

The workflow is the same as it is in the Java Swing version:

1. Create your drawing in Adobe Fireworks (or Adobe Illustrator):

2. Export the file to FXG.

3. Start the FXG converter and drag the fxg file to the converter.

4. Switch the button from java2d to canvas and press the Convert button.

5. The converter will create two files on your desktop that are named like the fxg file.

6. Simply open the html file in your favourite (html5 capable) browser and...enjoy

Like in the Java Swing version the converted "components" are fully scalable. 


An example of the converted JUG Muenster logo in different sizes could be found here. Another example of some converted fxg files could you find here.

If you have no possibility to create fxg files you might want to download the JUG Muenster logo as fxg file here.

Html5 Canvas is amazing because it seems to be the first real x-platform 2d api that one could use on all html5 capable browsers including iOS based devices, Android based devices, some setop boxes etc.

So enjoy converting your graphics to canvas and show it to the world...

Hidden features in the FXG converter...

Hi there,
for those of you that use the fxg converter (unfortunately i have no idea if somebody use it at all), otherwise just for me to remember i'll explain two little features in the fxg converter that saves some lines of code...
Because the Adobe Fireworks fxg file looks different from the Adobe Illustrator fxg file (don't ask me why), it happens that even if you define a ellipse or rounded rectangle in Fireworks, it will convert it to a fxg path instead of a fxg ellipse or fxg rect element. In principle this is not a problem because the converter will convert the path to a java2d generalpath BUT...this means a lot of code for a simple ellipse or rounded rectangle.
Therefor i added the possibility to use the elementname to mark it for special treatment.

Ellipse:
A ellipse in Adobe Fireworks will get the default name "Ellipse"

If you leave it with this name it will be exported as fxg path which means it will also be converted to a java2d generalpath.
The trick is to start the name with "E_" which will have no effect to the fxg export (it's still a fxg path) but the fxg converter will create a ellipse from the given fxg path.

RoundedRectangle:
A rounded rectangle will get the default name "Rounded Rectangle Auto Shape"

Here we'll get the same problem as with the ellipse, it will be exported as a fxg path which will lead to lots of lines of code after the conversion. That's not needed because it's a simple rounded rectangle right ?
So to get rounded rectangle after the conversion you need to follow the upcoming procedure:

1. Create the rounded rectangle in Adobe Fireworks
2. Open the "AUTO SHAPE PROPERTIES" dialog
3. Note the corner radius (n.m)
4. Ungroup the rounded rectangle in Adobe Fireworks
5. Name the shape starting with "RRn_m_" followed by your name

You could either use a integer (yellow box at the screenshot) or a float (green box at the screenshot) as the corner radius for the rounded rectangle.

Example:
RoundedRectangle with the name "Box" and a corner radius of 5.5 should be named "RR5_5_Box" to get a rounded rectangle after the conversion to java2d.

You could also use it with a integer like this, "Box" and a corner radius of 5 should be named "RR5_Box".
 
With this small modifications in your drawing you could save a lot lines of converted code in your java file and you will get a better, more precise scalability.

So i hope for whoever uses the converter this hint will be helpfull...

FXG Converter update

Yesterday i thought it might be useful to add a little calculator to the fxg converter tool. Because if you convert a fxg file to java2d code you sometimes need to convert additional points (e.g. non centric rotation center etc.).
To achieve this i usually use a desktop calculator and convert the point coordinates from the image to scalable coordinates for the java2d code.
Making this easier i added this simple stupid calculation to the fxg converter so i'll have it always available if needed.
Here's a little screenshot...

You can open the calculator by pressing the calculator button and if you have a fxg file opened in the preview it will pass the width and height of the fxg file to the appropriate fields in the calculator.
Now you just have to put in the coordinates of the original point and press the "Calculate relative position" button and you will get the new coordinates in relation to the width and height shown in the textfield at the bottom of the window.
It's nothing special but for me it's a little handy tool...