Tuesday, February 8, 2011

SteelSeries 3.7 (ReUnion release)

Hi there,
The next version (3.7 3.7.1) of the SteelSeries library is released (please find it on Maven Central here). I call it the reunion release because from this release on you will also find the components from the SteelExtras lib back in the SteelSeries lib.
I split them off in the past because of the library size but figured out that it's much better to have all the components in one place (sorry for the inconvenience).
That means you will find the following components now also in the lib:

Altimeter, Clock, Compass, Radar, Level and Led

These components are placed in the eu.hansolo.steelseries.extras package.

The 3.7 3.7.1 release contains a lot of modifications and addons that i'll describe to in this post, starting with a new component...the SparkLine component...

A sparkline is a type of information graphic characterized by its small size and high data density (wikipedia). The term sparkline was proposed by Edward Tufte for small high resolution graphics embedded in a context of words, numbers, images etc.

The decision to add a sparkline to the library took me some time because i was not sure if this is really usefull but when i was doing some long term temperature measurement i found it might be really nice to see a graph of the values measured e.g. in the last hour etc.

So i added the sparkline component to the lib but i have to say that i created the sparkline only with visualizing measured data in my mind...means i have no idea if it is usable for other data like financial data etc. My implementation of a sparkline uses a so called timeframe (default is set to 1 hour == 3600 sec == 3600000 ms) and each value will be stored with the current timestamp. 
If the the list is "full", the first value in the list will be removed with every new value added to the end of the list. That means this sparkline only shows the number of values that was measured in the given timeframe. The timeframe is defined in milliseconds.

Here we go...

As you can see the sparkline component in the steelseries lib uses the same background as the lcd component. My idea was to add it to the gauges in a future release so that one could switch between the lcd display and the sparkline display.
The sparkline supports the following statistic data:
  • first Quartile Q1 
  • second Quartile Q2 (also known as Median) 
  • third Quartile Q3 
  • average 
  • variance 
  • standard deviation
If you need more information about these values please take a look at wikipedia.

The sparkline itself could be smoothed by using one of the following smoothing functions:
  • continuous average smoothing
  • cubic spline smoothing
  • hermite smoothing
  • cosinus smoothing
The smoothing could also be disabled which will show the real measured values.
Here is an example of the different smoothing functions...

Because the sparklines in the above example only contains a few values the result looks quite similar. If the smoothing is switched off it is possible to show the hi and lo value by a small indicator. If you only would like to see the sparkline itself without the colored background...just switch it off and you will get something like this...

As you could see on the image above, it is also possible to fill the area below the sparkline with a gradient. There is a default gradient where you only can define the base color which will fade out from top to bottom but you could also define the topAreaColor and the bottomAreaColor with it's alpha values and it will use your colors to fill the area. Here is another example of the filled area...

The sparkline component was built to visualize measured data (e.g. from a sensor) in a given timeframe (e.g. 1 hour) where you added the measured values every second. I hope it will be of use for someone...

In the 3.7 3.7.1 release of the lib i added a lot of small things like two new lcd colors...

But that's not all...i also added the possibility to customize the lcd colors. That means if you choose CUSTOM as your lcdColor, it will take the customLcdBackground paint (java.awt.Paint) to fill the background and the customLcdForeground color (java.awt.Color) to fill the lcd text. With this you might want to change the lcd colors to the creepy pink in the example...

Well talking about customizing leads me to the next customizable feature...the frameDesign. It follows the same rule as the lcd which means if you select CUSTOM as your frameDesign, it will take the paint object that is defined in customFrameDesign to fill the frame of your gauge. For example if you would like to add your own linear gradient to the frame...

But when i was playing around with gradients i figured out that it might be nice to add a little pseudo 3d effect to the frame and voila...here it is...

