Harmonic Code

Gradient trick...

2012-01-27T17:15:00.000+01:00

Aloha,

during my work at Quintiq i stumbled upon a problem when drawing lot's of linear gradients in "realtime". In our software we have a gantt chart component that could contain thousands of nodes. Each of these nodes could contain multiple so called compartments which are representing a range of values. So the node itself is visualized using a LinearGradientPaint and also each compartment is visualized with it's own LinearGradientPaint. So far this should not be a problem but now it comes...we can't really cache things because the whole gantt chart is so to say "live". This means if somewhere in the businessmodel a value changed it will affect the ganttchart in the way that the nodes and their compartments will change it's size. Another problem is that the nodes could not only have different widths but also different heights.

The compartments are separate shapes that will drawn on top of the nodes.

And that's not enough, the chart that is visible on the screen only represents a small part of the whole data which means one could scroll horizontal which let new nodes appear on the screen and others might change their height (this is something special to this kind of graph in our software).

Long story short...we could nail the performance problem to the drawing of the linear gradients and their creation.

So i was thinking about how to improve the drawing speed of these gradients and came to an interesting approach that i would like to share with you in this post.

First of all i created a 1px wide BufferedImage with the most common height of the nodes. Then i filled this 1px image with a linear gradient (e.g. the green one) and saved the image for later use. Everytime when there was a new color of a compartment i created an 1px gradient image for this color.

The trick is now to use the TexturePaint to fill all these nodes which has the big advantage that it will scale the gradientimage automaticaly to the needed height. Because we have to create each gradient only once now the repaint speed could be reduced by 30ms on each repaint.

This performance problem only occured when the gantt chart became really huge with thousands of nodes, but i thought it might be interesting for you to know.

Here is a little code snippet that will give you a hint on what i did...

private BufferedImage nodeTexture;

private void init() {
    private final float[] fractions = {
        0.0f,
        0.5f,
        1.0f
    };
    private final Color[] colors = {
        Color.RED,
        Color.GREEN,
        Color.BLUE
    };
    nodeTexture = createNodeTexture(24, fractions, colors);
}

@Override
protected void paintComponent(Graphics g) {
    ...
    Graphics2D g2 = (Graphics2D) g.create();
    for (RoundRectangle2D node : nodes) {
        TexturePaint nodePaint = new TexturePaint(nodeTexture, node.getBounds());
        g2.setPaint(nodePaint);
        g2.fill(node);
    }
    g2.dispose();
    ...
}

// Method that creates a 1px wide gradient image    
private BufferedImage createNodeTexture(final int HEIGHT, float[] fractions, Color[] colors) {
    GraphicsEnvironment gfxEnv = GraphicsEnvironment.getLocalGraphicsEnvironment();
    GraphicsConfiguration gfxConf = gfxEnv.getDefaultScreenDevice().getDefaultConfiguration();
    BufferedImage image = gfxConf.createCompatibleImage(1, HEIGHT, Transparency.OPAQUE);
    Graphics2D g2 = image.createGraphics();
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    Point2D start = new Point2D.Double(0, 0);
    Point2D stop = new Point2D.Double(0, HEIGHT);
    final LinearGradientPaint GRADIENT_NODE = new LinearGradientPaint(
        start, 
        stop, 
        fractions, 
        colors);
    g2.setPaint(GRADIENT_NODE);
    g2.fillRect(0, 0, 1, HEIGHT);
    g2.dispose();
    return image;
}

Before i forget it...we are hiring, so if you are looking for a job in the Java and/or C++ area please check here

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

Friday Fun Component XV

2012-01-06T10:28:00.003+01:00

Here we go again...
Today i have nothing special for you but just another traffic light component. This time the component is more compatible to different background colors because it's semitransparent.
We needed something for our software and the other traffic light component was simply too dark...so i created this one...

click to see it in action...

As you can see it comes in two versions and you could switch between both versions by using the yellowVisible property.

The frame has the color #333333 with an opacity of 50% and the inner part has the color #CCCCCC with an opacity of 50%.
Due to the transparency this component fits better on different backgroundcolors because they shine through.

This component is now also part of the SteelSeries Java Swing component library.

Well that's all for this friday, as always you could download the binary and source (as NetBeans project) here:

binary version: TrafficLight2.jar

source : TrafficLightDemo2.zip

So enjoy the upcoming weekend and keep coding...

SteelSeries 3.9.10 (QuickRelease)

2012-01-02T17:06:00.001+01:00

Happy new year everybody...

UPDATE: due to some minor modifications the current version is 3.9.12

I know i said it would take some months until you will see the next release but i needed some components be part of the library so i decided this morning to make a quick release and added these new things to the lib.
The new things i have added are the traffic light and light bulb you might know already from the friday fun components, another traffic light component that might fit better to different color schemes and at least 8 new indicator symbols in the IndicatorGauge.
To give you an idea on what the stuff looks like...here they are...

The traffic lights and the light bulb...

and the eight new symbols which are just arrows pointing to different directions...

And that's all for this release...like i said a quick release with just a few new additions. You will find the new version either here on this blog on the right side or at MavenCentral.

For those of you that are interested in the progress of the SteelSeriesFX i could show you one screenshot of the current state...

As you can see i made some progress but it's still a looooooong way to go...

so stay tuned and keep coding...

SteelSeries 3.9.9

2011-11-25T13:33:00.000+01:00

It took some time due to some conferences and my new job but i finally decided that it's time for another release of the SteelSeries component library.
Because i will port the complete library to JavaFX 2.0 this will be the last release of the Swing library for the next months.
Porting the lib to JavaFX 2.0 means a complete rewrite from scratch combined with learning JavaFX...so this will also take some time...which means patience my friends...
But now let's talk about the stuff that's in this release...

The DisplaySingle component (lcd with a single row) got most of my attention in this release. So first of all it's now capable of displaying also text instead of numbers only.

Click me to see a youtube video of the scrolling...

If you click on the link below the image you will see a little video on youtube that shows the rudimentary scrolling capability that is supported by the DisplaySingle component.
The display of text could be enabled/disabled by using setting the lcdNumericValues property to false and fill the lcdText property with some text.

There's also a new LcdColor available that is only useful in the DisplaySingle component and will be used to visualize sections in the lcd display.

Without any section applied to the DisplaySingle it will look like this:

As an example i defined sections as follows:

Section[] sections = {

new Section(0, 25, Color.GREEN),
new Section(25, 50, Color.YELLOW),
new Section(50, 75, Color.ORANGE),
new Section(75, 100, Color.RED)
};

If you set these sections with the setSections() method to a DisplaySingle component and activate the visibility of the sections by calling setSectionsVisible(true) you will get results like follows:

We will use this feature to visualize the quality of kpi's in the next version of the Quintiq software.

In the gauges it's now possible to adjust the color for the inner (green in the image) and outer frame (red in the image), which was requested...

And again some new pointer types are available...

The pointer type 13 and also type 2 now change their color dependend on the background color. That means the pointer will get a better contrast on the choosen background color. The color that will be used to fill the pointer is the same as the label color defined in the background color.

Another new thing i've added to the lib is the ability to use logarithmic scaling for the gauges which might be useful when measuring over a large range of values.
The implementation is rudimentary and only for base 10 but it's a start...

logScaling disabled (default)

logScaling enabled

The logarithmic scaling is available on the radial and linear gauges and bargraphs.

As you could see on the images above there's also another new feature that makes it possible to adjust the orientation of the ticklabels.
There are three possibilities available:

normal
horizontal
tangent

and that's how they look like...

And that's still not the end, there's also a new frame design called GlossyMetal which looks like this...

Started talking about the frames there's also a new feature that makes it possible to choose a custom color for a frame (this feature only works for the frame design named ShinyMetal) and could be switched on with setFrameBaseColorEnabled(true). If you have switched this feature on you could set a frame base color that will be used to colorize the frame of the gauge which leads to a visualization like this...

The next feature is something that was on my list for a long time but i never found the time to do it...now it's done...
Frameless gauges...

If you switch off the visibility of the frame the gauge will take the whole space of the component instead of simply not show the frame. This is really useful if you do have a lot of gauges on your dashboard where you don't need the frames.

At least i made some modifications to the visualization of the sections in a gauge that might be useful for business dashboards. Because that are only small modifications i won't explain everthing but show you some more images...

As always you could find the binary version on the right side of this blog.

I guess that's it for 3.9.9 and like i said already this will be the last release for the next months because i really have not time to do all this stuff in my spare time again and will focus on the SteelSeriesFX version...so stay tuned and keep coding...

Friday Fun Component XIV

2011-11-18T16:30:00.000+01:00

Aloha,

back from Devoxx which was great again i still found some time to release another little fun component for you.

It's a range slider that i've created for the server team of Quintiq. This slider is in principle a simple JSlider with two knobs instead of one.

We use this slider to specify a range of days (e.g. a week or so) but you can use it for all kind of ranges.

Here is a screenshot of it...

On the screenshot you could see most of the features the range slider has to offer. One could set different kinds of knob shapes, knob designs, track styles, range colors etc.

One interesting feature might be that you can drag no only the thumbs but also the range itself which could be useful if you have defined a range and would like to keep the delta but on a different position on the scale.

Because it's still 4:30 pm in Germany i won't go into detail now and leave it up to you to play around with the little demo app i created.

Because i did not want to reinvent the wheel i based the slider on the work of Ernie Yu who blogged about it last year in december.

And if you like it you might want to download the sources as always presented a s a NetBeans project...

Binary jar: RangeSlider.jar

Source : Rangeslider.zip (NetBeans project)

And that's it for this friday...enjoy the upcoming weekend and keep coding...

Friday Fun Component XIII

2011-11-11T10:02:00.009+01:00

And another one...even if i was really busy this week due to an internal training course named the "Demo challenge" i could not resist to release another friday fun component.
This time it's all about a traffic light component that might be useful to visualize the state of something...and here is what it looks like...

This component is one of the simplest ones i've build so far and only has three properties...

redOn (boolean)
yellowOn (boolean)
greenOn (boolean)

Each of these has a getter and a setter and that's it...like i said...really simple...

It's scalable as you expected and as last week i created a little demo app that will give you the chance to take a look at the component before you might want to download the sources...

Source (NetBeans project): TrafficLight.zip
Binary jar: TrafficLight.jar

I hope this component will be useful for one or the other and if you have ideas for other components you would like me to create...just let me know...

Keep coding and enjoy the upcoming weekend...

Friday Fun Component XII

2011-11-04T07:34:00.000+01:00

Due to some training sessions that i have to do this week and next week i'll only release a very small blogpost about another fun component that i created for Dierk König of Canoo. It's all about a light bulb...which looks like this...

Well it's nothing special but might be useful for the one or other visualization.

The component has the following properties:

direction (SwingUtilities.NORTH(default), EAST, SOUTH, WEST)
glowColor (java.awt.Color)
alpha (float 0.0f...1.0f)
on (boolean)

I created a little demo app that let you play with some of these parameters.

And as always the source and the binary jar:

Source (NetBeans project): LightBulb.zip
Binary jar: LightBulb.jar

Like i said...it's a short post, so keep coding...

Friday Fun Component XI

2011-10-28T08:00:00.001+02:00

Here we go again...
I'm really busy these days which is the reason why the blog was not updated for such a long time but...it's friday again which means time for some fun...
Two days ago Geertjan Wielenga from the NetBeans team at Oracle contacted me and asked for a StickyNote component that he would like to use in the NetBeans platform (see the result here).
Well i liked the idea and i really like NetBeans which pushed me even a bit more to create the component.
Long story short...here it is...

As you could see it's really just a simple sticky note. It contains a JEditorPane that is editable which means you could put the sticky note somewhere and start typing.
First i thought it would make sense to add a scrolling behaviour to the component too but a real sticky note also has no scrolling right... :)
The component comes with two kinds of fonts, the standard font which is Verdana and a handwriting font (which is default). But you can use whatever font you like by setting the customFont(java.awt.Font) and setCustomFontEnabled(true) methods. You might also want to change the color of the note which could be done by using the setNoteColor(java.awt.Color) method. So the result could look like these...

If you took a look at Geertjans blogpost and read the sticky notes on the screenshot you will find something like "Maybe add a pin to note"...so why not adding a pin to the note just for the fun of it...

You could enable/disable the pin by using setPushPinVisible(true/false).

So here is the source (as NetBeans project) and a binary version that you could use directly...

Source (NetBeans project)

Binary version (jar)

That's it for today, so enjoy your weekend and keep coding...

Short note about Java ONE 2011...

2011-10-11T23:10:00.000+02:00

