Friday, June 22, 2018

A status skin for TilesFX


Last week I've stumbled upon a new idea for a TilesFX skin and found some time to implement it. It can be used to visualize 3 values incl. a text and an additional node like an icon etc.
Because it is not that easy to describe I think I better show you a screenshot :)
So here you go...

As you can see it comes with the normal title, description and text labels as usual. In addition one can set the value for the left, middle and right side by using one of the following methods

  • setLeftValue(double)
  • setMiddleValue(double)
  • setRightValue(double)

 In this case I simply use it as a counter for notifications with their category (critical, warning, information) but you can use it for whatever you like.
The text below the value can be set with one of the following methods

  • setLeftText(String)
  • setMiddleText(String)
  • setRightText(String)

The icon on top of the value can be set by calling one of the following methods

  • setLeftGraphics(Node)
  • setMiddleGraphics(Node)
  • setRightGraphics(Node)

In this case I've simply used the Indicator control that is now also part of the TilesFX library and which can be found in the addons package.
Because these methods take a JavaFX Node object as a parameter you can take either Icons, ImageViews or Controls which again can be used to visualize something.

This new skin, the Switch and Indicator control can be found in the latest TilesFX release which is 1.6.0.

As usual you can find the source code on github or if you prefer the binary just go to bintray and download it from there.
And of course you can also find it on Maven central.

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

Wednesday, May 30, 2018

Time for something new...iOS FX


Well after I did my last blog post about the iOS style switch control some people mentioned it might be nice to have more than one iOS style control available.
First I time...but I could not resist and started to create a little new side project which I named iosFX.
In principle this is a little library of JavaFX controls that more or less look and behave like the current iOS controls.
My first idea was to tweak existing controls using css and code to achieve this but after I took a closer look to the iOS controls I figured out that these controls are very special and a simple css tweak won't work.
For that reason I've decided to create completely independent controls that are based on JavaFX Regions at the moment.
So at the moment I have the following controls available...

  • IosSwitch
  • IosEntry
  • IosListView
  • IosMultiButton
  • IosSlider
  • IosSegmentedButtonBar
  • IosPlusMinusButton

The IosSwitch you already saw in my last blog post, I've just ported it to the lib. The IosListView is a simple extension of the existing JavaFX ListView.
Because a big part of the current iOS controls is used in list views I've created an IosEntry which is a control that takes a left node, a right node and comes with a title and a subtitle.
And when you take a closer look to the iOS ui controls you will figure out that a lot of controls/indicators are very similar.
For this reason I've created the IosMultiButton which is a JavaFX control that has a specific type which defines the ui.
At the moment the available types are...

  • ADD
  • DOT
  • INFO
  • PLUS

Dependent on the type also the behaviour is different, e.g. if the type is CHECKBOX one can toggle the control by clicking on it.
Instead of using the standard JavaFX events I've implemented my own events to be able to make use of the ShadowField properties. So the controls fire IosEvents which have different EventTypes that are...


With this event types (and there will come more) one can use these controls as normal JavaFX controls.

You will find a Demo class that shows more or less everything that is available right now and at this moment it looks like follows...

If you drag the 1st or the 4th entry to the left you will see that it also shows the Delete button that is available in iOS. By dragging more than half of the width the Delete button will fill the complete row and by releasing the mouse the entry will be deleted.

That's all I was able to implement right now but there will be stay tuned... :)

Here is a little video of an older version...

As always the source code is available on github and you are more than welcome to help out creating more iOS controls. The final goal will be to create a Gluon app that looks more or less like a native iOS app...hopefully ;)

That's it for keep coding...

Monday, May 14, 2018

Monday fun component... ;)


I know it was a long time without a new blog post but I was busy with a project that took all my time. But last week I've decided to always reserve some time to focus on my favourite part...JavaFX :)
When I was playing around with my iPhone I saw that the check box in iOS still is something that I wanted to do again. This is not the first time I've created a check box (as you can see here and here) so I thought...why not... :)
For those of you that are not familiar with the latest iOS check box, here is a little screenshot from my iPhone to give you an idea...

The nice thing about that control is that you don't need an additional text as on the original JavaFX check box. So I've decided to simply create a Region based control that only contains the switch itself.
So the control is not really complicated to do and it just took me around 45 min to create it. So here is a little screen shot of my version:

I've tried to make it look like the iOS original as good as I could. It comes with only 3 properties which are:

  • checked
  • checkedColor
  • showOnOffText

Like I said nothing really special but it was fun to create it and maybe it will be useful for one or the other.
As always you can find the source code on github.

There is also a little video which shows the control in action...

In the comment from Wim Deblauwe he mentioned that there is a specific press and hold behaviour in iOS for the switch. So the latest version on github also contains this behaviour.
In addition the control was renamed to IosSwitch which makes more sense. 

That's it for keep coding...

Friday, February 2, 2018

Friday Fun LIX - Parallel Coordinates Chart

Aloha from Singapore one more time,

Today I have a chart for you which was a bit tricky to implement. It's a so called parallel coordinates chart and to be honest it doesn't look really fancy at a glance but it is really neat.
If you have no idea what it looks like here is a little image that show one...

First it looks like some kind of simple line chart but it's not. With this chart one can compare objects in a nice way. So let's assume you would like to compare cars and you would not only to compare one property of the cars like horsepower but a set of properties (e.g. cylinder, horsepower, acceleration, weight, consumption, etc.) and the whole comparison should be in one chart.
In this case the parallel coordinates chart ist perfect. Here is a little screenshot of my implementation that uses this example...

