Gauge not scaling quite right

[Patrick Kutch]

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.

[Gerrit Grunwald]

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

[Patrick Kutch]

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.

[Gerrit Grunwald]

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

[Patrick Kutch]

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.