SteelSeries 3.9.20 (cough...3.9.23)

I know i know...long time no update...sorry for that... :)


In the meantime i released some versions of the SteelSeries library but most of the changes have been related to issues so i did not blog about it.
Now in the 3.9.23 release i have something that might be interesting for one or the other of you.
I gave some love to the DisplaySingle component (LCD) because we needed some features in our software at Quintiq.
First of all i've changed the digital font to a more light version and this is how it looks like...

As you could see the font is not as bold as before and also not italic. 


In addition i've added a bargraph to the lcd that shows the current value in relation to the min and max value of the component.
That means if you set the min value to 0 and the max value to 100 and have a current value of 50 the bargraph will be half filled.


Here you get an impression:

If you add sections to the DisplaySingle component the bargraph will use the colors of the sections to visualize the current value. This might be usefull to visualize the quality of the current value.
In this case one could choose between a plain color or a radial gradient as painter for the bargraph leds by using the method setPlainBargraphSegments(true/false). 


You could see the difference on the next screenshot...

Without sections the bargraph leds will have the same color as the lcd text (top), with plainBargraphSegments set to true and with sections applied to the DisplaySingle component the bargraph leds will be filled with the color of the currently active section (middle). If you set the plainBargraphElements to false the bargraph leds will be filled with a radial gradient using the color of the currently active section.


And that's all what is new in the current SteelSeries release.


One more thing...


As you might know i started porting the SteelSeries library to JavaFX 2.x and i would like to tell you that there won't be a seperate SteelSeriesFX library in the future because i've decided to make the gauges part of the JFXtras project. I won't go into detail now but believe me when i say that this project will rock (again)...so stay tuned...


...and keep coding... :)




SteelSeries 3.9.23:


Binary release    : steelseries-3.9.23.jar


Maven central    : link

Gradient trick...

Aloha,

during my work at Quintiq i stumbled upon a problem when drawing lot's of linear gradients in "realtime". In our software we have a gantt chart component that could contain thousands of nodes. Each of these nodes could contain multiple so called compartments which are representing a range of values. So the node itself is visualized using a LinearGradientPaint and also each compartment is visualized with it's own LinearGradientPaint. So far this should not be a problem but now it comes...we can't really cache things because the whole gantt chart is so to say "live". This means if somewhere in the businessmodel a value changed it will affect the ganttchart in the way that the nodes and their compartments will change it's size. Another problem is that the nodes could not only have different widths but also different heights. 

The compartments are separate shapes that will drawn on top of the nodes.

And that's not enough, the chart that is visible on the screen only represents a small part of the whole data which means one could scroll horizontal which let new nodes appear on the screen and others might change their height (this is something special to this kind of graph in our software).

Long story short...we could nail the performance problem to the drawing of the linear gradients and their creation. 

So i was thinking about how to improve the drawing speed of these gradients and came to an interesting approach that i would like to share with you in this post.

First of all i created a 1px wide BufferedImage with the most common height of the nodes. Then i filled this 1px image with a linear gradient (e.g. the green one) and saved the image for later use. Everytime when there was a new color of a compartment i created an 1px gradient image for this color. 

The trick is now to use the TexturePaint to fill all these nodes which has the big advantage that it will scale the gradientimage automaticaly to the needed height. Because we have to create each gradient only once now the repaint speed could be reduced by 30ms on each repaint.

This performance problem only occured when the gantt chart became really huge with thousands of nodes, but i thought it might be interesting for you to know.

Here is a little code snippet that will give you a hint on what i did...

private BufferedImage nodeTexture;

private void init() {
    private final float[] fractions = {
        0.0f,
        0.5f,
        1.0f
    };
    private final Color[] colors = {
        Color.RED,
        Color.GREEN,
        Color.BLUE
    };
    nodeTexture = createNodeTexture(24, fractions, colors);
}

@Override
protected void paintComponent(Graphics g) {
    ...
    Graphics2D g2 = (Graphics2D) g.create();
    for (RoundRectangle2D node : nodes) {
        TexturePaint nodePaint = new TexturePaint(nodeTexture, node.getBounds());
        g2.setPaint(nodePaint);
        g2.fill(node);
    }
    g2.dispose();
    ...
}

