Friday Fun Component IV

Thank god it's friday...which means it's time for some fun...

I guess this will be the last friday fun component for the near future because next week i'll be at Devoxx conference in Antwerp (Belgium) from wednesday to friday and it seems that i'll have to travel a bit in the weeks after the conference.

The idea for today's fun component came to me when i was playing around with my Android phone and used the countdown app.
Well on the iPhone there's a very similar looking application which does the same job...simply counting down seconds.

To those of you that do not own one of these phones here are some images...

The counter itself was not very special but this rotating wheels that represents the seconds and minutes is what i like. The idea was born to create a component that is able to give me the impression of a rotating bar with numbers on it.

And that's the result (which to be honest looks like a mixture of both)...

I decided to use only numbers from 0-9 for a bar instead of using numbers from 0-59. This makes the component for me more flexible to use.

You might want to change the max. number of a bar to 5 to realize timers that count for example from 00 sec to 59 sec. Therefor you could set the max number of a bar to values from 3 (which results in 0, 1, 2) to 10 (which results in 0,1,...9). You could of course scale the component to the size you need.

There is also a property named theme which could be changed between BRIGHT, DARK and CUSTOM. If it is CUSTOM you could set the backgroundColor property to a color of your choice. The foreground color (the color of the numbers) will be adjusted by the luminance of the background color. If the luminance is <128 it will be set to white otherwise to black. The component will fire a property change event everytime it passes the 0. There is one event for decrement named "dec" and one for increment named "inc".
In addition you could also adjust the so called switchtime (the time it takes to switch from one number to the next/previous). 
Keep in mind that you do not call increment faster than your current switchtime, otherwise it will lead to jumping numbers...
The default switchtime is set to 500ms which is enough to realize a counter.


To give you a impression what you could do with this component i created a timer/countdown component. 
This really was a quick hack and should only give you a idea of what is possible...


It looks like this...

One could set the start values for each bar by pressing the appropriate arrow button. Now one could either start the timer (the upper button with the green area) or the countdown timer (the lower button with the red area) and the timer will count from the start values up or down.

If the timer is counting down it will stop counting when reaches 000000 and it will fire a propertychange event named "alarm".
Again i used images that i move around using the trident animation library

Let me try to explain how i realized the behaviour of the component...

I tried different approaches and figured out that the best solution for this kind of component it was to create two images that contain all the available numbers. So for a bar that should count from 0 to 5 one image will look like this...

To create the pseudo 3d effect we need another image that contains a gradient from black to transparent and back to black and put it as a overlay above this digit stack. Here's another image to make it easier to understand...

Because it should be able to count endless we do need two of these digit stack images and move them both. I used the following image to create the counter and get a better visual impression of how the algorithm should work...

0 and 1 represent a digit stack image and the black box in the center represents the visible area of the component. You could see in the image that i have to move each image ontop of each other if it reaches the "invisible" area. The inner black bordered box represents some kind of a switch area, where the component will fire a event (increment or decrement).

But enough with the theory...here is something to play with

So if you like it, please find the source and the binary here:


    Source: RollingCounter_Source.zip
    
    Source: RollingCounterDemo_Source.zip

    Binary: RollingCounter.jar


Well to be honest i'm not completly satisfied with the counter component and i'm pretty sure that i'll make some modifications to it in the future but who cares...take it or leave it... ;-)

That's it for today and if you are also at Devoxx next week and would like to talk...contact me via twitter...