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

Beach coding...

Aloha everyone,

back home after two weeks in Greece being completely offline (I had to promise my wife that I do not take any electronical equipment with me). Feels good to be connected again.

Because I had no electronic device with me I decided to take my Devoxx notebook and a pen with me. And in fact I've found some time to do some beach coding and here is the result...

As you could (hopefully) read it's about an elliptical gradient. This was something I would like to do for a while and now finally did it. Unfortunately it was not as much work as I first thought.

The biggest challenge was to remember some mathematics without the chance to check it on the web...but as I've transfered the "beach code" to real java code and the result I've got was like this...

Again I have used the WritableImage and PixelWriter feature of JavaFX 2.2 to generate this elliptical gradient. Sometimes this elliptical gradient could be useful to visualize lights etc. so it's up to your creativity...

I've compared the gradient to the elliptical gradient that could be generated in Adobe Fireworks and it seems that they are a bit different. I did not found the time to figure out the details but as soon as I know I will let you know.

The code to create this gradient is really simple, you loop over each pixel in the WriteableImage and simply check if the current point is within the ellipse or not. If it is in the ellipse you just simply calculate the distance from the center and normalize it to one. The result could be used to lookup the color in a given gradient.

This is the code to generate a simple two color gradient...

Stop[] stops    = {

  new Stop(0.0, Color.RED), 

  new Stop(1.0, Color.BLUE)

};

int     width   = 500;

int     height  = 200;

double  a       = width / 2.0;

double  aSquare = a * a;

double  b       = height / 2.0;

double  bSquare = b * b;

WritableImage raster      = new WritableImage(width, height);

PixelWriter   pixelWriter = raster.getPixelWriter();

double isInside;

for (int y = 0 ; y < height ; y++) {

  for (int x = 0 ; x < width ; x++) {

    isInside = ((x - a) * (x - a)) / aSquare + 

               ((y - b) * (y - b)) / bSquare;

    isInside = isInside > 1 ? 1 : isInside;

    Color color = interpolateColor(stops[0].getColor(), 

                                   stops[1].getColor(),

                                   isInside);

    pixelWriter.setColor(x, y, color);

  }

}

// now raster contains the following gradient

A the end raster contains the following image... 

The code of the interpolateColor() method is like follows...

private Color interpolateColor(Color c1, Color c2, double frac) {

  frac = frac < 0 ? 0 : (frac > 1 ? 1 : frac);

  double red   = 

      c1.getRed()+(c2.getRed()-c1.getRed())*frac;

  double green = 

      c1.getGreen()+(c2.getGreen()-c1.getGreen())*frac;

  double blue  = 

      c1.getBlue()+(c2.getBlue()-c1.getBlue())*frac;

  double alpha = 

      c1.getOpacity()+(c2.getOpacity()-c1.getOpacity())*frac;

  return new Color(red, green, blue, alpha);

}

In the code you could download further down I've implemented a version that is able to create multicolor gradients too. This code is also part of the JFXtras labs util package.

Grab the source here.

So that's it for today...nothing special but again fun...keep coding...