// Method that creates a 1px wide gradient image    
private BufferedImage createNodeTexture(final int HEIGHT, float[] fractions, Color[] colors) {
    GraphicsEnvironment gfxEnv = GraphicsEnvironment.getLocalGraphicsEnvironment();
    GraphicsConfiguration gfxConf = gfxEnv.getDefaultScreenDevice().getDefaultConfiguration();
    BufferedImage image = gfxConf.createCompatibleImage(1, HEIGHT, Transparency.OPAQUE);
    Graphics2D g2 = image.createGraphics();
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    Point2D start = new Point2D.Double(0, 0);
    Point2D stop = new Point2D.Double(0, HEIGHT);
    final LinearGradientPaint GRADIENT_NODE = new LinearGradientPaint(
        start, 
        stop, 
        fractions, 
        colors);
    g2.setPaint(GRADIENT_NODE);
    g2.fillRect(0, 0, 1, HEIGHT);
    g2.dispose();
    return image;
} 

Before i forget it...we are hiring, so if you are looking for a job in the Java and/or C++ area please check here


That's it for today, so keep coding...

Friday Fun Component XV

Here we go again...
Today i have nothing special for you but just another traffic light component. This time the component is more compatible to different background colors because it's semitransparent.
We needed something for our software and the other traffic light component was simply too dark...so i created this one...

click to see it in action...

As you can see it comes in two versions and you could switch between both versions by using the yellowVisible property.

The frame has the color #333333 with an opacity of 50% and the inner part has the color #CCCCCC with an opacity of 50%.
Due to the transparency this component fits better on different backgroundcolors because they shine through.


This component is now also part of the SteelSeries Java Swing component library.


Well that's all for this friday, as always you could download the binary and source (as NetBeans project) here:


binary version: TrafficLight2.jar


source          : TrafficLightDemo2.zip


So enjoy the upcoming weekend and keep coding...

SteelSeries 3.9.10 (QuickRelease)

Happy new year everybody...


UPDATE: due to some minor modifications the current version is 3.9.12


I know i said it would take some months until you will see the next release but i needed some components be part of the library so i decided this morning to make a quick release and added these new things to the lib.
The new things i have added are the traffic light and light bulb you might know already from the friday fun components, another traffic light component that might fit better to different color schemes and at least 8 new indicator symbols in the IndicatorGauge. 
To give you an idea on what the stuff looks like...here they are...


The traffic lights and the light bulb...

and the eight new symbols which are just arrows pointing to different directions...

And that's all for this release...like i said a quick release with just a few new additions. You will find the new version either here on this blog on the right side or at MavenCentral.


For those of you that are interested in the progress of the SteelSeriesFX i could show you one screenshot of the current state...

As you can see i made some progress but it's still a looooooong way to go...


so stay tuned and keep coding...

SteelSeries 3.9.9

It took some time due to some conferences and my new job but i finally decided that it's time for another release of the SteelSeries component library.
Because i will port the complete library to JavaFX 2.0 this will be the last release  of the Swing library for the next months. 
Porting the lib to JavaFX 2.0 means a complete rewrite from scratch combined with learning JavaFX...so this will also take some time...which means patience my friends...
But now let's talk about the stuff that's in this release...


The DisplaySingle component (lcd with a single row) got most of my attention in this release. So first of all it's now capable of displaying also text instead of numbers only.

Click me to see a youtube video of the scrolling...

If you click on the link below the image you will see a little video on youtube that shows the rudimentary scrolling capability that is supported by the DisplaySingle component.
The display of text could be enabled/disabled by using setting the lcdNumericValues property to false and fill the lcdText property with some text.


There's also a new LcdColor available that is only useful in the DisplaySingle component and will be used to visualize sections in the lcd display.


Without any section applied to the DisplaySingle it will look like this:

As an example i defined sections as follows:


Section[] sections = {

    new Section(0, 25, Color.GREEN),
    new Section(25, 50, Color.YELLOW),
    new Section(50, 75, Color.ORANGE),
    new Section(75, 100, Color.RED)
};



