Customize your dashboard

Aloha,

This is just a short post about the TilesFX library (github, bintray, maven) in combination with other libraries like 

• Medusa (github, bintray, maven)
• Regulators (github, bintray, maven)
• Ikonli (github, bintray, maven)

The TilesFX standard tiles are nice and might be good for most of the typical dashboard content but what if you need more than that?
Let's say you would like to see a listview or one of your custom controls on such tile...
Well for that reason I've added the CustomTileSkin which has the title and the text property of the standard tiles and which comes with an area where you can put your own JavaFX nodes.
So this is what it looks like...

As you can see the area for custom JavaFX nodes fills most of the tile so that you should have enough space for your components. If you setTextVisible(false) the area will even grow a bit more in y-direction.
To give you an idea on how to use other controls within TilesFX I've created a little demo project which you can find on github at

https://github.com/HanSolo/tilesfxdemo

If you would like to start the demo from the command line you simple can call gradle Demo on the shell as follows:

This will start the Main class of the project and will show you the following screen...

In this demo you will see nearly all of the standard tiles in TilesFX (except the WeatherTileSkin) and in addition there is also one tile that simply uses an icon from the Ikonli library, nine tiles that shows some gauges from my Medusa library and three regulators from my Regulators library.

The Tile class in TilesFX defines some colors that fit nicely to the standard tiles, so you can choose between GRAY, RED, GREEN, BLUE, ORANGE, YELLOW_ORANGE, YELLOW and MAGENTA. In addition also the standard FOREGROUND and BACKGROUND color are available in the Tile class. As you can see in the image above I made use of the Tile.BLUE color for all the Medusa gauges.

I hope this demo will help you to make use of TilesFX for your own dashboards.

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

Friday Fun XLIII

Aloha,

Today it's just a short post but I thought it might be of interest for one or the other. Two days ago the idea came to my mind that it might be fun to combine my world map control with my heat map control. To be honest I had no idea where I could use it for but I thought it might be useful for some cases.
So I was skimming the web for use cases and found a couple of them which let me create this little fun control for you.
In principle it is the world map from this post that now also contains a heat map from this post. The world map has all features as the original version, the only difference is that the hover effect and selection effect is disabled by default. But you can enable it if you like.
I was surprised how easy it was to combine both maps into one and so the whole creation took me around 30min. The harder part was to find some data that I can use to test the capabilities of the combined map. 
The problem was that I needed data that came with latitude and longitude coordinates and in the end I found a simple list that contains around 7000 cities with their latitude/longitude coordinates.
The idea of the heat map is to visualize some kind of hot spots on a map. The hot spots become bigger the more "events" are in the same area. Long story short, here are some screenshots of the same data using different heat map settings...

As you can see the visualization depends on the used color mapping (color gradient from center of an event to the outside) and the event radius (size of each event).
The code to generate the upper heatmap looks as follows...

worldMap = WorldBuilder.create()
                       .resolution(Resolution.HI_RES)
                       .zoomEnabled(false)
                       .hoverEnabled(false)
                       .selectionEnabled(false)
                       .colorMapping(ColorMapping.BLUE_YELLOW_RED)
                       .fadeColors(false)
                       .eventRadius(3)
                       .heatMapOpacity(0.75)
                       .opacityDistribution(OpacityDistribution.LINEAR)
                       .build();

Where the code for the lower heatmap looks like this...

worldMap = WorldBuilder.create()
                       .resolution(Resolution.HI_RES)
                       .zoomEnabled(false)
                       .hoverEnabled(false)
                       .selectionEnabled(false)
                       .colorMapping(ColorMapping.INFRARED_3)
                       .fadeColors(false)
                       .eventRadius(5)
                       .heatMapOpacity(0.75)
                       .opacityDistribution(OpacityDistribution.EXPONENTIAL)
                       .build();

If you would like to see only the hot spots without the base background color you simply have to set fadeColors(true) and you will get something like this...

In principle that's all I have to share with you today and I hope it might be useful for some of you.
As always you can find the code over at github, so feel free to fork it and use it :)

Oh and do not forget...keep coding ;)