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