Friday, June 8, 2012

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...

8 comments:

  1. You have the most awesome examples here that I wish I new java enough to use some of them...I want to make a brewing system using an arduino uno to control the brewing process which would monitor the temperatures, indicate which valves are open and indicate the flow of the liquids through the system....is it possible to attach some of your gauges via software to reflect the temperature of the kettles I would use?? I'm looking at brewtroller software which is open source but it has no touchscreen interface which I would like to use....only problem is the software if a bit over my head....I programmed all my life but not in java or any of the neat things today, so since I'm retired maybe I need to learn another language...just takes so long....anyway thanks for all your awesome objects....if you have any pointers you can contact me at dleec45 at aol dot com....regards

    ReplyDelete
  2. Those are extremely cool!

    Thanks for sharing,

    Toni

    ReplyDelete
  3. Why are not running in linux javafx ?

    ReplyDelete
    Replies
    1. Cause I'm on Mac I did not test it on Linux but if you encounter problems please feed them into the issues on github and I'll do my best to fix it.
      Cheers,
      Gerrit

      Delete
  4. Hello Gerrit,

    I like these controls and I would like to use them in a project I'm working on now.
    I have been testing Gauge and Lcd in a simple application.

    The following code, using Gauge, would not display the unit (°C):

    Gauge lcd = GaugeBuilder.create()
    .gaugeType(GaugeBuilder.GaugeType.LCD)
    .lcdDesign(LcdDesign.DARKAMBER)
    .prefWidth(200)
    .prefHeight(35)
    .unit("°C")
    .unitVisible(true)
    .build();

    while when I use Lcd, as follows, the unit is displayed:

    final Lcd lcd = LcdBuilder.create()
    .design(LcdDesign.DARKAMBER)
    .prefWidth(200)
    .prefHeight(35)
    .unit("°C")
    .unitVisible(true)
    .build();

    What am I getting wrong?

    Thank you for your answer and for your work.

    Best wishes,

    Cristina

    ReplyDelete
  5. hi Christina,
    hmm...long time ago but if I remember right when using the GaugeBuilder you have to use .lcdUnit() instead of .unit() because a gauge could contain a lcd control that could again have a different unit than the gauge which required .unit() and .lcdUnit(). Whereas when you use the LcdBuilder you can use .unit() because this will only build a Lcd control. Means if you would like to build a Lcd control you should always use the LcdBuilder and use the GaugeBuilder for Gauges.
    Hope that was of help for you, otherwise please do not hesitate to contact me.
    Cheers,
    Gerrit

    ReplyDelete
  6. Sorry, Are negative value permitted only into textMode ? If yep,, why ?

    ReplyDelete
    Replies
    1. This is the old version of the LCD control that was part of JFXtras, if you take a look at my new library called Enzo (bitbucket: https://bitbucket.org/hansolo/enzo/wiki/Home, bintray: https://bintray.com/hansolo/Enzo/Enzo_All_In_One/view) you will find a new version of the LCD control where it is no problem to have negative numbers.
      The old version is "out of service" :)

      Cheers,

      Gerrit

      Delete