Hi there,
last friday i returned from my trip to JavaOne and i have to say that this conference really rocks.
Well to be honest i did not thought this way when i arrived at the conference because the venue was terrible in my eyes. This is because i never attended a conference where the talks have been split up to different hotels...and we are talking about huge hotels which means it takes a while until you find your way through all these floors...
The splitting somehow destroys the "community feeling" that usually is present at a conference which means all the people are hiding somewhere in the hotels and it's hard to find someone if you are searching for someone.
But nevertheless i met a lot of people which was a really great experience, especially talking to Greg Brown of the JavaFX team was really interesting because we simply had a lot of stuff to talk about...really enjoyed that.

Sunday:
When i arrived at sunday evening i was a little bit in a hurry to check in to the hotel and pick up my badge for JavaOne because i arrived in SFO around 6pm.
After i picked the badge up i went outside to the Mason Street café where i met Frank Greco from Kaazing. We had a nice discussion about HTML5, websockets etc.

Monday:
Fortunately i met Andres Almiray and Ixchel Ruiz on monday morning so they picked me up at Mason Street café and showed me the speakers lounge etc. which was great to know. After that we attended the keynote that had some nice things in it (i just say JavaFX on an iPad and an Android device...)
After the keynote i started exploring the venue and attended lots of talks.

Tuesday:
On tuesday i continued my exploration by visiting the exhibition area. I talked to the Vaadin guys and decided to add support for Vaadin to the FxgConverter. In addition i asked again for one of their t-shirts but again got the answer that they don't have them available. I told them that i asked them last year at JFokus and this year at JFokus and again on JavaOne and never got one...so they said they will send me one...what should i say...they really did...THANX A LOT !!!
After talking to Vaadin i walked to the Jetbrans booth and talked with them about the possibility to add the fxg converter as a plugin to IntelliJ and they directly send me a template that i'm now working on to get the FxgConverter as plugin for IntelliJ Idea. Again THANX A LOT !!!
The last booth i visited was one of the JavaFX desks of Oracle where i met Greg Brown of the JavaFX team. Like i said we had a lot of good discussions that i really enjoyed...so i'll keep in touch with Greg that's for sure.

Another highlight was the Java Desktop lunch that was organized by Stephen Chin (a really nice guy btw) and i have to say even if it was short it was good to see and talk to people that have the same interests as i have...Java on the desktop.

JavaFX:
You know i kept an eye on JavaFX since back to the days when it was called F3 (FormFollowsFunction) and "just" a project of Chris Olliver and i really didn't liked the whole JavaFX script stuff that Sun made out of it. I can't really explain why i did not like JavaFX script (might be all the braces) but i know that something prevented me from ever using it.
When i heard that Oracle will reinvent the wheel another time i was not really looking forward to the result but i have to say that it was worth taking a look at it.
Now that it's implemented in Java the whole JavaFX thing makes much more sense and if you start working with it, it feels somehow familiar. Maybe this is because it was made by the same people that created Swing...
Well it's not completely finished yet and i still miss some things that are available in Swing but i have to say that the JavaFX team did a great job by porting it to Java. They convinced me so that i started porting the SteelSeries library to JavaFX which means there will be a SteelSeriesFX in the near future (depending on the spare time that i'll have in my new job). So even if you think you won't need all the effects and animations in JavaFX it's really worth a look.

GroovyFX:
Well to be honest there are also parts in JavaFX that really looks quirky and lead to a lot of boilerplate code but fortunately Dean Iverson and Jim Clarke did a great job on creating GroovyFX which is a Groovy port to JavaFX. With using GroovyFX you are able to reduce the amount of code to a minimum. The really good thing is that you won't loose the readability but you will in fact get a better readability too...it's just amazing. By the way there's also a Scala port to JavaFX called ScalaFX which is similar to GroovyFX in the amount of code you won't have to write.

Griffon:
I knew it for some time but never played around with it...SHAME ON ME !!! Griffon really rocks and i hope to find some time to finally play around with it. After attending the talk of Andres Almiray i just can tell you if you are a Swing developer you should take a look at Griffon, it really has some nice features in it.

Back to the conference:
Mentioning Dean Iverson reminds me on the talks he gave at JavaOne...if you ever have the chance to attend to one of his talks...GO THERE !!!!! This guy is really entertaining and has a lot of knowledge to share with you...his talks have been my favourites at JavaOne.
Another great talk was the one of Dierk König (Canoo) which was slideless...such a nice idea to simply code in front of the audience. So anyone that had a question just asked and Dierk replied to it by live coding the answer. The complete contrast to Dierks talk was a talk about JavaFX multimedia stuff which was one of the not as good talks i attended. After this talk i thought by myself that it should be forbidden for the speaker to sit in front of his computer during the talk (except he is coding/showing something). The whole presentation got so boring just because the speakers (3 of them) just sitting in front of their computers which made the whole scene looked like a "Stillleben"...i left the talk before it was finished.
Even if i'm not coding for mobile devices i attended a talk about LWUIT (LightWeight UI Toolkit) which is used in the Java ME area. The reason why i attended this talk was that they have a nice concept for the presentation, they brought their graphical designer with them and let him explain how and why he created specific graphical things in LWUIT. This was interesting because it demonstrated the problems with the Designer-Developer workflow that was part of my talk.

Wednesday:
On wednesday i had my talk at 1pm and it was fun...so for everyone that is interested you could find the pdf of my presentation here
Wednesday evening i spent some time at the event on treasure island where Sting and Tom Petty and the heartbreakers played but i have to say that there have been too many people out there for me so i decided to went back to the hotel early.

Thursday:
At thursday which was the last day of the conference i decided to spent half the day at Google in Mt. View visiting Alex Ruiz which was worth every second...
Alex is such a nice guy and we talked a lot (most of the time about our kids) which i really enjoyed and i'm looking forward to meet him again...

Because i started my new job at Quintiq yesterday i won't have much time left to blog but i'll try to keep things running so stay tuned...

FxgConverter 2.0

2011-09-13T14:30:00.003+02:00

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

SteelSeries 3.9.6

2011-09-07T11:57:00.000+02:00

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

Groovy graphics...

2011-09-02T19:15:00.001+02:00

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

Friday Fun Component X

2011-08-05T06:33:00.001+02:00

Flip it baby...

A year ago i created a departure board component in Swing when i came back from Paris where i saw the original departure board at Gare du Nord trainstation.

In the meantime many people asked me for that component but i never had the time to recreate it so that one could use it.
Because it was still on my list i decided to create a scalable version of the flip-char as a single component that you could use to create whatever component you need with it. As an example i added a simple FlipCharPanel which contains 16 characters so that you get an idea of how to use the single FlipChar component.
The flipping effect is a simple fake because i simply created nine images that i'll play each time a character is flipping to the next character.

I splitted the character itself in two pieces and display the top part directly and the bottom part when the nine images have be drawn. Because these panels flip at really high speed it was no really needed to really created transformed images of each "flipping phase" which would make the whole thing really slow. Especialy with lots of characters flipping at the same time the effect is good enough to give you the impression of flipping characters.
In the Netbeans project file you will also find a BackgroundPanel that fit's to the colors of the FlipChar and could be used for something like this...

Click here to see it in action...

As you could see this is the same panel as the webstart demo but with a different background.
Each of the FlipChar components is scalable so that you could create smaller or bigger displays too.

You could also change the color of the characters by using the setFontColor() method of the FlipChar component. All FlipChar components will be registered to a GlobalTimer that you have to start after you have initialized your component.

To save memory the so called FlipImages will be created only once for each size and will be shared through a enum. This leads to problems if you would like to use FlipChar components of different size in one application because the flip images will be created only for one size. If you need this functionality you have to add the flip images to the FlipChar component itself but this would create the images for each FlipChar component...so it's your decision.

Binary and Source

Binary version of the flipchar component: FlipChar.jar

Netbeans project: FlipChar.zip

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

HTML5...the web strikes back...

2011-07-28T09:38:00.002+02:00

Last week i was in Berlin at GameDuell, where i gave a little talk about HTML5 and some of it's features. Because HTML5 has so many nice features i had to focus on some of them. I have added links to the presentation and the demo at the end of this post. Because i do not have much time this post will be about a combination of three HTML5 features...

Offline
WebSocket
Canvas

I created a little website that only contains one of the steelseries gauges and a textfield...so nothing special...but the trick here is that i add a HTML5 manifest file to the page so that it will be stored locally on the machine once you opened it. This means the page will also be available if there's no internet access.
That's really amazing because you could define which parts of your page should be available offline/cached (incl. scripts and css of course).
The manifest file of my demo page was really simple and looked like this...

CACHE MANIFEST
# rev 5
/demo/canvas.html
/demo/js/steelseries-min.js
/demo/js/tween-min.js

Important to know is that the manifest file has to start with the words "CACHE MANIFEST" and if you would like to refresh the cache you have to modify the manifest file. Because it's versioned by it's bytes you could also add a simple comment (like i did "# rev 5") and change the comment which leads to a refresh of the cached parts of your page.

Ok, that's easy but why did i create this page...?

To explain this i need to explain the whole idea of the demo first. So i would like to be able to demonstrate a websocket connection and i would like to use the gauges of my steelseries library. So the library was meant to be used to visualize sensor data...so i only need a sensor right...?
Why not use the sensors of my htc desire smartphone and use the gauge to visualize it...?
To make this possible i need to put the computer with the browser (where the gauge is running) in the same network as the Android cellphone which is possible using an adhoc network.

So these are the steps i need for the setup of the demo:

Create a AdHoc network on my Macbook Pro
Connect the HTC Desire to the AdHoc network
Start a node.js server on the Macbook Pro that listens on the UDP port where the data will come in and forward the data via websocket
Start a Kaazing Gateway that makes it possible to forward the websocket to specified addresses

After this setup is running i could start the software on the HTC Desire that sends the sensor data of the orientation sensor via udp to the IP address of the Macbook Pro and because they are in the same network, the node.js instance will receive the udp packages and forward them to a websocket that will be made available to localhost and another ip address by the Kaazing Gateway.
Now the real fun part of the demo was that i could add more computers to the AdHoc network of the Macbook Pro and visualize the sensor data of the cellphone on them too.
If you could follow so far you might now know why i had to cache the website with the gauge...yes...because in the moment i connect the other computers to the AdHoc network of the Macbook Pro they won't be able to load the page from the internet anymore...but from their cache they could... :-)
I created a little video to give you an idea of the functionality...

It's not the very best video but i was not sure how to give you an impression about the setup. So on the video you will see the following devices...

Macbook Pro (running node.js, Kaazing Gateway and Chrome)
iPad2 (running the demo on Safari mobile)
Win7 Netbook (running the demo on Chrome)
G5 Powermac (running the demo on Safari)

All devices running the same canvas.html website that was cached on the devices before i connected them to the AdHoc network of the Macbook Pro.

If you ask yourself how you could connect node.js to udp and forward the websocket via Kaazing Gateway i would strongly recommend to take a look at the blog of Matthias Wessendorfs blog (twitter: @mwessendorf), where he described how get this up and running.

The presentation was splitted into two parts, a pdf and a html5 page. Please find the links to the documents here...

PDF presentation

HTML5 presentation

