Gauge not scaling quite right

Create issue
Issue #12 resolved
Patrick Kutch created an issue

If you change the demo to specify a smaller startup size, such as: final Scene scene = new Scene(pane, 100,100);

Then resize the app up and down, you will see the gauge gets an interesting (kinda cool) shape.

Comments (5)

  1. Gerrit Grunwald repo owner

    If you mean the increasing size of the frame the smaller the Gauge gets, this is related to the missing feature of being able to set the -fx-background-insets in CSS by using %. So I'm only allowed to set absolute pixel values which let the Gauge look a bit strange at small sizes. I fixed this problem by setting the -fx-background-insets in the resize() method of the GaugeSkin using CSS inlining (which is not the preferred way).

  2. Patrick Kutch reporter

    Looks good to me. I am still very ignorant on CSS, still learning, so much of what you do is magic to me :-)

    Question - can you modify a CSS setting of a Gauge using the setStyle() function? For example, I would like to programmatically (rather than in the CSS file) set the knob background color to blue. I tried this: setStyle(".knob {-fx-background-color : -blue;}") but of course nothing happened. Pardon my ignorance.

  3. Gerrit Grunwald repo owner

    Nope that is not possible in this case. Because this is css inlining you should better use a css file and add for example the following css code to change the color of the knob:

    .gauge .knob { -fx-background-color : linear-gradient(to bottom, black 0%, rgb(30,30,30) 52%, rgb(40,40,40) 100%), linear-gradient(to bottom, rgb(50,50,50) 0%, rgb(30,30,30) 100%); }

    Then you simply have to load the css file on the scene of you application and you are good to go... :)

  4. Patrick Kutch reporter

    That is what I figured and what I am doing, have external .CSS files my users can associate with any of your cool widgets.

    I'll send you a screen shot of what I am doing when I get a bit farther along.

  5. Log in to comment