Friday, November 30, 2018

Friday Fun LX

Aloha,

Last monday I was up early and created a little control that I would do (again) for a long time. It is some kind of a rolling counter...well an odometer.
The whole thing was based on the JavaFX Canvas node which is great on desktop but not so good for JPro applications. 
So I thought about having a control like a single digit spinning wheel based on an ImageView. To be able to create such a control you need to create an image stripe that contains all the values you would like to "spin through".
This image has to be created every time you resize the control so you have to be aware of that. I've started with a numbering control that counts from 0-9 which means it contains at least 10 images. So far this is no problem but when I've started into an alphabetical control that counts from A-Z I had to handle at least 26 images plus an empty one if you would like to visualize a space character.
Meaning to say you should be careful when creating a lot of this alphabetical controls in a row because you will have to handle a lot of more or less big images (dependent on the size of the controls).
But long story short...here is a screenshot of the controls I'm talking about...



On top you see the Odometer control which is a simple counter that just counts up values. One can define the background and foreground colors for the digits and for the decimals independently. In addition one can define the number of digits you would like to see and the number of decimals.
On the lower image you see some combinations of the Spinner control, the upper part shows 7 alphabetical spinners in an HBox where the lower part shows the numerical spinners in HBoxes.

The Spinner control is available as ImageSpinner and CanvasSpinner with the exact same functionality just one is based on the ImageView and the other on the Canvas.

To give you an idea what it looks like I've recorded a little screen video of the controls in action...



As always you can find the source code over at github
I will also show this control next week at JavaFX days conference in Zurich.

That's it for today...so keep coding and hopefully see you next week in Zurich... :)

Sunday, November 25, 2018

TilesFX 1.6.5

Aloha,

I finally found some time to prepare another release of TilesFX. This release mainly contains fixes of different issues and one new skin.
First of all I would like to say thank's to the external pull requests that fixed two issues, it's always good to see people take over and fix things.
The skin I've mentioned is nothing that could not have done before with a custom tile skin but I saw some dashboard like apps that simply showed pictures of people on kind of tiles. Here is a little example of what I am talking about...


An so I thought this might be some nice add on to the library and was easy to do...so here you go...


Nothing really fancy but there might be some use cases for this kind of skin.
The skin takes the given image and a so called ImageMask which can be either

  • NONE
  • ROUND
  • RECTANGULAR

And this is how these ImageMasks look like...


That's all for the latest TilesFX release, I have ideas for more stuff to come but simply do not have the time at the moment...so please be patient... :)

***********************
Java 11
Another thing is porting the library to Java 11, I've started with a port to Java 11 but due to a lack of time was not able to finish this yet.
My plan was to create a new project for the Java 11 version which will be TilesFX11.

If one of you is interested and has the time he can start porting the library to Java 11.
It will be highly appreciated, so if you are interested, just ping me and we will figure out a way to work together.
***********************

The latest source code and binaries can be find at the following sites as always...

Source:    github

Binary:    bintray

Maven:    maven central


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

Wednesday, November 7, 2018

AnglePicker

Aloha,

Well it was just a question of time before I started to create a control for picking an angle as you might have guessed from my last post.
And here it is...a simple angle picker control:







You can simply rotate the knob to adjust the angle and if you double click on the control you can also enter the value directly into the text field.

The control has an angle property that contains the current angle that was set.

I needed this control for my gradient picker and thought you might want to use it too for whatever project you have :)

Watch this little video to see how it works...



So as always the source code can be found over at github

And that's already it for today...so keep coding...

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

Sunday, August 26, 2018

Medusa Morphing Clock

Aloha,

During my vacation in Greece I've saw a nice video on youtube about a DIY morphing led matrix clock. There is a nice instruction on how to build this clock over here.
If you just would like to see what it looked like, here is a little video from that clock...


When I saw the animation of the 7-Segment elements I had the idea to add this as a clock skin to my Medusa library.
Yesterday I've added a skin that shows the same behaviour so that one can now use it within Medusa.

Here is a little video of how it looks:



