Friday, August 31, 2012

Fun Dashboard gauge

Hi there,

today I would like to share with you a little fun project I created during the last few evenings. The gauges I have created for the SteelSeries and JFXtras libs are not really usable for a management dashboard because they are too technical. 
Therefor I always wanted to create a gauge that looks more like the Oracle ADF radial gauge component (you could take a look here). This radial gauge is not as shiny but does work well on dashboards and it looks nice.
I thought with the power of JavaFX it should be relatively easy to create such a gauge and gave it a try.
And the result is not too bad as you could see on the next screenshot...

On the left side you see the original ADF gauge and on the right you see my JavaFX version of it. My version has not half of the features that the ADF gauge has to offer but that was not the intention. I just would like to see if it is possible to create a gauge that looks similar to the original ADF gauge and that's it. 
You might have already recognized that on my gauge the shadow of the pointer and center knob is different from the ADF gauge which I think is wrong in the orginal (first I created it so that it looks the same but after all the lighting looks more consistent in my version now).

Please note:
This project is just a proof of concept and not meant to be a copy of the ADF gauge !!!

I simply took some code from the JFXtras gauge, created a new skin with Adobe Fireworks and put all that stuff together to this control. The fireworks file I used to create the gauge looks like this...

If you are interested in the code, feel free to fork it at github.
The code has no package information which means you have to adjust the -fx-skin variable in the css file after you have added the files to a package. You will find the following files in the repo

  • dashboardgauge.css               Style
  • DashBoardGauge.java              Control
  • DashBoardGaugeBehavior.java      Behavior
  • DashBoardGaugeSkin.java          Skin
  • DashBoardGaugeBuilder.java       Builder
  • Model.java                       
  • Scale.java                                  
  • LinearScale.java
  • Section.java
  • Demo.java

So this project might also be helpful for you if you would like to create your own custom control (except you would like to see how to use the css styling which I do not use in this quick hack).

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


  1. I wish I had of known about your gauges a while back Gerrit. Then I wouldn't have spent time rolling my own ugate.org/screenshots.php I needed a gauge that allows the user to drag the gauge needle so I hacked one together by drawing it all via JavaFX code (vs actual images). So, it is very sketchy to say the least. BTW, your gauges at JFXtras are very nice!

    1. I have to say your app looks nice. I played around with the touch API last week and it's just a few lines of code in JavaFX to be able to move the pointer of a gauge with your fingers on a touchpad. Hmm...maybe I'll release a short blogpost about later today, might be interesting.

  2. Hi guys,

    Very nice work.

    Ive used your gauges in my FreeBoard project, and I have some enhancements I can send back, if I could email you! Pls have a look at http://www.42.co.nz/freeboard, and contact me at robert at 42.co.nz

    Thanks Rob