Donuts for everyone...

Aloha,

Last weekend I was looking for visualizations that could be useful in TilesFX and I stumbled upon some charts called either doughnut, ring our donut charts. Nothing really special but not available in the standard JavaFX charts. So here is an example of what I'm talking about...

So we have a visualization of values in percentage so the sum of all values is always 100%. And the nice thing about using this donut like visualization is that we can use the inner part of the donut for additional information (e.g. like the value of the sum etc.).
Because on a dashboard you would really like to focus on the important parts (means you don't want to show a donut chart with 20 sections but maybe with 3 or 4) I can keep the whole thing really simple.
Because of the space constraints the legend will only appear if the width of the chart is larger than 1.2 x the height.
For the visualization I've decided to show the value inside of each segment, the percentage close to each segment on the inside of the ring and the sum of all values in the center of the donut chart. So the result looks like this...

Like in the last chart that I've added (the RadialChart) I've again made use of the JavaFX Canvas node which is perfect for graphics like this. Also animating this chart is really easy because of the good performance of the Canvas node.
The source of this little DonutChart can be found on github as always, so feel free to fork it :)
And like with the RadialChart I've decided to add the DonutChart as a separate skin to the TilesFX library. Means since release 1.3.6 of TilesFX you are able to make use of it.
Here are also some screenshots of the DonutChart in TilesFX...

I hope this will be useful for some of you, that's it for today...so keep coding... :)

A little MapTile update

Aloha,

After playing around with the MapTileSkin in the TilesFX project I thought it might make sense to add the ability to also visualize points of interest and a track...and so I've added those features :)
I've also added the ability to set the color of the current location marker and the color of the track (it's only one track supported at the moment).
To realize this behavior the Location class now also contains a color property.
For the colors I also decided to offer a defined set of colors which are the ones that you can find in Tile.TileColor

• GRAY
• RED
• GREEN
• BLUE
• ORANGE
• YELLOW_ORANGE
• YELLOW
• MAGENTA

These colors will be used wherever possible within TilesFX to create a homogene look over all tiles.
To give you an idea how this new stuff is looking, here are some screenshots...

Map provider: Hydda

Map provider: OpenStreetMap HOT

Map provider: OpenStreetMap BlackWhite

Map provider: World Imagery

On the screenshot above you can see the current location icon (the bigger blue one), the start icon (green one at the end of the magenta track), the stop icon (the red one at the end of the magenta track) and some poi icons (the yellow, the red and the magenta one).
For the example above I've simply exported a track recorded by my Garmin watch to GPX format and imported the GPX file, converted the track points to a list of Locations and pass it to the Tile...done :)
If you are interested in the code I've used to convert the GPX file to my Location objects you can find a little gist that I've created on github which shows how it works. You simply have to provide a gpx file with the name track.gpx and put it besides the java file.
Here is the link to the gist.

Another feature that I've added is the ability to change the zoom level of the MapTileSkin via the current location. Therefor I've added a zoomLevel property to the Location class and if you change it e.g. by calling

tile.getCurrentLocation().setZoomLevel(0)

the map tile will zoom out completely. The range of zoom levels is going from 0-17.
I hope this features might be useful to create for example a fitness dashboard etc.

At the moment I've not added a live tracking feature which would create a track on the fly every time the current location changes but this would be easy to add if it's needed.

As always feedback is more than welcome, so please don't hesitate to contact me and let me know about ideas/improvements/feature requests etc.

The above mentioned features are part of the current release of TilesFX which is 1.3.5 and which can be found here

The source code at Github

The binary at Bintray

The dependency at Maven Central (it's published but might take some time to show up)

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

A little Radial Chart for some weekend fun...

Aloha,

Before I went to Singapore last week I saw some interesting radial bar graphs on the web and thought this might be a fun control to have in JavaFX.
Because in Singapore was no time for coding I've decided to do that later...which means today :)
So first let me show you what I'm talking about, the following picture should give you an idea...

I like that idea to wrap a bar graph in a circle to save some space and so I've created that control in JavaFX which now looks like follows:

If you will take a look at the control you will figure out that it's not perfect but it should be a starting point for you :)
Because it tooks me only 1.5h to create that control I thought it might also be nice to have it as a skin in TilesFX and so I've also created a RadialChartTileSkin which looks as follows...

So this was a quite productive morning so far :)
The new skin for TilesFX can be found in the current release of TilesFX which is 1.3.4 and the RadialChart control is on github as usual.

Sourcecode

So enjoy your weekend and keep coding...

TilesFX with new sizing strategy

Aloha,
In principle I was fine with TilesFX except one minor thing...the fact that I missed to make the tiles stretch in x- and y-direction. Means nearly all tiles have been in a square format which lead to gaps in dashboard.
After someone created an issue related to the size of the demo that comes with TilesFX I've decided to rethink the sizing strategy of the tiles.
To make it more clear I've created a little video that shows the sizing behaviour of the former version 1.3.1 and the new released version 1.3.2.



As example I've used my little dashboard that I usually run in a browser via JPro on all possible devices.
So I hope the new sizing strategy will work out for those of you that use TilesFX and if you find any problems or if you have any ideas...please let me know :)

UPDATE...
Well yesterday evening I had the idea to add a map tile to TilesFX and what should I say...I've implemented it this morning. So in the latest release (1.3.3) of TilesFX you will now also find a MapTileSkin which uses a WebView and leaflet to show a map. Here is a little screenshot of the new skin...

At the moment it only shows the current location which I've added as a property to the Tile class. If you change the location the tile will update the map view. I'm also planning to add points of interest and other features to it.

So enjoy your weekend and keep coding...