Harmony...finally

 Aloha,

When you create different libraries and components you find yourself writing the same code in different places over time. In principle that's ok, except you combine those libraries and components. In this case you suddenly have the same classes twice or even more often in your code base. When I started creating Medusa, TilesFX and Charts I did not really think about the possibility to combine those libraries in one project at some point in the future. The main reason for this is that I never plan to create those libraries but they simply grow from components to libraries over time. 

The thing that started me thinking about to re-use more code between those libraries was a project where I needed TilesFX and Charts in the same project. Both of these libraries came with a Country class with different properties and methods. Now in that project I needed both of them and I needed to write some ugly code to convert between them

That was the starting point of the Countries library which you can now find either on github and on maven central.

But then I saw that there are other classes that I more or less use in both libraries and I decided to put those shared classes in a separate project. Because there are projects that use JavaFX and others which don't, I decided to create two projects:

• eu.hansolo.toolbox
• eu.hansolo.toolboxfx

Toolbox:

This library contains the code from my Evt project, meaning to say an event system which is similar to the JavaFX events.

Then I also added the code from my Properties project to the Toolbox. The properties are very similar to the JavaFX properties incl. binding. And in the Toolbox they will use the Evt events for property changes.

There are now also tuples in the Toolbox which sometimes can come in handy. They are not that fancy and their getters and setters do look like getA(), get(B) and setA(), setB(). Not so nice but useful.

The last thing I've added is the code from my UnitConverter which contains all kinds of different units and a converter that can convert between them (in the same category e.g. Temperature).

Then there is a Helper method that contains all sorts of methods that I use here and there in my code e.g. clamp() etc.

ToolboxFX:

Then there is the ToolboxFX library which depends on JavaFX but that does not only contain JavaFX related stuff. Here you will find things like my ConicalGradient, FontMetrix, GradientLookup, the Fonts that I do use often and other stuff like Point, Bounds, CornerRadii, Dimension, Location Po, CatmullRom etc.

ToolboxFX depends on Toolbox so you need to add Toolbox too if you use ToolboxFX.

This is stuff that I use a lot in the Charts library but also in TilesFX and Medusa.

But that's not enough, I've also separated the HeatMap from Charts and Countries and put it in a separate project.

So what does that mean for you as a user of one of my libraries?

• Update your dependencies
• TilesFX depends on:
• eu.hansolo:toolbox:17.0.6
• eu.hansolo:toolboxfx:17.0.15
• eu.hansolo.fx:heatmap:17.0.3
• eu.hansolo.fx:countries:17.0.16
• Medusa depends on:
• eu.hansolo:toolbox:17.0.6
• eu.hansolo:toolboxfx:17.0.15
• Charts depends on:
• eu.hansolo:toolbox:17.0.6
• eu.hansolo:toolboxfx:17.0.15
• eu.hansolo.fx:heatmap:17.0.3
• eu.hansolo.fx:countries:17.0.16
• Use the new event system
• If you make use of things like TileEvent, you should change to TileEvt etc. The best way to see how it works is to take a look at the Demo classes within the library source code.

ATTENTION: The libraries are not backwards compatible due to the new event system !!!

The new versions of TilesFX, Charts and Medusa that will make use of the shared libraries will all start with version 17.1.0. There is still a lot of stuff to streamline (e.g. removing methods from the libraries Helper classes because they are already covered by Helper  in Toolbox and HelperFX in ToolboxFX but for that I need more time.

So here are all libraries that are new or have changed:

• Toolbox
• ToolboxFX
• HeatMap
• Countries
• Medusa (jdk17 branch)
• Charts (jdk 17 branch)
• TilesFX (jdk 17 branch)

I will probably also use the Toolbox and ToolboxFX in future components and libraries.

So that was my holiday project and I'm really happy with it because now I could more easily use combinations of my libraries in projects.

I'm pretty sure there are still some things that do not work correctly, so please, if you stumble upon a problem do not hesitate to file an issue with some example code in the github repo.

I wish all of you a Happy New Year...and hopefully we will get rid of that Covid thing pretty soon...so stay healthy...and keep coding...

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

And another one...TilesFX 11.38

Aloha,

Here we go again...the last couple of evenings/nights I've spend creating new skins for TilesFX and because in the meantime I have 4 new skins it's time for another release of TilesFX :)

