Friday, June 29, 2018

Some updates to TilesFX

Aloha,

Last week I've spend some time on TilesFX again. After skimming the web for dashboards I saw that it might be interesting to be able to have an image as a tile background.
For that reason I've added a backgroundImage property to the Tile class.
There are also methods to set the background image opacity and if the aspect ratio should be kept for the image.
With this you now can define a background image for each tile if you like :)
In addition I've also added another Region to the upper left corner of a tile.
Here is a little screenshot to give you an idea...


As you can see I used a background image in combination with a SkinType.GAUGE. The upper right yellow region was renamed to notifyRegion. So you can simply make it visible by calling showNotifyRegion(true )e.g. to grab the attention of the user.
On the upper left corner you see the newly added infoRegion. By calling showInfoRegion(true).
You can also attach an EventHandler<MouseEvent> to the infoRegion to trigger custom actions. To add an EventHandler you simply call the setInfoRegionEventHandler and pass in your EventHandler<MouseEvent>. The Tile will listen for MouseEvent.ANY so that you can react on whatever EventType you need in your handler.
The info region also comes with a specific tooltip that you can set which might be useful.
You might want to use this to configure tiles on your dashboard or show popups etc.
For both regions you can also define the background and foreground color as you can see on the next screenshot...


After playing around with my Raspberry Pi and my own dashboard I saw that the text in the WeatherTileSkin can become very long which could result in the text exceeding the width of the tile.
If the text will become to long and won't even fit within the width of the tile with a font size of 5px it won't be shown any longer.
Another thing that I've fixed is the vertical numbering in the SparkLineTileSkin which was wrong by the amount of 1.
On my Pi I saw that when I make use of the smoothing in the SparkLineTileSkin the initial load time tooks quite long. For that reason the smoothing of the initial values is now done in a task which fixed the long initialization of the SparkLineTileSkin.

At this point I would like to say THANK YOU to all of you using TilesFX, I saw that it was downloaded more than 10.000 times within the last year which means it seems to be useful for some of you :)

As always you can find the latest version (which is 1.6.2) here:

binary on bintray

source on github

maven central

or simply from the sidebar of this blog :)


Well that's it for today...so keep coding...

Friday, June 22, 2018

A status skin for TilesFX

Aloha,

Last week I've stumbled upon a new idea for a TilesFX skin and found some time to implement it. It can be used to visualize 3 values incl. a text and an additional node like an icon etc.
Because it is not that easy to describe I think I better show you a screenshot :)
So here you go...


As you can see it comes with the normal title, description and text labels as usual. In addition one can set the value for the left, middle and right side by using one of the following methods

  • setLeftValue(double)
  • setMiddleValue(double)
  • setRightValue(double)

 In this case I simply use it as a counter for notifications with their category (critical, warning, information) but you can use it for whatever you like.
The text below the value can be set with one of the following methods

  • setLeftText(String)
  • setMiddleText(String)
  • setRightText(String)

The icon on top of the value can be set by calling one of the following methods

  • setLeftGraphics(Node)
  • setMiddleGraphics(Node)
  • setRightGraphics(Node)

In this case I've simply used the Indicator control that is now also part of the TilesFX library and which can be found in the addons package.
Because these methods take a JavaFX Node object as a parameter you can take either Icons, ImageViews or Controls which again can be used to visualize something.

This new skin, the Switch and Indicator control can be found in the latest TilesFX release which is 1.6.0.

As usual you can find the source code on github or if you prefer the binary just go to bintray and download it from there.
And of course you can also find it on Maven central.

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