Please keep that the WebSocket part of the html5 presentation won't work without the setup i described above. For the DeviceOrienation part i recommend a Macbook (Pro) in combination with Chrome to see something in motion.
In addition i have to mention that the webworker part will work best in Firefox5, in Chrome it seems to have problems (don't ask me why).

That's it so far for today...

Friday Fun Component IX

2011-07-22T17:01:00.000+02:00

Time for some progress...
I know it's a long time ago since i wrote the last blogpost but i really was busy the last weeks. Also today i do not have much time to create this little blogpost but you know it's friday and so it's time for some fun again...yay
I remembered a little app that i wrote nearly 3 years ago where i implemented some kind of an animated progress bar and so i decided to extract this component from the app and share it with you.
It's not derived from JProgressBar but from JComponent and is really only a bar that could be used as a progressbar. Here's a little screenshot and webstart demo to give you an impression about the component...

Click here to see it live...

It's really not a big deal but it was fun to create it and so it's worth to share it with you. You could adjust parameters like...

the colors of the bar
the color of the value/percentage text
the color of the fading infinite text
if it has rounded corners and the corner radius
the value and a max value

Like i said the component is a little bit older and might not be optimized but as always you will get the source and you might want to optimize it (if you have the time)...

So here we go:

AnimatedProgress.jar (the component as binary)

AnimatedProgress.zip (the source as a Netbeans project)

As you can see i'm a little bit in a hurry so enjoy the upcoming weekend and keep coding...

HTML5 Canvas update...

2011-06-30T23:42:00.000+02:00

This is just a really short post to let you know about the modifications i made to the javascript version of the steelseries library.
Thanx to Mark Crossley who pushed me to add more features from the java version of the lib the current version of the javascript lib contains the following gauges.

Radials and RadialBargraphs...

Linears and LinearBargraphs...

DisplaySingle and DisplayMulti...

The Level component...

The compass component...

The horizon component...

And last but not least the LED component...

The following features from the java version are available for the gauges too:

FrameDesign
BackgroundColor
PointerColor / ValueColor
PointerType
ForegroundType
KnobStyle
KnobType
Areas
Sections
LedColor
LcdColor
DigitalFont

And there's more to come...just stay tuned... :-)

You could find the latest version version of the lib always on the upper right part of the sidebar in this blog. At the same position you will find a link to the demo page that i'll update from time to time. Here's a current screenshot, click on the link below the image to start the demo.

Click to see it in action...

Due to some improvements this demo will also work on a mobile like a HTC Desire or iPhone (even if it is a bit slow)...

So keep coding...

SteelSeries 3.9.3

2011-06-14T10:30:00.000+02:00

Hello again...it's time for another release of the SteelSeries Java Swing component library.

Enable / disable nice scaling...
Because somebody asked for it i added the functionality to disable the usage of the automatic tickmark calculation. If you have for example limits of

minValue = 0
maxValue = 124

and you use the automatic tickmark calculation (niceScale=true) the calculation will set the maximum value to 140 instead of 124 to get a nice scaling. There might be usecases where you need to have the scale ends at 124 and for this reason one could now enable/disable the nice scaling by the method setNiceScale(boolean) which default's true.
A picture will better explain what this means...

On the left gauge the niceScale property is set to true and on the right it is set to false.

More realistic inner shadow on radial gauges...
Another tiny thing that annoyed me a long time was the inner shadow of the radial gauges. Somehow it looked not the way it should and therefore i modified it a little bit so that it looks better to my eyes now.

You might not even noticed the difference but for me it was visible all the time so i had to change it... :-)

New backgrounds...

When i was playing around with the lib i thought i might add more background colors to the gauges and so i've added six new designs...

Well not all of them might be useful but you never know...so feel free to play around with it. Here i would like to thank Wolfgang Zitzelsberger of Jyloo Software for the idea with the carbon. And by the way if you don't know him you should know that he's in charge of the Synthetica look and feel which you could find here.

StopWatch component...

And i have to say thanx again to Wolfgang because he also asked me for a StopWatch component and here it is...

It's nothing special with this stopwatch, just a simple analog stopwatch.

Additional clock design...

And talking about clocks...there's also a new clock design available in the existing Clock component of the SteelSeries. I while ago i created a Swing component that looked like the clock of the german railway company "Deutsche Bahn". So for those who do not know this clock just click this link and you will find some images of it. So my version looks like this...

You could activate this design by changing the pointerType property in the Clock component to eu.hansolo.steelseries.tools.PointerType.TYPE2. In addition i've added the ability to let the second pointer move continuously by calling secondMovesContinuous(true).

Because it's derived from AbstractRadial you could use all the frameDesigns, backgroundColors, pointerColors (except the SecondPointer which is always red) and foregroundTypes to customize this clock.

Additional frame designs...

So now that i mentioned frameDesigns it's time to talk about some new frameDesigns too. I have added three new frameDesigns to the lib that are looking like this...

It's again nothing special but i thought you could never have to much designs to choose from. Of course this designs are available for the linear gauges too. Because we are talking about the frames already i extended the effect feature of the frames.

Frame effects...

In the former version you only could activate one frameEffect but i found that there too many possibilities that might make sense too, so i added a property named frameEffect and you could choose between four different effects as overlay for your frame, here they are...

These frameEffects will work on all frameDesigns and on the radial and linear gauges. ~~They won't work on the Radial2Top and Radial1Square component right now (but i'm working on a new ContourGradientPaint which hopefuly will make it possible to use it on these gauges too)~~.

Instead of adding a new ContourGradientPaint class i have added a class to scale convex polygons which makes it possible to apply the frame effects also to the Radial2Top and Radial1Square component.

Additional foregrounds...

But not only the backgrounds and frames got something new, i've also added two new foregroundTypes to the radial gauges, check them out...

The left one (TYPE4) has a more unobtrusive look where the right one (TYPE5) stays more present in the foreground.

Number systems in lcd...

So far so good but that was not the end right now...i've got the request if i could add a hexdecimal numberformat to the lcd component and you know i always try to do my best to make your wishes come true, so i added it to the lcd in general which means it's now available in all gauges and in the standalone lcd displays too.

Right now the decimal, hexadecimal and octal number system is supported.

Additional lcd design...

Well there are some color schemes for the lcd but from time to time i find something new to implement and so i added another LcdColor named STANDARD_GREEN which looks like this...

Like all the other things nothing special but it looks nice doesn't it...?

Additional pointer type...

And talking about little new things i also want to mention the new pointerType in the radial gauges named TYPE9 that i found on a car...

This pointerType is a bit special, because it won't change it's color if you set the pointerColor but it will only change the little rectangle at it's end to the given pointerColor which means this pointer is best used on bright backgrounds.

Additional threshold indicator...

And now the smallest new add on (and it might change in the next release because i'm not 100% satisfied with it), another thresholdType named ARROW which comes in addition to the former thresholdType that is now named TRIANGLE. The color of the threshold indicator could now be modified too.

Additional center knob...

Another tiny thing i've added to the library is a new type of center knob which is available for all radial components. Here's how it looks like...

KnobStyles...

After i finished the new center knob i figured out that it might be a good idea to have knobs with adjustable colors because if you have a brass colored frame the silver center knob won't fit very well to the design. Long story short...here they are...

You might have figured out that the standard knob also got a little polish and looks more shiny now. By the way, the MinMax alignment posts do change their color too... :-)

Additional pointers for the compass...

Oh what's this...how does the compass pointer look like...? Ahh...yes i gave some love to the compass component and added two additional pointer types, so here is an image of the three available types of pointers in the compass component...

So far so good, now i just have another little modification which might be usefull for one or the other of you...the ability to save an image of a component.

Save component as image...

Each component now has a method named getAsImage() which will return a buffered image of the current state of the component. In addition i've added another helper method to the Util class in the package eu.hansolo.steelseries.tools which will save the given buffered image as a png image with the given name. Here's a small example on how to use it...

// the component we would like to save as image is named radial
SwingUtilities.invokeLater(new Runnable() 
{
    @Override
    public void run() 
    {
        // store the radial component as radial.png
        Util.INSTANCE.savePngImage(radial.getAsImage(), "radial.png");
    }
});

New battery component...

Man that's a long post with lots of pictures again and to give you some eyecandy at the end i've added a battery component to the SteelSeries lib that takes integer values from 0 to 100 and looks like this...

So...i think it's done for today, i hope some of these modifications will be of use for you and please do me a favour and let me know if you have the need for a special component and i'll see what i can do for you...

Keep coding...

Just scale it...

2011-06-07T10:42:00.000+02:00

During my work on the SteelSeries library i faced a lot of different problems when i tried to convert the graphical design from the drawing program into the code. One of the problems was related to inner shadows. In the Java2D api there's no method to create an inner shadow for an object but in design inner shadows are really useful to create some kind of realism.
If you take a closer look to an inner shadow you will figure out easily that the shadow itself is in principle a scaled version of the object that has a color gradient which fades from shades of black to translucent (as you could see in the next images).

To keep it simple i used a linear gradient from black to translucent in the examples above which does not correspond to the reality.

Well if you have shapes like circles or rectangles it's not a big deal to create an inner shadow by shrinking the shape arounds it's center and vary the color from shades of black to translucent (for radial shapes you could also use a java.awt.RadialGradientPaint() to achieve the same effect).

This means if you would like to create an effect like an inner shadow it's all about scaling. For standard shapes like ellipses and rectangles it's not a big deal but the real problem will become visible when it comes to polygons because you can't shrink every polygon around it's center (in this case i mean the center of the boundary box) as i'll show you later.

Center of gravity
You might know the center of gravity (aka Centroid) from 3-dimensional objects but in fact you could also calculate the center of gravity for an area. But why do we need to calculate this point ?
The answer is easy, because you could scale a polygon around it's centroid which means you could create an inner shadow with the same approach that works for circles and rectangles too. To calculate the area of a polygon and it's centroid you could find lot's of information on the web. After i did some math to understand how it works i searched the web for existing stuff to not reinvent the wheel again i found this page which explains the principle and will give you some sourcecode too.
Now that i had something to start with i created a class that takes a object of the type java.awt.Shape, iterates along the path, calculates the area of the polygon and centroid of the shape. By calculating the area of the polygon you have to keep in mind that negative areas (like "holes" in the polygon) have to be taken into account with a negative sign.
So the next step was the creation of a method that scales the given shape by a given factor. To achieve this i calculate the distance of each point in the polygon and multiply it with the scaling factor. With the usage of some trigonometry i calculated the new scaled position of each point and created a new shape of the type java.awt.geom.GeneralPath from all the calculated points.
After some tests i tried to optimize the methods and figured out that i could use the inbuild java.awt.geom.AffineTransform to achieve the scaling of the shape too.
That means i really only have to calculate the area of the polygon and it's centroid and use the centroid do translate the shape that i scaled with AffineTransform.createTransformedShape(java.awt.Shape shape).
So now i have a little helper class that will take a shape and a scaling factor as it's argument and that'll return a scaled version of the given shape.

ATTENTION:
The placement of the scaling does only work for convex polyons !!!

Convex polygon:
A convex polygon is a polygon where every internal angle is less than or equal to 180°. In addition to this every line segment between two vertices remains inside or on the boundary of the polygon.

Concave polygon:
In contrast a concave polygon will always have an interior angle that is greater than 180° (e.g. a L-shaped polygon).

To show you the difference between those two types of polygons i prepared two images. On both images the upper polygon was scaled around it's centroid (visualized by a dot) and the lower polygon was scaled around the center of it's boundary.

Scaling of a convex polygon:

Scaling of a concave polygon:

The positioning of the scaled shape is not correct for the concave L-shaped polygon as you can see in the images above. This means if you have to handle this kind of polygons you still have to do some math to calculate and translate it scaled polygon to the right position.

For those of you who would like to read the code...here you go...

public enum Scaler
{
    INSTANCE;
    
    /**
     * Returns a double that represents the area of the given point array of a polygon
     * @param POLYGON
     * @param N
     * @return a double that represents the area of the given point array of a polygon
     */
    private double calcSignedPolygonArea(final Point2D[] POLYGON)
    {        
        final int N = POLYGON.length;
        int i;
        int j;
        double area = 0;

        for (i = 0; i < N; i++)
        {
            j = (i + 1) % N;
            area += POLYGON[i].getX() * POLYGON[j].getY();
            area -= POLYGON[i].getY() * POLYGON[j].getX();
        }
        area /= 2.0;

        return (area);
        //return(area < 0 ? -area : area); for unsigned
    }
    
    /**
     * Returns a Point2D object that represents the center of mass of the given point array which represents a
     * polygon.
     * @param POLYGON
     * @return a Point2D object that represents the center of mass of the given point array
     */
    public Point2D calcCenterOfMass(final Point2D[] POLYGON)
    {
        final int N = POLYGON.length; 
        double cx = 0;
        double cy = 0;        
        double area = calcSignedPolygonArea(POLYGON);
        final Point2D CENTROID = new Point2D.Double();
        int i; 
        int j;

        double factor = 0;
        for (i = 0; i < N; i++)
        {
            j = (i + 1) % N;
            factor = (POLYGON[i].getX() * POLYGON[j].getY() - POLYGON[j].getX() * POLYGON[i].getY());
            cx += (POLYGON[i].getX() + POLYGON[j].getX()) * factor;
            cy += (POLYGON[i].getY() + POLYGON[j].getY()) * factor;
        }
        area *= 6.0f;
        factor = 1 / area;
        cx *= factor;
        cy *= factor;

        CENTROID.setLocation(cx, cy);
        return CENTROID;
    }

    /**
     * Returns a Point2D object that represents the center of mass of the given shape.
     * @param SHAPE
     * @return a Point2D object that represents the center of mass of the given shape
     */
    public Point2D getCentroid(final Shape SHAPE)
    {        
        ArrayList pointList = new ArrayList(32);
        final PathIterator PATH_ITERATOR = SHAPE.getPathIterator(null);
        int lastMoveToIndex = -1;
        while(!PATH_ITERATOR.isDone())
        {
            final double[] COORDINATES = new double[6];            
            switch (PATH_ITERATOR.currentSegment(COORDINATES))
            {               
                case PathIterator.SEG_MOVETO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    lastMoveToIndex++;
                    break;
                case PathIterator.SEG_LINETO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    break;
                case PathIterator.SEG_QUADTO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    pointList.add(new Point2D.Double(COORDINATES[2], COORDINATES[3]));
                    break;    
                case PathIterator.SEG_CUBICTO:
                    pointList.add(new Point2D.Double(COORDINATES[0], COORDINATES[1]));
                    pointList.add(new Point2D.Double(COORDINATES[2], COORDINATES[3]));
                    pointList.add(new Point2D.Double(COORDINATES[4], COORDINATES[5]));
                    break;
                case PathIterator.SEG_CLOSE:
                    if (lastMoveToIndex >= 0)
                    {
                        pointList.add(pointList.get(lastMoveToIndex));
                    }
                    break;
            }                                   
            PATH_ITERATOR.next();
        }
        final Point2D[] POINT_ARRAY = new Point2D[pointList.size()];
        pointList.toArray(POINT_ARRAY);        
        return (calcCenterOfMass(POINT_ARRAY));
    }
                    
