JFXtras Series: Segmented controls

And another one, today I'll show you the segmented controls in the JFXtras-labs project.
There are three different kinds of segment based controls in the project

• SevenSegment Control
• SixteenSegment Control
• DotMatrixSegment Control

Seven Segment:
The seven segment control is only able to show numbers like you know it from calculators etc. A single seven led segment looks like this...

And if you combine it you could get results like this...

Sixteen Segment:
The sixteen segment control is also able to show characters because of it's additional segments.
A single sixteen led segment looks like this...

Combining some of these elements makes it possible to create an alphanumerical display like this...

Dot Matrix Segment:
The dot matrix segment control is able to show even more characters than the sixteen segment control because of it's more flexible dot oriented design. A single 5x7 dot matrix led segment looks like this...

And you could image that combining these elements you could nearly do anything you like, for example something like this...

This is how the three controls will look like in the JFXtras-labs project...

For each of these controls you could define the color. In addition you could choose if the plain color or a gradient based on the color should be used to fill the segments. On the image above you could see the difference between these two modes (middle plainColor == true, right plainColor == false). To give you an idea how you could use the segments here comes some code...



DotMatrixSegment segment = 
    DotMatrixSegmentBuilder.create()
                           .color(Color.AQUA)
                           .character("F")
                           .plainColor(true)
                           .prefWidth(100)
                           .prefHeight(150)
                           .build();

At the moment there are three different builders (one for each control) but that might change in the future (there might be an additional SegmentBuilder) because this controls are very similar.

Instead of using the .character(String) method you could also use the .character(Character) method which makes it possible to use also other ascii characters (only SixteenSegment and DotMatrixSegment control).

The DotMatrix controls even offers the possibility to use your own dot mapping. This feature will give you the ability to use the DotMatrix control for whatever you have in mind. To create you own dot mapping you have to know how the DotMatrix control handles the dots. 

The DotMatrixSegment class contains an enum named Dot which is defined like follows...

public static enum Dot {
    D11, D21, D31, D41, D51,
    D12, D22, D32, D42, D52,
    D13, D23, D33, D43, D53,
    D14, D24, D34, D44, D54,
    D15, D25, D35, D45, D55,
    D16, D26, D36, D46, D56,
    D17, D27, D37, D47, D57
};

The mapping is realized by a HashMap<Integer, List<Dot>>, so the character "Y" is for example mapped like this...

mapping.put(89, Arrays.asList(new Dot[]{
    Dot.D11, Dot.D51, 
    Dot.D12, Dot.D52, 
    Dot.D23, Dot.D43, 
    Dot.D34, 
    Dot.D35, 
    Dot.D36, 
    Dot.D37}));

That means you could create your own codes with the associated dots to create your own characters, for example a smiley like this...

Let's say we would like to map this smiley to the 0 the code would look like this...

Map<Integer, List<DotMatrixSegment.Dot>> customMapping = 
    new HashMap<Integer, List<DotMatrixSegment.Dot>>();


customMapping.put(0, Arrays.asList(new DotMatrixSegment.Dot[] {
    Dot.D22, Dot.D42,
    Dot.D34,
    Dot.D15, Dot.D55,
    Dot.D26, Dot.D36, Dot.D46
}));


DotMatrixSegment segment = 
    DotMatrixSegmentBuilder.create()
                           .customSegmentMapping(customMapping)
                           .character((char) 0)
                           .color(Color.RED)
                           .prefWidth(300)
                           .prefHeight(420)
                           .build();

And here is the result...

I'm not sure if it is a drawback or a feature that you have to create the logic of more complex displays by yourself but I personally like the ability to be free in my decision how I implement something.

So unleash your creativity and keep coding...