Friday, August 26, 2016

Friday Fun XXXVII

Aloha,

This time I have another fun component for you...well it's not really one component but more a container plus a component.
Last weekend I was skimming the web for some inspiration and stumbled upon an animated card navigation demo which you can find on dribbble.
I don't really know why I chose this card navigation thing because I have no use for it but I liked the challenge to create it in JavaFX :)

So here is a little video that shows my implementation...



As you can see my implementation has a little bit different behavior (esp. after one card was selected my cards move out to the right in parallel where in the original demo one card after another moved out to the right). In the beginning my version looked absolutely identical to the demo but somehow I did not like the animation and changed it to the current version.

In principle we have two components here

  • Card
  • CardBox

The Card class has a title and it has an AnchorPane where you can add your own content like follows:


Card card = new Card("My Card");
card.getContent().add(new Button("My Button"));

Instead of adding a Button you can add whatever JavaFX node you like and you can adjust it by using the static methods in AnchorPane:

  • AnchorPane.setTopAnchor(NODE, DISTANCE)
  • AnchorPane.setRightAnchor(NODE, DISTANCE)
  • AnchorPane.setBottomAnchor(NODE, DISTANCE)
  • AnchorPane.setLeftAnchor(NODE, DISTANCE)

The other class we have is the CardBox which extends StackPane. The CardBox also has an icon (which again is implemented using Ikonli) on the upper left corner which reacts on mouse clicks. If you click it the CardBox will show you all Cards it contains and you can select one Card by clicking on it.
As soon as you select a card all other cards will move out to the right and the selected Card will fill the whole area of the CardBox.

I guess that's it already for today, maybe you'll find this Card navigation menu useful and if you would like to have the code, feel free to fork it on github.

Oh just as a reminder...tomorrow the Java BBQ will happen so just in case you have time and would like to meet...do not hesitate to participate...

Otherwise enjoy the upcoming weekend and...keep coding :)

Friday, August 19, 2016

Friday Fun XXXVI

Aloha,

back from my vacation I've found a nice little menu control on the web and thought that might be a good candidate for my next Friday Fun component.
It's not really something special and it only took me last sunday morning to create it but it's fun :)
To give you an idea here are two screenshots that show the menu in open and in closed state...




So it's a simple button and when you press this button it's outer ring will grow to the menu which can contain up to 4 menu items.
The best usage for this control might be on a mobile application where you can put it on the bottom. The menu itself is translucent so that you can see the background shining through.
For the icons I make use of the really nice icon library called Ikonli of my colleague and friend Andres Almiray. The Ikonli library contains a lot of different icons but I only added the Material and MaterialDesign icons to the control. So if you would like to use for example the Fontawesome icons you need to add the appropriate dependency to your build.gradle e.g.

compile 'org.kordamp.ikonli:ikonli-fontawesome-pack:1.6.0'

Please find more information about the supported icon packs here.
The following code snippet will show you how to set the menu up...


FunMenu funMenu = new FunMenu();

funMenu.setItem1IconCode(MaterialDesign.MDI_CALENDAR);
funMenu.setItem2IconCode(Material.GROUP);
funMenu.setItem3IconCode(Material.MAIL);
funMenu.setItem4IconCode(Material.FAVORITE);

funMenu.setOnItem1MousePressed(e -> System.out.println("Icon 1 pressed"));
funMenu.setOnItem2MousePressed(e -> System.out.println("Icon 2 pressed"));
funMenu.setOnItem3MousePressed(e -> System.out.println("Icon 3 pressed"));
funMenu.setOnItem4MousePressed(e -> System.out.println("Icon 4 pressed"));

As you can see it's really easy. When clicking an item the menu will automatically go back to the closed state.

You can style the menu by using CSS, here is the default CSS file so that you know what you have to override in your custom CSS file. (to be honest I was to lazy to create styleable properties for the parameters...sorry :) )...


.menu {
    -fx-background-radius: 1024;
    -fx-background-color : #ffcb4d65;
}