In this chart each line represents one car (e.g. the blue line represents my Smart Roadster Coupé and the purple line represents the Bugatti Veyron...a fair comparison right ;) ).
Now the interesting part about that chart is that it makes it easy to find similarities between cars or that you can figure out trends easily.
There are tons of possibilities on how to extend this chart but because I do not have the time for that I've just added two things that I've found very nice:

  • Dragging axes
  • Filter specific lines

So you can imagine that the order of the categories has a big impact on the expressiveness of the chart and therefor it is possible to drag a category by dragging the header of a category to another position...

Here I've simply moved some categories around to show the effect of the different category order.
The filtering of specific lines (cars in this example) works similar. Here you simply click close to one axis and drag down and you will see that a little rectangle will be drawn that selects the lines in the range of the rectangle.
If you release the mouse button it will show you something similar like follows...

As soon as you select some lines all other "unselected" lines will be drawn in light gray (configurable) and the selected lines will be drawn in blue (configurable). In addition the names of the selected lines will be shown on the left side. 
Once you click again somewhere the selection will be removed again.
In principle that's it and I hope it might be useful for someone. As always I have no usage for it at all :)
The chart is part of my JavaFX charts library where the current version is 1.0.5 and that you can found here:

Source at github

Binaries at bintray or Maven Central

And if you would like to see it in action, here is a short screen video that I've recorded...

That's it for today, so enjoy Carnival and don't forget...keep coding... ;)

Friday, January 26, 2018

Friday Fun LVIII - Some more charts...

Aloha from Singapore again,

Today I finally managed to create some little Friday Fun components for you, so today I have two new charts for you that are part of my JavaFX charts library.
The first chart is a ConcentricRingChart that looks as follows:

Nothing really special but fun. You have a set of ChartItems that you pass to the ConcentricRingChart. The values are always normalized so that the current maximum value fills up to 100%. You can choose between different NumberFormats for the value in the bar and if you click with the mouse on a bar a little popup will show you some information on the clicked item.
In addition you can also sort the bars ascending and descending if you like and of course animation is also available. If you would like to see it in you go...

The other chart that I've created is similar which is the reason why I have two components today. This one is a ComparisonRingChart where you can compare two series of ChartItems. The first series will be shown on the upper part and the second series on the lower part. It looks like this...

The upper series goes from left to right where the lower series will be visualized from right to left. Everything else is exactly the same as in the ConcentricRingChart, meaning to say you also have the mouse interaction and the popup.
And again if you are interested in how it looks in you are...

As already mentioned both components are part of my little JavaFX charts library that you can found here...

Source Code: github

Binaries: bintray and Maven Central 

And that's it for today...cheers from Singapore and keep coding... ;)

Friday, January 12, 2018

Friday Fun LVII - Stream Charts


Here we go again...last week I stumbled upon a really nice charts that are inspired by Edward Tufte's Stream Charts. This is how they look like...

And here you can find more information about them.
The chart can be used to visualize a series of data with the variation of the data it contains over time. On each date different items of the series are stacked like in a stacked bar chart. The items are sorted by their value from bottom to top, meaning to say the items with the lowest value are always at the bottom and the one with the highest values are always on top.
To be honest I have again no use case for it but I really like the visualization. By choosing the colors wisely one could visualize dominating series over time very well.
Long story is my implementation of such a chart...

As you can see I don't have such good data as in the example above but you get the idea :)

To create such a chart I make use of my ChartItem class which has a timestamp property that is needed here to group the chart items for the visualization. The idea is to have a list of ChartItems that may also contain multiple ChartItems from the same day. The StreamChart component has a category property which can be one of the following categories:

  • DAY
  • WEEK
  • YEAR

So let's assume you have a list of ChartItems that contains data from different days and you would like to visualize the chart grouped by days you set the category to DAY.
With this feature you can define if you would like to group the given list of ChartItems by one of the above categories...hmm...hope that explanation was more or less clear :)

It might be easier to simply take a look at the source code (see links below).

In principle this chart is similar to the Sankey Plot but not exactly the same so I've started from there and created a modified version which you can see above. This chart is now part of my own JavaFX charts library which you can find here:

sources at github

binaries at bintray

Please find the demo classes for all the charts in the test package.

Well that's it for keep coding...

Friday, January 5, 2018

Friday Fun LVI - Nested Bar Charts

Aloha and a happy new year,

Today I just have a short post about some nice little bar chart which I've found last week when looking for new ideas on the web. Here is the image I've stumbled upon...

I saw it and directly understood the idea behind it because it's like a compact view of two bar charts. The big bars in the background show the sum of all inner bars (like in a stacked bar chart) and the inner bars visualize the distribution of that sum into portions. If you want to know how to realize this kind of chart in Excel you should take a look at Jon Peltier's blog where this image was taken from.

To be honest the thing that got my attention are the colors he used for this chart because they directly reminded me on the Material Design colors
And because I once implemented these colors in JavaFX I gave it a try.
Well I was surprised how easy it was to implement and finished the whole thing within 1.5h and here is a little screenshot of the result...

As you can see this kind of chart works really well with the Material Design colors. So it does not make sense to use it for everything but there might be some use cases where saves a lot of space and still transfers the information.

Because I will add this chart to my JavaFX charts library anyway I did not spend more time on implementing axis and labels but I only implemented a mouse event handler. Meaning to say if you click on an element the component will fire an event that contains the data of the selected series (the big bar) and if you've clicked on one of the inner bars it will also contain the data of the selected item.
Using this event I've implemented a simple popup that will show the selected data.

This kind of chart can for example be used to compare sales data of products per quarter or similar things, you will find something ;)

As always the source is available over at github so enjoy playing around with it.

That's it for today...I wish you a codeful year 2018...keep coding...