JavaFX Exploration

The JavaFX 2.0 Roadmap

2010-09-24T14:45:00.000-07:00

Apparently some major changes are waiting around the corner regarding JavaFX with the up and coming version 2.0. Had a look at the roadmap today and have been checking out various blogs about the topic.

My (noobish but still) impression is that things definitely are going in the right direction. One problem though with the road map is that it promises loads of exciting things but not so much in there about how all these goals are going to be accomplished. It is kind of like my wishlist for Christmas when I was smaller, loads of great stuff on it and marvelous plans in my head about what I would do with all my presents. But then much to often I ended up sitting there with a new pair of socks, another silver spoon for the collection and finally some crayons with accompanied drawing-papers. The paper was always the gray cheap one made from recycled newspapers or something.

Guess my personal roadmap must be revised a little now. Probably going to focus more now on filling up some of the many gaps in my Java-knowledge while waiting for Oracle to deliver that remote controlled super fast airplane that will change my world to a much better place.

First real application

2010-08-18T17:01:00.000-07:00

Have finished and published my first real JavaFX program. My previous work have only been small projects to test things in JavaFX. But now I also have produced a small application that actually serves a purpose.

The application can be tested here.

The application is a tool used for improving your poker playing skills. Lets start out with a picture of the application.

The type of poker game is Texas Hold'em. In this game every player gets two starting cards. These two cards can form 169 different starting hands that all are represented in the grid in the picture. A3s for example means an ace and a three in the same suite (both being hearts or spades for example). A3 with out a trailing s means ace and three of different suites.

Below the grid of hands we have a slider. The slider controls the number of hands selected going from 0 to 100% of the hands. Starting out by choosing top hands (according to another software called Poker Stove) and then including worse and worse hands.

In the example above the top 17.9 percent of the starting hands are selected and hence displayed in black.

It is common to use special poker trackers that store information about opponents playing style when playing poker on line. These trackers for example present information of which percentage a player opens with a bet in certain situations. This percentage of hands can be chosen with the slider in application. And the range of hands that equals this percentage is then visualized.

Have tested to access the application on the web site from a couple of different computers and it seems to take about ten seconds or so to load which I find acceptable.

Animations test

2010-07-26T11:56:00.000-07:00

Tried out some animation concepts. Nothing fancy but hey must start somewhere.

Used the JavaFX Composer in NetBeans. Have a text that says Berra (my nick name) and a button. There are then two states. In the start state things look like this.

Pressing the button causes the text to fall down rapidly. The fall stops when the bottom is almost reached.

The first button is replaced with another button that makes the text go up but with less speed than it went down. Once the text is up again the original button comes back and things start over.

Complete source code here.

Project Poker Part 6

2010-07-01T16:01:00.000-07:00

Moving on a little with my poker application.

One thing missing is a panel used to display information about a player. The minimal compulsory set of player data is made up of the name which identifies a player and the number of chips the player has. Have now designed a panel that can be used to display this set of data.

The name of the player is displayed with the use of a Label, that is centered by the use of a Stack layout. Should a player have a too long name so will it be cut and ended off with a ellipsis.

The chip count is also represented with the us of a Label. This means that if a player should have a really large amount of chips so will the number of chips be cut off like for the name of the player. This is not the desired behavior. Will have to fix this later, but not really a prioritized thing right now since there are loads of other things to do.

Slider

2010-06-26T10:39:00.001-07:00

Have been playing around a bit with the JavaFX slider control. Used two sliders in the following example. There is a text that is lighted by a red light source. The azimuth and elevation of the light is controlled by the two sliders.

The source code for the example can be found here.

Noted that the right pointing arrow key on the keyboard will change the focus form the vertical slider to the horizontal slider. The arrow key that points upward will set focus on the vertical slider. The left and down arrows will however strangely enough not have this effect.

Another strange thing is that markings on the vertical slider seems to be reversed. The starting position of the vertical slider is set to 135 in the code, but the markers indicates that it is set to 45 when running the code. I do not think that the bug is in my code. It is probably instead a resident somewhere in javafx.scene.control.Slider package.

