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