Another new TilesFX skin...

Aloha,

Last time when I was sitting in Singapore skimming the web for some interesting stuff I've stumbled upon a dashboard where a gauge was in front of a line graph. Unfortunately I did not save the image but it was stuck in my head and I thought it might sometime be useful to see not only the current value but also a little history of formerly measured values.
Here is a little screenshot of what I came up with...

As you can see the control shows a bar graph gauge which visualizes the current value. In the center of this gauge you will find a line graph that shows the history of the measured values. In this case I've made use of the strokeWithGradient() feature in combination with gradientStops() to color the line graph.
The time in the lower right corner shows the time of the last update and the text in the lower center shows the time from the first measurement in the line graph to the last measurement.
I think I should also add min- and maxValue to the gauge to get a better idea about the possible range but that's not done yet.
I can imagine that this kind of visualization might be interesting for some use cases but to be honest I'm not sure :)

The new skin can be found in the latest release of TilesFX (1.4.3) which you can find here

Source: github

Binary: bintray

The name of the skin is: SkinType.GAUGE_SPARK_LINE

The screenshot above was create using the following TileBuilder code:

tile = TileBuilder.create().skinType(SkinType.GAUGE_SPARK_LINE)
                  .prefSize(400, 400)
                  .minValue(0)
                  .maxValue(100)
                  .title("Data")
                  .text("Test")
                  .textVisible(false)
                  .averagingPeriod(25)
                  .autoReferenceValue(true)
                  .tooltipText("")
                  .barColor(Tile.YELLOW_ORANGE)
                  .barBackgroundColor(Color.rgb(255, 255, 255, 0.1))
                  .sections(new Section(0, 33, Tile.LIGHT_GREEN),
                            new Section(33, 67, Tile.YELLOW),
                            new Section(67, 100, Tile.LIGHT_RED))
                  .sectionsVisible(true)
                  .highlightSections(true)
                  .animated(true)
                  .strokeWithGradient(true)
                  .gradientStops(new Stop(0.0, Tile.LIGHT_GREEN),
                                 new Stop(0.33, Tile.LIGHT_GREEN),
                                 new Stop(0.33,Tile.YELLOW),
                                 new Stop(0.67, Tile.YELLOW),
                                 new Stop(0.67, Tile.LIGHT_RED),
                                 new Stop(1.0, Tile.LIGHT_RED))
                  .build();

And that's it for today, short but hopefully useful :)

Keep coding...