Project Poker Part 5

2010-06-19T11:21:00.001-07:00

Moving on today working a little bit on my poker table. Had already done a frame for the table. Added a background filled with a bluish gradient, trying to match the color of the frame. Finally placed five cards on the table, like there will be when playing Omaha for example.

Starting to get a little collections of parts that can be combined in different ways now. Must start documenting and place my code in a library, not as fun as developing new things but must be done - sigh.

Project Poker Part 4

2010-06-18T03:36:00.000-07:00

The progress do fare with my poker software is that it now exists a set of cards. Time to make a table to have somewhere to place the cards.

Lets seek some inspiration from the giant of on line poker - PokerStars. One of the layouts available on PokerStars looks like this.

Now knowing kind of what I want its time to go to work. Lets start by coding the frame around the table. This would on a real poker table consist of padded oval where the players can rest their arms. So what is needed is some kind of an ellipse. It should also have some effect applied to it to make it look cuddly and filled with padding.

Probably many ways to code the frame but one solution is to do it in four steps like this:

1. Start out with a rectangle with very rounded corners.


def outerTableFrame = Rectangle {

            x: 10, y: 10

            width: 500, height: 250

            arcWidth: 250, arcHeight: 250

            fill: Color.GREEN

        };

2. Then take another smaller rectangle and place it on the first rectangle


def innerTableFrame = Rectangle {

            x: 25, y: 25

            width: 470, height: 220

            arcWidth: 220, arcHeight: 220

            fill: Color.PINK

        };

3. Make a new shape by using ShapeSubtract. The pink parts will be "subtracted" from the green parts which will result in a new shape consisting of the green rectangle not covered by the pink rectangle. (Note that the color also changes, probably because black i set to default color in the ShapeSubtract class)


var tableFrame: Shape = ShapeSubtract {

            a: outerTableFrame

            b: innerTableFrame

        };

4. Make the frame look padded by applying a Ligthning effect. Finally choose a color, in this case blue since it seems to be the color of JavaFX


var tableFrame: Shape = ShapeSubtract {

            a: outerTableFrame

            b: innerTableFrame

            effect: Lighting {

                diffuseConstant: 1.0

                specularConstant: 1.0

                specularExponent: 20

                surfaceScale: 1.5

            }

            fill: Color.DARKBLUE

        };

See the complete source code here.

Project Poker Part 3

2010-06-16T06:57:00.000-07:00

Have tuned my poker cards during the day. The previous version of the cards had some flaws regarding misaligned symbols.

Note how the smaller symbols do not line up vertically. The larger (simple) decoration of the cards is also misplaced depending on the width of the symbol.

Solved the problem with the smaller symbols by placing them in a wrapper made up of a VBox layout. This made it possible to have the symbols vertically aligned by centering them.


public-read def vbox: javafx.scene.layout.VBox = javafx.scene.layout.VBox {

                layoutX: 3

                layoutY: 0

                content: [rank, suite,]

                spacing: -10

                nodeVPos: javafx.geometry.VPos.TOP

                nodeHPos: javafx.geometry.HPos.CENTER

            }

Used a Tile layout as a wrapper for the larger decoration. By making the tile a bit wider than the width of the largest character we get a parent that can be used to center the decoration in the right place.


def __layoutInfo_tile: javafx.scene.layout.LayoutInfo = javafx.scene.layout.LayoutInfo {

                width: 32.0

            }

public-read def decorationTile: javafx.scene.layout.Tile = javafx.scene.layout.Tile {

                layoutX: 24

                layoutY: 26

                layoutInfo: __layoutInfo_tile

                content: [decoration]

                columns: 1

                rows: 1

                hgap: 0

                vgap: 0

                hpos: javafx.geometry.HPos.CENTER

            }

There are probably more refined ways to solve the alignment problems but this seems to work and I well settle with the current solution for now.

The complete set of cards looks like this now (click for full size version).

