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