    /**
     * Returns a scaled version of the given shape, calculated by the given scale factor.
     * The scaling will be calculated around the centroid of the shape.
     * @param SHAPE
     * @param SCALE_FACTOR
     * @return a scaled version of the given shape, calculated around the centroid by the given scale factor.
     */
    public Shape scale(final Shape SHAPE, final double SCALE_FACTOR)
    {
        final Point2D CENTROID = getCentroid(SHAPE);
        final AffineTransform TRANSFORM = AffineTransform.getTranslateInstance((1.0 - SCALE_FACTOR) * CENTROID.getX(), (1.0 - SCALE_FACTOR) * CENTROID.getY());
        TRANSFORM.scale(SCALE_FACTOR, SCALE_FACTOR);
        return TRANSFORM.createTransformedShape(SHAPE);
    }
    
    /**
     * Returns a scaled version of the given shape, calculated by the given scale factor.
     * The scaling will be calculated around the given point.
     * @param SHAPE
     * @param SCALE_FACTOR
     * @param SCALE_CENTER
     * @return a scaled version of the given shape, calculated around the given point with the given scale factor.
     */
    public Shape scale(final Shape SHAPE, final double SCALE_FACTOR, final Point2D SCALE_CENTER)
    {        
        final AffineTransform TRANSFORM = AffineTransform.getTranslateInstance((1.0 - SCALE_FACTOR) * SCALE_CENTER.getX(), (1.0 - SCALE_FACTOR) * SCALE_CENTER.getY());
        TRANSFORM.scale(SCALE_FACTOR, SCALE_FACTOR);
        return TRANSFORM.createTransformedShape(SHAPE);
    }
}

And for the others that would prefer download and use it...that's for you...

Scaler.java

Fortunately i do not have to handle concave polygons in the SteelSeries library and so the scaler class will be part of the SteelSeries library too and in the upcoming 3.9.3 release i'll use it to create some effects for the frames.

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

Brothers from other mothers...

2011-05-31T08:10:00.000+02:00

"Write once run anywhere"...everybody remembers these words from Sun to promote the cross-platform functionality of Java. Today, more than 10 years later this is only true in different areas (but i think Java still is the platform which gives you the best cross-platform functionality on the market). Now we have tablet devices like the iPad, Android based devices and WebOS based devices.
The problem with this devices is that your desktop java application won't run on them. The solution to this problem could be HTML5 Canvas which makes it possible to get the same graphical experience that you knew from Java Swing in your HTML5 capable browser.
The Canvas 2D api is in fact very similar to the Java 2D api which makes it possible to create nearly the same graphics with it.
So to get the gauges from my steelseries Java library i first thought about porting them to Android and maybe iOS too. After i started porting a gauge to Android i felt that this was the wrong approach because it meant platform dependend code.
So i took a closer look to HTML5 Canvas and figured out that porting the code to JavaScript was easier than i thought and the idea of a SteelSeries JavaScript edition was born.
I started porting single gauges to Canvas but did not find the time to combine the components into one lib.
Fortunately i'v found some time last week to get some work done on the library and migrated all available components (which means the radials, the radialbargraphs, the compass and the level component) in the steelseries.js file. In addition i've also added a led component to the lib.
I'm quite happy with the progress but you should judge by yourself.
Therfore i created two demo's to give you the chance to compare the Java Swing version to the HTML5 Canvas version.

Attention: Switching between different designs may take some time on mobile devices because right now i completely reinitialize the complete component (improvements will follow in the near future).

Here's a little screenshot of the website...

Click me for a live demo...

and of the Java Swing version too...

Click me for a live demo...

To start the applications just click on the link below the images.

So now you have the chance to compare and judge yourself but i'm sure you will agree that HTML5 Canvas gives you the chance to create real cross-platform applications (even if i also have to say that not everything is so easy to port to Canvas...but we are just at the beginning of the new HTML5 era).

Well that's all i have to say for today...so keep coding...

Friday Fun Component VIII

2011-05-27T12:13:00.018+02:00

And it's friday again...yippeah...
This week i was on a trip to a customer in Grenoble (which is by the way a really nice place to be). It was related to my job and i did an installation and training for a customer.
The really best part of that trip was not the installation but my visit at the Canoo headquarter in Basel (CH). This company created a real nice product named Canoo RIA Suite which is based on ULC (UltraLightClient). If you never heard of it you should definitly take a look at it, it's worth the time.
I was there to visit Andres Almiray (Blog, Twitter) and gave a little presentation (which was a little chaotic because i was not really good prepared). During this presentation i figured out that people are interested in a little application that i wrote nearly 2 years ago for a talk at our local JUG.

Here is a little screenshot of the application...

The application itself should not demonstrate how to create a good looking user interface but more it should show the possibilities that you have with good old legacy Java Swing. The icing on the cake was the panel with the bubbles on top of the window because i used this panel as a validator for the whole form.
Well there's not much to explain...just 2 simple questions...

Do a form always have to look ugly and boring ???

And do have validators always have to look ugly too ???

I think you will be smart enough to give yourself the right answer...

After leaving Canoo i thought it might be interesting for others too and decided to split the BubblePanel of the old project and create a little component out of it that you could now download and use for yourself.
But before i will give you the link to the file i will show you a screenshot of what you will get...

And to get an even better impression of it you might want to see it live before you download the source...right...

So here is as a webstart app...and here is the source...as always a Netbeans project. The interesting part of the source is the BubblePanel, which simply extends a JPanel and produces bubbles in the background until you call setValidated(true). That means you could use it as a normal Swing container.

The main idea behind this bubble thing was to find other ways of visualization. In the original app the panel stays just on top of the form and does nothing but producing bubbles until one completes the form. So don't take the bubbles too serious but i hope i opened a door so you just have to make the next step and think different...

That's it for today, i hope you got the idea...and as always...keep coding...

Varying gradients...

2011-05-19T23:40:00.001+02:00

Just a short post about varying gradients. If you take a bar for example that has a linear gradient from top to bottom and you would like to adjust the gradient with the horizontal size of the bar you have to calculate the colors for the gradient from the size of horizontal size of the bar.

I created a little drawing to visualize what i mean (i hope you could understand it)...

The horizontal bar in the center should vary it's gradient by it's horizontal size. To achieve this you need to calculate two gradients, one over the three colors on the top of the box (the dark colors) and one over the three colors on the bottom of the box (the bright colors).

I faced the problem when i created the battery component of the SteelSeries lib yesterday which looks like this...

Exactly for this kind of problem i created the LinearGradientPaint wrapper last week. For the example with the horizontal box you have to create two instances of the LinearGradient2 class that is also part of the SteelSeries lib. One for the three dark colors and the other for the three bright colors.

Then you create a LinearGradientPaint that fills the horizontal box from top to bottom with the colors that you get from the getColorAt(float fraction) method of the LinearGradientPaint2 class. Hmm...hard to put into words...maybe some code will help here...

public class TestPanel extends javax.swing.JPanel
{
    public TestPanel()
    {
        super();
    }
    
    @Override
    protected void paintComponent(java.awt.Graphics g)
    {
        super.paintComponent(g);
        
        java.awt.Graphics2D G2 = (java.awt.Graphics2D) g;
        
        G2.setRenderingHint(java.awt.RenderingHints.KEY_ANTIALIASING, java.awt.RenderingHints.VALUE_ANTIALIAS_ON);
        
        // Define three boxes with the size of 100%, 66% and 33%
        final Rectangle2D BOX100 = new Rectangle2D.Double(0, 0, 300, 50);
        final Rectangle2D BOX66 = new Rectangle2D.Double(0, 100, 200, 50);
        final Rectangle2D BOX33 = new Rectangle2D.Double(0, 200, 100, 50);
        final Point2D START = new Point2D.Double();
        final Point2D STOP = new Point2D.Double();
        
        // Define the fractions for the dark and bright gradient
        final float[] FRACTIONS =
        {
            0.0f,
            0.5f,
            1.0f
        };        
        
        // Define the dark colors (from top to top)
        final Color[] DARK_COLORS =
        {
            Color.GREEN.darker(),
            Color.YELLOW.darker(),
            Color.RED.darker()
        };
        
        // Define the bright colors (from bottom to bottom)
        final Color[] BRIGHT_COLORS =
        {
            Color.GREEN.brighter(),
            Color.YELLOW.brighter(),
            Color.RED.brighter()
        };
        
        // Define the two LinearGradientPaint2 instances
        LinearGradientPaint2 DARK_GRADIENT = new LinearGradientPaint2(new Point2D.Double(0,0), new Point2D.Double(100,0), FRACTIONS, DARK_COLORS);
        LinearGradientPaint2 BRIGHT_GRADIENT = new LinearGradientPaint2(new Point2D.Double(0,0), new Point2D.Double(100,0), FRACTIONS, BRIGHT_COLORS);
                
        // Define the fractions for the linear gradient of the horizontal box
        final float[] BOX_FRACTIONS =
        {
            0.0f,
            1.0f
        };
        
        // Define the gradient for the 100% box and fill it with the right colors
        START.setLocation(0, BOX100.getMinY());
        STOP.setLocation(0, BOX100.getMaxY());                
        Color[] boxColors =
        {
            DARK_GRADIENT.getColorAt((float) BOX100.getWidth() / 300f),
            BRIGHT_GRADIENT.getColorAt((float) BOX100.getWidth() / 300f)
        };        
        LinearGradientPaint boxGradient = new LinearGradientPaint(START, STOP, BOX_FRACTIONS, boxColors);
        G2.setPaint(boxGradient);
        G2.fill(BOX100);
        
        // Define the gradient for the 66% box and fill it with the right colors
        START.setLocation(0, BOX66.getMinY());
        STOP.setLocation(0, BOX66.getMaxY());
        boxColors = new Color[]
        {
            DARK_GRADIENT.getColorAt((float) BOX66.getWidth() / 300f),
            BRIGHT_GRADIENT.getColorAt((float) BOX66.getWidth() / 300f)
        };        
        boxGradient = new LinearGradientPaint(START, STOP, BOX_FRACTIONS, boxColors);
        G2.setPaint(boxGradient);
        G2.fill(BOX66);

        // Define the gradient for the 33% box and fill it with the right colors
        START.setLocation(0, BOX33.getMinY());
        STOP.setLocation(0, BOX33.getMaxY());
        boxColors = new Color[]
        {
            DARK_GRADIENT.getColorAt((float) BOX33.getWidth() / 300f),
            BRIGHT_GRADIENT.getColorAt((float) BOX33.getWidth() / 300f)
        };        
        boxGradient = new LinearGradientPaint(START, STOP, BOX_FRACTIONS, boxColors);
        G2.setPaint(boxGradient);
        G2.fill(BOX33);
        
        G2.dispose();
    }
}

This is a JPanel which you could put into a JFrame and it will look like this...

Hopefully this post will explain better why something like the getColorAt(float fraction) method is really usefull and why i created the LinearGradientPaint2 class.
It safes you a lot of code and gives you a lot of new ways to explore...

Here's another example where i vary the colors of a linear gradient. If you click the link below the image the application will start via webstart...

Webstart link

So enjoy the upcoming weekend and keep coding...

SteelSeries 3.9.2 update...

2011-05-15T14:26:00.000+02:00

This is just a small update of the steelseries library where i added four new backgrounds.

PUNCHED_SHEET
CARBON
MUD
ANTHRACITE

Here is a screenshot that shows the new backgrounds...

In addition i made some modifications that make it possible to use the library also on headless systems.

Well...that's all, just would like to let you know...

Enjoy the rest of the weekend...

LinearGradientPaint wrapper...

2011-05-11T14:26:00.002+02:00

This is just a short post about a little wrapper around the java.awt.LinearGradientPaint class that i created as a helper for the SteelSeries library.
Well my problem was that i would like to create a gradient and after creating it i would like to get a color at a specific fraction. I might be wrong but as far as i know there's no method implemented in the LinearGradientPaint class that could help me here. So i created a little wrapper that wraps the LinearGradientPaint and also contains two additional methods, named getColorAt(float fraction) and getGradient().
The getColorAt(float fraction) method returns the color of the given gradient at the given fraction.
~~The getGradient() method simply returns the wrapped LinearGradientPaint so that you could set the paint in the Graphics content like: g.setPaint(LGP2.getGradient());~~