If you set these sections with the setSections() method to a DisplaySingle component and activate the visibility of the sections by calling setSectionsVisible(true) you will get results like follows:

We will use this feature to visualize the quality of kpi's in the next version of the Quintiq software.


In the gauges it's now possible to adjust the color for the inner (green in the image) and outer frame (red in the image), which was requested...

And again some new pointer types are available...

The pointer type 13 and also type 2 now change their color dependend on the background color. That means the pointer will get a better contrast on the choosen background color. The color that will be used to fill the pointer is the same as the label color defined in the background color.


Another new thing i've added to the lib is the ability to use logarithmic scaling for the gauges which might be useful when measuring over a large range of values.
The implementation is rudimentary and only for base 10 but it's a start...

logScaling disabled (default)

logScaling enabled

The logarithmic scaling is available on the radial and linear gauges and bargraphs.


As you could see on the images above there's also another new feature that makes it possible to adjust the orientation of the ticklabels.
There are three possibilities available:

• normal
• horizontal
• tangent

and that's how they look like...

And that's still not the end, there's also a new frame design called GlossyMetal which looks like this...

Started talking about the frames there's also a new feature that makes it possible to choose a custom color for a frame (this feature only works for the frame design named ShinyMetal) and could be switched on with setFrameBaseColorEnabled(true). If you have switched this feature on you could set a frame base color that will be used to colorize the frame of the gauge which leads to a visualization like this...

The next feature is something that was on my list for a long time but i never found the time to do it...now it's done...
Frameless gauges...

If you switch off the visibility of the frame the gauge will take the whole space of the component instead of simply not show the frame. This is really useful if you do have a lot of gauges on your dashboard where you don't need the frames.


At least i made some modifications to the visualization of the sections in a gauge that might be useful for business dashboards. Because that are only small modifications i won't explain everthing but show you some more images...

As always you could find the binary version on the right side of this blog.


I guess that's it for 3.9.9 and like i said already this will be the last release for the next months because i really have not time to do all this stuff in my spare time again and will focus on the SteelSeriesFX version...so stay tuned and keep coding...

Friday Fun Component XIV

Aloha,

back from Devoxx which was great again i still found some time to release another little fun component for you.

It's a range slider that i've created for the server team of Quintiq. This slider is in principle a simple JSlider with two knobs instead of one.

We use this slider to specify a range of days (e.g. a week or so) but you can use it for all kind of ranges.

Here is a screenshot of it...

On the screenshot you could see most of the features the range slider has to offer. One could set different kinds of knob shapes, knob designs, track styles, range colors etc.

One interesting feature might be that you can drag no only the thumbs but also the range itself which could be useful if you have defined a range and would like to keep the delta but on a different position on the scale.

Because it's still 4:30 pm in Germany i won't go into detail now and leave it up to you to play around with the little demo app i created.

Because i did not want to reinvent the wheel i based the slider on the work of Ernie Yu who blogged about it last year in december.

And if you like it you might want to download the sources as always presented a s a NetBeans project...

Binary jar: RangeSlider.jar

Source     : Rangeslider.zip (NetBeans project)

And that's it for this friday...enjoy the upcoming weekend and keep coding...

Friday Fun Component XIII

And another one...even if i was really busy this week due to an internal training course named the "Demo challenge" i could not resist to release another friday fun component.
This time it's all about a traffic light component that might be useful to visualize the state of something...and here is what it looks like...

This component is one of the simplest ones i've build so far and only has three properties...

• redOn         (boolean)
• yellowOn    (boolean)
• greenOn     (boolean)

Each of these has a getter and a setter and that's it...like i said...really simple...

It's scalable as you expected and as last week i created a little demo app that will give you the chance to take a look at the component before you might want to download the sources...

• Source (NetBeans project):    TrafficLight.zip
• Binary jar:                           TrafficLight.jar

I hope this component will be useful for one or the other and if you have ideas for other components you would like me to create...just let me know...

Keep coding and enjoy the upcoming weekend...