Friday, July 22, 2016

Friday Fun XXXIV


This is the last Friday Fun component before my vacation so I hope you like it :)
Tuesday I was skimming the web to get some inspiration and stumbled upon a nice little gauge at Dribbble. This is what it looks like...

The use case for such a control is really specific but I like how the designer did it and so I thought this might be an interesting control to create.
With most of the the controls I make again use of my Medusa library for the gauge model. The control itself is based on a JavaFX Region which is the easiest way to create custom controls. You just have to keep in mind that this approach is not very convenient when creating controls libraries because there is no separation of the model and the view.
For the colored areas I used the Medusa Sections and for the visualization of those sections I simply used JavaFX Path's.
The current quality indicator is just another path that will be translated, rotated and filled by the current section color.
To give you an idea how I create such controls let me show you the prototype that I created in an vector drawing prototype.

From this drawing I took all the parameters that I needed to create the control. And this is what the control looks like...

I'm not using the exact same colors as the original but I think it's close enough :)
For those of you who want to see it in action, here is a little video that shows the functionality...

This fits well where you have values that are good when they are small but not the way around which is the reason why I've added a property named reverseOrder which can be used to reverse the color scheme. Means if reverseOrder == true the colors will be from red (1) to green (10).

And that's all I have to say for today...and for at least the next 3 weeks because I will be on vacation...on Crete...yeah :)

If you would like to take a look at the code, feel free to fork it on github.

Enjoy the upcoming weekend and keep coding...

No comments:

Post a Comment