UPDATE:
I implemented the java.awt.Paint interface so that you could use the wrapper like an gradient paint (thx for the comment).

The class contains all constructor methods from the original LinearGradientPaint so that you could create it in the same way as the original.

To give you an idea of what i'm talking about here, a little screenshot might help:

On the screenshot you could see a gradient that i created and i picked the color at the fraction = 0.61.

There might be better solution like this but for me it does the job and if you could use it somewhere...here is the source...

public class LinearGradientPaint2 implements java.awt.Paint
{
    private final java.awt.LinearGradientPaint GRADIENT;
    private float[] fractions;
    private java.awt.Color[] colors;
    
    public LinearGradientPaint2(float startX, float startY, float endX, float endY, float[] fractions, java.awt.Color[] colors)
    {
        GRADIENT = new java.awt.LinearGradientPaint(new java.awt.geom.Point2D.Float(startX, startY), new java.awt.geom.Point2D.Float(endX, endY), fractions, colors, java.awt.MultipleGradientPaint.CycleMethod.NO_CYCLE);
        copyArrays(fractions, colors);
    }
    
    public LinearGradientPaint2(float startX, float startY, float endX, float endY, float[] fractions, java.awt.Color[] colors, java.awt.MultipleGradientPaint.CycleMethod cycleMethod)
    {
        GRADIENT = new java.awt.LinearGradientPaint(new java.awt.geom.Point2D.Float(startX, startY), new java.awt.geom.Point2D.Float(endX, endY), fractions, colors, cycleMethod);
        copyArrays(fractions, colors);
    }

    public LinearGradientPaint2(java.awt.geom.Point2D start, java.awt.geom.Point2D end, float[] fractions, java.awt.Color[] colors)
    {
        GRADIENT = new java.awt.LinearGradientPaint(start, end, fractions, colors, java.awt.MultipleGradientPaint.CycleMethod.NO_CYCLE);
        copyArrays(fractions, colors);
    }
    
    public LinearGradientPaint2(java.awt.geom.Point2D start, java.awt.geom.Point2D end, float[] fractions, java.awt.Color[] colors, java.awt.MultipleGradientPaint.CycleMethod cycleMethod)
    {
        GRADIENT = new java.awt.LinearGradientPaint(start, end, fractions, colors, cycleMethod, java.awt.MultipleGradientPaint.ColorSpaceType.SRGB, new java.awt.geom.AffineTransform());
        copyArrays(fractions, colors);
    }
       
    public LinearGradientPaint2(java.awt.geom.Point2D start, java.awt.geom.Point2D end, float[] fractions, java.awt.Color[] colors, java.awt.MultipleGradientPaint.CycleMethod cycleMethod,  java.awt.MultipleGradientPaint.ColorSpaceType colorSpace, java.awt.geom.AffineTransform gradientTransform)
    {
        GRADIENT = new java.awt.LinearGradientPaint(start, end, fractions, colors, cycleMethod, colorSpace, gradientTransform);
        copyArrays(fractions, colors);
    }
        
    /**
     * Returns the point where the wrapped java.awt.LinearGradientPaint will start
     * @return the point where the wrapped java.awt.LinearGradientPaint will start
     */
    public java.awt.geom.Point2D getStartPoint()
    {
        return GRADIENT.getStartPoint();
    }
    
    /**
     * Returns the point where the wrapped java.awt.LinearGradientPaint will stop
     * @return the point where the wrapped java.awt.LinearGradientPaint will stop
     */
    public java.awt.geom.Point2D getEndPoint()
    {
        return GRADIENT.getEndPoint();
    }
            
    /**
     * Returns the color that is defined by the given fraction in the linear gradient paint
     * @param FRACTION
     * @return the color that is defined by the given fraction in the linear gradient paint
     */
    public java.awt.Color getColorAt(final float FRACTION)
    {
        float fraction = FRACTION > 1 ? 1f : FRACTION;
        fraction = FRACTION < 0 ? 0f : fraction;
        float lowerLimit = 0f;        
        int lowerIndex = 0;
        float upperLimit = 1f;
        int upperIndex = 1;
        int index = 0;
        
        for (float currentFraction : fractions)
        {
            if (Float.compare(currentFraction, fraction) < 0)
            {
                lowerLimit = currentFraction;
                lowerIndex = index;
            }
            if (Float.compare(currentFraction, fraction) == 0)
            {
                return colors[index];
            }
            if (Float.compare(currentFraction, fraction) > 0)
            {
                upperLimit = currentFraction;
                upperIndex = index;
                break;
            }
            index++;
        }
        
        float interpolationFraction = (fraction - lowerLimit) / (upperLimit - lowerLimit);
        
        return interpolateColor(colors[lowerIndex], colors[upperIndex], interpolationFraction);
    }
    
    /**
     * Returns the wrapped java.awt.LinearGradientPaint
     * @return the wrapped java.awt.LinearGradientPaint
     */
    public java.awt.LinearGradientPaint getGradient()
    {
        return GRADIENT;
    }
    
    @Override
    public java.awt.PaintContext createContext(final java.awt.image.ColorModel COLOR_MODEL, final java.awt.Rectangle DEVICE_BOUNDS, java.awt.geom.Rectangle2D USER_BOUNDS, java.awt.geom.AffineTransform X_FORM, java.awt.RenderingHints HINTS)
    {
        return GRADIENT.createContext(COLOR_MODEL, DEVICE_BOUNDS, USER_BOUNDS, X_FORM, HINTS);
    }
 
    @Override
    public int getTransparency()
    {
        return GRADIENT.getTransparency();
    }

    /**
     * Just create a local copy of the fractions and colors array
     * @param fractions
     * @param colors 
     */
    private void copyArrays(final float[] fractions, final java.awt.Color[] colors)
    {
        this.fractions = new float[fractions.length]; 
        System.arraycopy( fractions, 0, this.fractions, 0, fractions.length );
        this.colors = colors.clone();
    }
    
    /**
     * Returns the interpolated color that you get if you multiply the delta between
     * color2 and color1 with the given fraction (for each channel) and interpolation. The fraction should
     * be a value between 0 and 1.
     * @param COLOR1 The first color as integer in the hex format 0xALPHA RED GREEN BLUE, e.g. 0xFF00FF00 for a pure green
     * @param COLOR2 The second color as integer in the hex format 0xALPHA RED GREEN BLUE e.g. 0xFFFF0000 for a pure red
     * @param FRACTION The fraction between those two colors that we would like to get e.g. 0.5f will result in the color 0xFF808000     
     * @return the interpolated color between color1 and color2 calculated by the given fraction and interpolation
     */
    private java.awt.Color interpolateColor(final java.awt.Color COLOR1, final java.awt.Color COLOR2, final float FRACTION)
    {
        assert(Float.compare(FRACTION, 0f) >= 0 && Float.compare(FRACTION, 1f) <= 0);
        
        final float INT_TO_FLOAT_CONST = 1f / 255f;
        
        final float RED1 = COLOR1.getRed() * INT_TO_FLOAT_CONST;
        final float GREEN1 = COLOR1.getGreen() * INT_TO_FLOAT_CONST;
        final float BLUE1 = COLOR1.getBlue() * INT_TO_FLOAT_CONST;
        final float ALPHA1 = COLOR1.getAlpha() * INT_TO_FLOAT_CONST;
        
        final float RED2 = COLOR2.getRed() * INT_TO_FLOAT_CONST;
        final float GREEN2 = COLOR2.getGreen() * INT_TO_FLOAT_CONST;
        final float BLUE2 = COLOR2.getBlue() * INT_TO_FLOAT_CONST;
        final float ALPHA2 = COLOR2.getAlpha() * INT_TO_FLOAT_CONST;
        
        final float DELTA_RED = RED2 - RED1;
        final float DELTA_GREEN = GREEN2 - GREEN1;
        final float DELTA_BLUE = BLUE2 - BLUE1;
        final float DELTA_ALPHA = ALPHA2 - ALPHA1;
        
        float red = RED1 + (DELTA_RED * FRACTION);
        float green = GREEN1 + (DELTA_GREEN * FRACTION);
        float blue = BLUE1 + (DELTA_BLUE * FRACTION);
        float alpha = ALPHA1 + (DELTA_ALPHA * FRACTION);
        
        red = red < 0f ? 0f : red;
        red = red > 1f ? 1f : red;
        green = green < 0f ? 0f : green;
        green = green > 1f ? 1f : green;
        blue = blue < 0f ? 0f : blue;
        blue = blue > 1f ? 1f : blue;
        alpha = alpha < 0f ? 0f : alpha;
        alpha = alpha > 1f ? 1f : alpha;
        
        return new java.awt.Color(red, green, blue, alpha);        
    }
}

To give you an idea on where i will use this helper class, let me explain an example.
If i have a linear gauge and the color of the column (which represents the current value of the gauge) should fade through different colors from the minimum to the maximum value it would be nice if i could create the underlying linear gradient once and pick the current color of the column dependent on the current value of the linear gauge.

That's all for today (to be honest it was more a little reminder that i have to implement the feature i described above to the linear gauge).

So keep coding...

Grinded steel plate effect

2011-05-06T09:57:00.001+02:00

On my way back from the JAX conference in Mainz last tuesday i saw a stainless steel plate on the train that looked like on this image here. In german this treatment of metal has the name "Zapfenschliff" and is used to give the metal a nice design and a more robust surface.

Taking a closer look to the plate it reminds me on the conical gradient that i created a while ago and in fact it's just a simple pattern made out of many conical gradients.

Well you know me...i have to reproduce it in swing and voila here's a little tutorial on how i realized it. So the principle approach is to create a texture and use this texture to fill some shape with it.
Now you could argue that i simply could take an exsting texture and use it to fill the shape but i like to create the stuff completely in 100% pure Java right...

So first of all we need to create a conical gradient like the following:

And here is the code you need to create a gradient like this...

double diameter = 50;
Ellipse2D circle = new Ellipse2D.Double(0, 0, diameter, diameter);
Point2D center = new Point2D.Double(circle.getCenterX(), circle.getCenterY());
float[] fractions =  
{
    0f,
    0.03f,
    0.10f,
    0.14f,
    0.24f,
    0.33f,
    0.38f,
    0.5f,
    0.62f,
    0.67f,
    0.76f,
    0.81f,
    0.85f,
    0.97f,
    1.0f 
};

Color[] colors = 
{ 
    new Color(0xFDFDFD),
    new Color(0xFDFDFD),
    new Color(0xB2B2B4),
    new Color(0xACACAE),
    new Color(0xFDFDFD),
    new Color(0x6E6E70),
    new Color(0x6E6E70),
    new Color(0xFDFDFD),
    new Color(0x6E6E70),
    new Color(0x6E6E70),
    new Color(0xFDFDFD),
    new Color(0xACACAE),
    new Color(0xB2B2B4),
    new Color(0xFDFDFD),
    new Color(0xFDFDFD) 
};    
ConicalGradientPaint gradient = new ConicalGradientPaint(false, center, -0.45f, fractions, colors);
G2.setPaint(gradient);
G2.fill(circle);

After this we need to create a texture that contains a repeatable pattern of the conical gradient. I created a little drawing to make it easier to understand...

The texture (which will be represented by a BufferedImage object) should be a square rectangle with the given SIZE. In this case i used 2x the diameter of the conical gradient. As you can see we need 13 circles that have to be placed in a pattern where we place 3 circles in the first row, 2 circles in the second row, 3 circles in the third row and so on. The stepsize in x- and y-direction is half the size of the diameter and we start on the upper left corner at x=-stepsize, y=-stepsize.
Here is the code for the creation of the texture...

int amount = 3;
double stepsize = diameter / 2.0;
G2.translate(-stepsize, -stepsize);
AffineTransform oldTransform = G2.getTransform();
for (int y = 0 ; y < 5 ; y++)
{            
    if (y%2 == 0)
    {
        amount = 3;
        G2.translate(0, stepsize * y);
    }
    else
    {
        amount = 2;
        G2.translate(stepsize, stepsize * y);
    }
                                                
    for (int x = 0 ; x < amount ; x++)
    {
        G2.setPaint(gradient);
        G2.fill(circle);
        G2.translate(diameter, 0);                
    }                                    
    G2.setTransform(oldTransform);            
}

After we have create the BufferedImage object we can use it as a texture in the java.awt.TexturePaint class to fill a shape. And the result could look like this...

On this image we filled a square with four textures but the image was created in Adobe Fireworks, the Java Swing version would look like this...

