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.


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



Wednesday, September 7, 2011

SteelSeries 3.9.6

Glow with the flow...
Finally i was able to finish another release of the SteelSeries component library and again there's lot's of new stuff in here.


First of all i have made many many many changes in the code where i did not add features but only replace all full classified class descriptions by their related import statements. That tooks a lot of time and i'm sure that there are still some in there.
In addition i have also changed the placments of the braces to more common format that the open braces are placed on the same row and not in a new one. But that's only for those of you who read the code...


In addition i moved from trident animation library 6.2 to version 6.3 that you could get here.


No 3.9.4 and 3.9.5 release ?
You might ask yourself where are the 3.9.4 and 3.9.5 releases? Well the 3.9.4 was ready to go and when i took all the screenshot for this post i figured out that i missed something that i would like to add to this release so i added the feature (which was really small) and created another release which was 3.9.5. But that's not enough, again two bugs appear in the last minute and so it came finally to 3.9.6


So let's start with the news...


NO NO_FRAME:
I removed the FrameDesign NO_FRAME from the library because it was not really needed anymore. One should use setFrameVisible(false) instead.




NEW LCD COLORS:

On the image you could see the new LcdColors in 3.9.6 which are named DARKBLUE_LCD, LILA_LCD, BLACKRED_LCD and DARKGREEN_LCD.

Because i gave some love to the DisplaySingle component i have more to show here...

LCD THRESHOLD INDICATOR:

All components that contain an LCD now supports the minValue, maxValue and threshold property. And if the current value exceeds the maxValue, a little indicator on the lower left corner of the lcd display will appear and visualize that the current value is out of range.

During a talk with my future colleagues i figured out that it might make sense to use an lcd itself to indicate the current value. In a gauge i could display sections but in an lcd what could i change to visualize the current value ???
Right the complete color of the lcd...

LCD SECTIONS:

This means one could define now an array of Section objects and pass it to the DisplaySingle component. If the current value is in the range of a section the complete display will change it's color related to the color that is defined in the active section. Please keep in mind that this feature works best on the LcdColors BLUE2 (image above), GREEN etc. which means all monocolored LcdColors (without a glass reflection effect).

Another nice feature of the DisplaySingle that is new in this release is the QualityOverlay feature. In principle it's similar to the Sections feature that i mentioned before but in this case i use some kind of a progressbar to visualize the quality of the current value. But let's have a look...

LCD QUALITY OVERLAY:

You could imagine that this feature is only useful in special usecases but if you need it it's now available... :-)

When i was in Basel at Canoo, Dierk König mentioned that the threshold led might be to small to be recognized when not in front of the monitor and we discussed ideas on how to improve...

GLOW:

If you take a closer look at the gauges above you will figure out that there is an additional frame on the inside of the gauges. This frame could be made visible by using setGlowVisible(true). And if you use setGlowing(true), it will use the current glowcolor and visualize it like this...


This might be useful to visualize a certain value or threshold or whatever...

By the way...to come back to the LCD one more time...it supports the glow too... :-)


On the radial gauges you will find a new PointerType which is TYPE10. This type of pointer was created to be used on very small gauges, where the standard pointers are simply too small, so it looks like this...

POINTER TYPE 10:

On the image above you could see the new pointer type and to show you the difference i created a small gauge with the new and with a standard pointer.

Well the next new things are related to the BackgroundColor of the gauges and i have to say that the first of the following new BackgroundColors does not really fit to a gauge but someone asked for it and here we go...

LINEN BACKGROUND:


NOISY_PLASTIC BACKGROUND:

The idea for the NOISY_PLASTIC came from Wolfgang Zitzelsberger of Jyloo Software (creator of the Synthetica LAF) and i saw it on their blog. I tried to get mine as good as theirs but i think their texture looks still better.

As you can see you could define the color of the texture and this is another new feature in this release, called TextureColor. The TextureColor is a standard Color that could be set and will be used to colorize the LINEN, BRUSHED_METAL and PUNCHED_SHEET texture.

Here are some examples of BRUSHED_METAL...

and PUNCHED_SHEET:

Well with the PUNCHED_SHEET texture it's a little bit different because in the current version of the library the texture will be created in an enum and will be used on every gauge. This means changing the texture color e.g. to red will change the texture in all gauges that are using the PUNCHED_SHEET texture.

The next thing that is available now is an additional LED which could be configured by the user, so it's called userLed. This LED will not be used by the library so you could set it visible, set on or off and let it blink. Of course one could define the color of the userLed.

USER_LED:

So if you are in the need to have an additional indicator for whatever value, you could now use the userLed feature to visualize it.

Another new thing is the highlighting of Sections and Areas in the gauges. This means if the pointer is over a section/area that contains the current gauge value, the section/area will be highlighted.

HIGHLIGHT SECTIONS / AREAS:

In the left column on the above image you see the behaviour that you might know already, it simply shows the sections/areas that you have defined.
In the middle column you see that the green section/area is brighter than the other sections/areas because i switched on the hightlightSection/highlightArea feature of the gauges. 
There is also the possibility to show only the highlighted section/area which you could see on the right column. To achieve this behaviour you just have to call setSectionsVisible(false) and setHighlightSections(true). The same will work for the areas too.

Now we are coming to an end...


DESIGN SETS:
The last new feature is the possibility to define so called DesignSets (2 for each gauge) and toggle between those DesignSets. So you might ask yourself for what this might be useful and here is the answer to it...

If you use a dashboard with gauges on a notebook to visualize data and you have to use the notebook outside you will define the colors of the gauges in the way that it is good readable. If you now go back inside a dark house the colors of the gauges might not fit anymore to the new surrounding brightness.
Or if you would like to use the dashboard by day and night you might need different colors for your gauges.
For reasons like that i have added the DesignSet which mainly contains the colors/designs of the frame, background, pointer, knobs, lcd and led. You could either toggle between design1 and design2 or you could call setActiveDesign() with the gauge and the design you would like to set.

Here is the code to define a DesignSet:

DesignSet night = 
            new DesignSet.Builder().frameDesign(FrameDesign.BLACK_METAL)
                                   .backgroundColor(BackgroundColor.BLACK)
                                   .lcdColor(LcdColor.BLACK_LCD)
                                   .knobStyle(KnobStyle.BLACK)
                                   .color(ColorDef.RED)
                                   .build();
DesignSet day = 
            new DesignSet.Builder().frameDesign(FrameDesign.SHINY_METAL)
                                   .backgroundColor(BackgroundColor.WHITE)
                                   .lcdColor(LcdColor.STANDARD_GREEN_LCD)
                                   .knobStyle(KnobStyle.SILVER)
                                   .color(ColorDef.BLUE)
                                   .ledColor(LedColor.BLUE)
                                   .build();
        
radial1.setDesign1(day);
radial1.setDesign2(night);
radial1.setActiveDesign(radial1, night);
        
radial2.setDesign1(day);
radial2.setDesign2(night);
radial2.setActiveDesign(radial2, day);

I used the builder pattern to create the DesignSet so you can decide which kind of parameters you would like to store in your DesignSet.
And that's would it would look like...


Well that's it for 3.9.6, so i hope you find one or two useful new things for you in this release, which is available as binary here on the page or you could get the source from project Kenai. You also find the SteelSeries lib on Maven Central, if you search for "SteelSeries"

So keep coding...

Friday, September 2, 2011

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