So let's take a look at the new skins that I have added.

ColorTileSkin

This skin always visualizes the current value in percentage and the background color will change according to the value.

The different colors that will be used are predefined by using sections.

The default sections that will be used if nothing else is defined are:

new Section(0.00, 0.25, ColorSkin.GREEN),
new Section(0.25, 0.50, ColorSkin.YELLOW),
new Section(0.50, 0.75, ColorSkin.ORANGE),
new Section(0.75, 1.00, ColorSkin.RED)

With this sections in place the color will for example be orange if the value is between 50% and 75% of the range that is defined by minValue and maxValue of the tile.

Of course you can override the sections with your own sections but keep in mind that the values of the sections should be in the range of 0.0 to 1.0 as shown in the example above.

That's fine but sometimes you would prefer having more finegrained colors for the values. One solution would be to define lot's of sections but you could also make use of the gradientStops feature in TilesFX.

For this you simply define the color stops you would like to use for the interpolation as follows in the TileBuilder:

tile1 = TileBuilder.create().skinType(SkinType.COLOR)
                   .prefSize(WIDTH, HEIGHT)
                   .title("Color (Sections)")
                   .description("CPU temp")
                   .text("Text")
                   .unit("\u0025C")
                   .animated(true)
                   .build();

tile2 = TileBuilder.create().skinType(SkinType.COLOR)
                   .prefSize(WIDTH, HEIGHT)
                   .title("Color (Gradient)")
                   .description("CPU temp")
                   .text("Text")
                   .unit("\u0025C")
                   .animated(true)
                   .gradientStops(new Stop(0.0, Medium.GREEN),
                                  new Stop(0.2, Medium.GREEN_YELLOW),
                                  new Stop(0.4, Medium.YELLOW_ORANGE),
                                  new Stop(0.6, Medium.ORANGE),
                                  new Stop(0.8, Medium.ORANGE_RED),
                                  new Stop(1.0, Medium.RED))
                   .fillWithGradient(true)
                   .build();

In principle it would also have been enough to define the 0.0, 0.5 and 1.0 values with for example green, yellow and red to get a similar result.

Long story short, here is a little video of the result where the section approach is on the left side and the gradient approach on the right side:

TurnoverTileSkin

The next new skin that I have added is the TurnoverTileSkin. This skin can be used to show an image with a value and a text and visualize a ranking and a special effect if the given threshold was reached.

The effect I'm talking about is the RotationEffect that I also have added to the library. To make use of the ranking you have to use the Rank class to define the ranks you need.

As an example let's define the ranks, first, second and third as follows:

Rank first  = new Rank(Ranking.FIRST, Color.GOLD);
Rank second = new Rank(Ranking.SECOND, Color.SILVER);
Rank third  = new Rank(Ranking.THIRD, Color.web("#cd7f32"));

So each rank has a ranking (the Ranking enum goes from first to tenth) and with a color.

In the following little video I created 5 tiles for some persons and put them in an HBox container. As you will see in the video the ranking changes and will be visualized when the values change. 

In addition you will see the rotation effect kick in as soon as one of the person value reaches the threshold of 500. So here is the video to give you an idea...

Here is some code that gives you an idea how I handle the ranking in the video above.

private Tile createPersonTile(final String title, final String name, final Image image) {
    return TileBuilder.create()
                      .skinType(SkinType.TURNOVER)
                      .prefSize(300, 300)
                      .title(title)
                      .unit("$")
                      .image(image)
                      .text(name)
                      .maxValue(2000)
                      .threshold(500) // Will trigger the rotationEffect when reached
                      .animated(true)
                      .build();
}