Fun isn't it ? Well the only problem with this texture is that it looks too perfect right but this is something i'll leave to you... :-)

As always you will find the sourcecode for this little fun project as a Netbeans project...

SteelPaint.zip

Enjoy your weekend and keep coding...just for the fun of it...

SteelSeries 3.9

2011-05-04T14:26:00.000+02:00

It's time again for another release of the SteelSeries library.

This release will break the compatibility to older versions !

First of all i switched the version of the animation library trident from version 1.2 (which was created by Kirill Grouchnikov) to trident 6.2 which is based on a fork of Danno Ferrin. I did this because Kirill stopped supporting the original files and Danno created an updated version which is also available on maven central. So this should lead to no problems but maybe some new features in the future...who knows.
The second modification which is the one that breaks the downwards compatibility is related the the tickmarks of the gauges. Right after starting the SteelSeries project i figured out that the method that created to draw the tickmarks of the gauges was not very flexible which leads to some strange effects sometimes. If the range of values was very small (0 - 1) or if you have fractional labels like 0.0, 0.25, 0.5, 0.75... or also very large values you could see what i mean. With the help of Thomas Steinbach i tweaked the method in a way that it was able to do the job (as good as possible). But at some point the whole method looked so ugly to me that i decided to create a new algorithm to solve the problems.
Fortunately there was already an algorithm that looked much better and is much more flexible so that i implemented it to the library. Steffen L. Norgren already converted this algorithm into Java code which made the transition much easier. Steffen also linked to two articles where you will find a more detailed explanation of the problems that you face when creating scale bars.

To give you an idea what i'm talking about here i made some screenshots:

Left: min = 0, max = 1.5 Center: min = 0, max = 12000 Right: min = 0, max = 12000

As you can see on the images above the old version (prior 3.9) was not able to handle small ranges and with large ranges you had the problem with large tickmark labels.
Well the new version uses a complete different approach, now one could define how many major tickmarks and how many minor tickmarks one would like to use and a little routine will calculate nice values for the minimum, maximum and the ticklabels.
Another thing which i added to the 3.9 release is the possibility to use different formats for the tickmark labels.

AUTO
STANDARD
FRACTIONAL
SCIENTIFIC
PERCENTAGE

This makes it possible to also handle large numbers tickmark labels. The automatic mode tries to figure out the best number format but you could also select one manualy. Here is a screenshot of some examples:

Due to a lack of time i was not able to add logarithmic scaling to this release but i'm definitly working on it.

Another minor feature that i have added to this release is a new background named "STAINLESS". The idea was born when i blogged about custom backgrounds in october 2010 and used a ConicalGradient to visualize a stainless background. In the meantime JIDE Software released a copy of that idea with their latest release of their components and so i thought fair to add it to the library too.
It might not be very useful but looks impressive doesn't it...

There are two other modifications that i made to existing components.
The Linear and LinearBargraph component does now support TickmarkSections which looks like this...

In addition the Linear component is now also able to handle Sections. If one defines sections with different colors for each section the color of the bar will switch to the color that is defined in the active section.

But that's old stuff, let's talk about something new...

Fabian David Carmargo asked me for some components and could not withstand to implement them into the library, so here we go.

The first thing he asked me for was a rectangular LED and so i created one...

The LED component in the package eu.hansolo.steelseries.extras now has a property named "ledType" which could be ROUND, RECT_VERTICAL or RECT_HORIZONTAL. If you ask yourself why i named it RECT_VERTICAL and RECT_HORIZONTAL.....there might be more geometric shapes of led's in the future... :-)

The other thing Fabian asked me for was a set of components that he needs to visualize a cockpit of a car...which means lot's of symbols...
First i was not sure if i really should add all this stuff to the library but after all...why not having some fun...so here it is the INDICATOR component with all it's different symbols...

Doesn't look very spectacular right...but believe me it was a lot of work to create all these symbols. As you might have noticed the component uses the same background, frame, foreground property as the radial components and this is because it's derived from AbstractRadial. This means you could use the same design for the INDICATOR component as you use for the gauges. You could also use the given colors to visualize the symbols, here is an example of all available colors...

As always you could also use CUSTOM as onColor and define your own customOnColor. The same is possible for the offColor property of the INDICATOR component.

For this release that's all i have to say but i have also created a little step-by-step-guide on how to add the SteelSeries components to your Netbeans IDE component palette because i've got questions about how to do that.

Well...that's it for today...keep coding and enjoy the upcoming summer...

BiLinearGradient in HTML5 canvas...

2011-04-19T11:28:00.000+02:00

This is just a short one for all HTML5 canvas lovers...
Because it was not a big deal and might be usefull for one or the other i created also a javascript version of the bilinear gradient paint that one could use in HTML5 canvas. To make it possible i added one class that represents a color in the way that one could get the rgba values from a given color and a class that represents the bilinear gradient paint itself.
The result looks like this...

click here to see it live...

To see it live you just have to click the link below the image. Here is a small example on how to use the BiLinearGradient in JavaScript:

function init()
{


 

}

You have to place the above script in your html page <head> tag. If you don't know how to do that just take a look at the page sourcecode of the linked page below the image.

Here are the two files you need to create the bilinear color interpolation.

RGBAColor.js

BiLinearGradient.js

Enjoy coding...

Bilinear color interpolation

2011-04-17T14:44:00.000+02:00

Last week when i was surfing around the web i suddenly found this image...

Even if i didn't need this kind of gradient i asked myself how to achieve this in Java Swing? Well to be honest this is really easy (if you know how to do it) and so i thought double your fun...share your knowledge with others...so here we go...
In principle there's only one little method which is responsible for the whole magic here. This method is able to fade from one color to another by a given fraction in the range from 0...1.

So start with a simple linear gradient that looks like this:

Because we will work with floating point operations it makes sense to use also floating points to create your color objects.
If we now for example would like to get the color which is located at a fraction = 0.5f we simply have to build the difference between each color's red, green, blue and alpha values, multiply them with the fraction of 0.5f and add the result to the values of the start color...sounds to complicated ? Maybe some code makes it easier to understand...

private java.awt.Color interpolateColor(final Color COLOR1, final Color COLOR2, float fraction)
        {            
            final float INT_TO_FLOAT_CONST = 1f / 255f;
            fraction = Math.min(fraction, 1f);
            fraction = Math.max(fraction, 0f);
            
            final float RED1 = COLOR1.getRed() * INT_TO_FLOAT_CONST;
            final float GREEN1 = COLOR1.getGreen() * INT_TO_FLOAT_CONST;
            final float BLUE1 = COLOR1.getBlue() * INT_TO_FLOAT_CONST;
            final float ALPHA1 = COLOR1.getAlpha() * INT_TO_FLOAT_CONST;

            final float RED2 = COLOR2.getRed() * INT_TO_FLOAT_CONST;
            final float GREEN2 = COLOR2.getGreen() * INT_TO_FLOAT_CONST;
            final float BLUE2 = COLOR2.getBlue() * INT_TO_FLOAT_CONST;
            final float ALPHA2 = COLOR2.getAlpha() * INT_TO_FLOAT_CONST;

            final float DELTA_RED = RED2 - RED1;
            final float DELTA_GREEN = GREEN2 - GREEN1;
            final float DELTA_BLUE = BLUE2 - BLUE1;
            final float DELTA_ALPHA = ALPHA2 - ALPHA1;

            float red = RED1 + (DELTA_RED * fraction);
            float green = GREEN1 + (DELTA_GREEN * fraction);
            float blue = BLUE1 + (DELTA_BLUE * fraction);
            float alpha = ALPHA1 + (DELTA_ALPHA * fraction);

            red = Math.min(red, 1f);
            red = Math.max(red, 0f);
            green = Math.min(green, 1f);
            green = Math.max(green, 0f);
            blue = Math.min(blue, 1f);
            blue = Math.max(blue, 0f);
            alpha = Math.min(alpha, 1f);
            alpha = Math.max(alpha, 0f);

            return new Color(red, green, blue, alpha);        
        }

In the method above i first split each color into it's red, green, blue and alpha values, than i build the difference between the stop- and the startcolor, multiply it with the fraction and create a new color from the resulting red, green, blue and alpha values.

With this method which represents a linear interpolation between two colors it's easy to create a bilinear interpolation too (because it means we simply have a combination of two linear interpolations).

For example the bilinear gradient in the first image looks like this...

As you can see we have defined four colors (one for each corner) and we have also fractions in both directions (x and y). Now you need a method that is able to calculate the color between the four colors given by two fractions (one for the x-axis and one for the y-axis). Let's assume we would like to get the color at fraction_x = 0.25f and fraction_y = 0.75f.

To be able to calculate the color at the intersection of the two lines we first have to calculate the color between the upper left corner and the upper right corner at the fraction of 0.25f by using the linear interpolation method and save it for example as upperColorX.
In the second step we calculate the color between the lower left corner and the lower right corner at the fraction of 0.25f and save it as lowerColorX.
Now we have calculated the start- and stopcolor for the vertical linear gradient between the points P1, P2.

In the third and last step we only have to calculate the color between P1 and P2 at the given fraction_y = 0.75f by using the linear interpolation one more time.

Now you know how to get the color of a point that is defined by two fractions between 0...1 which is placed in a square of four colors.

I have put the bilinear interpolation in another method which looks like this...

private Color bilinearInterpolateColor(final Color COLOR_00, Color COLOR_10, final Color COLOR_01, final Color COLOR_11, final float FRACTION_X, final float FRACTION_Y)
        {
            final Color COLOR_X1 = interpolateColor(COLOR_00, COLOR_10, FRACTION_X);
            final Color COLOR_X2 = interpolateColor(COLOR_01, COLOR_11, FRACTION_X);
            return interpolateColor(COLOR_X1, COLOR_X2, FRACTION_Y);
        }

Because i don't want to add these methods all the time i created a BiLinearGradientPaint.class that takes a java.awt.Shape, the colors of the four corners and the fractions in x- and y-direction.
To create the example gradient that i used above you could use the following code:

import eu.hansolo.gradients.BiLinearGradientPaint;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.RenderingHints;

public class BilinearPanel extends javax.swing.JPanel
{
    @Override
    protected void paintComponent(java.awt.Graphics g)
    {
        super.paintComponent(g);
        
        final java.awt.Graphics2D G2 = (Graphics2D) g.create();
        G2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        
        final Color UPPER_LEFT = new Color(1.0f, 0.0f, 0.0f, 1.0f);
        final Color UPPER_RIGHT = new Color(1.0f, 1.0f, 0.0f, 1.0f);
        final Color LOWER_LEFT = new Color(0.0f, 0.0f, 1.0f, 1.0f);
        final Color LOWER_RIGHT = new Color(0.0f, 1.0f, 1.0f, 1.0f);
        
        final Rectangle RECT = new Rectangle(0, 0, 400, 400);
        
        eu.hansolo.gradients.BiLinearGradientPaint BILINEAR_GRADIENT = new eu.hansolo.gradients.BiLinearGradientPaint(RECT, UPPER_LEFT, UPPER_RIGHT, LOWER_LEFT, LOWER_RIGHT);
        
        G2.setPaint(BILINEAR_GRADIENT);
        G2.fill(RECT);
        
        G2.dispose();
    }
}

And here is the result one more time...

With bilinear gradients one could create interesting things like the following...

To create things like the image above you simply have to combine some rectangles which are filled with bilinear gradients, where the stop color of one rectangle is the start color of the next rectangle and so on.

I hope you enjoy this things like i do and if you would like to create some nice gradients too, you might want to use one of my gradients. I put the ConicalGradientPaint, the ContourGradientPaint and the BiLinearGradientPaint in an extra library that you could download here:

binary distribution: Gradients.jar

source (netbeans): Gradients.zip

So enjoy coding...

SteelSeries JavaScript edition

2011-04-01T14:59:00.002+02:00

Here we go again and it's again time for some canvas...

Those of you who followed this blog know that i started to port some of the components of the steelseries java library to html5 canvas. Because i'm not a javascript coder i had no idea how to build a library from these components and so i started playing around, trying this and that...

Finally i found a way that looks ok to me (but i might be wrong) and today i could present you the first version of the javascript version of the steelseries library (it only contains the Radial and RadialBargraph right now).

I tried to implement most of the features of the java version but right now there are still some feature missing.

Here is a list of the features that are supported by the javascript version:

GaugeType:

TYPE1
TYPE2
TYPE3
TYPE4

PointerType:

TYPE1
TYPE2
TYPE3
TYPE4
TYPE5
TYPE6
TYPE7
TYPE8

FrameDesign:

BLACK_METAL
METAL
SHINY_METAL
BRASS
STEEL
CHROME
GOLD

BackgroundColor:

