JFXtras Series: LCD control

Hi everyone, this post will be the first of a series about the controls in the JFXtras-labs project. This goal of this project is to provide those pieces that developers might need in their day-to-day work but that are currently missing from JavaFX.

Please find more information about the JFXtras project and it's sources here.

I ported many of the controls from the SteelSeries Swing component library and tried to improve their look and feel if possible. Today I will talk about the Lcd control which is one of my favourites. Compared to the Swing version the JavaFX version has some additional features that will be explained later.

First of all a little image of all the available designs of the Lcd control.

As you could see I've spent some time creating some new designs which was really great. Each lcd shows the name of it's LcdDesign in the title so that you could easily figure out which you like most.

In addition to the new designs I've also added different fonts that you could choose to visualize the value. So here they are...

And again each LCD shows the used LcdFont in it's title. At this point i have to say i big THANK YOU to Volcano Type that gave me the Bus font for free and gave me the permission to add it to the JFXtras project.

But there's more to show about the Lcd control...

Now it's possible to show the last shown value in the lower part of the Lcd control which looks like this...

That's nice but what if i would like to see the min- and max-measured value too ?

No problem, here you go...

In the upper left corner you will see the min-measured value and in the upper right corner the max-measured value. Hmm, you need the exact min- and max-measured values ? Of course you could define this too...

All right that's the number stuff but what about title and unit? Need them? Here you go...

That's better but what about a threshold value...could I define one and what happens if the value will exceed this threshold ?

Of course you could define a threshold and if the current value will exceed this threshold there will be a little indicator in the lower left corner like on the following image...

This little indicator is blinking to grab your attention. In addition you could also define that the whole value should be blink too by using some bindings etc.

The last feature i would like to show is the display of the used number system.

As you could see it's possible to switch the display to different number systems which might be usefull for one or the other.

At least I would like to give you a short info about the internal structure of the gauge controls. 

Not all controls in the gauge package are derived from the Gauge class, so here is a list of the controls that are derived from the abstract Gauge

• Radial
• RadialHalfN
• RadialHalfS
• RadialQuarterN
• RadialQuarterE
• RadialQuarterS
• RadialQuarterW
• Linear
• Lcd

All of these control are using two models internally, a GaugeModel that holds the gauge data like value, threshold min- and max-measured value, min- and max-value etc. and a StyleModel that holds all the visual data like design, color, visibilities etc.

To create these gauges I've tried to be as compatible as possible and created builder classes. To create a lcd gauge you could use the GaugeBuilder like follows

Gauge lcd = GaugeBuilder.create()

                        .gaugeType(GaugeBuilder.GaugeType.LCD)

                        .lcdDesign(LcdDesign.DARK_AMBER)

                        .prefWidth(200)

                        .prefHeight(85)

                        .build();

which will lead to this...

But because the Lcd control is a bit different from the other Gauge controls it has it's own builder LcdBuilder which you should use because it offers more features. Using the LcdBuilder would look like this...

Lcd lcd = LcdBuilder.create()

                    .design(LcdDesign.DARK_AMBER)
                    .prefWidth(200)
                    .prefHeight(85)

                    .build();

which would lead to the same result as before.

Keep in mind: 

Like it's mentioned on the JFXtras page the whole project is work in progress and things might change very often at the moment. Feel free to file issues at the related github page or contact me if you have ideas on how to improve the controls.

That's it for the Lcd control, I hope you like it as much as I do and if not...I don't care... ;)

So play around with this stuff and let me know your feedback.

keep coding...