Saturday, February 18, 2017

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...

Saturday, February 11, 2017

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...

Thursday, January 19, 2017

Customize your dashboard

Aloha,

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


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, January 13, 2017

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

Thursday, December 22, 2016

TilesFX

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 short...here 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
DarkSky.net. 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.

REMINDER:
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

Aloha,

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

Aloha,

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 today...so keep coding :)