Friday, May 29, 2020

TilesFX 11.37

Aloha,

Time for some new stuff...
Last weekend I've stumbled upon some dashboards that had some interesting visualizations. The first one was a visualization of sales cycle steps that looked as follows:


The interesting part here for me is the chart where each bar starts where the last bar ended. I took a look at TilesFX but did not found something that made stuff like this possible in an easy way. So I decided to add a new skin that I called CycleStepTileskin (I know I'm not good in naming things). Here is how it looks like:


To be honest I'm not sure if this is useful but you never know right :)

The other tile I've found was nothing really special but I realized it has something that I missed in TilesFX...flags. This is what I'm talking about...


Not everyone needs flags but sometimes they come in really handy and so I was looking for flag images that I could use. Lucky me I've found free flags over at flaticon and added them to TilesFX. I've added them as enum and control.
So if you need an icon image you can now simply do something like follows:

ImageView flagImage = new ImageView(Flag.GERMANY.getImage(48));

The Flag enum has two methods to get an image, the standard getImage() method always returns a flag image with the size of 30x30 px. If you need a different size you can simply call the getImage(SIZE) method to get the flag in the size you want it.
The flag images are always square!
The other class I've added is called FlagIcon which is more or less a wrapper around an ImageView of the given image. Meaning to say it behaves like a control, so it will be resized automatically BUT it will resize the image based on the given flagSize. So if you have a flag of size 48 px and you increase the size of the FlagIcon it will get pixelated.
So if you would like to avoid pixelation you need to set the FlagSize to a bigger value but that will also increase memory consumption...so it's up to you.
In the end the FlagIcon is just a convenience class that comes in handy if you simply need a flag somewhere. You can use it as follows:

FlagIcon flagIcon = new FlagIcon(Flag.SINGAPORE, 24);

This will give you a control that shows a flag that is based on an image with 24px.

As an example of what you can do with that I've simply added a tile that shows the Covid-19 cases of some countries based on data from Mai 26th 2020. For this tile I simply used the custom tile skin and added a VBox with some HBoxes. If you are interested in how I did that, please take a look at the Demo class in the TilesFX project.



Here is a little bigger screenshot of it...


That's it for today so as always you can find the code over at github and the binary either at bintray or at maven central.

That's it for today...so keep coding and stay healthy...

1 comment: