Friday, August 5, 2011

Friday Fun Component X

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 it's your decision.

Binary and Source

Binary version of the flipchar component:   FlipChar.jar

Netbeans project:                           

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


  1. Hi Gerrit,

    Thanks again to share.

    But... I guess you shared it too quickly, you forgot to sign the jars for the webstart demo.

  2.'re it should work...
    Thx for the hint,

  3. Thanks for the post. I liked it. Keep going I follow you.