SteelSeries 3.9.30 released and moved to github

This is just a short info on the SteelSeries Java Swing library:

I moved the SteelSeries Swing library from project Kenai to github to have all projects in one place. Because I was working on it anyway I also created another major release which mainly contains some bugfixes (nothing special). In addition I have added the possibility to switch off the lcd background and the possibility to blink the lcd text (both features have been requested by users).

So if you would like to get the latest source code you should from now on take the code from the github repo and also issues should be filed on github instead of project Kenai.

Cheers and keep coding...

JFXtras Series: (Radial) Gauge

Here we go again, today i will give you a short overview on the gauge control of the JFXtras-labs project.
If you followed this blog you will find similar information in former posts but this time it's JavaFX. That means if you are familiar with the SteelSeries Java Swing component library you should be able to use the gauges in the JFXtras-labs project without any additional information.
Not every gauge of the SteelSeries made it to the JFXtras project now (because it takes some time to convert all that stuff) but i'm working on that :)
To keep this blogpost as short as possible i've created a screenshot of one gauge and put some descriptions on it so that you know what i'm talking about...

As you could see the radial gauge looks almost like the Swing version. Most of the labeled things in the above image are customizable. The following properties could be adjusted:

• FrameDesign
• BackgroundDesign
• PointerType
• PointerColor
• KnobDesign
• KnobColor
• LcdDesign
• Sections (with their colors)
• Areas (with their colors)
• Markers (with their colors)
• Threshold (with it's color)
• TickMarks (with their colors)
• TickLabels (with their orientation)
• Led (with it's color)
• UserLed (with it's color)
• Glow (with it's color)
• Trend (with it's color)
• ForegroundType
• and more...

One big advantage over the Swing based gauges is the availability of a builder class named GaugeBuilder. With this builder it's fairly easy to create a gauge. To create the gauge on the image above you'll need the following code:

Gauge radial = GaugeBuilder.create()

                           .prefWidth(500)

                           .prefHeight(500)

                           .gaugeType(GaugeBuilder.GaugeType.RADIAL)

                           .frameDesign(Gauge.FrameDesign.STEEL)

                           .backgroundDesign(Gauge.BackgroundDesign.DARK_GRAY)

                           .lcdDesign(LcdDesign.STANDARD_GREEN)

                           .lcdDecimals(2)

                           .lcdValueFont(Gauge.LcdFont.LCD)

                           .pointerType(Gauge.PointerType.TYPE14)

                           .valueColor(ColorDef.RED)

                           .knobDesign(Gauge.KnobDesign.METAL)

                           .knobColor(Gauge.KnobColor.SILVER)

                           .sections(new Section[] {

                               new Section(0, 37, Color.LIME),

                               new Section(37, 60, Color.YELLOW),

                               new Section(60, 75, Color.ORANGE})

                           .sectionsVisible(true)

                           .areas(new Section[] {new Section(75, 100, Color.RED)})

                           .areasVisible(true)

                           .markers(new Marker[] {

                               new Marker(30, Color.MAGENTA),

                               new Marker(75, Color.AQUAMARINE)})

                           .markersVisible(true)

                           .threshold(40)

                           .thresholdVisible(true)

                           .glowVisible(true)

                           .glowOn(true)

                           .trendVisible(true)

                           .trend(Gauge.Trend.UP)

                           .userLedVisible(true)

                           .bargraph(true)

                           .title("Temperature")

                           .unit("°C")

                           .build();

The GaugeBuilder is able to build the following gauges:

• Lcd
• Linear
• Radial
• RadialHalfN
• RadialHalfS
• RadialQuarterN
• RadialQuarterE
• RadialQuarterS
• RadialQuarterW

To give you an idea on how each of these gauges look like...here you go:

Instead of having separate controls for the bargraphs you could simply switch between the pointer and the bargraph by using the method setBargraph(true).

At the moment this is only possible for the Radial, RadialHalfN and RadialHalfS control which will look like this...

Another speciality of the Radial gauge is the ability to show different radial ranges. Therefore one could set the so called RadialRange of a Radial gauge to one of the following values:

• Gauge.RadialRange.RADIAL_90
• Gauge.RadialRange.RADIAL_180
• Gauge.RadialRange.RADIAL_270
• Gauge.RadialRange.RADIAL_300

If you set it to a different RadialRange it will use the default which is Gauge.RadialRange.RADIAL_300

Here you could see the different gauges for the different RadialRanges...

These are all different types of gauges that are available in the JFXtras-labs project. Now i will give you an overview of all FrameDesign, BackgroundDesign, PointerTypes, KnobDesigns and ColorDefinitions that are available at the moment.

FrameDesign:

BackgroundColor:

Because the ImagePattern will be available from JavaFX 2.2 you won't find any pattern based background colors like Carbon or PunchedSheet in the JFXtras-labs gauges at the moment. But as soon as JavaFX 2.2 will be available you will find additional BackgroundColors in the lib.

PointerType:

KnobDesign and KnobColor:

ColorDef:

I think that's enough gauges for today right...

So like i mentioned in my last post already the JFXtras-labs project is really work in progress and things might change very often. I try to keep the api as stable as possible but even there might be changes in the future.

Therefore it's a good advice to clone the github repo and build the latest snapshot version by yourself to make sure you will benefit from the latest developments.

So that's it for today, i hope it was not too boring...

keep coding...

JFXtras Series: LCD control

Hi everyone, this post will be the first of a series about the controls in the JFXtras-labs project. This goal of this project is to provide those pieces that developers might need in their day-to-day work but that are currently missing from JavaFX.

Please find more information about the JFXtras project and it's sources here.

I ported many of the controls from the SteelSeries Swing component library and tried to improve their look and feel if possible. Today I will talk about the Lcd control which is one of my favourites. Compared to the Swing version the JavaFX version has some additional features that will be explained later.

First of all a little image of all the available designs of the Lcd control.

As you could see I've spent some time creating some new designs which was really great. Each lcd shows the name of it's LcdDesign in the title so that you could easily figure out which you like most.

In addition to the new designs I've also added different fonts that you could choose to visualize the value. So here they are...

And again each LCD shows the used LcdFont in it's title. At this point i have to say i big THANK YOU to Volcano Type that gave me the Bus font for free and gave me the permission to add it to the JFXtras project.

But there's more to show about the Lcd control...

Now it's possible to show the last shown value in the lower part of the Lcd control which looks like this...

That's nice but what if i would like to see the min- and max-measured value too ?

No problem, here you go...

In the upper left corner you will see the min-measured value and in the upper right corner the max-measured value. Hmm, you need the exact min- and max-measured values ? Of course you could define this too...

All right that's the number stuff but what about title and unit? Need them? Here you go...

That's better but what about a threshold value...could I define one and what happens if the value will exceed this threshold ?

Of course you could define a threshold and if the current value will exceed this threshold there will be a little indicator in the lower left corner like on the following image...

This little indicator is blinking to grab your attention. In addition you could also define that the whole value should be blink too by using some bindings etc.

The last feature i would like to show is the display of the used number system.

As you could see it's possible to switch the display to different number systems which might be usefull for one or the other.

At least I would like to give you a short info about the internal structure of the gauge controls. 

Not all controls in the gauge package are derived from the Gauge class, so here is a list of the controls that are derived from the abstract Gauge

• Radial
• RadialHalfN
• RadialHalfS
• RadialQuarterN
• RadialQuarterE
• RadialQuarterS
• RadialQuarterW
• Linear
• Lcd

All of these control are using two models internally, a GaugeModel that holds the gauge data like value, threshold min- and max-measured value, min- and max-value etc. and a StyleModel that holds all the visual data like design, color, visibilities etc.

To create these gauges I've tried to be as compatible as possible and created builder classes. To create a lcd gauge you could use the GaugeBuilder like follows

Gauge lcd = GaugeBuilder.create()

                        .gaugeType(GaugeBuilder.GaugeType.LCD)

                        .lcdDesign(LcdDesign.DARK_AMBER)

                        .prefWidth(200)

                        .prefHeight(85)

                        .build();

which will lead to this...

But because the Lcd control is a bit different from the other Gauge controls it has it's own builder LcdBuilder which you should use because it offers more features. Using the LcdBuilder would look like this...

Lcd lcd = LcdBuilder.create()

                    .design(LcdDesign.DARK_AMBER)
                    .prefWidth(200)
                    .prefHeight(85)

                    .build();

which would lead to the same result as before.

Keep in mind: 

Like it's mentioned on the JFXtras page the whole project is work in progress and things might change very often at the moment. Feel free to file issues at the related github page or contact me if you have ideas on how to improve the controls.

That's it for the Lcd control, I hope you like it as much as I do and if not...I don't care... ;)

So play around with this stuff and let me know your feedback.

keep coding...

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

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...

SteelSeries 3.9.6

Glow with the flow...
Finally i was able to finish another release of the SteelSeries component library and again there's lot's of new stuff in here.


First of all i have made many many many changes in the code where i did not add features but only replace all full classified class descriptions by their related import statements. That tooks a lot of time and i'm sure that there are still some in there.
In addition i have also changed the placments of the braces to more common format that the open braces are placed on the same row and not in a new one. But that's only for those of you who read the code...


In addition i moved from trident animation library 6.2 to version 6.3 that you could get here.


No 3.9.4 and 3.9.5 release ?
You might ask yourself where are the 3.9.4 and 3.9.5 releases? Well the 3.9.4 was ready to go and when i took all the screenshot for this post i figured out that i missed something that i would like to add to this release so i added the feature (which was really small) and created another release which was 3.9.5. But that's not enough, again two bugs appear in the last minute and so it came finally to 3.9.6


So let's start with the news...


NO NO_FRAME:
I removed the FrameDesign NO_FRAME from the library because it was not really needed anymore. One should use setFrameVisible(false) instead.




NEW LCD COLORS:

On the image you could see the new LcdColors in 3.9.6 which are named DARKBLUE_LCD, LILA_LCD, BLACKRED_LCD and DARKGREEN_LCD.

Because i gave some love to the DisplaySingle component i have more to show here...

LCD THRESHOLD INDICATOR:

All components that contain an LCD now supports the minValue, maxValue and threshold property. And if the current value exceeds the maxValue, a little indicator on the lower left corner of the lcd display will appear and visualize that the current value is out of range.

During a talk with my future colleagues i figured out that it might make sense to use an lcd itself to indicate the current value. In a gauge i could display sections but in an lcd what could i change to visualize the current value ???

Right the complete color of the lcd...

LCD SECTIONS:

This means one could define now an array of Section objects and pass it to the DisplaySingle component. If the current value is in the range of a section the complete display will change it's color related to the color that is defined in the active section. Please keep in mind that this feature works best on the LcdColors BLUE2 (image above), GREEN etc. which means all monocolored LcdColors (without a glass reflection effect).

Another nice feature of the DisplaySingle that is new in this release is the QualityOverlay feature. In principle it's similar to the Sections feature that i mentioned before but in this case i use some kind of a progressbar to visualize the quality of the current value. But let's have a look...

LCD QUALITY OVERLAY:

You could imagine that this feature is only useful in special usecases but if you need it it's now available... :-)

When i was in Basel at Canoo, Dierk König mentioned that the threshold led might be to small to be recognized when not in front of the monitor and we discussed ideas on how to improve...

GLOW:

If you take a closer look at the gauges above you will figure out that there is an additional frame on the inside of the gauges. This frame could be made visible by using setGlowVisible(true). And if you use setGlowing(true), it will use the current glowcolor and visualize it like this...

This might be useful to visualize a certain value or threshold or whatever...

By the way...to come back to the LCD one more time...it supports the glow too... :-)

On the radial gauges you will find a new PointerType which is TYPE10. This type of pointer was created to be used on very small gauges, where the standard pointers are simply too small, so it looks like this...

POINTER TYPE 10:

On the image above you could see the new pointer type and to show you the difference i created a small gauge with the new and with a standard pointer.

Well the next new things are related to the BackgroundColor of the gauges and i have to say that the first of the following new BackgroundColors does not really fit to a gauge but someone asked for it and here we go...

LINEN BACKGROUND:

NOISY_PLASTIC BACKGROUND:

The idea for the NOISY_PLASTIC came from Wolfgang Zitzelsberger of Jyloo Software (creator of the Synthetica LAF) and i saw it on their blog. I tried to get mine as good as theirs but i think their texture looks still better.

As you can see you could define the color of the texture and this is another new feature in this release, called TextureColor. The TextureColor is a standard Color that could be set and will be used to colorize the LINEN, BRUSHED_METAL and PUNCHED_SHEET texture.

Here are some examples of BRUSHED_METAL...

and PUNCHED_SHEET:

Well with the PUNCHED_SHEET texture it's a little bit different because in the current version of the library the texture will be created in an enum and will be used on every gauge. This means changing the texture color e.g. to red will change the texture in all gauges that are using the PUNCHED_SHEET texture.

The next thing that is available now is an additional LED which could be configured by the user, so it's called userLed. This LED will not be used by the library so you could set it visible, set on or off and let it blink. Of course one could define the color of the userLed.

USER_LED:

So if you are in the need to have an additional indicator for whatever value, you could now use the userLed feature to visualize it.

Another new thing is the highlighting of Sections and Areas in the gauges. This means if the pointer is over a section/area that contains the current gauge value, the section/area will be highlighted.

HIGHLIGHT SECTIONS / AREAS:

In the left column on the above image you see the behaviour that you might know already, it simply shows the sections/areas that you have defined.

In the middle column you see that the green section/area is brighter than the other sections/areas because i switched on the hightlightSection/highlightArea feature of the gauges. 

There is also the possibility to show only the highlighted section/area which you could see on the right column. To achieve this behaviour you just have to call setSectionsVisible(false) and setHighlightSections(true). The same will work for the areas too.

Now we are coming to an end...

DESIGN SETS:

The last new feature is the possibility to define so called DesignSets (2 for each gauge) and toggle between those DesignSets. So you might ask yourself for what this might be useful and here is the answer to it...

If you use a dashboard with gauges on a notebook to visualize data and you have to use the notebook outside you will define the colors of the gauges in the way that it is good readable. If you now go back inside a dark house the colors of the gauges might not fit anymore to the new surrounding brightness.

Or if you would like to use the dashboard by day and night you might need different colors for your gauges.

For reasons like that i have added the DesignSet which mainly contains the colors/designs of the frame, background, pointer, knobs, lcd and led. You could either toggle between design1 and design2 or you could call setActiveDesign() with the gauge and the design you would like to set.

Here is the code to define a DesignSet:

DesignSet night = 
            new DesignSet.Builder().frameDesign(FrameDesign.BLACK_METAL)
                                   .backgroundColor(BackgroundColor.BLACK)
                                   .lcdColor(LcdColor.BLACK_LCD)
                                   .knobStyle(KnobStyle.BLACK)
                                   .color(ColorDef.RED)
                                   .build();
DesignSet day = 
            new DesignSet.Builder().frameDesign(FrameDesign.SHINY_METAL)
                                   .backgroundColor(BackgroundColor.WHITE)
                                   .lcdColor(LcdColor.STANDARD_GREEN_LCD)
                                   .knobStyle(KnobStyle.SILVER)
                                   .color(ColorDef.BLUE)
                                   .ledColor(LedColor.BLUE)
                                   .build();
        
radial1.setDesign1(day);
radial1.setDesign2(night);
radial1.setActiveDesign(radial1, night);
        
radial2.setDesign1(day);
radial2.setDesign2(night);
radial2.setActiveDesign(radial2, day);

I used the builder pattern to create the DesignSet so you can decide which kind of parameters you would like to store in your DesignSet.

And that's would it would look like...

Well that's it for 3.9.6, so i hope you find one or two useful new things for you in this release, which is available as binary here on the page or you could get the source from project Kenai. You also find the SteelSeries lib on Maven Central, if you search for "SteelSeries"

So keep coding...