Friday, June 15, 2012

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

19 comments:

  1. amazing, Javafx has a lot of potential

    ReplyDelete
  2. Very tasteful. Need to find a problem for this solution! :)

    ReplyDelete
  3. Hi!

    In the radial gauge, how do i change the size of the tickLabels?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Hugo,
      The tick marks are auto sized at the moment :(
      In what situation do you need to size them ?
      Cheers,
      Gerrit

      Delete
    2. I need to make a small gauge (160x160) but in that size the tick labels are too hard to visualize, so, i need to enlarge the size of them to fit in the gauge.

      Very thankful for your help :)

      Delete
    3. Well I agree, at that size the tick marks are really small. I'm traveling at the moment but will take a look at it later in the hotel. I'm thinking about some kind of threshold for the size of the gauge where it will increase the size of the tick marks if the size of the gauge will be lower than the threshold.....just a quick thought...
      Cheers,
      Gerrit

      Delete
    4. I look forward for the good news!

      Saying again, very thankful for your help!

      Delete
  4. Hi, your gauge are really amazing.

    I'm experimenting with 4 linear gauges in a page, updating their values each second, and I found a little bug: the lcd number inside the gauge disappear sistematically after running for 12-15 seconds...

    ReplyDelete
  5. Great post ! This blog is awesome !

    I was wondering if there is a way to get or to see the code for the JavaFX Radial Menu: http://www.youtube.com/watch?v=nxw4H0204KA&feature=plcp ? I've search this on this blog but I didn't find anything about this...

    ReplyDelete
  6. Hi Gerrit,

    Are the Horizon and AirCompass controls that you mentioned here (http://harmoniccode.blogspot.com/2011/03/steelseries-38-slim-down-release.html#comment-form) in the JFXtras project? I need to use both of them in a JavaFX project I'm working on so I was hoping to use JFXTras if they're in there.

    Thank you!
    Diana

    ReplyDelete
    Replies
    1. Hi Diana,
      Nope, they are not part of the JFXtras but because you are not the only one that asked for it, I've decided to port them to JavaFX (at least I've started with the AirCompass). Please find it here: http://harmoniccode.blogspot.de/2014/04/just-because-you-asked-for-it.html
      Cheers,
      Gerrit

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Hi Gerrit,

    I was wondering if there is an example of this that is working with JDK/fx 8 :)
    I updated the jfxtras-labs to version 8.0-r1 but the GaugeBuilder is not in it any more... how do I construct these gauges now?

    I love your gauges, and used them with great pleasure in jdk 7 :)

    Cheers,
    Pim

    ReplyDelete
    Replies
    1. Hi Pim,

      The gauges are not available in jfxtras version 8 any longer. The reason for removing the gauges from jfxtras was the internal structure of the controls that I was not satisfied with. I've started new gauges that won't be that resource-hungry like the old ones in my Enzo project.
      Cheers,
      Gerrit

      Delete
  9. Hi, Gerrit
    Your gauge are really amazing
    That is the exact thing I need in my javaFX project.
    I'm having a hard time to get it work.
    My project does not use Maven or Gradle I need to add jar to library
    Which jar I have to include to build (Radial) Gauge as in this page above example code shows?

    Thank you

    ReplyDelete
    Replies
    1. Hi Ragnar,
      As you can see this post is from 2012 which means it was based on JavaFX 2 and JDK 7. I could not recommend to use this control and it would not even work in JDK 8. So please take a look at my Enzo or Medusa project where I also have gauges which will work in JDK 8.
      The Enzo and Medusa jar files can also be found on bintray and maven central.
      Cheers,

      Gerrit

      Delete
    2. Thank you for the replay, it was very useful info for me :)
      I played around little bit with the Medusa jar and got the gauge working, very cool..
      I was wondering does Enzo or Medusa has that battery indicator too?

      Delete
    3. Hi Ragnar,
      Nope, Medusa is for Gauges only and Enzo also doesn't contain the Battery indicator. I've created a little battery control for you if you like (https://dl.dropboxusercontent.com/u/84552/Battery/Battery.jar). The jar file also contains the sources so that you can extract them and learn how to do it.
      Cheers,
      Gerrit

      Delete