TilesFX 17.0.11

Aloha,

when working with dashboard using my TilesFX library I came across some missing things...first of all I needed a Tile that simply has a text in the center of it. Well nothing easier than that...I simply added a CenterTextTileSkin class that offers exactly this functionality. Here is a little screenshot that shows it in action...

As you can see I needed it to visualize the state of a server. If the server goes down the text will change from "ONLINE" to "OFFLINE" and the background color of the tile will change from green to red...very simple but very effective :)

To change the text you have to set the description of the tile.

Here is the code to create the tile above:

Tile serverTile = TileBuilder.create()
                             .skinType(SkinType.CENTER_TEXT)
                             .title("Server")
                             .text("Last check")
                             .backgroundColor(Dark.GREEN)
                             .description("ONLINE")
                             .build();

The other thing I stumbled upon was the fact that handling big numbers in a dashboard can really suck. When you have a dashboard with lots of tiles, there is sometimes simply not enough space to show those big numbers.

So the idea again is simple...just shorten the big numbers to a more readable format. For example 2350 can become 2.3k and 1230401 can become 1.2M. With this you can also show big numbers in a small tile.

The feature to use here is the property shortenNumbers in Tile. I've added it for some tiles where I thought it might come in handy but there might still be places where it is missing...so if you find a place where it could make sense, please file an issue over at github. 

You could also use the method Helper.shortenNumber(final long value) to shorten the numbers on your own before you set it somewhere. The method will return the formatted number as a String.

The result of using the shortenNumber property in Tile can be seen in the left Tile on image above.

Those new features can be found in the latest version of TilesFX which is 17.0.11 and which is available on github and also on Maven central.

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

Panel Barchart

 Aloha,

I'm currently working on a dashboard where I needed a way to visualize data in a specific way. Let's say we would like to compare the load of 3 servers for each day of a week. And in addition we would like to be able to compare the current week with the last week.

There are probably different ways how you can visualize this and I decided to go with a so called Panel Barchart.

Here is an example of such a chart:

In principle this is some kind of a rotated stacked bar chart where the segments are separated from each other. So my version looks a bit different but you will see it's similar, here you go:

So in the upper chart you see the server load of our 3 servers for this week (of course the numbers don't make sense and are random but you get the idea).

You need to define categories (here it's the days of the week). Now you need to add a series of chart items for each category and each server.

In upper chart eh bars are colored by the categories (workdays = gray, weekend = red). This colors can be defined in the categories. 

If you switch this feature off (colorByCategory = false [default]) it will use the colors of the items in each series.

The chart will show the name of the series on the far left column and the sum of each series on the far right column.

On top of each category column it will show the sum per category (in this case per day). On the upper right corner it will show the overall sum of all values.

Well that's good but sometimes you would like to compare the current values with values from another point in time e.g. last week or last year.

To make this possible you can switch enableComparison to true and as you might already thought you need to define the data of the things you would like to compare.

To be able to compare data you need the exact same number of series in the listOfSeries and the comparisonListOfSeries. In addition the items in the each lisOfSeries need to use the same categories that you use in the comparisonListOfSeries.

When you fullfill these requirements the chart will now show name and the comparisonName in the upper left corner (yes you can set the colors for both of them separately). Now you will also see the items for both series of data and if you like you can also define the colors for the series sums and the category sums separately.

The chart is interactive in the way that you can click on each item and a little popup will show you some text and the value of the item. The text that will be shown in the popup could either be the name of the item or the description of the item. If you set both (name and description) it will take the description.

You can find the code for the example above in the PanelBarChartTest class in the test package of the current jdk17 branch of my charts library.

The latest release is available on github (at the moment it is 17.0.11) and also on maven central.

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

TilesFX 11.30

Aloha,

Just found some time to update TilesFX again. Alessandro Roaro opened a pull request on github and asked for a LED tile skin. And because it was a good idea I've implemented his idea and this is what it looks like...

The LED can be switched ON/OFF by using the active property of the Tile class. The color of the LED can be set by using the activeColor property of the Tile class.

And in addition I've added another skin which is a CountdownTimerTileSkin which I thought might be useful for some people. 

Here is a little screenshot...

It shows the duration it will run and the time it will be finished. When the time is 00:00:00 it will fire an AlarmEvent that you can listen to.

When I've added the new skins to the Demo class I figured out that the RadarTileSkin and RadarNodeTileSkin did not work anymore and fixed those right away so that they are usable again...and now also support animation.

Because I'm busy and don't have a lot of time to work on TilesFX at the moment you will find the code on how to use the new skins in the Demo class that is part of the project.

As always you can find the binaries either on 

bintray or maven central

and the source on github.

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

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