Monday, February 22, 2016

Add some interactivity to your Medusa Gauges...

Hi there,
here is another short blogpost about how to add some interactivity to your Medusa gauge.
Sometimes it could be useful to be able to have an additional button in a gauge to trigger some things like taking a screenshot, stop the communication, start a timer etc.
For these kind of things I've added the ability to press the knob in the following skin types

  • Gauge (default)
  • Horizontal
  • Vertical
  • Quarter
  • Modern
To activate that feature you simply have to set the interactive property to true like you can see in the following code snippet...

Gauge gauge = GaugeBuilder.create()
                          .skinType(SkinType.MODERN)
                          .interactive(true)
                          .onButtonPressed(e -> System.out.println("PRESSED"))
                          .onButtonReleased(e -> System.out.println("RELEASED"))
                          .build();

When you use this code you will see that you will be able to press the knob in the gauge and that it will print the corresponding text on the console. Pressing the button will also be visualized so that you get visual feedback in case you pressed the button.
Here is a litte screenshot that shows the two different states when using the Modern Skin...


And that's it, I hope you have some use for this feature and as always...keep coding...

12 comments:

  1. I am trying out this gauge (first time user of this) and there does not appear to be a "disabled" view of the gauge i.e. if I set the interactive to false, then button does not reflect that it is no longer disabled. Same thing if I disable the entire control... there is no "disabled view" to reflect that it is not clickable anymore.

    Is there a way to achieve the "disabled" view look?

    Thanks.

    ReplyDelete
    Replies
    1. Hi Unknown,
      Well that's correct, the knob does not reflect a state like disabled because it would affect the look of the complete gauge. I also thought about how to visualize the interactivity enabled/disabled state but didn't come to a nice solution. So at the moment you simply have to know that the gauge is interactive. The gauges also don't have a disabled state yet because they are in general for visualizing data only and not for input (except the interactive button in some gauges) which is the reason for not having the "disabled view". Maybe I should add it...
      Cheers,
      Gerrit

      Delete
    2. Done...added a visualization for the disabled state and if a control is disabled you can't press the knob/button when interactive == true.

      Delete
  2. Sorry if this is the wrong place but I just took an update from github and the demo package disappeared.

    ReplyDelete
  3. Hi Dennis,
    I moved the demo package to the medusa demo project that you can find here
    https://github.com/HanSolo/medusademo
    Just makes more sense to have the demo not in the library.
    This info should also be in the commit messages on github :)
    Cheers,
    Gerrit

    ReplyDelete
  4. Liked the design of gauge very much. Convinced to learn JavaFx...

    ReplyDelete
  5. Hi,

    Great library! But I noticed the pressing animation only works for mouse clicks. There is no 'pressing' animation for touch inputs.

    Thanks,

    Sean

    ReplyDelete
    Replies
    1. Hi Sean,
      Yep, the reason is I have no touchscreen that really uses touch but only mouse clicks. I will add this to the lib asap. Where do you use it?
      Cheers,
      Gerrit

      Delete
  6. Hello Gerrit,

    Deployment scenarios would be on tablets and even on smart phones. I am also planning to try out on Android devices via JavaFX ports.Once you made these gadgets interact-able, i thought these would be perfect for touch enabled GUI! Really wonderful idea!

    Thanks,

    Sean

    ReplyDelete
    Replies
    1. Well on iOS and Android the MouseEvent works and there's no need for specific touch support when using JavaFX ports

      Delete
  7. Is it possible to add more interactivity not by moving a needle but clicking on value/ticks?

    ReplyDelete
  8. Well feel free to fork it and add whatever you need :)

    ReplyDelete