I did not add the colons because in my version one can define a color for the hour, minute and second digits and I had no property for the colon color. So I simply did not at them :)

Here is a little code snippet that shows how to use the new skin:

Clock clock = ClockBuilder.create()
                          .skinType(ClockSkinType.MORPHING)
                          .locale(Locale.GERMAN)
                          .hourColor(Color.web("#0288FF"))
                          .minuteColor(Color.web("#0288FF"))
                          .secondColor(Color.web("#0288FF"))
                          .time(ZonedDateTime.of(2018, 8, 26, 6, 58, 0, 0, ZoneId.systemDefault()))
                          .running(true)

                          .build();

As you can see it is used in the same way as the other skins in Medusa. It will switch to am/pm mode if you set the local to Locale.US, otherwise it will use 24h format.

The skin will be part of the next Medusa release but is already in the source code.
As always the stuff can be found here:

Source at github

Binary at bintray

Enjoy your weekend and...keep coding... 

Sunday, July 22, 2018

Rolling Gradient

Aloha,

Last week I've stumbled upon an old blogpost from 2011 where I implemented an animated progressbar in Java Swing. At that time I was fascinated by the animated progressbar in OS X.
And when I saw the animated gradient I thought by myself why not do that in JavaFX???
In Swing we have immediate mode rendering which makes these kind of animated gradients easy because you do the whole rendering on your own. In JavaFX where we have retained mode rendering (so the rendering is managed by JavaFX) you have to find a way to update the gradient fill for a node for each animation step.
My approach is as follows, the RollingGradient uses an AnimationTimer to calculate the gradient and on each modification it fires an UpdateEvent which can be used to fill a shape with the gradient. The gradient is part of the event.
If you simply would like to fill a JavaFX shape you can also set the shape in the RollingGradient and it will be filled from there.

So you could either use the event as follows:

Rectangle       rectangle = new Rectangle(200, 20);
RollingGradient gradient  = RollingGradientBuilder.create()
                                                  .firstColor(Color.rgb(250, 0, 0))
                                                  .secondColor(Color.rgb(180, 0, 0))
                                                  .smoothGradient(true)
                                                  .direction(Direction.LEFT)
                                                  .interval(Speed.NORMAL.getInterval())
                                                  .period(5)
                                                  .onUpdateEvent(e -> rectangle.setFill(e.getGradient()))
                                                  .start()
                                                  .build();

Or you can set the shape in the RollingGradient and let it do the fill as follows:


Rectangle       rectangle = new Rectangle(200, 20);
RollingGradient gradient  = RollingGradientBuilder.create()
                                                  .firstColor(Color.rgb(250, 0, 0))
                                                  .secondColor(Color.rgb(180, 0, 0))
                                                  .smoothGradient(true)
                                                  .direction(Direction.LEFT)
                                                  .interval(Speed.NORMAL.getInterval())
                                                  .shape(rect)
                                                  .period(5)
                                                  .start()
                                                  .build();

Both approaches will lead to the following output:


As you can see from the code there are some properties you can use to modify the gradient:

  • firstColor (set first color of gradient)
  • endColor (set second color of gradient)
  • smoothGradient
  • direction (rolling to left or right)
  • interval (defines the time in nanoseconds for the animation speed)
  • shape (a given shape that will be filled with the gradient)
  • period (defines the width for one color change)
  • start (when called will start the rolling gradient)

In the next example I've changed some parameters to give you an idea of what you can do:


Rectangle       rectangle = new Rectangle(200, 20);
RollingGradient gradient  = RollingGradientBuilder.create()
                                                  .firstColor(Color.rgb(88, 154, 227))
                                                  .secondColor(Color.rgb(50, 130, 222))
                                                  .smoothGradient(false)
                                                  .direction(Direction.RIGHT)
                                                  .interval(Speed.FAST.getInterval())
                                                  .shape(rect)
                                                  .period(15)
                                                  .start()
                                                  .build();

With this settings the gradient will look like follows:


And because images are boring I've recorded a short video for you that shows the rolling gradient in action...



Well that's it for today and as always you can find the source code on github.

So keep coding...