Wednesday, October 31, 2018

Another LinearGradient...

Aloha,

I was playing around with a JavaFX application for a customer and missed a functionality from the JavaFX LinearGradient. So you can define a linear gradient by defining a start and end point and fill it either proportional or not.
Well this works most of the time but if you have to create the linear gradient from code it sometimes could be useful if you simply could define an angle and a list of stops to define the gradient. So here is a little drawing that explains it a bit better:



In principle I would just need to extend the existing LinearGradient but unfortunately this is not possible :(
So I have to create a new class, in this case I named it LinearGradientD and this simply wraps a LinearGradient and takes an angle and a list of Stops as parameters.
So the main thing you have to do is to turn the angle in xy coordinates for the gradient and the code is really simple, so here it is:


private void init(final double angle, final List<Stop> stops) {
    this.angle = angle % 360;

    double angleRad = Math.toRadians(angle);
    double x        = Math.cos(angleRad);
    double y        = Math.sin(-angleRad);

    double x1 = x > 0 ? 0 : Math.abs(x);
    double y1 = y > 0 ? 0 : Math.abs(y);
    double x2 = x > 0 ? Math.abs(x) : 0;
    double y2 = y > 0 ? Math.abs(y) : 0;

    gradient = new LinearGradient(x1, y1, x2, y2, true, CycleMethod.NO_CYCLE, stops);
}

As you can see we simply calculate the xy values from the angle using some trigonometry and set the resulting xy coordinates in the wrapped LinearGradient object.
One advantage of using the angle to describe the gradient is that you can now also easily rotate the gradient as you can see in the following video:



Well I guess that's already it for today, nothing special but I thought it might be worth blogging about it.
Of course the code is available on github, so feel free to use it for whatever you need it.

So...keep coding... :)

Tuesday, October 23, 2018

Color Chooser

Aloha from San Francisco,

The last weeks I was really busy working on a customer project in JavaFX. At the moment I can't really show something but I needed an additional control which I now will open source. It is a color chooser as you can also find in some vector drawing programs.
Here is a screenshot of that control to give you an idea...


So as you can see this control is made to select a fill and a stroke which could than be applied to a shape or whatever you like.
You can switch between different color modes e.g. RGB, RGB Hex and HSL which will directly affect the three sliders. 
When choosing HSL the sliders will be used for Hue, Saturation and Luminance. I might also add HSB support but at the moment it only supports the three modes mentioned above.
You could either use the sliders or type in the values in the textfields behind the sliders. Or if you like you could also type in the color in the text field below the sliders.
In addition you can also select a color by clicking in the multi-gradient field.
For each selected color you can define the opacity by either using the opacity slider or select a predefined opacity from the drop down box besides the opacity slider.
You can define a color for the fill and one for the stroke depending on what you have selected on the top left.
The selection color (red in the screenshot) can also be defined.
Like mentioned I needed that control for a current customer project and so created it the way I need it. Meaning to say it might not directly work for you but as always you can find the code over at github, so feel free to fork it :)

Source at github

That's it for today...so keep coding... :)