DARK_GRAY
SATIN_GRAY
LIGHT_GRAY
WHITE
BLACK
BEIGE
BROWN
RED
GREEN
BLUE

LcdColor:

BEIGE
BLUE
ORANGE
RED
YELLOW
WHITE
GRAY
BLACK
GREEN
BLUE2
BLUE_BLACK
BLUE_DARKBLUE
BLUE_GRAY
STANDARD
BLUE_BLUE
REDDARKRED

LedColor:

RED_LED
GREEN_LED
BLUE_LED
ORANGE_LED
YELLOW_LED
CYAN_LED
MAGENTA_LED

Color:

RED
GREEN
BLUE
ORANGE
YELLOW
CYAN
MAGENTA
WHITE
GRAY
BLACK
RAITH
GREEN_LCD
JUG_GREEN

The Radial component also supports sections and areas. So there's no track right now (but it will come).

PREPARATION:

To make use of the library you have to add two files to your html page:

tween.js
steelseries.js

So a typical html5 page header will look like this...

e.g.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script type='text/javascript' src='js/tween.js'></script>
    <script type='text/javascript' src='js/steelseries.js'></script>

...

USAGE:

To use the library you need to add a <canvas> tag for each gauge to the <body> of the page.

e.g.
...
<body onload='init()'>
    <canvas id='canvas1' width='200' height='200'>

        No canvas in your browser...sorry...

    </canvas>
    <canvas id='canvas2' width='200' height='200'></canvas>
<canvas id='canvas3' width='200' height='200'></canvas></body>

...
Now we only have to add the init() method in the <head> of the page, where we create the canvas components.!!! OLD VERSION !!!

function init()
{
  // Define some sections
  var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                       steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'), 
                       steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));
  
  // Define one area
  var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));
            
  // Create one radial gauge
  var radial1 = new steelseries.Radial(
                    'canvas1',                              // the canvas element
                    steelseries.GaugeType.TYPE4,            // type of gauge
                    200,                                    // size of gauge
                    0,                                      // minimum value
                    100,                                    // maximum value
                    50,                                     // threshold
                    sections,                               // sections
                    areas,                                  // areas
                    'Test',                                 // title string
                    'Unit',                                 // unit string
                    steelseries.FrameDesign.METAL,          // frame design
                    steelseries.BackgroundColor.DARK_GRAY,  // background color
                    steelseries.PointerType.TYPE8,          // pointer type
                    steelseries.ColorDef.RED,               // pointer color
                    steelseries.LcdColor.STANDARD,          // lcd color
                    true,                                   // lcd visible
                    steelseries.LedColor.RED_LED,           // led color
                    true,                                   // led visible
                    false);                                 // play audio
  
  // Create a second radial gauge
  var radial2 = new steelseries.Radial(
                    'canvas2', 
                    steelseries.GaugeType.TYPE2, 
                    200, 
                    0, 
                    50, 
                    40, 
                    Array(steelseries.Section(0, 40, 'rgba(0, 255, 0, 0.3)')),
                    Array(steelseries.Section(40, 50, 'rgba(255, 0, 0, 0.5)')), 
                    'Test', 
                    'Unit', 
                    steelseries.FrameDesign.CHROME, 
                    steelseries.BackgroundColor.LIGHT_GRAY, 
                    steelseries.PointerType.TYPE2, 
                    steelseries.ColorDef.BLUE, 
                    steelseries.LcdColor.BLUE2, 
                    true, 
                    steelseries.LedColor.BLUE_LED, 
                    true, 
                    false);

  // Create a radial bargraph gauge
  var radial3 = new steelseries.RadialBargraph(
                    'canvas3',                               // the canvas element
                    steelseries.GaugeType.TYPE3,             // type of gauge
                    200,                                     // size of gauge
                    0,                                       // minimum value
                    100,                                     // maximum value
                    50,                                      // threshold
                    null,                                    // sections (not supported)
                    "Title",                                 // title string
                    "Unit",                                  // unit string
                    steelseries.FrameDesign.BLACK_METAL,     // frame design
                    steelseries.BackgroundColor.LIGHT_GRAY,  // background color 
                    steelseries.ColorDef.YELLOW,             // color of the bargraph led's
                    steelseries.LcdColor.YELLOW,             // lcd color
                    true,                                    // lcd visible
                    steelseries.LedColor.YELLOW_LED,         // led color
                    true);                                   // led visible

  // Let's set some values...
  radial1.setValueAnimated(70);
  radial2.setValueAnimated(41);
  radial3.setValueAnimated(70);
}

~~As you can see the drawback of the current design are the long constructors. I'm still not sure how to make these nicer but i'm working on that...~~

UPDATE:
Thanx to Andres Almiray who pointed me in the right direction i modified the constructor of the Radial and RadialBargraph component in the way that it now takes a hash as a set of parameters. This means you don't have to put in all the default parameters anymore which makes the initialization of the components look like this...
!!! NEW VERSION !!!

function init()
{
  // Define some sections
  var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                       steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'), 
                       steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));
  
  // Define one area
  var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));
            
  // Create one radial gauge
  var radial1 = new steelseries.Radial(
                    'canvas1', {
                    section: sections,                      
                    area: areas,                            
                    titleString: 'Test',                    
                    unitString: 'Unit',                     
                    pointerType: steelseries.PointerType.TYPE8
                    });                               

// Create a second radial gauge
  var radial2 = new steelseries.Radial(
                    'canvas2', {
                    gaugeType: steelseries.GaugeType.TYPE2,                     
                    maxValue: 50, 
                    threshold: 40, 
                    section: Array(steelseries.Section(0,40,'rgba(0,255,0,0.3)')),
                    area: Array(steelseries.Section(40,50,'rgba(255,0,0,0.5)')), 
                    titleString: 'Test', 
                    unitString: 'Unit', 
                    frameDesign: steelseries.FrameDesign.CHROME, 
                    backgroundColor: steelseries.BackgroundColor.LIGHT_GRAY, 
                    pointerType: steelseries.PointerType.TYPE2, 
                    pointerColor: steelseries.ColorDef.BLUE, 
                    lcdColor: steelseries.LcdColor.BLUE2,                     
                    ledColor: steelseries.LedColor.BLUE_LED, 
                    });

  // Create a radial bargraph gauge
  var radial3 = new steelseries.RadialBargraph(
                    'canvas3', {
                    gaugeType: steelseries.GaugeType.TYPE3,
                    titleString: "Title",                                
                    unitString: "Unit",          
                    frameDesign: steelseries.FrameDesign.BLACK_METAL,
                    backgroundColor: steelseries.BackgroundColor.LIGHT_GRAY,
                    valueColor: steelseries.ColorDef.YELLOW,
                    lcdColor: steelseries.LcdColor.YELLOW,
                    ledColor: steelseries.LedColor.YELLOW_LED,
                    });                                   

  // Let's set some values...
  radial1.setValueAnimated(70);
  radial2.setValueAnimated(41);
  radial3.setValueAnimated(70);
}

Guess that looks much better than before... :-)

If you put all these things together in one html page you should see something like this...

If you are to lazy to play around you might want to click here to see it in action...

There are two versions of the library available right now, the uncompressed (101 kb) and compressed (61 kb) version. You could download the version clicking on one of the following links:

   uncompressed version: steelseries.js

   compressed version: steelseries-min.js

   animation library: tween.js

Keep in mind that this project is work in progress and things might change in the future...

Enjoy the upcoming weekend and keep coding...

SteelSeries 3.8 (slim down release)

2011-03-24T12:18:00.001+01:00

Like i mentioned in my last post there is a new release of the SteelSeries swing component library. I have to release another version of the library because i added two new components to it and made some modifications that i explained in my last post too.

Klaus Rheinwald asked me for an artificial horizon component that he needed and so i started adding one to the library. Fortunately i created one last year on my trip to JFokus and got some insider information of Mikael Grev who is an active fighter pilot and a coder (you might know one of his projects called MiGLayout which is a really nice Java Layout Manager).

So the result of this work looks like this...

Horizon

The Horizon component is located in the extras package of the SteelSeries and you could customize it by defining the color of the sky, the background and the indicator (setPointerColor()). You could define pitch and roll and the horizon will hopefully display the right view. There's only one little problem left which occurs if you have a pitch larger than 90°. A real artificial horizon will flip over by rotating around 180° but i was not able to implement it in a way that looks good enough. I will spend some time to this problem later on, so stay tuned...

Klaus Rheinwald also pointed me to the Compass component that's already in the SteelSeries library and he mentioned that on an airplane the compass looks different in the way that the "needle" is fixed and the scale is rotating...

Ok, that was a piece of cake because in principle this is the same behaviour as the RadialCounter just with another pointer. Long story short, here is the AirCompass component...

AirCompass

The design was taken from a real aviation instrument and the whole creation time for this component was only around 2 hours. You could set the value in the range of 0 to 360 degrees and the scale will rotate around the airplane in the center. The color could be changed by the pointerColor property of the component.

In the last release i forgot to mention that there was also a new FrameDesign and BackgroundColor that one could choose for the gauges and because i added another FrameDesign i will present both of it in this post...

Left: FrameDesign.GOLD, BackgroundColor.BROWN, PointerType.TYPE7

Right: FrameDesign.CHROME, KnobType.BIG_CHROME_KNOB, PointerType.TYPE7

On the left gauge you see the FrameDesign.GOLD with the new BackgroundColor.BROWN and on the right gauge you see the new FrameDesign.CHROME. In addition to the new FrameDesign you could see also another new PointerType.TYPE7 in both gauges and a new KnobType.BIG_CHROME_KNOB (on the right gauge).

Another user of the SteelSeries library asked me if it would be possible to get a square frame on the Clock component too...and of course this is possible...here we go...

Left: FrameType.ROUND

Right: FrameType.SQUARE

Another modification was the reduction of the memory footprint of the components. I mentioned this in my last post already, so it's not needed to repeat myself here. Nearly all components now make use of this combined layer technique.

The test application is now also updated to the 3.8 release of the library and is still available here as a webstart app.

At least i fixed a memory leak that occurred when using the setValueAnimated() method. After i made some long term tests over the last days the problem seems to be fixed now.

Like i said before, just let me know if you need some special component and i'll try to implement it if i'll find the time...

That's it for today, enjoy the upcoming weekend and keep coding...

Slim down...

2011-03-23T11:09:00.000+01:00

Today i would like to talk about some experiments that i made to reduce the memory footprint of the steelseries components.

As you could read in the first post on this blog i mentioned the problem with the what i called "Layer Technique", where you split your component in different layers. With this technique you create an image for each layer of the component, in my case this means i create images for the frame, background, tickmarks, title, lcd background, pointer, knobs and foreground. The memory footprint of a typical image of a radial component in the steelseries could then be calculated as follows:

The default size of a radial component is 200x200 pixels and i'm using an alpha channel which results in a memory footprint of one image of:

200 x 200 x 4 byte = 160 000 bytes

(4 byte = 1 byte for red, 1 byte for green, 1 byte for blue and 1 byte for alpha)

This means that a standard radial component in it's default visualization (containing a frame, background, title, tickmarks, pointer, knobs and foreground) will have a memory footprint (only of the images) of:

7 x 160 000 bytes = 1 120 000 bytes = 1.07 Mb

That seems to be ok even if it's a lot of memory just for the visualization but in these days computers have lots of ram and powerful processors so it should not be a problem.

But if you imagine a huge display showing 20 radial components of a size of 300x300 pixels it could get up to:

20 x 300 x 300 x 4 byte x 7 = 50 400 000 bytes = 48.07 Mb

You might want to say "come on...it's only 50 megabytes, where is the problem" and you might be right but to me it looks too much...which means i had to slim down the memory footprint of the components.

I faced the same problem in the canvas version of the steelseries components and i used the same optimization in the swing version, i combine layers in as less images as possible.

This means i combine the frame, background, title, tickmarks and lcd background in one image and the knob and foreground in another image. Well it's not a huge improvement but it feels better. To give you an idea how i realized it let me show you some code...

Old version:

public BufferedImage create_FRAME_Image(int size)

{

GraphicsConfiguration GFX_CONF = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();

BufferedImage image = GFX_CONF.createCompatibleImage(size, size, TRANSLUCENT);

Graphics2D g2 = image.createGraphics();

...

// Do some fancy drawing here

...

g2.dispose();

return frameImage;

}

New version:

public BufferedImage create_Frame_Image(int size, BufferedImage image)

{

if (image == null)

{

GraphicsConfiguration GFX_CONF = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();

BufferedImage image = GFX_CONF.createCompatibleImage(size, size, TRANSLUCENT);

}

Graphics2D g2 = image.createGraphics();

...

// Do some fancy drawing here

...

g2.dispose();

return image;

}