That means you could simply switch on frame3dEffectVisible and it will add a little overlay to the frame that creates the effect in the image above.
This will also work on the existing frame designs. This also means that if you simply put a plain color as your customFrameDesign and switch on the 3d effect you will get a more realistic look of your gauge.

Hmm...when talking about pseudo 3d effects i also have to mention the similar effect that is available for the sections feature. I was asked if it would be possible to add some kind of gradient to the sections and what should i say...yes it is and here is what it looks like...

This effect is only available in the standard radial gauge and only to the sections and not to the track. You could switch it on with section3dEffectVisible = true.

If you reduce the size of the gauge so that the size is only around 80px you will figure out that the pointer is hard to identify because it get's too small. That was the reason why i added another pointerType to the radial gauges (TYPE4). The idea came to me because Rémy Rakic sent me an image of gauge which uses a big pointer...so thanx Rémy...

And again i added the ability to customize the color of the pointer. That means if you select CUSTOM as pointerColor it will use the color (java.awt.Color) that is defined in customPointerColor to create the colors that will be used for painting the pointer. In addition to the new pointerType i also added a bigger knob which could be switched by using the property knobType.

Another modification/addon are the new foreground types for the radial gauges. Instead of using only one foreground you could now choose between three...

On the image you see the FG_TYPE1 on the left, FG_TYPE2 on the middle and FG_TYPE3 on the right side. Please use the foregroundType property to switch between them.

The last thing i would like to mention in this post is the ability to use a custom color for the led i'm using in all the gauges. Again if you choose CUSTOM as ledColor it will take the hue of the color that is defined in customLedColor to create the colors for the led. This makes it also possible to create a white led if you wish...

The custom ledColor could be defined in all gauges that support a led and also in the standalone led component from the extras package that you see on the image above.

I think that's it with the news, so if you would like to download the binary, please find it here:

I hope all these modifications are usefull for one or the other of you...

Cheers and keep coding...

Release 3.7.1 of the library already because there was a problem with the resizing logic.


  1. That are realy beautiful gauges!
    I would like to suggest you to develope a Chart-Libary like JFreeChart, who isn't in development anymore since almost 2 years. With you experience and powerful graphical skills, that could be one of the best Chart-Library ever...

  2. I would definitely agree with the comment above.

  3. At the first, thanks for great GUI controls :-) Everything works fine but I have one problem with minimum size of LCD display in LinearBar. I have twelve LinearBars in application with LCD. Because my display resolution is 800x600,size of LinearBar isn't too large. It also means that LCD is too small. For me it's much better for me to have a little bigger LCD and smaller bar.
    Is there a way how to specify minimum size of LCD?

  4. Maybe you might want to disable the lcd in the linear gauge and add an additional lcd display below or above the gauge where you display the current values...just an idea...

  5. Hi,
    Thank you for this very nice widget.
    Is-it possible to get your demos src to see what kind of method we have use to get a nice rendering ?

    Thx again

  6. Hi Christophe,
    Just let me know what exactly you need and i'll try to help you. What to you mean with "to get a nice rendering" ?

  7. Hi Christophe,

    I love your work.

    I’m currently developing a monitoring tool for my client using sparkline and other components.
    It will be great to have a multiline sparkline component (e.g. CPU & Memory).
    See http://www.jfree.org/jfreechart/images/DeviationRendererDemo2.png

    Kind Regards

  8. Hi,

    Thank you for the great GUI controls!

    I want to display the values of a three axis Accelerometer in a single gauge. So I need three pointer.
    Can somebody help me?


  9. Hi Stefan,
    Well if you have idea how it should look like...just drop me a mail with an image and will see what i can do for you...

  10. Hi,
    Just perfect, again an amazing work !
    One detail: it would be really nice to get rid of the "angles" in sparkline... if i understand well the cubic smoothing was used only to smooth datas and not the curve "angles" in drawing, for sure it would implies that the last displayed value would actually be the one just before actual last...but curve would look nicer. Here is what i mean:
    (the green curve)