private void checkHighscores(final List<Tile> persons) {
    List<Tile> sorted = persons.stream()
                               .sorted(Comparator.comparingDouble(Tile::getValue).reversed())
                               .collect(Collectors.toList());
    sorted.get(0).setRank(first);
    sorted.get(0).setValueColor(first.getColor());
    sorted.get(0).setUnitColor(first.getColor());

    sorted.get(1).setRank(second);
    sorted.get(1).setValueColor(second.getColor());
    sorted.get(1).setUnitColor(second.getColor());

    sorted.get(2).setRank(third);
    sorted.get(2).setValueColor(third.getColor());
    sorted.get(2).setUnitColor(third.getColor());

    for (int i = 3 ; i < sorted.size() ; i++) {
        sorted.get(i).setRank(Rank.DEFAULT);
        sorted.get(i).setValueColor(Tile.FOREGROUND);
        sorted.get(i).setUnitColor(Tile.FOREGROUND);
    }
}

The createPersonTile method is used to create the tile for each person and the checkHighscores method is always called after the values have been set.

FluidTileSkin

The next new skin that was added is the FluidTileSkin. This skin shows the current value and visualizes it by filling the background of the tile with a fluid like effect.

The code that is used in the following video looks as follows:

tile = TileBuilder.create().skinType(SkinType.FLUID)
                  .prefSize(WIDTH, HEIGHT)
                  .title("Fluid")
                  .text("Waterlevel")
                  .unit("\u0025")
                  .decimals(0)
                  .barColor(Tile.BLUE) // defines the fluid color
                  .animated(true)
                  .build();

If you would like to see a more colorful fluid you can make use of sections or the gradientStops like shown above in the ColorTileSkin example.

Here is how it looks like in action...

FireSmokeTileSkin

The last skin I have added is the FireSmokeTileSkin. Well this is another fun skin to visualize the point where the value exceeds the defined threshold.

As you might guess by the name the preferred usage for this skin might be visualizing a temperature value. 

The code used for the next video looks as follows...

tile = TileBuilder.create().skinType(SkinType.FLUID)
                  .prefSize(WIDTH, HEIGHT)
                  .title("Fire Smoke")
                  .text("CPU temp")
                  .unit("\u00b0C")
                  .threshold(70) // triggers the fire and smoke effect
                  .decimals(0)
                  .animated(true)
                  .build();

The best way to describe this skin is to see it in action...so here you go...

As you can see the fire and smoke starts when the value exceeds the threshold of 70 and stops when the value falls back below 70.

Well that was a lot of new stuff and as always you can find the latest version of TilesFX at

github

bintray

maven central

That's it for today...so keep coding and stay healthy...

TilesFX 11.37

Aloha,

Time for some new stuff...
Last weekend I've stumbled upon some dashboards that had some interesting visualizations. The first one was a visualization of sales cycle steps that looked as follows:

