Friday, January 13, 2017

Friday Fun XLIII


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()

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

worldMap = WorldBuilder.create()

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 ;)

Thursday, December 22, 2016


Aloha everyone,
This will be my last post for 2016 and I have something for you which you might like. Always when I needed a dashboard I had to create it by myself completely from scratch.
So I've decided to create a little library that contains at least some tiles that might be useful for dashboards. 
And because I love to tinker around with some hardware I've also added some tiles for interaction (like sliders and switches).
To make it is a screenshot of the current state...

On the screenshot above you can see all tiles that are currently available and some of them are also available in Medusa (but there you will find only gauge related tiles).
The default size of the tiles at the moment is 250x250px and I did not spend much time in resizing etc. 
Here is a short list of tiles that are part of the library at the moment:
  • ClockTile (a simple digital clock)
  • GaugeTile (a gauge like in Medusa)
  • HighLowTile (a tile that might be useful to show current value compared to reference value)
  • LineChartTile (a simple JavaFX line chart on a tile)
  • PercentageTile (a tile that shows the current value in percentage)
  • PlusMinusTile (a tile that has 2 buttons to increase/decrease a value)
  • SliderTile (a tile with a slider to set a value)
  • SparkLineTile (a tile containing a spark line graph like in Medusa)
  • SwitchTile (a tile that has a switch to toggle a value)
  • TextTile (a tile that contains a custom text)
  • TimerControlTile (a tile with a clock and time sections to control a value)
  • WorldMapTile (a tile with a world map like the one from worldfx)
  • WeatherTile (a tile that shows weather info using DarkSky)
  • NumberTile (a tile that simply shows a number, unit and some text)
  • TimeTile (a tile that shows a LocalTime which can be used for Durations etc.)
  • BarChartTile (a simple tile showing up to 4 bars in a sorted order)
  • CustomTile (a tile where you can add your own controls)
  • LeaderBoardTile (a simple tile showing up to 4 entries in a sorted order)
To make use of the WeatherTile you will need a DarkSky API key which you can get at The nice thing about using DarkSky is that they allow you to call the weather update 1000x a day for free. This should be more than enough for your private project.

For those of you that would like to see it in action here is a little video...

As always you can find the binary on bintray and the code on github under the following links

The library will also be made available on maven central and you should be able to find it when you search for tilesfx. At the moment there is not much documentation except the Demo file which is part of the source code, please take a look at it to understand the usage. Another thing that would be nice to have would be a better TileLayout for dashboards, in my Demo I use a FlowLayout which allows me to use tiles of a different size.

Please keep in mind that all of my code is open source which does not automatically mean it's ready for production!

If you have the need for a specific tile...please let me know and I might add it to the library.

Well and that's it for 2016, I wish all of you a merry christmas and a happy new year...and do not forget...keep coding... ;)

Friday, December 16, 2016

Friday Fun XLII


Last week I've found a nice little progress indicator on the web that I really like and so I made the decision to create it in JavaFX.
To be honest I did not really create a progress indicator but only the animation that you can use for whatever you like.
There is really nothing special about this control so here is a little video that shows it in action...

And if you are interested in the source you will find it as always on github...
A really short post this week :)

Keep coding and enjoy x-mas :)

Tuesday, December 6, 2016

Medusa Sparkline Skin


While working on the gauges for our customer I figured out that with the given feature set in Medusa it would also be possible to create a skin that is similar to so called Sparklines.
The idea is to store a given number of values in an internal list and just show them in a little line graph, e.g. the last 10 measured values.
In addition the moving average of the visualized data will be shown and the standard deviation of the data.
It just tooks me a couple of hours last Monday night to get it done and I hope it will be somehow useful.
Here is a little screenshot of the new skin...

It has the following features

  • Title
  • Current Value
  • Unit
  • min value (of shown data)
  • max value (of shown data)
  • moving average (of shown data)
  • standard deviation (of shown data)

The term "shown data" means that for example the minimum value is not the absolut ever measured minimum but only the minimum of the visible data in the line graph.
If you need the absolut measured minimum you can ask the gauge for the getMinMeasuredValue() and/or getMaxMeasuredValue(). 
The number of datapoints that will show up in the line graph can be configured by calling the setAveragingPeriod(Integer) method (the default is 10).
The color of the line can be set by using setBarColor(Color).

This skin is part of the current Medusa release which is already 6.5 and you can find it here

That's it for keep coding :)

Wednesday, November 30, 2016

Medusa KPI Skins

At the current project I'm working on a JavaFX dashboard using gauges...which is awesome :)
And so I was looking for interesting designs that might be useful for a dashboard visualizing KPI's (Key Performance Indicators). So I stumbled upon two interesting designs that might be a good fit for a grid or tile based dashboard layout.
So here they are...

