Friday Fun XXX

Aloha to another Friday... :)
Today I have a little component for you which is not really tricky to do but it was on my list for a very long time. So finally I've decided to create it and this time it is a segmented control.
You might have seen this control on various car-park routing systems. In Germany this kind of displays are very common and you will find it in many cities, here are a few examples...

In all of the examples you can see the yellow number display and that is exactly the control I'm talking about.

It looks like the control is build out of 15 elements where each element can have different states. One can see a fully filled element, rounded elements and elements that contains triangles.

So as always the first thing to do is creating a prototype in a vector drawing program and here is what it looks like. This prototype contains most of the needed elements.

I've created an extra control that contains one element and this element can have the following states:

• EMPTY
• SQUARE
• ROUND_UPPER_LEFT
• ROUND_UPPER_RIGHT
• ROUND_LOWER_RIGHT
• ROUND_LOWER_LEFT
• TRIANGLE_TOP
• TRIANGLE_UPPER_RIGHT
• TRIANGLE_RIGHT
• TRIANGLE_LOWER_RIGHT
• TRIANGLE_BOTTOM
• TRIANGLE_LOWER_LEFT
• TRIANGLE_LEFT
• TRIANGLE_UPPER_LEFT
• NOT_TRIANGLE_TOP
• NOT_TRIANGLE_RIGHT
• NOT_TRIANGLE_BOTTOM
• NOT_TRIANGLE_LEFT

The Element contains a StackPane and within this StackPane it holds a SVGPath node. Dependent on the State of the Element the context of this SVGPath node is set. Therefore I've created an enum that not only contains the name of the State but also the SVG path string for each state.

Then I've create the real Segment control that contains a GridPane (3x5) where each position in the grid holds one Element. Now I only needed to create the appropriate states for each Element and each Character. I just implemented the numbers 0-9 which seems to be ok for this kind of display. Well I could not withstand and also implemented the characters A-Z and a "-" which means you could now use 0-9 and A-Z in the Segment control :)

And this is how the control looks like...

As I said this is not a really fancy control but something that I now can take from my todo list :)

Here is also a little video of the control in action...

If you are interested in the code you can find it on github...as always :)

And that's it for today...so enjoy the upcoming weekend and keep coding...