Slider

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

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

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

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

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

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

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

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