Friday, October 14, 2016

Friday Fun XLI


Today I'm a bit late but it's still Friday and so I have some control for you again...
The first time I saw such a control was after I've updated my iPhone to iOS 10. In that release Apple added a sleep timer to the Clock app and this sleep timer looks like follows...

I can't really tell you why but somehow this control looks nice. In this case the use case is very specific but I thought such a control could be fun to use as a time selector. So my idea was to create a control that makes it possible to define a start- and an end-time where the possible range should be within 24 hours.
And this is the biggest difference between Apple's and my control, mine has double as many hours to select.
Well, long story short, here is a litte screenshot of the control...

Because I don't use it as a sleep timer I modified the start and stop icon to a simple triangle for start and a rectangle for stop. This icons are defined in the css file where everything else is done in code.
And to give you an idea how it looks in action here is a little screen video of it...

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

That's it for keep coding...

Friday, October 7, 2016

Friday Fun XL

And here we go again...
Today I have another component for you which is a bit more than a simple component. For JavaOne I've created a Weather widget which I used for Anton Epple's and mine "Hack your brush" session and I thought some of you might be interested in the code for that widget.

To get the weather widget running you will need an API key for Dark Sky and for MapQuest. Both vendors offer a free plan with limited no of requests per day.
Here are the links to get your API key:

The Dark Sky key is needed to get the weather information for a given location (defined by latitude and longitude) and the MapQuest key is needed to geo code and reverse geo code addresses and locations (in case you don't know the latitude and longitude of your location). If you know the latitude and longitude of your location you won't need the MapQuest key. In this case you can create a Location object as follows:

Location home = new Location(LATITUDE, LONGITUDE, "Home");

If you don't add the the name string for your location the app will try to lookup the name of the city by using the mapquest reverse geocoding feature.
In the current version you need to set bot API keys as environment variables on your system in order to get WeatherFX running. You could also replace the code in the ApiKeys class with the following snippet to get it running:

Current version:
public class ApiKeys {
    public static final Optional<String> DARK_SKY_API_KEY = Optional.ofNullable(System.getenv("DARK_SKY_API_KEY"));
    public static final Optional<String> MAPQUEST_API_KEY = Optional.ofNullable(System.getenv("MAPQUEST_API_KEY"));

Modified version:
public class ApiKeys {
    public static final String DARK_SKY_API_KEY = YOUR_DARK_SKY_KEY;
    public static final String MAPQUEST_API_KEY = YOUR_MAP_QUEST_KEY;

If you change the code in the ApiKeys class you also have to replace all calls in and from 




So I've stripped the WeatherFX stuff out of the demo and now I'm able to give it to you. Here is what it looks like...

The following data will be shown:

  • City name (either set manual or reverse geocoded)
  • Date and current time
  • Current weather condition
  • Current temperature
  • Current pressure
  • Current humidity
  • Current windspeed
  • Weather forecast for the next 5 days incl. Weather condition, min- and max-temperature
But there is much more information in the response, I only show a little part of it to avoid overloading the UI. The information that is available can be found at 

The weather will automatically be updated every 15 minutes from the Location class and the free developer API key from Dark Sky allows you to request the weather information 1000x each day which should be more than enough.
The background of the panel can be styled by adjusting the -fx-background-color setting in the .weather-panel selector in the weatherfx.css file.
The WeatherPanel is the main widget that you can use your JavaFX application. Instead of using existing icons like the WeatherIcons from Ikonli I've decided to create my own icons. This icons are Regions that will be styled using CSS.
I see this widget as a little demo that shows how to create a weather widget but because I just created it for a demo there is a lot of room for improvements :)

Feel free to fork the code as always on github.

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

Thursday, September 22, 2016

Thursday Fun XXXIX


This week was JavaOne in San Francisco and it was a always :)
During the conference my friend Todd showed me some visualization framework that creates some kind of dashboards where one part of the dashboard was a world map.
When I saw that world map I thought it would be nice to have an interactive world map as a JavaFX control.
So I've created one and here it's what it looks like...

The map is based on SVGPath elements and to resize the map correctly I use the ScalableContentPane from Michael Hoffer's amazing VWorkFlows framework.
Each country could also hold a value which might be useful for some kind of data visualization.

If you are interested in the code you will find it as usual on github.

That's it for enjoy the upcoming the weekend and...keep coding :)

Friday, September 2, 2016

Friday Fun XXXVIII

Hello again,

Today it's just a short blogpost about another little fun component that I've found on the web. In principle it's just a button that could be fun using it as a submit button. Here is what it looks like...

I thought that might be fun to implement in JavaFX and here you go...
In the implementation is room for improvement because the progressbar does not really reflect the progress it takes to download something. So if you would do it right, the progressbar would be updated dependent on the current process. Here it is simply part of the animation.
After the Java BBQ last weekend I've decided to add some of the mentioned improvements and now the behavior is as follows. You can click the button and after that it will wait for updating the progress (0.0 - 1.0). If the progress reaches 1.0 the checkmark will appear and the button return to it's start look.
I've added a method called setFailed() which will show a cross and change the button color to red before it will return to it's start look.
Nevertheless the component is fun and here is a little video that shows my version in action...

And like always the source is available on github.

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

Friday, August 26, 2016

Friday Fun XXXVII


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 not hesitate to participate...

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

Friday, August 19, 2016

Friday Fun XXXVI


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.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 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 here is the gauge from the tweet...

...and what should I 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...