Saturday, July 14, 2018

GradientPicker reloaded...

Aloha,

Because I worked a lot with Adobe Fireworks over the last 10 years I was using it's gradient tool very often. It is a handy tool to create color gradients where you can simply add new gradient stops and set the color and opacity for each stop either with a slider or by typing in the value.
This is how the Adobe Fireworks gradient tool looks like:



The functionality of the upper handles is to adjust the opacity of the selected stop where the lower handle is to set the color of the stop.
In 2013 I've already created a gradient picker in JavaFX but it was not a separate control but more part of a screen color picker.
So far so good but I always wanted to redo the gradient picker I've created at that time.
Well...after some night hacks I finally finished that gradient picker and so you can now also use it if you like. Here is what the current result looks like:



In principle it has the same functionality as the gradient tool in Adobe Fireworks. I've created a little video that demonstrates it's functionality:



And that's it for today, as always you can find the source code at github.

I hope this control will be useful for one or the other of you and don't forget...keep coding...

Friday, July 6, 2018

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

Thursday, July 5, 2018

TilesFX colors...

Aloha,

When working on my little dashboard at home I've figured out that I needed more colors to visualize some data. Because I've added already a color scheme (Bright) to TilesFX a while ago I decided to add more colors.
So in TilesFX 1.6.3 you will find 4 different color schemes, because I often need the same color at different brightness levels I've decided to add a Medium and Dark scheme to the lib. 
Here is a little table that shows the Bright, Medium and Dark scheme with their available color definitions:

The usage is pretty simple, let's assume you would like to make use of the color green from the medium scheme you simple type:

Medium.GREEN and you will get the color #32a539

So I hope these colors are as useful to you as they are to me :)

As always you can find the latest version of TilesFX here

Source: github

Binary: bintray

Maven Central

That's it for today...and do not forget to keep coding...

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

Wednesday, May 30, 2018

Time for something new...iOS FX

Aloha,

Well after I did my last blog post about the iOS style switch control some people mentioned it might be nice to have more than one iOS style control available.
First I thought...bah...no time...but I could not resist and started to create a little new side project which I named iosFX.
In principle this is a little library of JavaFX controls that more or less look and behave like the current iOS controls.
My first idea was to tweak existing controls using css and code to achieve this but after I took a closer look to the iOS controls I figured out that these controls are very special and a simple css tweak won't work.
For that reason I've decided to create completely independent controls that are based on JavaFX Regions at the moment.
So at the moment I have the following controls available...

  • IosSwitch
  • IosEntry
  • IosListView
  • IosMultiButton
  • IosSlider
  • IosSegmentedButtonBar
  • IosPlusMinusButton

The IosSwitch you already saw in my last blog post, I've just ported it to the lib. The IosListView is a simple extension of the existing JavaFX ListView.
Because a big part of the current iOS controls is used in list views I've created an IosEntry which is a control that takes a left node, a right node and comes with a title and a subtitle.
And when you take a closer look to the iOS ui controls you will figure out that a lot of controls/indicators are very similar.
For this reason I've created the IosMultiButton which is a JavaFX control that has a specific type which defines the ui.
At the moment the available types are...

  • CHECKBOX
  • ADD
  • DELETE
  • CHECK_MARK
  • DOT
  • SMALL_DOT
  • INFO
  • PLUS
  • FORWARD

Dependent on the type also the behaviour is different, e.g. if the type is CHECKBOX one can toggle the control by clicking on it.
Instead of using the standard JavaFX events I've implemented my own events to be able to make use of the ShadowField properties. So the controls fire IosEvents which have different EventTypes that are...

  • SELECTED
  • DESELCTED
  • DELETE_ENTRY
  • ADD_ENTRY
  • PRESSED
  • RELEASED

With this event types (and there will come more) one can use these controls as normal JavaFX controls.

You will find a Demo class that shows more or less everything that is available right now and at this moment it looks like follows...




If you drag the 1st or the 4th entry to the left you will see that it also shows the Delete button that is available in iOS. By dragging more than half of the width the Delete button will fill the complete row and by releasing the mouse the entry will be deleted.

That's all I was able to implement right now but there will be more...so stay tuned... :)

Here is a little video of an older version...



As always the source code is available on github and you are more than welcome to help out creating more iOS controls. The final goal will be to create a Gluon app that looks more or less like a native iOS app...hopefully ;)

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

Monday, May 14, 2018

Monday fun component... ;)

Aloha,

I know it was a long time without a new blog post but I was busy with a project that took all my time. But last week I've decided to always reserve some time to focus on my favourite part...JavaFX :)
When I was playing around with my iPhone I saw that the check box in iOS still is something that I wanted to do again. This is not the first time I've created a check box (as you can see here and here) so I thought...why not... :)
For those of you that are not familiar with the latest iOS check box, here is a little screenshot from my iPhone to give you an idea...



The nice thing about that control is that you don't need an additional text as on the original JavaFX check box. So I've decided to simply create a Region based control that only contains the switch itself.
So the control is not really complicated to do and it just took me around 45 min to create it. So here is a little screen shot of my version:


I've tried to make it look like the iOS original as good as I could. It comes with only 3 properties which are:

  • checked
  • checkedColor
  • showOnOffText

Like I said nothing really special but it was fun to create it and maybe it will be useful for one or the other.
As always you can find the source code on github.

There is also a little video which shows the control in action...





UPDATE:
In the comment from Wim Deblauwe he mentioned that there is a specific press and hold behaviour in iOS for the switch. So the latest version on github also contains this behaviour.
In addition the control was renamed to IosSwitch which makes more sense. 


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