As you can see the new version takes an image as parameter and if this parameter is not null it will draw the fancy painting code on the given image and returns it again. With this technique you could create an image in the component and pass it to all methods that you would like to add to the image and you will end up with one image only, instead of many images.

The drawback of this method is that you have to create the whole background image each time you change one of the images (e.g. the backgroundcolor of the gauge) but it will reduce the memory footprint.

Another modification i made was again located in the image creation methods. Because the image creation methods will be called at the time of initialization (before the component is really realized) with a size of 0 they have to return something. In the former release i returned an empty image of the default size which means 200 x 200 pixels. But this image was never used because once the component was realized, the image was created again with the default size and the old image was thrown away. By using VisualVM i was able to see a peak in memory usage directly after initialization of the components which was huge. In the current release i return an empty image of the size 1 x 1 pixel which again reduced the memory footprint a bit.

Like i mentioned in my very first post there are more areas of potential "weight loss", e.g. the pointer image could be only of the size of the pointer instead of the full image size etc.

I'm not sure if this was the right approach but it works and i would love to hear other ideas on how to reduce the memory footprint...

The next release of the SteelSeries library (3.8) will contain all these modifications and will be available soon...so stay tuned and keep coding...

Friday Fun Component VII

2011-03-11T12:20:00.005+01:00

First of all i'll say thanx to Rémy Rakic, who pointed me to the idea to create todays component. It's all about a design clock that was created by Biegert&Funk and which name is QlockTwo. This clock displays the current time in steps of five minutes in words.
This design clock is awsome and definitly something i'll buy in the future (if i'll find some money for it). The original clock is available in lots of languages whereas my version does only support the following

german
english
french (that's for you Rémy)
dutch (that's for you Tom)

To make sure to avoid problems with copyrights etc. i won't show any original image here but you will find a lot of images if you search for QlockTwo in google.

My version does support all colors of the original one (even the stainless steel one) and is fully scalable as usual.

To give you an impression how it looks like here are some screenshots...

Black Ice Tea

Cherry Cake

Lime Juice

Frozen Blackberry

Vanilla Sugar

Stainless Steel

The original clock has a light sensor which is used to adjust the brightness of the light of the characters. To get the same behaviour one could use the setBrightness() method of the QlockTwo component which takes values from 0.25f - 1.0f (default). If you would like to change the color you could use the setColor() method or if you would like to customize the component you might want to set the color property to CUSTOM and use the methods setCustomBackground(java.awt.Paint), setCustomOn(java.awt.Color) and setCustomOff(java.awt.Color) to give the clock your own style.
Changing the language can be done by using setLanguage() method.
There's also a method to enable/disable the visibility of the highlight effect named setHighlightVisible(boolean).

You might ask yourself how the clock displays values that doesn't fit in the 5 minutes scheme...well that's easy...on each corner of the clock you will find a dot which has the following meaning...

Dots will be switched ON:
upper left dot : if (currentMinute %5 == 1 || currentMinute %5 == 6)
upper right dot: if (currentMinute %5 == 2 || currentMinute %5 == 7)
lower right dot: if (currentMinute %5 == 3 || currentMinute %5 == 8)
lower left dot : if (currentMinute %5 == 4 || currentMinute %5 == 9)

Dots will be switched OFF:
all dots: if (currentMinute %5 == 0)

As an example please take a look at the following image...

INFO:
I asked Biegert&Funk for permission to release a Java component of their QlockTwo but unfortunately i did not get any response to my question...

To avoid problems with their copyright i won't add a download link to this blog entry until i will get the permission ~~but if you are interested in this clock you might want to drop me a mail and we could see what is possible~~.

UPDATE:
This evening Biegert&Funk contacted me and told me that i'm not allowed to publish the component (which was no surprise to me) and i totally understand this. That means if you would like to have a clock component like mine you have to create it by yourself...which is a good reason to have some fun ;-)

If you like the real Biegert&Funk QlockTwo you might want to buy one here but you have to know that quality has it's price.

So keep coding...

SteelSeries 3.7.2

2011-03-10T10:32:00.000+01:00

And another one...

nearly two weeks ago Andreas Ehlert contacted me and asked me if i could create some component that he would like to use to visualize the wind direction on a ship. An example of such a gauge could be found here.

He sent me some images and i started creating a version of this gauge for the SteelSeries library. Here is an image of the new component...

WindDirection

This gauge has two pointers where one pointer shows the measured direction from where the wind is coming from and the second pointer shows the real direction from where the wind is coming. The second pointer only has a setValue2() method but no ~~setValue2Animated()~~ method. The second pointer could have a all other properties that the standard pointer has like pointerType, pointerColor etc.
The lcd display in the component is not coupled to the pointer value but will show the windspeed in knots which has to be set by using setLcdValue().

In addition to this new gauge i made some modifications to the existing ones in the library. First i added a lcd display to the altimeter gauge which should it make more easy to directly read the visualized value, here is a little screenshot...

Altimeter incl. LCD

The other component i modified is the RadialCounter. I made some minor graphical modifications that hopefuly improves the look of the component a bit because i was not satisfied with it. On the left you see the new version and on the right you see the old version.

To be honest i'm still not sure if the new version will be finished forever but at the moment it seems to be better than the old one. The biggest problem with the old one was that you never saw the real value of the gauge which was the reason for the lcd display. Now one could set the value for example to 20 which will rotate the tickmarks two times and the lcd will show the value increasing up to 20.

In addition to the modifications above i also added another pointer type which is called TYPE6 and looks like this...

PointerType.TYPE6

Another small modification is the ability to select different shapes for the tickmarks. There are three types of tickmarks:

MiniTickmarks
MinorTickmarks
MajorTickmarks

which could get a shape of eu.hansolo.steelseries.tools.TickmarkType.
The available types are

LINE
CIRCLE
TRIANGLE
SQUARE

In this release only LINE and CIRCLE are supported but i'll try to implement also TRIANGLE and SQUARE in a future release of the library.
The CIRCLE type on the major tickmarks will look like this...

TickmarkType.CIRCLE

In the last version there have still been problems with some components like the lcd etc. when drag'n drop it to a panel in a visual design editor like Matisse in Netbeans. The initial size after the component was dropped to the container was wrong. This is fixed now.

If you like the components in the library but miss a specific one that you could need...just let me know and i'll try to add it to the lib. One component on my list is for example an artificial horizon that i created 1.5 years ago and would like to add to the library in the future.

So that's it for today...

Canvas vs. SVG...?

2011-02-25T18:06:00.000+01:00

Hi again,

today i would like to share some thoughts about HTML5 canvas and svg with you. It seems that not everybody understand that the new capabilities of HTML5 support for canvas and svg does not mean that we have to decide which is the better technology in general. You just have to choose the right tool for your job...if you have to handle a lot of dead bitmaps without any or just a few interactions you should take a look at canvas and if you need the full dom accessibility and living dom objects you should take svg.

I played around with svg around 2004 and at this time the support was bad (unfortunately). But with todays browser support for svg i thought about combining canvas with svg.

The idea is to use images that has been generated in canvas and use them as background images for svg animations. In this specific case i asked myself if it would make sense to create the static drawing parts of a gauge (like the background and the foreground) in canvas and put an animated svg pointer in between these images and let svg do the animation instead of a javascript. So the question was how to get a canvas as an image and the easy answer is you have to use the toDataURL("image/png") method on a canvas element. This will create a base64 encoded image in png format that one could use in an svg <image> element.

So i added two functions to the canvas component that returns the backgroundimage and the foregroundimage by using the toDataURL() method.

// Return a base64 encoded image of the background for svg use

this.getBackgroundImage = function()

{

init();

return BACKGROUND_Buffer.toDataURL("image/png");

}

When this was done i just have to add the image via javascript to the svg element in my html body and the images will be painted by svg instead of canvas.

// Add the canvas as backgroundimage to the svg container

var backgroundImage_dataurl = compass.getBackgroundImage();

// Create a new <image> tag in the svg element with the canvas as a source image

var svg_BackgroundImage = document.createElementNS("http://www.w3.org/2000/svg", "image");

svg_BackgroundImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", backgroundImage_dataurl);

svg_BackgroundImage.setAttribute("id", "background");

svg_BackgroundImage.setAttribute("width", IMAGE_WIDTH);

svg_BackgroundImage.setAttribute("height", IMAGE_HEIGHT);

svg.appendChild(svg_BackgroundImage);

Now i had to add the pointer to the svg element between the background image and the foreground image via javascript which could be done by using the svg <path> element.

// Add the svg pointer ontop of the image

var northPointer = document.createElementNS("http://www.w3.org/2000/svg", "path");

northPointer.setAttribute("id", "northpointer");

northPointer.setAttribute("width", IMAGE_WIDTH);

northPointer.setAttribute("height", IMAGE_HEIGHT);

var northPath = "M" + IMAGE_WIDTH * 0.5 + " " + IMAGE_HEIGHT * 0.4953271028037383 +

"L" + IMAGE_WIDTH * 0.5280373831775701 + " " + IMAGE_HEIGHT * 0.4953271028037383 +

"L" + IMAGE_WIDTH * 0.5 + " " + IMAGE_HEIGHT * 0.14953271028037382 +

"L" + IMAGE_WIDTH * 0.4719626168224299 + " " + IMAGE_HEIGHT * 0.4953271028037383 +

"L" + IMAGE_WIDTH * 0.5 + " " + IMAGE_HEIGHT * 0.4953271028037383 +

"Z";

northPointer.setAttribute("d", northPath);

northPointer.setAttribute("stroke", "darkred");

northPointer.setAttribute("fill", "red");

svg.appendChild(northPointer);

To add an animation (in this case from 0 to -360 deg in an infinite loop) to the pointer i decided to use the <animateTransform> element of svg and added it to the svg element via javascript.

// Animate NorthPointer

var svg_animateNorth = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");

svg_animateNorth.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#northpointer");

svg_animateNorth.setAttribute("id", "animatenorth");

svg_animateNorth.setAttribute("attributeName", "transform");

svg_animateNorth.setAttribute("begin", "0s");

svg_animateNorth.setAttribute("dur", "3s");

svg_animateNorth.setAttribute("type", "rotate");

svg_animateNorth.setAttribute("from", "0 100 100");

svg_animateNorth.setAttribute("to", "-360 100 100");

svg_animateNorth.setAttribute("repeatCount", "indefinite");

svg.appendChild(svg_animateNorth);

And that's it, now i could compare pure javascript canvas animation with svg animation...

To see the page in action please click on the link below the image.

Click to see it in action...

The canvas animation will work in nearly all non ie browsers but the svg animation seems to have problems with webkit based browsers which means you won't see the right side moving in Chrome and Safari. But it will work in FireFox 4.

So keep coding...

Friday Fun (Canvas) Component VI

2011-02-18T09:46:00.001+01:00

Back from JFokus (which was great by the way) i have some more fun to share with you today. This time it's related to HTML5 canvas (what else ;-)).

Sitting in a talk at JFokus i've got the idea to convert the compass component of the SteelSeries Swing library to canvas to use it in conjunction with the HTML5 geolocation api (e.g. position.coordinates.heading).

It tooks me several talks and coffee breaks to complete the conversion and here is the result...

Because it's part of the steelseries canvas version one could define things like frameDesign, backgroundColor and pointerColor.

Unfortunately the geolocation api did not work out as well which was the reason to convert another component from the SteelSeries Swing library.

I'm talking about the level component. I read that there is a deviceorientation api in the html5 spec (draft) which i might use also on my macbook pro so here is the result of the level component...

And again you could set the frameDesign, backgroundColor and pointerColor of the component in the constructor of the component.

Well looking at a static image is fine...but better is to see it in action. To get there, please click at the link below the following image...

Click to see it in action...

Well that's better right...? But only driven by some setInterval() calls to a method that creates random values. Would it not be nice to get a direct response of an inbuild sensor...YES !!!

So for all running on windows, linux, android....sorry guys, the following link will only show you a static components. But if you are running a device like a Macbook, Macbook Pro, ~~iPad (iOS 4.2)~~, iPhone4 (iOS 4.2) or ~~iPhone 3Gs (iOS 4.2)~~ you should see the level component rotating if you rotate your device. I only had the chance to test it on my Macbook Pro and it works if you tilt the Macbook Pro to the left or right.

Just test it by clicking on the link below the following image...

Click to see it in action...

That's it for today and even if it's not Java related i hope it will be fun for one or the other...

Cheers and keep coding...

Update:
As i learned today, the device needs a gyroscope to fire onDeviceOrientation events which excludes iPads and iPhones 3Gs from the list. That means you could only see the level component on an Macbook, Macbook Pro and iPhone4. I extended the page by a compass and a speed gauge that will show the direction and the speed when you move with your device (e.g. in a car). In this case it will work also on Android devices with os version >= 2.2.