.menu-item {
    -fx-background-radius: 1024;
    -fx-background-color : transparent;
}

.menu-item-icon {
    -fx-icon-color: white;
}

.rotating-button {
    -fx-background-radius: 1024;
    -fx-background-insets: 0;
    -fx-background-color : #ffcb4d;
}

.cross {
    -fx-scale-shape     : true;
    -fx-shape           : "M 29 23 L 29 29 L 23 29 C 21.3431 29 20 30.3431 20 32 
                           C 20 33.6569 21.3431 35 23 35 L 29 35 L 29 41 
                           C 29 42.6569 30.3431 44 32 44 C 33.6569 44 35 42.6569 35 41 
                           L 35 35 L 41 35 C 42.6569 35 44 33.6569 44 32 
                           C 44 30.3431 42.6569 29 41 29 L 35 29 L 35 23 
                           C 35 21.3431 33.6569 20 32 20 
                           C 30.3431 20 29 21.3431 29 23 Z";
    -fx-background-color: white;
}

Here is a little video that shows the menu in action...



And if you are interested in the source code you can find it on github as always.

In principle that's all for today...so keep coding... :)

Friday, July 29, 2016

Friday Fun XXXV

Hi there,

Well I could not withstand to create another Friday Fun control before my vacation which is another little gauge that might be useful for one or the other dashboard.
Last weekend I saw a similar gauge on a tweet and thought by myself that should be an easy one...so here is the gauge from the tweet...




...and what should I say...it was easy :)

Here is a little screenshot of my version...



This is not really something special but I think it might be useful. So on the outside you see what I call sections (green, yellow and red) and the bar that represents the current value of the gauge will always be drawn in the color of the current section.
If you switch off the visibility of the sections (setSectionsVisible(false)) the sections will disappear and the bar will be drawn in the barColor.
You could add the sections by calling the setSections(Section... sections) method or add single sections by calling the addSection(Section section) method.

And if you would like to see it in action, here is a little video..



As I said nothing special but if you are interested in the code you can find it on github as always.

That's it for today, so enjoy the summer and keep coding...

Friday, July 22, 2016

Friday Fun XXXIV

Aloha,

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

Friday, July 8, 2016

Friday Fun XXXIII

Aloha,

Today I just have a little control that I want to share with you, it's not really something special but sometimes could be useful, I named it ChargeControl. It could be used to visualize the charge of a battery, signal strength or goal reached etc.
The really nice thing about this control is that I wrote it in 30 minutes which simply shows how effective it can be to use JavaFX (if you know what you are doing ;) ).
So here is what it looks like...


As you can see it's not really amazing but it works which was the most important thing. Again I make use of Medusa for the model and one can set values from 0.0 - 1.0.
This control is really light-weight because it only contains Regions that are styled by CSS which makes the amount of code to realize it really small.

Well what should I say...I guess that's it already again and if you are interested in the code you will find it as always on github.

Enjoy the upcoming weekend and do never forget...keep coding ;)

Friday, July 1, 2016

Friday Fun XXXII - Old School Baby...

Hi there,

Two weeks ago someone pinged me on twitter and came up with an idea for another Friday Fun control and last weekend I've found some time to implement it.
We are talking about a DialPlate...I hope you are old enough to remember that, for those who not...here is a little picture to give you an idea...



I liked the idea even if I have no clue for what it might be useful :)
So here is the control I came up with...



As you can see it's really just the dialplate and because I had no idea what it might be useful for it also fires events when you dial a number so that you could think about using it as a dialer to create numbers for whatever. Because I was running out of time I did not implement the correct behavior when rotating to the left (in which case it should not rotate at all) but feel free to fix it :)

To give you an idea what it looks like in action, here is a little video that I've recorded...



And as always if you are interested in the code, feel free to fork it on github.

That's it for today, short but better than nothing and don't forget...keep coding... :)

Friday, June 3, 2016

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