Here we go again…

A few months ago i started a new project where i again focussed on gauges (i love that stuff). It took me some time because i only work on the project on my spare time (which is rare) but now i finished a first version of a little library that contains a lot of gauges for Java applications…

First of all i have to mention that this library was not meant to be a professional components library and should not be used on mission critical software. Means if you use the library it’s on your own risk !

I’ve never before created a component library and for me it was and is a great challenge to dive deeper into the Java universe…

But now let’s have some fun…

The library contains two general types of gauges, radial and linear ones and some little candy in the form of additional components like a Radar component etc.

I add some properties to the gauges that hopefuly will be useful for some of you.

Here is a short list of the most interesting features:

• frameDesign (metal, shiny metal, blackmetal)
• backgroundColor (dark gray, light gray, white, black, beige, red, green blue)
• pointer/bar color (red, green, blue, yellow, orange)
• a three colored track to visualize areas of special interest (e.g. a critical temperature range)
• thresholdIndicator
• blinking threshold led (red, green, blue, orange, yellow)
• adjustable tickmarks
• indicators for min. and max. measured values
• auto reset to zero feature

It should be possible for you to create your own components out of these library and  if you’ll take a look at the source you will find components like Radial1Lcd, Radial2Lcd and Radial3Lcd where i used Netbeans matisse gui builder to create the component from the FrameCircular and DisplaySingle components.

So you should be able to check read the sourcecode of these components and see how i did it (the easiest way would be to use Netbeans to check the source).

But to give you a impression, let pictures speak…Radial gauges…

Radial4 component

backgroundColor: beige

frameDesign: blackMetal

pointerColor: orange

ledColor: orange

Radial2Lcd component

backgroundColor: white

frameDesign: metal

pointerColor: red

ledColor: red

lcdColor: beige

digitalFont

Radial4 component

backgroundColor: black

frameDesign: shinyMetal

pointerColor: green

track: 70, 90, 100

Radial1Square component

backgroundColor: green

frameDesign: metal

pointerColor: red

ledColor: yellow

track: 0, 50, 100

Radial3Lcd component

backgroundColor: lightGray

frameDesign: blackMetal

pointerColor: blue

ledColor: blue

lcdColor: blueBlue

track: 40, 55, 70

Radial1Vertical component

backgroundColor: beige

frameDesign: metal

pointerColor: red

ledColor: red

Radial1Vertical component

backgroundColor: white

frameDesign: blackMetal

pointerColor: yellow

ledColor: orange

track: 0, 75, 100

threshold: 75

DigitalRadialLcd component

backgroundColor: black

frameDesign: blackMetal

lcdColor: green

DisplayCircular component

backgroundColor: blue

frameDesign: shinyMetal

digitalFont

Linear gauges…

Linear component

backgroundColor: darkGray

frameDesign: metal

ledColor: orange

valueColor: orange

track: 70, 85, 100

threshold: 50

vertical orientation

Linear component

backgroundColor: beige

frameDesign: blackMetal

ledColor: red

valueColor: red

lcdColor: green

digitalFont

minMeasuredValue: 0

maxMeasuredValue: 70

vertical orientation

Linear component

backgroundColor: white

frameDesign: shinyMetal

valueColor: green

ledColor: green

track 80, 90, 100

threshold: 80

orientation: horizontal

Linear component

backgroundColor: lightGray

frameDesign: blackMetal

valueColor: yellow

ledColor: yellow

lcdColor: standard

track: 0, 70, 100

Altimeter component

A component that behave like a altimeter that you might know from airplanes. It has three pointers

10 ft        :  the big fast pointer

100 ft      : the smaller slower pointer

1000 ft    : the pointer with the triangle at the end, moving very slow

Clock component

Just a simple analog clock component in the same look as the other gauges.

Compass component

A compass component that takes values in the range from -360…360 degrees.

Level component

A clinometer component that takes values in the range from -360…360 degrees.

Radar component

This is a little bit special component that like a lot. You could define a home position in the component which will then represent the center of the component.

Now you could add poi objects that represent locations defined by their latitude and longitude and the component will show these poi’s on the screen if they are in the range of the radar which could be defined.

This means if you read out data from a gps device and set the home position to the current position of the gps from time to time you could add some poi’s and they will appear and disappear on the radar screen when you move…

Download the library here…

I also create a project on Kenai where you could download the sourcecode or might want to participate…

There is a special blog that i created to present my Java Swing related stuff in more detail, please find it here. In that blog i will try to give you a more detailed view at the creation of these components.

Follow me on twitter if you like…

Weitere Artikel:

1. Custom swing component
2. SteelSeries update
3. Java AutoConversion textfield component

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. Java7 Launch Event
2. SteelSeries Java Swing component library
3. Swing Worldclock

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. SteelSeries Java Swing component library

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. SteelSeries Java Swing component library
3. Swing event departure board