The TileTextKpiSkin on the left side shows the current value by the text, a bar, the maximum value it could reach (here 100) and the value in percentage.
The TileKpiSkin on the right side shows the current value by it's number, a defined threshold (75) and a needle that shows where the current value is in the given range.
Both tiles also show a title on the upper left corner.'s nothing special but didn't take long to implement it so why not :)

Both skins are part of the latest Medusa version (6.3) which you can find here

*** UPDATE ***
After playing around with the new skins I came to the conclusion that it would also make sense to have the ability to visualize sections. So I've added them to both skins and they will be available with the next version (6.4) of Medusa.
Here is a little screenshot of how they will look like...

So as soon as you have sections enabled the threshold won't be shown on the left skin (TileKpiSkin) but only the active section.
On the right right skin (TileTextKpiSkin) the bar and the percentage text will either be colored with the default value (barColor) or with the color of the active section. I've also added the unit text for the right skin.

That's it for keep coding... 

Saturday, November 19, 2016

WorldMap Cosmetics

Aloha again,

Remember the the world map control that I've created during JavaOne? Because it is based on high resolution SVG data the map is big (from a memory point of view). Sometimes you need high res but sometimes you don't...long story short...I've created also a low resolution version of the map.

Here is a little screenshot that shows both maps (the upper one is the low-res version and the lower one the high-res version)...

At the moment both maps are in the same repo which you can find on github

Oh and before I forget to mention it, there is now also support for CSS styling available.

That's it for a Saturday I need more coffee ;) 

*** UPDATE ***
More fun on a Sunday morning... :)

I've added the possibility to visualize locations by their latitude and longitude. With this you could mark locations like airports, cities etc. At the moment the indicator is just a simple circle but I might change this in the near future. It would be cool if one could also use icons like fontawesome etc. to visualize the location (maybe I'll be able to implement this next week).
Here is a screenshot that shows some major airports on the world map...

Oh and be warned that there will be modifications coming soon...just need more time :)

*** UPDATE 2 ***
Like mentioned there have been more modifications but now I guess the world map component is ready to go. At least I have no further ideas anymore at the moment.
Here is a list of changes that I did...

  • got rid of the scalable content pane
  • moved the SVG paths to property files
  • added support for Ikonli icons
  • added mouse wheel zooming at mouseposition
  • added selectable countries
  • added zoom to country method
  • mouse handler support for locations
  • clean ups

Here is another screenshot...

*** UPDATE 3 ***

The more I play around with it the more ideas are coming... :)
While I was skimming the web for some new ideas I saw some worldmaps in business dashboards where they use it to visualize regions like APAC, EMEA etc.
So I thought it might be useful to support those business regions and add some convenience methods to handle them.

On the map above you see the European Union (in it's current state) colored and centered. To get this view you simply have to call two methods now...

BusinessRegion.EU.setColor(Color.rgb(124, 208, 255));

I thought this might be useful for dashboard kind of things so you will now find a new enum called Business Region which contains the following regions

  • APAC
  • APJC
  • ANZ
  • DACH
  • EMEA
  • EU

Because I do not know which other business regions could be useful I've also added the possibility to add your own region by using the new CountryRegion class. So if you would like to create a region with the countries Belgium, Netherlands and Luxemburg (which are the Benelux) you can do this with the following line of code...

CountryRegion myRegion = new CountryRegion("BENELUX", BE, NL, LU);

There is one little problem at the moment when zooming to the region APAC. Because  APAC contains countries on the very right and left of the map (this is related to the used Mercator projection) which makes zooming in not really useful.

If you have other needs or ideas on how to improve the world map control, please let me know :)

So feel free to use it for what ever you need it...

And don't forget...keep coding...

Friday, November 18, 2016

Medusa Industrial Clock Skin

And another one...
Yesterday I was in Stuttgart and on my way back one of my train connections was canceled. This gave me another hour of coding in the Starbucks at the Cologne train station. I mean coffee and code...what could be more productive ;)
So I was searching the picture app on my mac and stumbled upon a clock that I would like to implement for a long time, to be honest it have been two clocks but take a look yourself, here they are...

As you can see it is the same watch face just in two different colors. This clock looks similar to one of the Apple Watch watch faces and so I decided to create a new clock skin for Medusa.
Here is my implementation in Medusa...

The only thing that's missing is the glossy overlay but that can be added later by yourself. The new skin is named IndustrialClockSkin and will be available in the upcoming release 6.3 of Medusa.

To create the dark version of the clock you need to create it like follows...

clock = ClockBuilder.create()
                    .prefSize(400, 400)

For those of you that would like to use before...just grab the code from github...

That's it for today, enjoy the upcoming weekend and...keep coding ;)