Project Poker Part 2

2010-06-14T14:42:00.000-07:00

The plan for the day was to draw a complete deck of cards using JavaFX. The cards shall later be used in my poker application.

Had already done one card the other day. The idea was to just run some nested for loops to spit out the other cards. Should have been quick and easy to accomplish. But I encountered various problems and it took me quite a few hours to get somewhere. Here is a picture showing how fare I got today.

The cards are scaled down to fit in the blog. They will be a bit bigger in the actual application. Things that remains to be done is changing the color and some adjustments to the design, like better lining up the symbols. No source code today because it is a bit of a mess at the moment.

Project Poker Part 1

2010-06-13T08:30:00.000-07:00

I have a background in the world of on-line poker. Thought it would be good little exercise to build my own complete poker client/server software combo in Java/JavaFX.

Many of my posts in this blog will deal with this work that will be named Project Poker.

Have designed one card from the deck today. The cards could of course be drawn in some drawing software like Inkscape for example. But I feel that doing the complete design of the cards and so on directly in JavaFx will be more versatile. Will be simple to transform the design later on if needed. Should also hopefully give better performance.

Anyway here is my card, an ace of spades.

See the source code here.

Drop Shadows

2010-06-08T01:25:00.001-07:00

Tested the concept of drop shadows today. The idea is to have a shadow under an graphical object to make it look like it hovers.

Applied a drop shadow to the Swedish Flag from my previous blog entry. The entire flag should have a shadow. The blue bottom rectangle in the flag has the same size as the entire flag so the desired effect can be achieved by adding a drop shadow to this rectangle.

The code that give the drop shadow can be seen in the following snippet:


effect: DropShadow {

    color: Color.rgb(32, 32, 32),

    offsetY: 5,

    offsetX: 5,

    radius: 15

}

The default color of the drop shadow is black but in this example a gray tone is used instead which is defined by the color argument above.

The final result can be seen in the picture below.

Complete source code can be found here.

A flag for the national day

2010-06-05T06:02:00.000-07:00

Swedish national day tomorrow. Lets celebrate it by making a Swedish flag in JavaFX.

What we want is yellow cross on a blue background. In more detail according to the law about Swedish flags so shall the proportions of the flag be 10 to 16 (height to length). The blue fields closest to the flag pole shall have the proportions 4 to 5 and the outer blue fields 4 to 9. The thickness of the arms making up yellow cross should be half as thick as the height of the blue fields. The RGB values of the colors should be #005B99 (blue) and #FCD116 (yellow).

We now at least have some kind of specification of what we want so lets get going.

We need a title, a stage and a scene and finally a place to put our content that is the actual flag. Lets make the scene of our projects 100 times 160 pixels because this is the proportions of the flag. Some thinking and typing produces the following code:


import javafx.stage.Stage;

import javafx.scene.Scene;



Stage {

    title: "Swedish Flag"

    scene: Scene {

        width: 160

        height: 100

        content: [

            // TODO Add code for flag here

        ]

    }

}

Start out the making of the actual flag by constructing a blue rectangle. This is done by the following code.


Rectangle {

    x: 0, y: 0

    width: 160, height: 100

    fill: Color.rgb(0, 91, 153)

}

Adding two yellow rectangles in a similar fashion and then putting it all together gives the final code:


import javafx.stage.Stage;

import javafx.scene.Scene;

import javafx.scene.shape.Rectangle;

import javafx.scene.paint.Color;



Stage {

    title: "Swedish Flag"

    scene: Scene {

        width: 160

        height: 100

        content: [

            Rectangle {

                x: 0, y: 0

                width: 160, height: 100

                fill: Color.rgb(0, 91, 153)

            }

            Rectangle {

                x: 50, y: 0

                width: 20, height: 100

                fill: Color.rgb(252, 209, 22)

            }

            Rectangle {

                x: 0, y: 40

                width: 160, height: 20

                fill: Color.rgb(252, 209, 22)

            }

        ]

    }

}

The result when running the script is the following flag picture