The interesting part here for me is the chart where each bar starts where the last bar ended. I took a look at TilesFX but did not found something that made stuff like this possible in an easy way. So I decided to add a new skin that I called CycleStepTileskin (I know I'm not good in naming things). Here is how it looks like:

To be honest I'm not sure if this is useful but you never know right :)

The other tile I've found was nothing really special but I realized it has something that I missed in TilesFX...flags. This is what I'm talking about...

Not everyone needs flags but sometimes they come in really handy and so I was looking for flag images that I could use. Lucky me I've found free flags over at flaticon and added them to TilesFX. I've added them as enum and control.

So if you need an icon image you can now simply do something like follows:

ImageView flagImage = new ImageView(Flag.GERMANY.getImage(48));

The Flag enum has two methods to get an image, the standard getImage() method always returns a flag image with the size of 30x30 px. If you need a different size you can simply call the getImage(SIZE) method to get the flag in the size you want it.

The flag images are always square!

The other class I've added is called FlagIcon which is more or less a wrapper around an ImageView of the given image. Meaning to say it behaves like a control, so it will be resized automatically BUT it will resize the image based on the given flagSize. So if you have a flag of size 48 px and you increase the size of the FlagIcon it will get pixelated.

So if you would like to avoid pixelation you need to set the FlagSize to a bigger value but that will also increase memory consumption...so it's up to you.

In the end the FlagIcon is just a convenience class that comes in handy if you simply need a flag somewhere. You can use it as follows:

FlagIcon flagIcon = new FlagIcon(Flag.SINGAPORE, 24);

This will give you a control that shows a flag that is based on an image with 24px.

As an example of what you can do with that I've simply added a tile that shows the Covid-19 cases of some countries based on data from Mai 26th 2020. For this tile I simply used the custom tile skin and added a VBox with some HBoxes. If you are interested in how I did that, please take a look at the Demo class in the TilesFX project.

Here is a little bigger screenshot of it...

That's it for today so as always you can find the code over at github and the binary either at bintray or at maven central.

That's it for today...so keep coding and stay healthy...

MatrixIcon Tile Skin

Aloha,

This morning when I took a shower I got the idea that it might be nice to have some kind of animated icons in TilesFX. I own two lametric clocks and on this clocks you have the ability to have an icon and a text. They provide the ability to animate the icon by simply having multiple 8x8 pixel images that will shown in an animation.
So why not having such a feature in TilesFX?

Well just tooks a bit more than 1h to implement it and here is the result...



If you take a look at the Demo class in the TilesFX sources you can see how this was done.

As always you can find the latest version (11.35) over at

github

bintray

maven central

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

TilesFX update

Aloha,

You might have heard that Darksky has joined Apple. Well I used the darksky weather api for the WeatherTileSkin and therefor had a dependency to the json-simple library to be able to parse the json data from darksky correctly. I never was a big fan of having TilesFX depending on other libraries and 2 weeks ago there was an issue on github where someone asked to remove the dependency because of jlink problems.
Well after Darksky moved to Apple and won't probably be available in the future any more I've decided to remove the WeatherTileSkin and the Darksky objects from the library.
So from version 11.33 you won't find the WeatherTileSkin any longer in TilesFX but I've created an addon library called tilesfxweather which will make it possible to continue using the WeatherTileSkin as a custom skin in combination with the Darksky api.
If you take a look at the Demo class in the tilesfxweather project you will see how to use the WeatherTileSkin. Because Darksky might go away I've also removed the dependencies from the skin to the Darksky object so that you now only have to provide a DataPoint object that could contain data from where ever you want. But as I mentioned everything is in the Demo class of the tilesfxweather project.
In addition to the above things the new release also contains some bugfixes and a new property called fixedYScale which will be used in the SparkLineTileSkin when set to true.
The y-axis in the SparkLineTileSkin will usually automatically be adjusted to the min- and maxMeasured values of the current view but if fixedYScale=true the y-axis will always be based on the min- and maxValue from the tile.

Oh and you can find both libraries on maven central:

TilesFX

TilesFXWeather

Well in principle that's it for now...so stay healthy and...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...

ImageCounterTileSkin...

Aloha,

This morning I could not sleep and was skimming the web for new ideas where I stumbled upon a social media dashboard.
And on that dashboard I've found widgets that simply shows a social media icon with a counting number.
Well...that's an easy one I thought and quickly created a new skin for TilesFX which is the ImageCounterTileSkin.
So here is a screenshot of a little demo I quickly put together to give you an idea on what it will look like...

As you can see this tile does not show a lot but simply an image with a number and some text. Of course you can enable the title and the bottom text in the skin too but without it also looks ok.
It doesn't take a lot of code to create such a tile, here is what you need:

Tile tile = TileBuilder.create()
                       .skinType(SkinType.IMAGE_COUNTER)
               .prefSize(WIDTH, HEIGHT)
               .value(0) // START VALUE
               .description("TEXT")
               .image(new Image("file:PATH_TO_IMAGE"))
               .imageMask(ImageMask.ROUND)

               .build();

And to make it even easier to handle it, I've added two new convenience methods to TilesFX to increase or decrease the value by a given amount.

So to increase the tiles value you simply can call

tile.increaseValue(1) 

and that's it.

And because I had some time this morning I directly created a new version of TilesFX which is now 11.27 and is available here...

github

bintray

maven central

And with this I wish all of you a nice weekend and...keep coding...

ClusterMonitorTileSkin...

Aloha,

Back from CodeOne in San Francisco I think it's time to blog about a new skin that I've added to the library.

In my last post you saw that I was preparing a custom skin for Gluon to monitor the 1060 Raspberry Pi cluster from Oracle.

Once I saw the use case I thought it might make sense to add this skin as a regular skin to the library.

Because visualizing 1060 tiles in a dashboard was a challenge I came to the conclusion that this skin should also get the ability to reduce the details it shows when it's size goes below a given threshold (in this case 100 x 100px).

In addition I had to add several features to be able to show for example different units for the cpu/mem and temperature data.

So here are the screen shots of both modes:

As you can see the reduced version shows the text within the bar which saves some vertical space.

In addition one can add an SVG string that will be used to visualize a button (in the lower right corner). This button could for example be used to reset a single node in case it got stuck or hangs.

The new skin can now be found under the name: ClusterMonitorTileSkin and is available since version 11.13.

The latest version can be found here:

Source github

Binary bintray

Maven central

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

Custom skins for TilesFX

Aloha,

Today I will tell you something about customs skins for TilesFX. This year at CodeOne in San Francisco the Oracle team created a really nice Raspberry Pi SuperComputer. And for this Pi cluster the guys from Gluon created a dashboard that monitors the cpu and memory usage and also the temperature of each Pi.
Lucky me they decided to go with TilesFX to create the dashboard but they had the problem that there was no skin that was good enough to visualize the CPU and memory usage in one Tile.
So they asked me if I could help them out with a skin and so I've created the CpuMemTileSkin which looks as follows:

If you would like to make use of the skin feel free to take the code from this gist.

To use the skin you first need to set it up as follows:

Random         rnd      = new Random();
ChartData      cpuItem  = new ChartData("CPU", Bright.RED);
ChartData      memItem  = new ChartData("MEM", Bright.BLUE);
GradientLookup gradient = new GradientLookup(Arrays.asList(
    new Stop(0.0, Bright.GREEN),
    new Stop(0.4, Bright.YELLOW),
    new Stop(0.8, Bright.RED)));


Tile cpuMemTile = TileBuilder.create()
                             .skinType(SkinType.CUSTOM)
                             .prefSize(200, 200)
                             .unit("\u0025")
                             .title("Node XY")
                             .chartData(memItem, cpuItem)
                             .build();
cpuMemTile.setSkin(new CpuMemTileSkin(cpuMemTile);

// Creating random values for cpu and mem
double cpu = rnd.nextDouble() * 100.0;
double mem = rnd.nextDouble() * 100.0;

// Set the cpu color related to it's value and set the value
cpuItem.setFillColor(gradient.getColorAt(cpu / 100));
cpuItem.setValue(cpu);

// Set the mem color related to it's value and set the value
memItem.setFillColor(gradient.getColorAt(mem / 100));
memItem.setValue(mem);


So you set up two ChartData objects, one for cpu and one for mem and add them to the tiles chartData property in the TileBuilder.
Then you create a GradientLookup to change the color of each bar dependent on the current value (from green over yellow to red).
When this is done you can set the color and value of each bar by changing the value of the ChartData objects and that's all you need to do to make use of the custom TilesFX skin.

I hope this will help one or the other of you and if you have created a nice TilesFX skin please let me know...I'm always keen on seeing new stuff... :)

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

A new skin for TilesFX

Aloha,

Finally found some time to add some more features to TilesFX. This time I've added a new skin to visualize timeline data. Because our son has diabetes I would like to monitor his blood glucose values more closely using my TilesFX based dashboard at home.
So I figured out that there was no really useful skin available for TilesFX that I can use. But now there is...the TimelineTileSkin.
Here is a little screenshot of the new skin:

In principle the skin looks very similar to the SparklineTileSkin but here I simply can use time based to data. There is a ChartData class in TilesFX that has a timestamp property and so instead of using the value property of the Tile class one now simply add ChartData to the Tile.
To be able to visualize time based data I've added properties for a time period and for a max time period.
On the screenshot above the timePeriod is 3 hours which means the width of the tile represents 3 hours counting from now to 3 hours back in time. Every chartData object that you add which has a timestamp that is within the last 3 hours will be drawn. The tile will keep a max no of data defined by the maxTimePeriod property. Data that is older than 3 hours will move out of the graph on the left side and new data will be added on the right side. It is also possible to define a resolution in TimeUnits.
So if you would like to visualize the last 3 hours with a resolution of minutes you can define it by setting the timePeriodResolution with TimeUnit.MINUTES.
The smallest possible resolution is seconds, even if you set it to milliseconds or smaller it will be set back to seconds.
It is possible to use seconds, minutes, days and months. 
In addition to this I've also added a lowerThreshold with a lowerThresholdColor. The threshold and the lowerThreshold will be visualized with a dashed line that will be stroked with their given colors.
One could also define Sections with colors (the two red and one green areas on the screenshot above).
On the left side of the graph you see the minimum and maximum measured value (taken from the visible values!) In this case the highest measured value within the last 3 hours has been 349.
Like with the other charts one can define a number of stops that will be used to stroke the line when strokeWithGradient == true. Otherwise it will use the barColor to stroke the line. If you enable smoothing the line between the points will be smoothed, otherwise it will simply connect the data points.
On the right side of the chart you see the minimum and maximum value of the chart (0 and 350).
The small percentage values on the left side will show how many data points that are within the timePeriod are in each section. In the screenshot above this would mean for example that 18% of all visible data points are in the green section.

I've created the TimelineTimeSkin because I have a need for it to visualize the blood glucose values of our son, meaning to say it might not fit for your needs. So please let me know if you find some bugs or if you need something else and maybe I can help you with that.

The new skin is part of the latest version 11.6 which can be found here:

• Source: github
• Binary: bintray
• Maven

I hope this additional skin might help one or the other, so that's it for today...keep coding...

TilesFX 11.1

Aloha,

Finally I've found some time to port TilesFX to Java 11. There are no new features yet but only the ability to use TilesFX with JDK11 and above.

Binaries for the different platforms can be found here:

JDK 8
Version 1.6.5 bintray 

Version 1.6.5 maven central.


JDK 11
Version 11.1 bintray

Version 11.1 maven central.

And that's it already, so keep coding...

TilesFX 1.6.5

Aloha,

I finally found some time to prepare another release of TilesFX. This release mainly contains fixes of different issues and one new skin.
First of all I would like to say thank's to the external pull requests that fixed two issues, it's always good to see people take over and fix things.
The skin I've mentioned is nothing that could not have done before with a custom tile skin but I saw some dashboard like apps that simply showed pictures of people on kind of tiles. Here is a little example of what I am talking about...

An so I thought this might be some nice add on to the library and was easy to do...so here you go...

Nothing really fancy but there might be some use cases for this kind of skin.
The skin takes the given image and a so called ImageMask which can be either

• NONE
• ROUND
• RECTANGULAR

And this is how these ImageMasks look like...

That's all for the latest TilesFX release, I have ideas for more stuff to come but simply do not have the time at the moment...so please be patient... :)

***********************
Java 11
Another thing is porting the library to Java 11, I've started with a port to Java 11 but due to a lack of time was not able to finish this yet.
My plan was to create a new project for the Java 11 version which will be TilesFX11.

If one of you is interested and has the time he can start porting the library to Java 11.
It will be highly appreciated, so if you are interested, just ping me and we will figure out a way to work together.
***********************

The latest source code and binaries can be find at the following sites as always...

Source:    github

Binary:    bintray

Maven:    maven central


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

Tiles 1.6.4

Aloha,

During the last days and nights I've found some time to add some stuff to TilesFX.
First of all I've modified the calculation of the color gradient that is used in the SparkLineTileSkin and GaugeSparkLineTileSkin.
Because the spark lines only show the line between the low and high value that was measured in the given range it might happen that the color gradient has to be adjusted to the visible range of values.
This now works as expected (at least expected by me).

The code to define the following tile is:

Tile tile = TileBuilder.create()
                       .skinType(SkinType.SPARK_LINE)
                       .prefSize(400, 400)
                       .title("CO2")
                       .unit("ppm")
                       .minValue(400)
                       .maxValue(60000)
                       .decimals(0)
                       .tickLabelDecimals(0)
                       .time(ZonedDateTime.now(ZoneId.of("Europe/Berlin")))
                       .gradientStops(new Stop(0, Color.web("#1CAF4D")),
                                      new Stop(0.0075, Color.web("#1CAF4D")),
                                      new Stop(0.00751, Color.web("#91CA40")),
                                      new Stop(0.01166, Color.web("#91CA40")),
                                      new Stop(0.01167, Color.web("#F8C610")),
                                      new Stop(0.01666, Color.web("#F8C610")),
                                      new Stop(0.01667, Color.web("#F29222")),
                                      new Stop(0.025, Color.web("#F29222")),
                                      new Stop(0.02501, Color.web("#EC1D24")),
                                      new Stop(1.0, Color.web("#EC1D24")))
                       .strokeWithGradient(true)
                       .averagingPeriod(96)
                       .smoothing(true)

                       .build();

And the result when using TilesFX < 1.6.4 looks as follows:

As you can see the gradient used to color the spark line was just a linear gradient from the color calculated for the low value (here 400) to the high value (here 1036). There are no other colors in between even if the gradient stops in the builder contain more stops.
When using the same tile in TilesFX >= 1.6.4 the result will look as follows:

Based on the gradient stops defined in the builder we now see all levels for the different zones we defined.
Meaning to say the color gradient used to stroke the spark line will now always dynamically calculated dependent on the low and high value.
In addition I've added a  new skin named BarGaugeTileSkin which is another gauge visualization that you often can find in dashboards. It looks as follows...

As you can see it shows the current value, a bar with the min and max value and a threshold indicator with a text.
The color of the bar can be customized by

• bar color property
• sections
• gradient stops

So if you would just simply change the color of the bar you just set the bar color by calling

setBarColor(YOUR COLOR) or .barColor(YOUR COLOR) in the TileBuilder.

If you would like to set the bar color dependent on sections (e.g. color the bar red if the value is higher than 80) you might want to define sections and enable them as follows:

Tile tile = TileBuilder.create()
                       .skinType(SkinType.BAR_GAUGE)
                       .prefSize(200, 200)
                       .minValue(0)
                       .maxValue(100)
                       .sectionsVisible(true)
                       .sections(new Section(80, 100, Color.RED))
                       .build();

And if you would like to set the bar color along a defined color gradient you have to define the gradient stops and enable them as follows:

Tile tile = TileBuilder.create()
                       .skinType(SkinType.BAR_GAUGE)
                       .prefSize(200, 200)
                       .minValue(0)
                       .maxValue(100)
                       .strokeWithGradient(true)
                       .gradientStops(new Stop(0.0, Bright.BLUE),
                                      new Stop(0.5, Bright.GREEN),
                                      new Stop(1.0, Bright.RED))
                       .build();

In principle that's all I did but I thought it was worth a new release, so as always please find the latest version here:

Source: github

Binary: bintray

Maven Central

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