Friday, May 29, 2020

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

Sunday, May 17, 2020

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

Friday, May 15, 2020

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

Wednesday, March 11, 2020

Cross platform gaming - SpaceFX

Aloha,

It was planned to show the latest version of SpaceFX at JavaLand conf but unfortunately this was cancelled due to COVID-19. Well lucky us we are all connected via the internet so I decided to give you the information here on my blog...

Once I've started coding the SpaceFX game I had several things on my mind...first was would it run on the browser user jpro? Yes it does...not super fast but hey...it's JavaFX running in the browser...without a plugin :)

Then I thought why not giving it a try on mobile like iOS and Android using Gluon. Well to be honest I was more than surprised how well that worked out.
The game runs smoothly on my iPhone and Android phone...well at the moment without sound but that's just a question of time.

Now I finally have it running on...

  • OS X
  • Linux
  • Windows
  • iOS
  • Android
  • Web
...from one source!!!



Because there is no support for sound on mobile at the moment I've created a mobile branch where I simply commented out all lines related to sound. The property file management is also a bit different on mobile but the rest is the same.

Oh and before someone blame me again that it does not work on Linux blablabla...
It works on my Ubuntu 18.04 LTS machine totally fine...with sound (at least the executable jar) and yes it also works on my Windows 10 Virtual Machine. I hope I do not always have to provide screenshots to proof this, you just have to believe me :)

So I've created executable jars, native packages using JDK14 jpackage and native images using GraalVM+Substrate and because many asked for the compiled versions you can now download them here:

OS X:

iOS:
  • iOS app (please unzip before install)

Linux:
  • Executable jar (run on JDK11 with java -jar SpaceFX-1.0-SNAPSHOT.jar)
  • Binary (GraalVM/Substrate version without sound)

Android:

Windows:

Attention:
Please keep in mind that I only tested the iOS and Android versions on phones (iPhone 11 Pro and Huawei P20 light). It might not work on tablets like iPads etc.

But if you are interested in the code or would like to compile/run it yourself, you can find the code as always on github.

And now another video...just for the fun of it...



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

Friday, March 6, 2020

Friday Fun LXII - Expandable TextArea

Aloha,

Today I have another little JavaFX control for you that is an expandable TextArea.
This is a TextArea as you know it but with the ability to grow/shrink it's size dependent on it's content. Meaning to say it doesn't have scroll bars.
You can define a fixed number of lines that will be used to calculate the height when the control is not expandable and when you set expandable = true it will automatically resize to the size it's defined by it's content.
In addition it comes with the ability to limit the amount of characters you can type into the text area.
To give the user a hint that the limit is near you can also define the character threshold that will be used to show a little label below the text area that shows the characters left before you reach the limit.
For example you limit the amount of characters to 300 and set the threshold to 50. In this case the label will appear as soon as you reach 250 characters.
Here is a little screenshot that shows how the ExpandableTextArea looks like:



In addition I've also created a little video over at youtube that shows the control in action.



And as always the source code is available at github.

That's it for today...enjoy the upcoming weekend and...keep coding...

Thursday, January 30, 2020

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

Friday, January 17, 2020

Friday Fun LXII - Formatted text field

Aloha,

In the current project we had the need for a custom JavaFX text field that has the ability of formatting numbers in a specific way e.g. "0.05 EUR" or "6 years" etc.
I remembered that I did such a field long time ago and found it in on my disk. At the same time I figured out that I had never put it on github...so here you go...

In addition there have been some special requirements like when in edit mode the units should not be visible but as soon as you leave the field they should be shown etc.

There is a gradle task to start the demo and you can execute it on the command line by typing in: 

./gradlew demo

Just make sure that you are at least on JDK 11 with OpenJFX11.

As always the code can be found on github..

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