• Home
  • Events
  • About
  • Friday Fun XLVII – Back to life…

    October 13th, 2017

    Back to life…

    after all that Serverside stuff in Singapore during the last months I’m finally back home and even more important back into JavaFX πŸ™‚

    So this week I have created a little JavaFX control which I saw on my iPhone and Mac. If you know iTunes you know that little progress/timer control which Apple uses to visualize the download of a song and also the playtime of that song.

    It is not a really fancy control but maybe that is the reason why I like it, it is simple and does not need any explanation…very nice.

    So here is a little screenshot of the control I’m talking about…

    Yes it is very small so I did what I always do as a first step…I create a drawing which looks like follows…

    So this control has more or less three states


    These states have different visualizations as you can see in the image above.

    The STOPPED state is visualized with a ring and a play icon which indicates to click it to start a process.

    In the waiting state the color is different and the outer ring has a gap and is rotating. In addition the icon changed from a play icon to a stop icon which indicates that you can stop the waiting by pressing the control.

    In the running state the color changed back to the original one and the progress is visualized by an additional progress bar.

    In my implementation the control will fire events in different situations, so you will find a TimerEvent class which has a Type. The types are as follows…

    • STARTED (fired when the timer was started)
    • STOPPED (fired when the timer was stopped)
    • CONTINUED (fired when the timer was stopped and not finished yet)
    • FINISHED (fired when the timer finished)
    • RESET (fired when the reset() method was called)
    • WAITING (fired when the timer was set to waiting)

    You can attach a TimerEventListener to the control and your program can react on the different events that the control will fire.

    The control has the following properties which you can use…

    • backgroundColor
    • color
    • waitingColor
    • playButtonVisible
    • duration

    Most of the properties are self explaining so I will only shortly explain the playButtonVisible property.

    Because this control might also come in handy when visualizing a download etc. it is not always needed to show the play button but only the stop button when it is running. For this reason the play button can be switched off.

    The duration defines the time the control will running until it is finished.

    Here is a little video of the control in action…

    I have no really use case for this control and just created it because I like it and would like to see how much does it take to implement it in JavaFX

    Well that’s it for today, so as always you will find the code over at github…

    Enjoy the upcoming weekend and…keep coding…

    TilesFX 1.4.4

    June 13th, 2017


    Just on time before my next visit to Singapore I was able to release a new version of TilesFX. Last weekend I finally found some time to add some more features to TilesFX which I had on my list for some time.

    First of all I’ve added a skin that simply shows a smoothed area chart called SmoothAreaChartTileSkin. As parameters you just have to add a list of ChartData objects.

    The skin looks as follows…

    This might sometime be useful for some dashboards if you would like to keep it simple πŸ™‚

    The next one that I’ve added is a RadarChartTileSkin which has two different Modes (Mode.POLYGON and Mode.SECTOR). Also the RadarChart takes a list of ChartData objects as parameter in Tile. The two different modes will look as follows…

    As you can see both variants can be useful. In the example above I’ve used the RadarChart to visualize the temperature on every hour of the day which gives a nice temperature overview for measurements.

    For the RadarChartTile I have implemented a limit of 128 ChartData elements which will be supported. The reason for this is that if you have more than 128 elements in a RadarChart you can’t identify any value on the chart any more.

    The third new skin I’ve added is a CountryTileSkin. In principle this tile simply shows the selected country as a SVGPath and a value with a unit.

    This might come in handy if you would like to compare the data of a few countries on a dashboard with a little eye candy.

    The CountryTileSkin looks like this…

    Nothing really special but like I said…sometimes it could be handy πŸ™‚

    Because if I only show a single country I need SVG paths with a higher resolution which is the reason why I’ve added the hires.properties file that contains the SVG paths for nearly all countries that you can also find in Java Locale.

    The problem with this high resolution SVG paths is that they are big…the properties file alone is 1.3 MB which is the reason why the library is now 1.3 MB big.

    For the WorldTileSkin I’ve only used lo resolution SVG paths where the file is only 125kb big but they don’t look nice when used as a single country.

    Well that’s it for today, as always you can find the source code and binaries here:

    Source Code: github

    Binaries : bintray

    If you would like to know how to use the different skins in TilesFX you might want to check out the code from github and take a look at the Demo.java Class that is part of the TilesFX library. If you run this Demo.java Class you will get this…

    In this demo I make use of nearly all skins that are available in TilesFX at the moment.

    If you have any idea for tiles you need for you dashboard, please let me know and don’t forget…keep coding… πŸ˜‰

    Friday Fun XLVI – Image Matrix

    April 6th, 2017


    Last weekend when sitting in my hotel room in Singapore I had the idea to test the performance of my DotMatrix control again. So I thought what about pixelating an image and visualize it using the control.

    Well to be honest it was just too easy to do…so here is the result…

    On the left side you see the original picture and on the right side the related pixelated matrix image.

    So I thought why not adding some text and figured out that when I draw the text on the DotMatrix control I usually set all “transparent” pixels to the dotOffColor which doesn’t look good in this example.

    Therefor I’ve added another method to the DotMatrix control which only draws the pixels in a character that are “on”. The method is called

    • setCharAtWithBackground()

    So with this it was easy to add some text on top of the pixelated image without destroying the existing background pixels.

    Now that this was done I decided it might be nice to be able to simply shift the DotMatrix in each direction. Long story short I’ve implemented for additional methods which are

    • shiftLeft()
    • shiftRight()
    • shiftUp()
    • shiftDown()

    When calling one of this methods the whole DotMatrix will be shifted by one dot in the choosen direction and redraws itself.

    Now I could really test the capability of the DotMatrix by calling for example the shiftLeft method in an AnimationTimer with an update rate of 10ms. So the result was nice as you can see in the following video…

    You could also combine the calls like first calling shiftLeft() and after that shiftUp(). It’s not perfect because both times the drawMatrix() method will be called but even with this little drawback the DotMatrix is fast enough to create a smooth scrolling effect.

    Please keep in mind that you should not go crazy with the no of dots in the DotMatrix control. You will definitely see a decrease in performance if you go to a high number of columns and rows. In the video I use 100×85 dots for the DotMatrix which I think is good enough to use it also for images.

    So I don’t have any use case for the DotMatrix control at the moment but maybe one of you has and therefor you can find the source code as always over at github.

    You will also find 2 other demos in the source code (Main2 and Main3). In Main2 I show you how to create one DotMatrix out of two images and in Main3 I show you how to use two images and draw them alternating on the DotMatrix…so have fun playing around with it πŸ™‚

    Well that’s it for today…like always I wish you a nice weekend and never forget…keep coding… πŸ˜‰

    Friday Fun XLIV – The Matrix

    March 23rd, 2017


    Last weekend I was thinking about a dot matrix display and remembered that this was always something I would like to do in JavaFX. Well after spending nearly 2 weeks in Singapore working on infrastructure documentation etc. I really needed some coding and because of the jetlag I had enough time during the early mornings to create a little control.

    To give you an idea what I’m talking about here is a little screenshot of the control…

    So as you can see this is not a really fancy control but more something simple and there is a reason for that. I remember that I’ve once started to create some kind of matrix control for JavaFX but that was in the early JavaFX 2 days and we had no Canvas node which was the reason why I’ve used nodes for each dot in the old version. But with this amount of dots the whole thing became really slow and because of that I simply never tried again.

    But when I thought about it over the weekend the Canvas node came to my mind again and so I’ve started a new approach with the dot matrix control.

    So this version runs completely in one Canvas node and is based on an integer array to make it fast. The main idea behind the dot matrix display was to create some kind of animated stock ticker.

    This idea lead to 3 requirements

    1. the matrix size has to be configurable
    2. it must be fast enough for animation
    3. it must be possible to set colors for each dot
    4. it should be possible to show text

    So let’s take a short look at each requirement.

    1. To make the matrix size configurable it is in principle only needed to define the number of dots per column and row you would like to see in the dot matrix. But there is one drawback here, if the control should be resizable you will also need to define the preferred size of the control to be able to resize it with the right aspect ratio.

    Therefor you will find a constructor that not only takes the number of columns and rows but also the preferredWidth and preferredHeight. In addition you could also add a color for the dot on and dot off state.

    So to create a DotMatrix with a size of 128×16 dots and a dot on color of red and a dot off color of dark gray you have to write the following code…

    or if you prefer using the DotMatrixBuilder it will look like follows…

    2. To make the dot matrix fast enough for animation I’ve tried to avoid as much overhead as possible. With overhead I mean things like

    • many nodes on the scene graph
    • crazy graphics (e.g. each dot has light reflection etc.)
    • complex drawing method

    To avoid as many nodes on the scene graph as possible the best solution is to make use of the Canvas node. This represents only one node on the scenegraph, can contain complex graphics and the redraw is more or less under your control (immediate mode rendering).

    And in addition the Canvas node is really fast πŸ™‚

    A picture explains more than 1000 words…so here is a screenshot of a former matrix that I did in Enzo…

    I think you now understand what I mean with crazy graphics…I mean it looks nice but for a bigger display this is simply overkill. For this control I used nodes for each dot…or better each LED.

    Because when animating the control I have to call the drawing method a lot and therefor this drawing method has to be as short and simple as possible. So let’s take a look at the drawing method in the DotMatrix control…

    That’s all, I clear the canvas, then simply iterate over the rows and columns, set the fill for the current dot and draw a circle at the current position defined by x and y.

    Keeping things simple makes the drawing fast enough to do some animation.

    3. To make it possible to set the color for each dot you need a 2d data structure which defines the position and stores the color. You can think of all possible combinations of Lists, Maps and custom Objects to realize that but if you would like to keep it simple you could simply stick with a simple 2-dimensional integer array. This will contain the x and y coordinates of each dot and you could use a 1 to enable the dot or a 0 to disable the dot.

    This works and is simple and fast BUT how to enable custom colors for each dot???

    For this it would be great to represent a color as an integer value but if you take a look at the javafx.scene.paint.Color class you will find all sorts of methods but unfortunately no method that returns the color as an integer value. Lucky me I remembered that the java.awt.Color class had such a method and so it was easy to take a look at the source code of OpenJDK (it’s so nice to be able to have the source code of Java available).

    To convert a color into an integer you simply can make use of some bit-shifting and the code to convert a color into an integer looks as follows…

    Now with this in place it was easy to store the color value as integer in the 2-dimensional array of the matrix. Oh and of course it would also be nice to have a method to convert an integer back to a Color, so here it is…

    In JavaFX the opacity is defined by a double compared to an int in the AWT color which is the reason for the ALPHA_FACTOR multiplication here.

    So now we can define for each dot in the matrix the location and the color by simply using a 2-dimensional integer array which is good for the performance.

    Means most of the work in the drawing method is done by converting an integer back to a Color. But because all of the operations used for the conversion are mainly bit-shifting and object creation this is not a problem.

    4. To be able to show text on the DotMatrix I needed to create some mapping of characters to dots. So my idea was to keep the DotMatrix close to a real hardware DotMatrix where you can define the xy position of the dot and a color. Means in the DotMatrix control switching on a dot is done by calling the method

    As you can see I don’t call the drawMatrix() method automatically which means I leave that up to you. So first one can set all the pixels needed and then you can call the drawMatrix() method. With this approach you can avoid a redraw after set a pixel.

    This is a big advantage when doing some kind of dot matrix ticker where text is moving from right to left. In this case you can first set a vertical line of pixels before you really draw them.

    But if you would like to automatically redraw after a pixel was set you will also find a method called setPixelWithRedraw() which does exactly this.

    Now back to the character mapping, here I’ve decided to create an 8×8 font for the ASCII characters between 32 – 126. And if you only need numbers I’ve also created an 8×8 font that only contains the numbers from 0 – 9.

    Again the goal was to keep it as simple as possible which was the reason to define each character by an integer array. So for example the digit 0 looks like this…

    As you can see I used the binary literals which is nice to represent a matrix of dots.

    Now the only thing I had to do was to read out each bit of each row and do some math related to the dot position.

    These calculations can be found in the setCharAt() and setDigitAt() methods in the DotMatrix control.

    A demo of how to use the DotMatrix control for a running text display can be found in the Demo class in the source code.

    I will definitely add this control also to TilesFX because it could be handy as a stock ticker on a dashboard.

    So that’s it for today, I hope this control will be useful for someone except me πŸ™‚


    I’ve removed the plain digits and added another MatrixFont which is 8×11 pixels. So now you can choose between

    • MatrixFont8x8
    • MatrixFont8x11

    In addition I’ve also added the possibility to set the dot shape to either DotShape.ROUND which is default or to DotShape.SQUARE.

    Here is a little video which shows the control in action…

    Please find the source code as usual at github.

    More examples can be found here

    Enjoy the upcoming weekend and keep coding…

    Customize your dashboard

    January 18th, 2017


    This is just a short post about the TilesFX library (github, bintray, maven) in combination with other libraries like

    The TilesFX standard tiles are nice and might be good for most of the typical dashboard content but what if you need more than that?

    Let’s say you would like to see a listview or one of your custom controls on such tile…

    Well for that reason I’ve added the CustomTileSkin which has the title and the text property of the standard tiles and which comes with an area where you can put your own JavaFX nodes.

    So this is what it looks like…

    As you can see the area for custom JavaFX nodes fills most of the tile so that you should have enough space for your components. If you setTextVisible(false) the area will even grow a bit more in y-direction.

    To give you an idea on how to use other controls within TilesFX I’ve created a little demo project which you can find on github at


    If you would like to start the demo from the command line you simple can call gradle Demo on the shell as follows:

    This will start the Main class of the project and will show you the following screen…

    In this demo you will see nearly all of the standard tiles in TilesFX (except the WeatherTileSkin) and in addition there is also one tile that simply uses an icon from the Ikonli library, nine tiles that shows some gauges from my Medusa library and three regulators from my Regulators library.

    The Tile class in TilesFX defines some colors that fit nicely to the standard tiles, so you can choose between GRAY, RED, GREEN, BLUE, ORANGE, YELLOW_ORANGE, YELLOW and MAGENTA. In addition also the standard FOREGROUND and BACKGROUND color are available in the Tile class. As you can see in the image above I made use of the Tile.BLUE color for all the Medusa gauges.

    I hope this demo will help you to make use of TilesFX for your own dashboards.

    That’s it for today…so keep coding… πŸ™‚