Friday Fun XXXI

Friday...finally :)

And again time for another Friday Fun Component...and yes it is a gauge again :)
This time I've stumbled upon a gauge that again has a neat effect which is not that easy to implement. But before I start let's take a look at it, here it is...

To be honest, I don't really like this gauge. There are two things that are really not that nice...

• You can't see where the bar starts and where it ends
• It always show this quarter which is filled...seems to be a special design feature

Well but there is also one thing that I really like about this gauge, it's the fact that it uses a gradient to fill the bar.

Seems trivial right...but it's not, you might want to try to fill a doughnut like structure with a gradient and you will see what I mean.

There is no easy way in JavaFX to realize this, except you use my ConicalGradient...one more time :)

But because the ConicalGradient is not really made for dynamic changes the whole thing is not really optimal.

Just for the ones of you that don't know my ConicalGradient, you might want to read my blog post about it here.

The problem with this gradient is the fact that I create it by using the PixelWriter. This will create a new image everytime I need the gradient.

You can image that creating an image pixel by pixel could not be very fast and for that reason I restricted the animation duration to a minimum of 2 seconds for this gauge. And even with this you will see some flicker during the animation.

So please don't use this gauge for real-time data with lots of updates because you will be disappointed. But it's really nice for dashboards where the values normally don't change that often.

But now let's take a look at the result first...

And because it's fun I've add the ability to change the color...what else... :)

So it could also look like follows...

Or whatever color you like. Keep in mind that some colors fit better than others.

So what I do in the control is everytime the value changes I reset the gradient stops for the ConicalGradient and set the stroke of the bar with it. And to fix the problem with the missing start and end point of the original I've decided to simply set the angle range of the gauge to 320 degree instead of 360 degree.

With this approach you can see where the bar starts and where it stops.

To use this control you will need the medusa library version 5.+ that you can either find on github, bintray or maven central.

Well not a long post but better than nothing :)

If you are interested in the code you can find it as always on github.

As a reminder, please ping me if you would like to attend the Java(FX) BBQ :)

Enjoy the upcoming weekend and keep coding...